Export (0) Print
Expand All

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

  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.

  • 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 to an HTML Screen.

  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 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 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 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, 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 to an HTML Screen for a LightSwitch App.

  • On the menu bar, choose Edit, Undo.

    Tip 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 Note

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

Show:
© 2014 Microsoft