How to Create a Multi-Column Auto-Complete Drop-down Box in LightSwitch

How to Create a Multi-Column Auto-Complete Drop-down Box in LightSwitch

Rate This
  • Comments 17

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.

image

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.

image

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:

image

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:

image

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:

image

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.

image

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.

image

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).

image

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.

image

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.

image

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.

image

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!

Leave a Comment
  • Please add 2 and 7 and type the answer here:
  • Post
  • Wow, wonderful. This is really nice.

  • 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

    Supreet

  • 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...

  • Hi Manuel,

    Yes you create a query based on Products then you can select the Category.Name in the sort order. Then on your screen you "Add Data Item" and choose your query then set the Choices property on the Auto-complete box to the Query. Here's a video demonstration: msdn.microsoft.com/.../ff961882

    Have fun!

  • how add new item in Drop-down Box ??? in same screen

    tks Massi !!!

  • Followed your instructions and have the dropdown box for a Contact showing first and last name when I add data to the rows.  However, when I click the Green Plus button to add a new item to the list, the dropdown box only shows the summary property.  Where do I change the settings to have the same first name and last name display?

  • Nice, very, very nice!

    Your are still "The Bomb!"

    Karl

  • 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!

    Sid

  • BTW, I how do I subscribe to this blog?

    Sid

  • could you share the source code?my email:tomwu2009@163.com thanks!

  • Hi Beth,

           Is there any possibility to select multiple items in dropdown list in a light switch application.

    Regards,

    swaroop

  • Hello Beth-

    I hoping that you've covered this somewhere and I've missed it - but I've done a LOT of searching and all I see are "work arounds and hacks".   In the above example - if you wanted to associate a new (single) product with multiple  categories, how would you go about doing that on the same screen - since LS does not seem to have any support for multi-selection w/in list box control?

  • @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.aspx

  • @Beth - thank you!  shortly after i posted this question, i re-read the same article and realized that was how i needed to implement.  

  • I related the tables but it did not result in a dropdown being available.   ?

Page 1 of 2 (17 items) 12