Beginning LightSwitch Part 3: Screen Templates, Which One Do I Choose?

NOTE: This is the Visual Studio 2010 version of the popular Beginning LightSwitch article series. For other versions see:

• Visual Studio 2013 & HTML Client: Part 3: Screen Templates, Which One Do I Choose?
• Visual Studio 2012: Part 3: Screen Templates, Which One Do I Choose?

Welcome to Part 3 of the Beginning LightSwitch series! In part 1 and part 2 we learned about entities and relationships in LightSwitch and how to use the Data Designer to define them. If you missed them:

• Part 1: What’s in a Table? Describing Your Data
• Part 2: Feel the Love. Defining Data Relationships

In this post I want to talk about screens. Screens are a common term in everyday life usually denoting a television or computer screen – the shiny thing we look at to interact with the device. In LightSwitch screens present data to the user and form the majority of the application’s user interface (UI). The default LightSwitch application shell presents screens in the center of the application window in a tabbed display. At the top is a ribbon of commands Save and Refresh, and on the left is the navigation menu.

Screens also allow users to search for, edit, insert and delete data in the backend data sources. LightSwitch makes the creation of screens really simple by providing templates you can choose from. You can then use them as is, or customize them further for your needs. Once you have some entities defined (like you learned in the previous posts) then you are ready to create screens.

Choosing a Screen Template

You can add a screen to your project by clicking the “+ Screens…” button at the top of the Data Designer or by right-clicking on the Screens folder in the Solution Explorer and selecting “Add Screen…”

When you do this the “Add New Screen” dialog appears which asks you to select a screen template as well as the data you want to display on the screen. There are five screen templates in Visual Studio LightSwitch; the Details Screen, Editable Grid Screen, List and Details Screen, New Data Screen, and Search Data Screen. Depending on the screen template you choose, your options in the “Screen Data” section on the right changes.

When you select the Screen Data drop down, you select the entity you want to use on the screen. On any screen template you choose, the controls are created in a similar way by looking at the entity definition. For instance, the labels for required properties appear as bold text. Also by default, screens use controls that match the underlying data types. So for instance, an editable String property is represented by a TextBox control, a Boolean becomes a CheckBox control, a Phone Number type gets the Phone Number control, etc. This is why it’s important to model your data correctly before creating screens. Although you can customize most of these things on a screen-by-screen basis, LightSwitch reads the settings in your data model to create smart defaults, speeding up the time it takes to create the application.

Let’s walk through this list of screen templates and some guidelines on why you would choose them.

List and Details Screen

You use the List and Details Screen when you want to see a list of all the records in a table and edit their details on one screen. By default, the screen contains two areas. On the left you will see a list that displays the summary of each record. On the right, it displays the details about the record that is selected. You can also choose to add any related entities to the screen and they will display below the detail controls in a grid. Users can use the search & sort functionality on the list to find records and then edit them all on one screen.

Use this template if you want to allow users to modify all the records in your table on one screen with no additional workflow. This can be particularly well suited for tables that have a smaller number of rows (records), like administration screens, and where only a few users would be modifying the data at the same time. Like all screens that work with multiple data rows, the query will return 45 rows of data at a time by default (you can change this on the screen properties). So it’s usually better to choose entities that don’t have too many or large fields so the application stays responsive as the database grows.

Editable Grid Screen

Similar to the List and Details Screen, you can also use the Editable Grid Screen when you want to modify all the records at the same time on one screen. In this case though, users are presented with a grid of data to edit in a tabular format. Users can press Tab to move from field to field to make changes and edit everything inline. You’ll want to choose this template if your users need to enter a lot of data quickly into a single table like maintenance and lookup tables or where you would only be editing a subset of fields so the user doesn’t need to scroll too much horizontally.

Details Screen

The Details Screen allows you to edit a single row of data from a table and optionally, any related data. When you click on a link or button to open a single record, the Details screen for that entity is displayed. LightSwitch generates a default details screen for you automatically at runtime if you do not create one yourself. Typically you will want to show all the editable properties for an entity on this screen as well as any related grids of data. This screen template has an additional option in the Add New Screen dialog. Once you select the Screen Data, you will see a checkbox “Use as Default Details Screen” which means to open this screen anytime the user opens a single record from this table anywhere in the system. This is also specified in the Data Designer for the “Default Screen” property for the entity.

New Data Screen

The New Data Screen allows you to insert new rows into a table one at a time. By default, the screen contains entries for every field of data. Although you can add related entities to this screen as grids, you may want to choose a small subset of just the required or common fields and then flow to another screen to enter the rest. LightSwitch will automatically open the default Details screen after the user saves so this type of “Add New, Save, then Edit” workflow is automatically set up for you.

Search Data Screen

You use the Search Data Screen when you want a user to be able to locate a single row of data in a table and then open another screen to edit just that row. By default, the screen displays a read-only grid of all the rows in a single table (again only 45 are returned at a time by default). To search for a record, you use the search box at the top right of the screen. The search returns all the rows where any string field matches the search term. Clicking on the summary link for the record opens the Details Screen. It is a very common workflow to have users search for records first before allowing edits to them so the search screen provides this behavior automatically. Typically this should be the first screen a user interacts with for large sets of data because it puts them into an efficient workflow that keeps the system responsive even as the database grows.

Adding Screens to the Address Book Application

Now that you understand what each screen template gives you, let’s create some screens for the Address Book application we’ve been building in this series. At the end of the previous posts we used the List and Details screen so that we could quickly test our data model. If the number of contacts you expect in your address book is relatively small (say less than 100), that screen may be enough to use for the entire application. Users can use the search functionality on the list to find contacts and then edit them all on one screen.

