How to: Design an HTML Screen by Using the Screen Designer

For the latest documentation on Visual Studio 2017, see Visual Studio 2017 Documentation.

By using the screen designer, you can modify the appearance of screens in an HTML client for a Visual Studio LightSwitch app. For example, you can use the designer to accomplish the following tasks.

• Add a Tab to a Screen.

• Add a group of information to a screen.

• Modify the layout of a group.

• Add a button.

• Add an item.

• Remove an item.

• Move an item.

• Change the display name of an item.

• Change the label position of an item.

• Change the size of an item.

• Show or hide an item.

• Change the control type of an item.

• Add a custom control to a screen.

• Undo changes.

• Enable or disable paging.

1. In the Screen Content Tree, open the shortcut menu for the Tabs node, and then choose Add Tab.

2. In the Properties window, choose the Group property, and then enter a name for the tab.

3. Choose the Display Name property, and then enter the name that will appear on the tab.

4. In the Screen Content Tree, choose the new tab, open the Add list, and then choose the items that you want to display on the tab.

1. In the Screen Content Tree, choose the node to which you want to add a group of information.

2. On the Screen Designer toolbar, open the Add Layout Item list, and then choose Group.

   A new group appears.

3. In the Properties window, in the Name text box, enter a name for the group.

4. In the Screen Content Tree, choose the new group, open the Add list, and then choose the items that you want to display in the group.

1. In the Screen Content Tree, open the list for a group that you want to modify.

   The list shows all of the control types that are available for the group.

2. In the list, choose a control type.

   The control type that you choose affects the layout of the group. For more information about each control type, see Reference: Screen Designer Properties.

1. In the Screen Content Tree, choose the node where you want the button to appear.

2. On the Screen Designer toolbar, choose Add Layout Item, and then choose Button.

   The Add Button dialog box appears.

3. To use a built-in method

4. 1. In the Add Button dialog box, choose the Choose an existing method option button.

   2. In the showDialog list, choose the method to run.

      If you choose a method that displays a screen or a dialog box, more choices may appear. For more information, see How to: Control Navigation.

   3. Choose the OK button.

5. To create your own method

6. 1. In the Add Button dialog box, choose the Write my own method option button.

   2. In the Method text box, enter a name for the button, and then choose the OK button.

   3. In the Screen Content Tree, open the shortcut menu for the new button node, and then choose Edit Execute code.

      The code editor appears.

   4. In the code editor, add code that will run when the user taps the button.

      For more information, see How to: Add a Button.

• In the Screen Members List of the Screen Designer, drag an item (for example, a field or a command) to the appropriate location in the Screen Content Tree.

  As you drag the item, the pointer indicates whether you can move the item to a given location. If the pointer changes to a circle with a slash through it, you can’t drop the item in that location.

  For information about how to add custom fields to a screen, see How to: Add a Local Property.

1. In the Screen Content Tree, choose the item (for example, a field or a command) that you want to remove.

2. On the Screen Designer toolbar, choose the Delete button.

• In the Screen Content Tree, drag an item (for example, a field or a command) to the a different location.

  For example, drag the PostalCode field so that it appears under the Country field, or drag the Edit button so that it appears over the Delete button.

  Note
  As you drag a field, the pointer indicates whether you can move the item to a given location. If the pointer changes to a circle with a slash through it, you cannot move the item to that location.

1. In the Screen Content Tree, choose the item (for example, a field or a command).

2. In the Properties window, in the text box under Display Name, enter a different name for the item.

   If you change the display name of an item, you change only the name that appears in the screen. The Name property of the item stays the same.

1. In the Screen Content Tree, choose the field.

2. In the Properties window, open the list under Label Position, and then choose the position that you want.

   The following table describes each option.

   Label position	Description
   Left-aligned	The label appears near the left side of the control.
   Right-aligned	The label appears near the right side of the control.
   Top	The label appears above the control.
   Hidden	No label appears for the control.
   None	No label appears for the control, and it’s aligned where the label would have been.

1. In the Screen Content Tree, choose the item (for example, a field or a command).

2. In the Properties window, under Sizing, choose a different size for the width and height of the control.

   Note
   Some types of controls don’t support the height properties.

   For information about each setting, see Reference: Screen Designer Properties.

1. In the Screen Content Tree, choose the item (for example, a field or a command).

2. In the Properties window, select or clear the check box for the Is Visible property.

   Note
   The label (Not visible) appears in the designer next to items that are not visible when the application runs.

1. In the Screen Content Tree, open the list next to the item, and then choose the control type that you want.

   Most control types are built in. You can also set the control type to a custom control that you create by using other tools. For more information, see How to: Add a Custom Control.

1. In the Screen Content Tree, choose any group.

2. On the Screen Designer toolbar, open the Add Layout Item list, and then choose Custom Control.

   For more information, see How to: Add a Custom Control.

• On the menu bar, choose Edit, Undo.

  Tip
  If you accidentally undo an edit in the Screen Designer, on the menu bar, choose Edit, Redo.

1. In the Screen Members List of the Screen Designer, choose the parent node of a collection (for example, the OrderCollection heading).

2. In the Properties window, clear the Support paging check box if you want to display all rows that a query returns, even if the collection of rows is large. Select the check box if you want to limit the number of records that appear, and then specify the number of items to display on each page.

   Note
   Users can display each page of results by choosing a link in the screen.

How to: Control Navigation
HTML Client Screens
How to: Add a Button
How to: Add a Custom Control
Reference: Screen Designer Properties