Overview of Article
The following article describes a basic method of adding a ComboBox onto a LightSwitch screen. The final application contains a screen with a ComboBox allowing you to select from a list of customers.
Create a table called Customers with the following schema.
First of all, we have to enter some base data in order to populate the contents of the customer ComboBox. Create an ‘Editable Grid Screen’ to enable you to enter some customers.
Now for the screen which contains the dropdown:
- Create a new screen based upon the ‘New Data Screen’ template. In the ‘Screen Data’ dropdown, choose ‘(None)’. This screen can be renamed to something like ‘ComboForm’
- Click on the ‘Add Data Item’ button. Select the ‘Queries’ radio button and select ‘Customers’ from the grid. Keep the default name of CustomerCollection.
- Click on ‘Add Data Item’ one more time. This time, select the ‘Local Property’ radio button and choose ‘Customer’ as the type. For your own projects, you would obviously choose the data type that pertains to your table. Name this property ‘CustomerProperty’.
- By default, a ‘Two Row’ screen is created. On the top row, select the ‘Choose Content’ dropdown and select ‘CustomerProperty’ from the list of available items. By default, this creates a ‘Model Window Picker’.
- Click the downward arrow next to Modal Window Picker. A dropdown appears allowing you to select ‘ComboBox’.
- The datasource for the ComboBox must now be set. In the Properties pane for ‘CustomerProperty’, select ‘CustomerCollection’ from the ‘Choices’ dropdown.
Run the project and add some customers using the Editable grid screen. Open the ComboForm form and the customers will now appear in the ComboBox. To restrict the customers which are shown in the dropdown, you can use the ‘Edit Query’ link against the ‘CustomerCollection’ and filter the customers as appropriate.