Lightswitch – Simple ComboBox Example

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.

Data

Create a table called Customers with the following schema.

Customer
ID Int32
Name String
Surname String

Screens

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:

  1. 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’
  2. Click on the ‘Add Data Item’ button. Select the ‘Queries’ radio button and select ‘Customers’ from the grid. Keep the default name of CustomerCollection.
  3. 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’.

    image_thumb[18]
    Fig 1 – Select ‘Local Property’ and set the type to ‘Customer’

  4. 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’. 

    image_thumb[29]
    Fig 2 – Select ‘Choose Content’

  5. Click the downward arrow next to Modal Window Picker. A dropdown appears allowing you to select ‘ComboBox’.

    image_thumb[39]
    Fig 3 – Change from ‘Modal Window Picker’ to ‘ComboBox’

  6. The datasource for the ComboBox must now be set. In the Properties pane for ‘CustomerProperty’, select ‘CustomerCollection’ from the ‘Choices’ dropdown.

    image_thumb[47]~
     Fig 4 – Set the datasource for the ‘ComboBox’

Conclusion

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.

 

Technorati Tags: ,,
Advertisements

About dotnettim

Tim Leung is a Microsoft .Net / SQL Server developer based in England.
This entry was posted in LightSwitch. Bookmark the permalink.

2 Responses to Lightswitch – Simple ComboBox Example

  1. Duke says:

    Tim – is this concept restricted to entities created within LightSwitch? In Beta 2, inattempting to do this with an external database, I do not see a local property such as you’ve described. Instead I see things of the format “database.entity(Table)”

    A specific example is this:
    – database is named ProjectManagement
    – the LightSwitch ‘model’ is named ProjectManagementData
    – the table is Segments, so the entity is named Segment

    The first pass through “Add Data Item…” where you instruct us to choose Query yields a listing of all my tables in the format ProjectManagementData.Segments, with a return type of Segment(All).

    The second time through, choosing Local Property, I see a listing in the format ProjectManagementData.Segment (Table).

    On selecting ProjectManagementData.Segment (Table) and returning to the screen designer, it DOES NOT show the Two Rows layout you describe

    Any advice?

  2. dotnettim says:

    Hi Duke,

    Thanks for your comment.

    The one thing I ought to mention is that this article was written prior to Beta2. The biggest change in Beta2 is that the ‘AutoCompleteBox’ control replaces the ‘ComboBox’ that existed in Beta1. So any reference to ‘ComboBox’ in the above article should be taken to mean ‘AutoCompleteBox’ in Beta2.

    In answer to your question, this concept isn’t restricted just to entities created within LightSwitch and applies to external databases too. As you’ve discovered, adding properties or queries to an external datasource prefixes the values with the datasource name. So in your example, ‘ProjectManagementData.Segments’ is the correct choice for your query and ‘ProjectManagementData.Segment (Table)’ is the correct choice for the property.

    In Beta2 a ‘Rows Layout’ group appears instead the ‘Two Rows’ layout that appeared in Beta 1. However, you can just add your property to the ‘Rows Layout’ group rather than the top section of the ‘Two Rows’ group as mentioned above.

    Hopefully, this example should work for you. Feel free to report back here if it doesn’t!

    Tim

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s