How to create a multi-bar automatically completed drop-down box in lightswitch

In this blog post, I want to introduce a very common drop-down method (the drop-down box is also called a combo box or an automatic completion box), which allows users to select a series of values from the search or parent table, this drop-down is usually called a "search list ". Normally, these lists are displayed in a column, such as the project name ". However, we often want to present the multi-column information to users. Visual Studio lightswitch is not only easy to implement, but also flexible. It will adapt to the layout you have created. In this blog post, I will introduce various common ways to use lightswitch to automatically complete the box layout. Most of these technologies are not limited to Automatic completion boxes. In fact, you will find that these layout controls are applicable anywhere on the screen. Let's get started now.

Set a search list

To learn how to watch the video tutorial, click here: how to create and control the search list in the lightswitch application?

After you associate a table in Visual Studio lightswitch, the parent table relationship is automatically displayed in the form of a complete box on the screen. If the product belongs to a category, the product table is the parent table of the category table.

When you create a project screen, the category is displayed in the Automatic completion box and the summary attribute of the table is displayed. When a row of data is displayed on the screen, lightswitch uses the abstract attribute to determine what to display. This not only applies to the Automatic completion box, but also to any scenario of the system. For example, the search screen uses this property to connect the selected records to the editing screen. By default, it is the first string attribute in the table. You can change it in the Properties window of the Data designer.

Now, when we create a detailed editing screen for the project, we get the Automatic completion box from the category. If you create and run an application (F5), you will find that something similar to the parent table is displayed in the auto-completion box:

Abstract attributes are displayed by default. This is usually what you need. However, you do not need to be limited to this. In fact, you can also find many small tricks in the screen designer and its rich layout controls (view the screen designer tips written by Sheel on the team blog ). Click the "Design Screen" button to enter the screen customization mode. The automatically completed box node is displayed and the summary control is displayed:

To display multiple columns in the Automatic completion box, click the expand arrow under the abstract control to change it to the column layout:

By default, all fields in the object are displayed. Delete the items that you do not want to display in the auto-completion box and reorchestrate them as you like. In my example, categories include names, descriptions, and images.

The default Bar Width is 150 pixels. You can set the Desired width in this attribute. In this example, I set the description to "auto size" because I want the bar to be stretched. Click Save in the Custom mode to view the layout change.

To view the video teaching in this step, click: how to operate: Display multiple columns in the automatically completed drop-down box?

Show images and text

You will find this very simple. However, if you want to display an image here, you can use better layout controls to achieve this specific purpose, it is the layout control of "image and text" and "text and image. Here you choose the image and the other three information you want to display: (title) is larger than the remaining font, and (Subtitle) is larger than (description.

In my example, I also set the width attribute of the name to "auto size ". Now you can save the custom mode to see a better layout. Of course, you do not need to select an image or use this layout to display text separately.

Show link to edit

Sometimes you may want to edit rows directly in the drop-down list. In this way, you can directly correct the information without opening other screens. Lightswitch enables this operation by setting label control to "Link" display. These links look like hyperlinks, And they guide the user to edit the screen. For example, back to the custom mode, we can select the name attribute and set it to "display by link ".

Click Save. The name is displayed as a hyperlink in the auto-completion dialog box. If you click it, the default editing screen of the category will appear, asking the user to edit the record. After saving the changes, click the refresh button at the bottom of the Automatic completion box to see the changed results.

There are many flexible layout controls in Visual Studio lightswitch, making project editing very simple. My next blog post will show you how to add commands to the auto-completion box to add new projects to the list. This is also very common in user productivity scenarios in commercial applications.

Hope you like it!

 

Http://blogs.msdn.com/ B /beth_massi/archive/2011/09/27/test1111.aspx