How to Create a Multi-Column Auto-Complete Drop-down Box in LightSwitch
In this post I’d like to address a very common usage of drop-downs (otherwise known as Combo-boxes or Auto-complete boxes) that allow users to pick from a list of values coming from a lookup or parent table, commonly referred to as “Lookup lists”. Typically these lists display one column like the “Name” of the item. But often times we want to display multiple columns of information to the user here. This is not only super-simple to do in Visual Studio LightSwitch, it’s incredibly flexible on what kind of layouts you can create. In this post I will walk through a variety of common layouts using the Auto-complete box in LightSwitch. You should keep in mind that most of these techniques are not limited to the Auto-complete box at all. In fact you will see these layout controls are available to you almost anywhere on the screen. Let’s get started!
Setting up a Lookup List
For a video demonstration of this see How Do I: Create and Control Lookup Lists in a LightSwitch Application?
When you relate tables together in Visual Studio LightSwitch parent relationships are automatically presented on screens as an auto-complete box. For instance Products can belong to Categories so the Category table is the parent of the Product table.
When you create a Product screen, the Category is displayed in an auto-complete box which displays the Summary Property of the table. A summary property is used by LightSwitch to determine what to display when a row of data is represented on a screen. It not only applies to the auto-complete box but also anywhere in the system. For instance, search screens use this property to provide a link to the edit screen for the selected record. By default this is the first string property on the table but you can change this in the Properties window in the Data Designer.
Now when we create an Edit Detail screen for Product we automatically get an auto-complete box for the Category. If you build and run your application (F5) you will see something similar for your parent relationships that are displayed in the auto-complete box:
The summary property is being displayed by default and usually this is exactly what you would want. However, you are not limited to this. In fact, there are a lot of cool tricks you can do with the screen designer and its variety of layout controls (check out the Screen Designer Tips & Tricks Sheel wrote about on the team blog). Click the “Design Screen” button to go into the screen customization mode and expand the auto-complete box node to expose the Summary Control:
Displaying Multiple Columns
In order to display multiple columns in the auto-complete box, click the down arrow on the Summary Control and change it to a Columns Layout:
By default all the fields on the entity will show up. Delete the ones you don’t want to display in the auto-complete box and change the order how you like. In my example, the category has a Name, Description and Picture.
By default all the columns are set to 150 pixels wide. You can change this in the properties by setting the width to whatever you want. In this example I set the Description to “Auto-size” since I want that column to stretch. Now click Save on the customization mode and you can see the layout immediately updated.
For a video demonstration of how to do this see: How Do I: Show Multiple Columns in an Auto-Complete Dropdown Box?
Displaying Picture & Text
As you can see this is pretty easy. However if you’re going to want to display a picture here then there are better layout controls you can use for this specific purpose, the “Picture and Text” and “Text and Picture” layout controls. Here you select the picture and then three additional pieces of information you want to display. The (TITLE) is a larger font then the rest and (SUBTITLE) is larger than the (DESCRIPTION).
In my example I also set the width property of Name to “Auto-size”. When you save the customization mode now you will see a much nicer layout. As a matter of fact, you are not required to choose a picture so you can use this layout for displaying just text.
Displaying Links to Allow Editing
Sometimes you want to allow editing of the row right from the drop-down. This way users can make corrections to the data without having to open another screen manually. LightSwitch allows this by setting label controls to show up as “Links”. These links look like hyperlinks but they navigate the user to an edit screen for the record. For example go back into customization mode and we can select the Name property and set it to “Show as Link” in the properties below.
Click Save and now you will see that the Name appears like a hyperlink in the auto-complete box. If you click it, then a default edit screen for the Category will open to allow the user to edit the record. After they save their changes they can click “Refresh” at the bottom of the auto-complete box to see their changes.
As you can see there are a lot of flexible ways to lay out controls in Visual Studio LightSwitch and allowing editing of the items is super-easy. In my next post I’ll show you how you can add commands to the auto-complete box to allow adding a new item to the list, another very common user-productivity scenario in business applications.
Enjoy!
Comments
Anonymous
August 04, 2011
Wow, wonderful. This is really nice.Anonymous
August 04, 2011
Wow!! Not only its super easy as Beth pointed out, but its amazing too.. This is like you are sitting on a gold mine & not being aware of it all this time :) Before this I was creating computed fields to combine 2 property names & use it as summary in order to allow user to know what exactly they are selecting. This idea never crossed the mind :) Thanks Beth :) Regards SupreetAnonymous
August 05, 2011
Great example, Using the exact same entities Products-Categories how can I sort the Products on a Screen by Category? does Light Switch Support that kind of query? how can I do it? thanks a lot in advance...Anonymous
August 05, 2011
The comment has been removedAnonymous
August 05, 2011
The comment has been removedAnonymous
August 09, 2011
The comment has been removedAnonymous
August 09, 2011
The comment has been removedAnonymous
August 10, 2011
I started trying my hands on LightSwitch (This is my 2nd Day... lol. I am more used to VB.Net interface) and was stuck on displaying Multiple Columns. You just made my day. Beautifully explained! The snapshots were a great help :) Great job! SidAnonymous
August 10, 2011
BTW, I how do I subscribe to this blog? SidAnonymous
August 21, 2011
could you share the source code?my email:tomwu2009@163.com thanks!Anonymous
February 14, 2012
Hi Beth, Is there any possibility to select multiple items in dropdown list in a light switch application. Regards, swaroopAnonymous
October 02, 2013
The comment has been removedAnonymous
October 03, 2013
@ihayes916 - I think what you want is a many-to-many relationship. See blogs.msdn.com/.../how-to-create-a-many-to-many-relationship-andy-kung.aspxAnonymous
October 06, 2013
@Beth - thank you! shortly after i posted this question, i re-read the same article and realized that was how i needed to implement.Anonymous
December 23, 2013
I related the tables but it did not result in a dropdown being available. ?Anonymous
March 06, 2014
i have two drop down controls when i change one controls the data in second control will have to change. It working fine but my issue is when i change the one control another drop down hold the previous data instead of empty. and the previous value even not available in control. can you provide the solution for this scenario.Anonymous
March 17, 2014
Hi Beth, pretty nice stuff here. Was wondering how possible it is to create an avenue for users to add or create new columns based on existing rows in an app. Pretty much with what you do when simply adding data into an extra column in Excel Spreadsheet. Do you think its possible to do same on the live lightswitch ap and how? Thanks in advanceAnonymous
February 25, 2015
Can someone help me with Lightswitch HTML Client, I need to set a query to only two fields so I use the drop down list with this two fields of the query. Using a Catalog table.Anonymous
September 14, 2016
This design is spectacular! You certainly know how to keep a reader entertained. Between your wit and your videos, I was almost moved to start my own blog (well, almost...HaHa!) Wonderful job. I really enjoyed what you had to say, and more than that, how you presented it. Too cool!