However, if we wanted to manage thousands of contacts for a business and allow multiple users accessing that data, it’s probably better to put users into a workflow where they first search for a contact and then can either edit one at a time or add a new one if they don’t find the contact they were looking for.  It’s always good to create a simple flowchart of how the application should work:

First the user searches for a contact and if found then open the Contact Details screen and let them edit all the related contact data. Once the user saves the screen the data is simply redisplayed on the same screen until they close it. If the user does not find the contact they were looking for, they open the New Contact screen which allows them to enter just the contact entity data. When they Save, the Contact Details screen opens and they can finish entering any related data if they need.

So we just need three screens for our Address Book application; Search Data Screen, New Data Screen, and Details Screen. The order you create your screens is the default order in which they are displayed on the navigation menu. Note that Detail screens will not show up on the navigation menu because a specific record must be selected first. The first screen you create is the first one that is opened by default when the application starts so we’ll want to create the Search Screen first. You can change the screen navigation and how screens appear in the menu by right-clicking on the Solution Explorer and choosing “Edit Screen Navigation”. For a video demonstration on how to edit the screen navigation see: How Do I: Modify the Navigation of Screens in a LightSwitch Application?

So first create the Search Contact Screen by right-clicking on the Solution Explorer and selecting “Add Screen..” to open the Add New Screen dialog. Select the Search Data Screen template and then select the Contacts Screen Data and click OK.

Next create the New Data Screen in the same manner. This time, select the New Data Screen template. Then select the Contact entity for the Screen Data but do not select any related data. Then click OK

Finally we will add the Details Screen the same way but this time select all the related entities; EmailAddresses, PhoneNumbers, and Addresses. Also leave the “Use as Default Details Screen” checked.

Run it!

Now that we have all our screens defined hit F5 to build and run the application and let’s see what we get. You will notice that the Search screen opens right away and on the navigation menu we have both Search Contacts and Create New Contact screens available. I only have a couple rows of test data in here but if I had hundreds of contacts, LightSwitch would display only 45 rows at a time and we would use the paging control at the bottom of the grid to retrieve the next set of rows.

If you click on the last name of a contact it will open the details screen which allows us to edit all the contact information. Notice that LightSwitch also creates links in the first column of the related grids so that you can click on them and open additional detail screens for those records as well.

If the user does not see the contact in the list, they can click on the Create New Contact screen to enter new data.

Then once they save this screen, the Contact Details Screen opens for further editing of all the contact information.

If the Search screen is still open, the user can see newly added records by clicking the Refresh button on the ribbon.

Notice we have a LOT of functionality and a totally working Address Book application by just creating a data model and picking some screen templates.

Customizing Screen Layouts

As I mentioned earlier, all the screen templates are totally customizable so you can use them as-is or modify the layouts completely for your needs. In fact, you as the developer can change the layouts of screens while the application is running. When you are developing your application within Visual Studio LightSwitch you will see a “Design Screen” button at the top right of the running application window. Open a screen and then click that button to open the Screen Customization Mode. Here you can manipulate the content tree exactly how you like and see your changes in real time.

This comes in extremely handy for quickly modifying the order of fields as well as what, where, and how things are displayed on the screen. However, in order to customize your screen with code or additional data you will need use the Screen Designer back in Visual Studio. For more information on using the Screen Designer to customize screens see: Tips and Tricks for Using the Screen Designer.

For more information on building and customizing screens see the Working with Screens learn topic on the LightSwitch Developer Center and LightSwitch Tips & Tricks on dnrTV.

Wrap Up

As you can see the built-in screen templates provide a ton of functionality for you. We now have a fully functional Address Book application and there was no need to write any code to do it! Next post we’ll look at queries and how to design them in order to filter and sort data on our screens exactly how we want. Until next time!

Enjoy!

Go to next article –> Part 4: Too much information! Sorting and Filtering Data with Queries

Comments

• Anonymous
  December 14, 2011
  I was not sure where to start on learning LightSwitch, but, your articles helped me a lot. Thanks for sharing them.

• Anonymous
  December 15, 2011
  Thanks Kiranmayee. You can also find a TON of getting started training material on the LightSwitch Developer Center: http://msdn.com/lightswitch In particular, check out the "Learn" section here: msdn.microsoft.com/.../ff938857 Thanks for using Visual Studio LightSwitch! -Beth

• Anonymous
  December 20, 2011
  The comment has been removed

• Anonymous
  December 22, 2011
  Hi UteW, What browser are you using? It looks fine when printed through IE9....

• Anonymous
  March 11, 2012
  Hi everybody, @Beth: as alwayse great job. I have a question for a special Screen. I have a Customer Listdetail Screnn with all Customers and their Orders (orders are included in to the screen). What I need now is to add a new Customer through this screen and for example 20 new orders for him through the same screen. Is something like that possible?

• Anonymous
  March 29, 2012
  Okay guys, the keyword for my mentioned problem was .showCreatNew() & .AddNew()  :).

• Anonymous
  June 16, 2012
  Hi, Could you tell me how can I make a login page?

• Anonymous
  December 12, 2013
  ... can I change it to another type (so it shows up in menu navigation? I'm using VS2013. Probably the wrong place to post this question, but I cannot seem to find the answer anywhere. Thanks.

• Anonymous
  December 13, 2013
  @If I accidentally made a screen Details template... You can delete the property & the parameter on the view model and then use "Add Data Item" to add a collection instead. The screen templates are just a starting point, you can completely change them how you want. Just make sure the screen doesn't have a required property and it will allow global navigation. Sometimes it's just faster though to re-add the screen with the template you want. HTH, -Beth

• Anonymous
  February 04, 2014
  Hey All, Is there anyway I can invoke the delete command for all the items on the current screen?