Customizing the Running Application
In this lesson, you will learn how to make changes to a running LightSwitch application.
Customize the Running Application
The previous lesson, Customizing Screen Appearance, showed several different ways to customize a screen in the Screen Designer. You can also customize a screen when the application is running so that you can immediately see your changes.
To enable customization
Press F5 to run the application.
The application opens and the ContactList screen appears.
In the upper-right corner of the application window, click Design Screen.
.png "Customizing the running application")
A Screen Content pane that has a toolbar appears on the left, and a Properties pane appears under the application window.
To change display names
In the Screen Content pane, select the DataGrid | Contacts node.
In the Properties window, in the Display Name field, type Business Contacts and then press TAB.
Notice that the text in the Screen Content pane immediately changes to reflect the new value.
Select the ContactName node.
In the Properties window, in the Display Name field, type Name .
Repeat the process for the ContactCompany, ContactPhone, and ContactEmail fields. Change the values to Company, Phone, and Email Address.
Click the Save button in the upper-right corner of the application window to save your changes.
This closes the designer and save your changes in the running application.
To change controls and display order
In the upper-right corner of the application window, click Design Screen.
In the Screen Content pane, expand the DataGridRow | Contact node and then select the Company node.
In the dropdown list, select Label.
This prevents modification of the Company field on the screen.
Select the Phone node.
Click the MoveDown toolbar button to move it under the Email Address field.
Notice that the Phone field is now the last column in the grid.
In the Add list, select ContactState.
In the Properties window, change the Display Name property to State.
Select the top-level Rows Layout | Contacts node.
Click the Add Group toolbar button.
A new Rows Layout | Group node appears and is selected.
In the Add list, select - Selected Item.
Notice that a new display group appears under the grid and has fields for the selected contact.
In the Properties window, select the Use Read-Only Controls option.
The new fields are displayed as Label controls.
In the Properties window, in the Label Position list, select None.
The field labels are removed.
Click the Save button in the upper-right corner of the application window to save your changes.
This closes the designer and save your changes in the running application.
Click the Close button in the upper-right corner of the application window to close it.
Closer Look
This lesson showed how to perform several tasks to modify the appearance and behavior of the ContactList screen in the running application. The steps resemble the steps you would take to perform the same tasks in the Screen Designer at design time, but there are some small differences. For example, you cannot change the Display Name of a screen in the running application. There are really no rules about whether to make modifications at run time or at design time; it is a matter of personal choice.
This lesson also showed how to set display names, change control types and order, add new groups and fields, set label positions, and set browse-only fields. Many other screen customizations can be made, both in the running application and in the Screen Designer. For more information, see Screens: The User Interface of Your Application.
Next Steps
In the next set of lessons, you will learn how create queries and use them in screens.
Next lesson: Filtering Data with Queries