Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

Customizing Screen Appearance in a LightSwitch Application

In this lesson, you'll learn how to change the layout and appearance of a screen in LightSwitch.

By using the Screen Designer, you can customize a screen in many ways. For example, you can change the display order of fields, change the kind of control that's used to present a field, and prevent users from modifying a field.

To view a screen

  1. In Solution Explorer, open the shortcut menu for the OrdersByCustomers.lsml node, and then choose Open.

  2. Choose the F5 key to run the application, and then, on the navigation menu, choose Orders By Customers to display the form.

    When you select a customer in the Customers list on the left, details about that customer and a list of related orders are displayed on the right.

  3. In the upper-right corner of the application window, choose the Close button.

To change display names

  1. In the center pane of the Screen Designer, choose the topmost Columns Layout | Orders By Customer node.

  2. In the Properties window, set the Description property to Select a customer to see their orders..

    Entering the description

    This message will appear as a tooltip for the screen when you run the application.

  3. Choose the F5 key to run the application, and then, on the navigation menu, choose Orders by Customers to display the screen. To display the tooltip, point to “Orders By Customer” on the screen’s tab.

  4. In the upper-right corner of the application window, choose the Close button to close the window.

To change controls and display order

  1. Under the Rows Layout | Details Column node, choose the Company node.

    Changing the control type
  2. In the list, choose Label.

    This change prevents users from editing the Company field when the application runs.

  3. Move the Phone node just under the Company node.

    This step changes the display order on the screen.

  4. Choose the F5 key to run the application, and then, on the navigation menu, choose Orders By Customers to display the screen and verify the changes.

  5. In the upper-right corner of the application window, choose the Close button to close the window.

To disable commands for a data grid

  1. Expand the DataGrid | Orders node.

  2. Expand the Command Bar node if it isn’t already expanded.

  3. Choose the Edit… node, and then, in the Properties window, clear the IsVisible check box.

    Disabling the Edit button

    This disables the Edit command for the Orders data grid.

  4. Repeat the process for the Delete node.

  5. Choose the F5 key to run the application, and then, on the navigation menu, choose Orders By Customers to display the screen and verify the changes.

    Notice that the Edit and Delete buttons are now missing.

  6. In the upper-right corner of the application window, choose the Close button to close the window.

To make a screen read-only

  1. Expand the DataGrid | Orders node.

  2. Expand the Command Bar node.

  3. Choose the Add… node, and then, on the ToolBar Ribbon, choose the Delete button.

  4. Expand the DataGrid | Orders node, and then choose the Data Grid Row | Order node.

  5. In the Properties window, select the Use Read-Only Controls check box.

    This prevents users from modifying data in the grid.

  6. Choose the F5 key to run the application, and then, on the navigation menu, choose Orders By Customers to display the screen and verify the changes.

    Notice that the Add button is gone, and that you can no longer modify data in the grid.

  7. In the upper-right corner of the application window, choose the Close button to close the window.

This lesson showed how to perform several tasks to modify the appearance and behavior of the OrdersByCustomer screen. The lesson also demonstrated how the Screen Content Tree in the Screen Designer relates to the user interface in the running screen.

When you changed the Description for the screen, you provided help for the end user. You may remember that you changed the Description for the ContactName field in the Entity Designer in an earlier lesson. When you set the Description in the Entity Designer, the change is propagated to all screens; when you set it in the Screen Designer only the screen that you are working with is changed.

When you changed the control type for the Company field from a TextBox to a Label, you may have noticed that the list of available controls for each field only includes controls that are appropriate for the underlying data type of the field. For example, for a Text field, you can choose a TextBox or a Label. If you have installed an extension that includes a control for displaying Text, that control would also appear in the list. Another lesson describes extensions.

In addition to dragging a field to another place in a list, in this case, the Customers list, you can also drag fields from the left pane of the Screen Designer to the center pane. For example, if you were to accidentally delete the City field, you could drag it back from the Customers node in the left pane.

When you disabled the Edit and Delete commands in the Orders grid, you may have noticed that you could still edit and delete orders directly in the grid. To address this, you later made the Orders grid read-only by setting the Use read-only Controls property. The Use read-only Controls property affects all nodes under it in the Screen Content tree. For example, if you set the Use read-only Controls property for the top-level Grid | Orders by Customers node, the whole screen becomes read-only.

Note Note

When the Use read-only Controls property is set, it does not disable the Add, Edit, and Delete commands. Users can still modify data when these commands are enabled.

In the next lesson, you’ll learn how to further customize the screen.

Next lesson: Adding a Local Property in a LightSwitch Application

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.