May 3

Written by: Michael Washington
5/3/2013 6:34 AM  RssIcon

image

LightSwitch will allow you to easily create a popup to allow a user to select an item from a list in an associated table and to set a value.

You can see an example at this link. What is more difficult, is constraining that list of items presented based on business rules.

The Sample Application

image

In our sample application, we have a list of regions. There are three that are in the North. One of them in inactive.

image

When we click on a region record we can select the region (North, South, East, or West) and give the region option a name.

We can also indicate if the region is active (or not).

image

When we edit a Customer we can set their region.

image

We can now add Incidents for a Customer.

image

When we click the button to set the region option for the Customer, we only see active region options for the region the Customer is in.

image

When we select a region option in the Popup, it is set as the region option for the Incident.

Creating The Application

image

We create a normal Add/Edit screen.

image

We click the Add Data Item button, and add the RegionOptions collection.

image

We click Edit Query on the collection.

image

We create a query to implement our business rules.

We create a Region parameter for the query.

image

We click the Back button to return to the screen designer.

image

We specify the value for our parameter by clicking on it, and in the Properties, navigate to the Customer property of the Incident entity.

image

We select the CustomerRegion of the Customer entity.

image

In the screen designer, we will see a line showing the connection for the parameter when we click on it.

image

Next, we add a Popup.

image

We drag and drop the RegionOptions collection onto the Popup.

image

We delete the Customer section (because it is not needed).

image

We also delete the second column on the first tab (because it is not needed).

image

We add a new Button.

image

We set it to open the Popup.

image

We set “” for the display name for the Popup.

image

We add Region Options to the first tab.

image

We change Region Options to only display the Summary.

image

Next, we want to set the Region Option when a user clicks on it in the Popup.

We click on the Region Options Set List in the Popup and in its Properties, we click the Item Tap action.

image

We create a method for the Action.

image

We right-click on the newly created method in the View Model and select Edit Execute Code.

We use the following code for the method:

 

myapp.AddEditIncidentNew.RegionOptionsSet_ItemTap_execute = function (screen) {
    // Get the list that is in the Popup
    var RegionOptionsSet = screen.findContentItem("RegionOptionsSet");
    // Get the selected item in the list
    var RegionOption = RegionOptionsSet.value.selectedItem;
    // update Region for the Incident 
    screen.Incident.setRegionOptions(RegionOption);
    //Close the Popup 
    screen.closePopup();
};

 

Simple Method

If you need to add additional items to the Popup such as a search within the list shown on the Popup the method shown will work for you.

However if a simple list is all you need, you don’t actually need to create the Popup or write any code.

image

We change the Region Option control to a Details Modal Picker.

image

In the Properties for the Modal Picker, we change the Choices to the RegionOptions collection (that has the query that implements the business rules).

image

When we run the program, a drop down appears that causes a Popup to show.

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2012 Update 2 installed to run the code)

8 comment(s) so far...


Gravatar

Re: Programmatically Constraining a List In a Popup

Instead of creating your own popup and writing code, you can also simply set the "Choices" property of the Region picker to the query on your screen.

Cheers,
-Beth

By Beth Massi on   5/3/2013 10:04 AM
Gravatar

Re: Programmatically Constraining a List In a Popup

@Beth Massi - Thanks I updated the article.

By Michael Washington on   5/3/2013 7:44 PM
Gravatar

Re: Programmatically Constraining a List In a Popup

Thanks for the article good information. Now if I want to create a screen and use it as a dialogue (that way I can reuse it instead of creating the same popup in multiple screens). How do I wire the selection in the dialogue screen to the item in the caller screen.

Thanks

By Juan on   5/31/2013 12:32 PM
Gravatar

Re: Programmatically Constraining a List In a Popup

@Juan - Please make a post in the official LightSwitch Forums: http://social.msdn.microsoft.com/Forums/en-US/lightswitch/threads

By Michael Washington on   5/31/2013 12:32 PM
Gravatar

Re: Programmatically Constraining a List In a Popup

Great tutorials, i'm just starting with LightSwitch (WebForms developer) and its really helping me, I was following this exact tutorial, but i have a some questions.

1.- When I add a query to the screen always creates the control as a list and i can´t change it to a modal.

2.- My table contains a collection and in the popup I filter the the data from this collection, but when I'm typing the code to put the selected value from the popup in the screen i get nothing from intellisense, in fact when i type screen. only appears the entity (in my case Evaluacion) but not the Collections.

Thanks. and congrats again

By bungunala on   11/28/2013 11:40 AM
Gravatar

Re: Programmatically Constraining a List In a Popup

@bungunala - The blog comments is a hard place to answer questions, it doesn't allow for threaded reply's ect. Please make a post in the official LightSwitch Forums: http://social.msdn.microsoft.com/Forums/en-US/lightswitch/threads

By Michael Washington on   11/28/2013 12:07 PM
Gravatar

Re: Programmatically Constraining a List In a Popup

I will, and thank you again for the tuts, they are great and they are helping me a lot.

By bungunala on   11/28/2013 1:48 PM
Gravatar

Re: Programmatically Constraining a List In a Popup

Thanks for the article It Helped Me a lot and Saved My Time .

By Vinod on   3/12/2014 9:12 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation