HTML Client Screens for LightSwitch Apps
For the latest documentation on Visual Studio 2017, see Visual Studio 2017 Documentation.
By using LightSwitch, you can create HTML client screens that are optimized for display on mobile devices. This topic introduces the templates that you can use to create screens that are based on HTML5, the tools that you can use to design screens, and some of the tasks that you can perform to design the best screens for your LightSwitch application.
For an end-to-end example of a client that utilizes HTML screens, see Walkthrough: Creating a Client for Mobile Users.
You can add one or more HTML clients to an existing LightSwitch application, or you can create a LightSwitch application that contains only an HTML client. Each HTML client is contained in its own project within the LightSwitch solution.
To get started, create a screen by using one of the following screen templates:
Common Screen Set
View Details Screen
Add/Edit Details Screen
For information about how to choose a template, see Choosing a Screen Type.
For information about how to find these templates, see How to: Create an HTML Client Screen.
You can modify the design of a screen by using the screen designer. The screen designer displays items such as data fields and commands, and the screen content tree, which is a hierarchical representation of your data. You can drag items to the screen content tree and arrange them in the order you want.
For more information about the screen designer, see Tour of the Screen Designer.
For more information about how to perform specific tasks in the screen designer, see How to: Design a Screen by Using the Screen Designer.
Screen Design Tasks
To modify the design of a screen, you can perform the following tasks:
Modify the appearance of a screen
Add fields and commands to a screen
Filter the data that appears in a screen
Add data to a screen
Customize navigation between screens
Modify a screen by using code
Modify the Appearance of a Screen
You can modify how data appears in a screen. For example, you can configure a collection of information to appear as a flat list or a tiled list. You can change the order in which fields appear or group fields together.
For more information, see How to: Design a Screen by Using the Screen Designer.
Add Fields and Commands to a Screen
HTML screens in LightSwitch provide built-in commands so that users can view, update, delete, or save data. You can also add custom commands and fields.
Add a custom command if you want to add business logic to the screen. For example, you can add a button so that a user can display a list of customers based on sales-order volume. For more information, see How to: Add a Button.
You can add custom local properties fields to collect or display information. For example, you can add a text box next to the sales-volume button so that the user can specify how many customers they want to appear in the list. For more information, see How to: Add a Local Property.
Add Custom Controls to a Screen
By adding custom controls to an HTML screen, you can display or collect information in ways that go beyond the capabilities of the controls that are built in to LightSwitch. You can also use a custom control to replace any built-in LightSwitch control that appears on the screen. For more information, see How to: Add a Custom Control.
Filter the Data that Appears in a Screen
You can filter the data that appears in a screen by modifying the conditions of screen queries.
Every group of data that appears in the left pane of the designer is based on a query. The screen displays only the information that is returned by those queries. To change the information that appears for a group of data, modify its query.
For more information, see How to: Filter Data.
Add Data to a Screen
You can add other kinds of data to a screen. For example, in a screen that displays customers, you can add a data grid that shows a list of orders. For more information, see How to: Add Data to a Screen.
Customize Navigation between Screens
In an HTML client, only one screen is active at any time. You can specify how the user opens one screen from another and what happens when a screen becomes inactive.
For more information, see How to: Control Navigation.
Modify a Screen by Using Code
You can add code to partial methods that LightSwitch calls so that, when certain events occur at run time, the screen is modified appropriately. For example, you can add code that hides the name of a company that wants to remain anonymous to the users of your application. This code would examine the company names of customers and, when it finds a match, would set the
IsVisible property of the
CompanyName field to
False before the information appears in the screen.
For more information about where to write your code, see How to: Handle Screen Events.
For more information about how to add code that modifies a screen, see How to: Modify a Screen by Using Code.
For a listing of LightSwitch HTML Client APIs, see HTML Client API Reference.
|Choosing a Screen Type||Describes templates that you can use as a starting point to create screens.|
|How to: Create an HTML Client Screen||Shows how to add screens to your application.|
|Tour of the Screen Designer||Illustrates the parts of the designer and their functions.|
|How to: Design a Screen by Using the Screen Designer||Shows how to use the screen designer.|
|How to: Add a Local Property||Shows how to add a custom local property field to a screen.|
|How to: Add a Button||Shows how to add a button or a link that runs custom code in a screen.|
|How to: Add a Custom Control||Shows how to use a custom HTML control in a LightSwitch screen.|
|How to: Add Data to a Screen||Shows how to add data from other queries to a screen.|
|How to: Filter Data on an HTML Screen||Shows how to use queries to control which data appears in the screen.|
|How to: Handle Screen Events||Describes how to customize your application by writing code that runs when certain events happen.|
|How to: Modify a Screen by Using Code||Describes how to use code to modify controls and interact with items on a screen.|
|Reference: Screen Designer Properties||Describes the properties of items that appear in the screen members list and the screen content tree of the screen designer. You can modify the appearance and behavior of items by using the Properties window to set the value of the properties.|
|How to: Control Navigation||Describes the screen navigation model for an HTML client of a LightSwitch application.|