Creating a Screen to Display Data
This lesson shows how to create a screen, which is the basic user interface element for a LightSwitch application. Screens are the parts of your application that users access to interact with data. Some screens just display data, but others enable the addition, modification, and deletion of data.
Create a Screen
Screens in LightSwitch differ from forms in traditional development tools because the layout of screens is predefined. You can get a screen up and running without any modifications or code. However, if you want to customize or enhance a screen, there are many ways to do so.
Note
This lesson builds on the MyFirstApplication project that is developed in the Working with Data in LightSwitch (Guided Tour) lessons. If you already have the project, open it now; otherwise, complete the Working with Data in LightSwitch lessons and then return to this lesson.
To create a screen
In Solution Explorer, select the Screens node.
On the Project menu, click Add Screen.
In the Add New Screen dialog box, in the Select a screen template: list, click List and Details Screen.
In the Screen Name field, type OrdersByCustomer.
In the Screen Data field, select NORTHWINDData.Customers.
In the Additional Data to Include list, select both Customer_Details and Customer Orders, and then click OK .
The Screen Designer opens and displays a hierarchical representation of the controls and commands for the screen.
Closer Look
This lesson showed how to create a list and details screen that displays a list of customers and a list of orders for each customer. You may have noticed in the Add New Screen dialog box that other screen templates were available. In addition to the templates that are included in LightSwitch, more templates are available as extensions. You will learn more about extensions in a later lesson.
At first glance, the Screen Designer may seem a bit confusing because it uses a hierarchy instead of a WYSIWYG (What You See Is What You Get) paradigm to represent a layout. However, the hierarchy model makes screen design in LightSwitch faster and more flexible.
Tip
To preview a screen at any time, press F5 to run the application and display the screen.
Next Steps
In the next lesson, you will learn how change the layout and appearance of the screen that you just created.
Next lesson: Customizing Screen Appearance