Walkthrough: Designing a Screen
This walkthrough shows you how to use the LightSwitch screen designer to create a screen that displays customer data from the Northwind sample database. The screen designer is a visual design canvas that you can use to modify the appearance of a screen.
This walkthrough shows you how to perform the following tasks:
Create a screen
Change the layout of a screen
Remove fields from a screen
Change the order of items
Change the display name of an item
Change the control type of an item
Customize a screen in a running application
Prerequisites
This walkthrough assumes that the Northwind sample database is installed on your computer and that you have added it as a data source in your project.
For information about how to install the Northwind sample database, see Installing the Northwind Sample Database.
For information about how to add the Northwind sample database as a data source in your project, see Connecting to Data.
Creating a Screen
This section shows you how to create a screen to display the customer data from the Northwind sample database. This screen is divided into two parts. The first part displays a summary list of all the customers; the other part displays details about the customer that is selected. .
To create a screen
In Solution Explorer, select Screens.
On the Project menu, click Add Screen.
The Add New Screen dialog box appears.
In the Add New Screen dialog box, under Select a screen template, select List and Details Screen.
Under Screen Name, type Customers.
In the drop-down list under Screen Data, select <DataSourceName>.Customers.
Under Additional Data to Include, select Customer Details and Customer Orders.
This adds the fields of the Customer entity to the details part of the screen, together with a list of the orders that were placed by that customer.
The following illustration shows how the dialog box appears after you have performed the steps in this section.
.png "Add new screen dialog box")
Click OK to create the screen.
The Screen Designer appears.
Changing the Layout of the Screen
The List and Details screen has two columns. The left column is a list of the customers. The right column contains two rows. The top row contains the details of the selected customer and the bottom row contains orders that are related to the selected customer. The screen content tree of the screen designer shows how this list is composed.
This section shows how to modify the layout of the screen so that the screen contains two rows instead of two columns. The top row will contain the list of customers. The bottom row will contain two columns. The left column will contain the details of the selected customer and the right column will contain the orders that are related to the selected customer.
To change the layout of the list
In the Screen Content Tree of the Screen Designer, change the layout of the Customers node from Columns Layout to Rows Layout. To accomplish this, click the down arrow that appears next to the Customers node. Then, from the drop-down list, click Rows Layout.
Change the layout of the Details Column from Rows Layout to Columns Layout. To accomplish this, click the down arrow that appears next to the Details Column node, and then click Columns Layout.
Removing Fields from a Screen
By default, the area of the screen that displays the details of a customer named Details Column displays all of the fields from the data source. If you do not want all of the fields to appear, you can remove the ones you do not want. For example, the following steps show how to remove the Country field.
To remove fields from a screen
In the Screen Content Tree, expand the Customer Details node if it is not already expanded.
Click the Country field, then, in the command bar of the Screen Designer, click Delete.
Changing the Order of Fields
The following steps show how to change the display order of fields, for example, the CustomerID field and the Postal Code field.
To change the order of fields
In the Screen Content Tree, expand the Customer Details node if it is not already expanded.
To move the CustomerID field to the bottom of the details column, drag it under the Fax field.
To move the Postal Code field to the position just above Customer ID, drag it between the Fax field and the CustomerID field.
Changing the Control Type of a Field
You can customize how a field is displayed to the user. For example, you can set a text field to appear as either a TextBox or as a Label. The following steps show how to change a display field to a Label field so that the user cannot modify its value.
To change the control type of a field
In the Screen Content Tree, expand the Customer Details node if it is not already expanded.
Select the Customer ID field, and then in the drop-down list, select Label.
You can repeat this step to change other fields.
To test the changes, press F5 to run the application.
Customizing a Screen in a Running Application
You can also customize a screen while the application is running. For example, you can remove fields, change the order of fields, and change properties such as control type or label alignment.
To customize a screen in a running application
If your application is not already running, press F5 to start it.
In the command bar of the screen, click Design Screen.
In the Customization Mode screen, remove the Customer ID field from the details column by selecting it in the Customer Details node and then clicking the Delete (
.png "Deletes the selected item.")
) button.Move the Fax field under the Postal Code field by selecting it in the Customer Details node and then clicking the Move Down (
.png "Moves an item to a position lower in the list.")
) button.Change the name of the Phone field to Phone Number by selecting it in the Customer Details node and then, in the Properties window, change the value of the Display Name property to Phone Number.
Change the display type of the Phone Number field to a Label by selecting the field in the Customer Details node and then, in the Properties window, clicking the Control Type property and selecting the Label value.
Change the alignment of the labels in the details column. Select the first field in the Customer Details node, in this case, the Company Name field. In the Properties window, click the Label Position property and select the Right-aligned value. Repeat this step for all of the fields in the Customer Details node.
To save your changes, click Save. Your application now displays the changes that you just made.
Next Steps
By default, when you select a data source for a screen, all the data in the source is displayed. If you only want to display a subset of the data, you can create a query to define the data to display. For more information, see How to: Design a Query by Using the Query Designer.