locked
Show Button if Modal Picker = "string" Lightswitch HTML - *Only re-posting for visibility* RRS feed

  • Question

  • Novascape had helped me with code to disable a method button unless a Details Picker on the same screen is given a certain value.

    The code works, but there is a snag that I am not finding the fix for. 

    I create a new method called "AddRepair", then I drag it onto the screen. At this point it is enabled, but it's tap action is 'AddRepair', which does not go anywhere in my project.

    I then use this code in the AddRepair method's canExecute code...

    myapp.AddEditDevice.AddRepair_CanExecute = function (screen) {
        return screen.Device &&  // make sure Device is loaded
    	screen.Device.Status && // make sure Status is set
    	screen.Device.Status.StrStatus === "Repair"; // make sure status is set to "Repair"
    };

    Now, the button is disabled on the screen until 'Repair' is chosen in the 'Status' details picker. Perfect.

    The issue is, I need the button to navigate to an existing dialog screen called AddEditIncident. 

    In the button properties, I can change the tap action to 'Choose and existing method: -> Incidents -> addAndEditNew', and the button then navigates to the right screen... but it is no longer disabled at any point. 

    I can put in execute code, something like this...

    myapp.AddEditDevice.AddRepair_execute = function (screen) {
        // Write code here.
        myapp.Incident.addEditIncident(null);
    };

    But it does not work as expected. It opens the addAndEditNew dialog screen for Incidents, but it is not properly connected to that collection. The input fields are grayed out.

    How can I get the code above to work with the tap action that I need on the button?

    Thank you!!



    • Edited by CreedCor Friday, April 1, 2016 1:26 PM
    Friday, April 1, 2016 1:20 PM

Answers

  • All good advice so far. 

    Perhaps the problem is the fact that the new incident isn't being added to the incidents collection on the screen?

    Try this:

    myapp.showAddEditIncident(null, {
        beforeShown: function (addNewScreen) {
            var incident = screen.Incidents.addNew();
            addNewScreen.Incident= incident;
        }
    });

    PS..The above is exactly what the built-in method .addAndEditNew does behind the scenes.

    If I cared to make a product suggestion for LS, it would be to eliminate the hidden methods and simply generate the user code when the 'helper methods' are chosen on the designer.  This would clarify and teach and make dev faster for those of us who want to tweak the code a bit.

    HTH,

    Josh


    • Edited by joshbooker Wednesday, April 13, 2016 2:08 AM
    • Marked as answer by CreedCor Wednesday, April 13, 2016 1:18 PM
    Wednesday, April 13, 2016 2:00 AM

