May
3
Written by:
Michael Washington
5/3/2013 6:34 AM
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_5fa0b55a-ade1-466d-9d54-acfe5ad7ef07.png)
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 image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_ce26f38a-0bcc-4f52-8c6d-6a52dd54ddf4.png)
In our sample application, we have a list of regions. There are three that are in the North. One of them in inactive.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_94a51629-6db0-4994-bfd6-b902e758dcbd.png)
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 image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_3cbe90b8-71af-41e1-b593-d577c06da045.png)
When we edit a Customer we can set their region.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_60501f6e-558e-4392-a961-c7dd20f72d5d.png)
We can now add Incidents for a Customer.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_58cb1a48-1c90-491a-a630-b71de16661a2.png)
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 image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_12a858a8-87c3-4670-a240-f9a9910422ac.png)
When we select a region option in the Popup, it is set as the region option for the Incident.
Creating The Application
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_7985bc24-fbba-4e88-9b96-c847e3635ef1.png)
We create a normal Add/Edit screen.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_a65816c1-297d-4f41-b79f-406e721020c4.png)
We click the Add Data Item button, and add the RegionOptions collection.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_84d3f0c1-e3f4-45fd-a82d-14a2fba522b1.png)
We click Edit Query on the collection.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_524c5beb-0976-4a51-8a08-bd72420deea2.png)
We create a query to implement our business rules.
We create a Region parameter for the query.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_feee1e55-21ae-4f57-ae3d-61923b123f5b.png)
We click the Back button to return to the screen designer.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_67dad798-7c5c-44e1-ac46-30fa6f2f47cf.png)
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 image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_542db7fc-e9c8-4354-b271-e4e89dbefb3b.png)
We select the CustomerRegion of the Customer entity.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_b42228df-5f32-40c3-bbf0-f195254b5e43.png)
In the screen designer, we will see a line showing the connection for the parameter when we click on it.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_6307db71-7d26-43f0-8122-7f343d785a90.png)
Next, we add a Popup.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_8bf8afd4-6cd9-4cf2-98db-c545b4ac1010.png)
We drag and drop the RegionOptions collection onto the Popup.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_992e291f-8308-4d2c-a269-26bcf49f5df3.png)
We delete the Customer section (because it is not needed).
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_7306dc25-eb47-431a-bed7-8b0da0695635.png)
We also delete the second column on the first tab (because it is not needed).
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_5e553cf8-494c-43e1-ab1a-8e2c992134b6.png)
We add a new Button.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_8d324581-b8b6-4b04-8465-63538b7aece2.png)
We set it to open the Popup.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_51d2ca40-a906-4e51-88b3-9b94a8b63454.png)
We set “…” for the display name for the Popup.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_43e468a6-b986-411a-8d91-55fe3613bcc9.png)
We add Region Options to the first tab.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_541d511a-489e-4bc9-be7a-5c237a677587.png)
We change Region Options to only display the Summary.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_10c9f40d-c6ff-413b-bd21-e5fc1b36622c.png)
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 image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_a1bf3896-2fb6-417b-a777-3f333483cb94.png)
We create a method for the Action.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-079468892049_1093B-image_a83713a4-02ed-4185-b20f-5aab64654d8e.png)
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 image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-Programmatically-Constraining-a-List-In-_11952-image_a951e118-b28b-404e-98ff-9c7cbfb6ca40.png)
We change the Region Option control to a Details Modal Picker.
![image image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-Programmatically-Constraining-a-List-In-_11952-image_701c7349-520a-4628-85f0-0dbc643fcf58.png)
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 image](/Portals/0/Blog/Files/1/1193/Windows-Live-Writer-Programmatically-Constraining-a-List-In-_11952-image_0153b23b-3d2f-428a-a7a4-949de194eff3.png)
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...
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
|
@Beth Massi - Thanks I updated the article.
By Michael Washington on
5/3/2013 7:44 PM
|
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
|
@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
|
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
|
@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
|
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
|
Thanks for the article It Helped Me a lot and Saved My Time .
By Vinod on
3/12/2014 9:12 AM
|