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

Article
03/28/2013

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.

Add a Tab to a Screen

In the Screen Content Tree, open the shortcut menu for the Tabs node, and then choose Add Tab.
In the Properties window, choose the Group property, and then enter a name for the tab.
Choose the Display Name property, and then enter the name that will appear on the tab.
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.

Add a Group of Information to a Screen

In the Screen Content Tree, choose the node to which you want to add a group of information.
On the Screen Designer toolbar, open the Add Layout Item list, and then choose Group.

A new group appears.
In the Properties window, in the Name text box, enter a name for the group.
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.

Modify the Layout of a Group

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.
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.

Add a Button

In the Screen Content Tree, choose the node where you want the button to appear.
On the Screen Designer toolbar, choose Add Layout Item, and then choose Button.

The Add Button dialog box appears.

Add an Item

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.

Remove an Item

In the Screen Content Tree, choose the item (for example, a field or a command) that you want to remove.
On the Screen Designer toolbar, choose the Delete button.

Move an Item

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.

Change the Display Name of an Item

In the Screen Content Tree, choose the item (for example, a field or a command).
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.

Change the Label Position of an Item

In the Screen Content Tree, choose the field.

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.

Change the Size of an Item

In the Screen Content Tree, choose the item (for example, a field or a command).
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.

Show or Hide an Item

In the Screen Content Tree, choose the item (for example, a field or a command).
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.

Change the Control Type of an Item

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

Add a Custom Control to a Screen

In the Screen Content Tree, choose any group.
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.

Undo Changes

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.

Enable or Disable Paging

In the Screen Members List of the Screen Designer, choose the parent node of a collection (for example, the OrderCollection heading).
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.

Share via