All replies

  • Hi CreedCor,

    >> In the button properties, I can change the tap action to 'Choose and existing method: -> Incidents -> addAndEditNew', and the button then navigates to the right screen... but it is no longer disabled at any point. 

    Could you tell me where the Repair button? Please tell the relationship between these screens and how they are navigate.

    According to your code, if the Device.Status still shows as "Repair", then your button will keep enable, even though you have navigate to another screen.

    >> But it does not work as expected. It opens the addAndEditNew dialog screen for Incidents, but it is not properly connected to that collection. The input fields are grayed out.

    Please create a new object before your screen shown with following code. Detailed information, please refer to http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/1196/Visual-Studio-LightSwitch-Screen-Navigation-and-Advanced-JavaScript-Examples.aspx

    myapp.AddEditProduct.Copy_execute = function (screen) {
        myapp.showAddEditProduct(null, {
            beforeShown: function (addNewScreen) {
                var copied_item = screen.Product;
                var new_item = new myapp.Product();
                new_item.ProductName = copied_item.ProductName + '_copy';
                new_item.ProductPrice = copied_item.ProductPrice;
    
                // Set Product
                addNewScreen.Product = new_item;
            }
        });
    };
    

    Best Regards,
    Weiwei

    Tuesday, April 5, 2016 9:34 AM
    Moderator
  • Weiwei,

    The AddRepair method is on the AddEditDevice screen.

    It doesn't sound like you are interpreting the second part correctly. The AddRepair button is only enabled if device.status.strstatus has a value of "Repair". 

    That much works as long as I do not change the tap action of the button, which I need to do for navigational purposes. 

    I will be back on this project on Friday.

    Thank you!

    Wednesday, April 6, 2016 4:35 PM
  • Hi CreedCor,

    I create a sample project that use a AddRepair method button on the AddEditDevice screen and then use this button to navigate to another Add/Edit screen.

    After I use the code in the AddRepair_CanExecute method in your original post, the button's enable/unable is changed with the Status field, which is expected. After click this button, it will navigate to another Add/Edit screen. Everything works as expected.

    If possible, please provide a sample project to help me reproduce your problem. It can help us find out what happened in your code.

    Best Regards,
    Weiwei

    Friday, April 8, 2016 8:42 AM
    Moderator
  • Hi Weiwei,

    The issue is that I do not want the button to navigate to addEditDevice, but addAndEditNew Incident. It breaks when I change the tap action.

    What the solution needs is custom navigation code on the _Execute function of the button, I think?

    I am trying many different ideas and combinations, but have not hit on the right one.

    I think the code needs to look like this...

    myapp.AddEditDevice.AddRepair_canExecute = function (screen) {
        
        return screen.Device &&     
            screen.Device.Status &&     
            screen.Device.Status.StrStatus === "Repair";    
    };
    
    myapp.AddEditDevice.AddRepair_execute = function (screen) {
        // Write code here.
        myapp.//dataBind and navigate to the addAndEditNew dialog screen for the Incident table
    }

    I feel like I am overlooking something very simple. There is some dataBinding issue going on here when I change the tap action of the method. 




    • Edited by CreedCor Friday, April 8, 2016 8:02 PM
    Friday, April 8, 2016 8:00 PM
  • Hi CreedCor,

    >> What the solution needs is custom navigation code on the _Execute function of the button, I think?

    So your problem is navigate to another add/Edit screen from the AddRepair button, is it right?

    Please add following code in your AddRepair_execute method which will navigate to the addAndEditNew Incident with open a pop up  windows.

    myapp.showAddEditIncident(null, {
            beforeShown: function (addNewScreen) {
                var incident= new myapp.Incident();
                
                addNewScreen.Incident= incident;
            }
        });

    If misunderstanding, please provide a sample project with your problem, which can help us understanding your problem quickly and save a lot of time to help you find out what happened.

    Best Regards,
    Weiwei

    Monday, April 11, 2016 9:32 AM
    Moderator
  • Thanks a lot Weiwei. This is working as you would expect, but I am still not quite where I need to be. 

    Here are some screen shots of my configuration...

    The have an AddEditDevice screen, and an AddEditIncident screen...

    The code you provided seem to navigate to 'showAddEditIncident' under Navigation, shown here in the tap_action selection window...

    I need the button to navigate to this screen instead... It is called 'addAndEditNew' and it is under Incidents, not Navigation. I think somehow the code needs to specify the Incidents.addAndEditNew screen instead...

    Thank you for any suggestions!! I have tried so many combinations.

    Monday, April 11, 2016 9:10 PM
  • There are two ways to do screen navigation:

    1) Edit Tap Action and select and existing screen from the dropdown list and specify parameters if required OR

    2) Edit Tap Action and select the "Write my own method" radio button and then choose that new method from the left side of the screen designer (around the bottom) and implement the actual function where you write your own code.

    You seem to follow option 1 whereas the example by Weiwei above is for option 2.

    Any screen that you create in the LightSwitch designer will have an equivalent mypp.showMyScreenName(...) method that is available to you as per Weiwei's example above.

    The parameters that need to be passed to the showMyScreenName(...) function is controled inside that target screen by setting the "Is Parameter" to true (checkbox) on that screen variable. The order of the parameters is as per the list of screen variable on the left side of that screen in a top down fashion (i.e. the first screen property marked as a parameter is the first function parameter, the second screen property marked as a parameter is the second function parameter and so on).

    Writing code to open/navigate to the next screen gives you a lot more flexibility and power so perhaps you want to try that. Also study the LS HTML API documentation for more help on showing screens.


    Regards, Xander. My Blog

    Tuesday, April 12, 2016 12:55 AM
  • In the first post above you say:

    "The issue is, I need the button to navigate to an existing dialog screen called AddEditIncident."

    So you want to use the myapp.showAddEditIncident() function to navigate/show that screen.

    That means the code provided by Weiwei above is correct and you want to put the following code *inside* the tap event method:

    myapp.showAddEditIncident(null, {
        beforeShown: function (addNewScreen) {
            var incident= new myapp.Incident();
            addNewScreen.Incident= incident;
        }
    });


    Regards, Xander. My Blog

    Tuesday, April 12, 2016 1:02 AM
  • In the first post above you say:

    "The issue is, I need the button to navigate to an existing dialog screen called AddEditIncident."

    So you want to use the myapp.showAddEditIncident() function to navigate/show that screen.

    That means the code provided by Weiwei above is correct and you want to put the following code *inside* the tap event method:

    myapp.showAddEditIncident(null, {
        beforeShown: function (addNewScreen) {
            var incident= new myapp.Incident();
            addNewScreen.Incident= incident;
        }
    });


    Regards, Xander. My Blog

    Nova,

    Yes, everything you say is correct. Weiwei's code does work, but it navigates to 'showAddEditIncident' under 'Navgation' in the tap action drop-down.

    I am trying to write code so that the button will navigate to 'addAndEditNew' under the 'Incidents' section, as shown in the second image above. I am not entirely sure of the difference in the screens, but I am trying to navigate to 'Incidents.addAndEditNew' if possible.

    The only reason I do not just set the tap action to Incidents.addAndEditNew is because then, the top section of code that disables the button based on the Repair status no longer works!

    myapp.AddEditDevice.AddRepair_canExecute = function (screen) {
        // Write code here.
        return screen.Device &&     // make sure Device is loaded
            screen.Device.Status &&     // make sure Status is set
            screen.Device.Status.StrStatus === "Repair";    // make sure status is set to "Repair"
    };
    
    
    
    myapp.AddEditDevice.AddRepair_execute = function (screen) {
        // Write code here.
        myapp.showAddEditIncident(null,  {
            beforeShown: function (addNewScreen) {
                var incident = new myapp.Incident();
    
                addNewScreen.Incident = incident;
            }
        })
    }

    I appreciate all of your help.

    Thank you!




    • Edited by CreedCor Tuesday, April 12, 2016 6:40 PM
    Tuesday, April 12, 2016 1:24 PM
  • What screen do you actually want to navigate to and what do you want to do on that screen? 

    Note: 'Incidents.addAndEditNew' is not a screen as you still need to specify a screen when selecting that.

    If you want to navigate to a screen to add a new Incident then the code as provided by Weiwei is correct and I'm not sure what else to add.


    Regards, Xander. My Blog

    Tuesday, April 12, 2016 9:21 PM
  • All good advice so far. 

    Perhaps the problem is the fact that the new incident isn't being added to the incidents collection on the screen?

    Try this:

    myapp.showAddEditIncident(null, {
        beforeShown: function (addNewScreen) {
            var incident = screen.Incidents.addNew();
            addNewScreen.Incident= incident;
        }
    });

    PS..The above is exactly what the built-in method .addAndEditNew does behind the scenes.

    If I cared to make a product suggestion for LS, it would be to eliminate the hidden methods and simply generate the user code when the 'helper methods' are chosen on the designer.  This would clarify and teach and make dev faster for those of us who want to tweak the code a bit.

    HTH,

    Josh


    • Edited by joshbooker Wednesday, April 13, 2016 2:08 AM
    • Marked as answer by CreedCor Wednesday, April 13, 2016 1:18 PM
    Wednesday, April 13, 2016 2:00 AM
  • All good advice so far. 

    Perhaps the problem is the fact that the new incident isn't being added to the incidents collection on the screen?

    Try this:

    myapp.showAddEditIncident(null, {
        beforeShown: function (addNewScreen) {
            var incident = screen.Incidents.addNew();
            addNewScreen.Incident= incident;
        }
    });

    PS..The above is exactly what the built-in method .addAndEditNew does behind the scenes.

    If I cared to make a product suggestion for LS, it would be to eliminate the hidden methods and simply generate the user code when the 'helper methods' are chosen on the designer.  This would clarify and teach and make dev faster for those of us who want to tweak the code a bit.

    HTH,

    Josh


    This is it. This is what I was looking for. This tap action is what would happen if I chose the existing method Incident.addAndEditNew. Now it works both for navigation requirements as well as disabling the button pending a 'Repair' Status.

    Thank you so much, Josh. I will pay forward all knowledge as can as I learn this development thing.

    Many thanks to each of you...

    Wednesday, April 13, 2016 1:18 PM