In the last post, we gave an overview of the Signed-In app we are going to build. We created a LightSwitch project and set up our data. In case you missed it:
Signed-In Part 1 – Introduction
Now, we’re ready to start designing the UI.
Create the First Screen
Right click on HTMLClient node and select Add Screen.
In the Add New Screen dialog, choose:
- Template: Browse Data Screen
- Screen Name: UpcomingEvents
- Screen Data: GroupEvents
Click OK.
The Screen Designer will appear. The tree on the right side is called a screen content tree. It represents the visual elements on the screen. On the left side are the data members. They are the data behind the visual elements. For example, the GroupEvents data member (on the left side) is visualized as a List control (on the screen content tree).
Now let’s see what we’ve got. Press F5 key to run the application. The app will launch in your default browser. 
Obviously we don’t have any event data yet. So let’s add a dialog to create events. Return the Visual Studio by closing the browser.
Create an Add Dialog
Let’s first place a button on the screen that will be used to launch the dialog. Expand the Command Bar node and click Add.
In the Add Button dialog, keep Choose an existing method selected. Select addAndEditNew under GroupEvents in the method dropdown menu. This tells the system that we’d like to add a new item to the GroupEvents data member.
You’ll notice that there is a Navigate To dropdown menu. We will keep it as New Screen. Basically, dialogs are also screens, just visualized within a modal dialog. So it is asking us which screen to show as a dialog when the add button is clicked. Since we haven’t created a screen for the add dialog, we will let the dialog guide us in creating a new screen. Click OK.
The familiar Add New Screen dialog will appear. Name the screen AddEvent and click OK.
The newly created AddEvent screen will show in the Screen Designer.
Notice if you select the Screen root node, there is a Show As Dialog checkbox in the Properties window. This is what’s used to determine whether to visualize a screen as a full screen or dialog.
Now press the F5 key and run the app. Click the Add Group Event button and you will see the Add Event dialog.
Okay. We’re getting somewhere. But we can tweak the UI a bit. Let’s make the fields in the dialog show up in one column instead of two. Also, we can use a better icon for the Add Group Event button.
Return to Visual Studio by closing the browser.
Use Rows Layouts vs. Columns Layout
In the Add Event screen, you will see that there is a Columns Layout hosting two groups of Rows Layout, each serves as a column. Since we don’t have that many fields, we don’t really need two columns.
Drag and drop Title node out of Columns Layout.
Repeat the same for Event Time, Location, and Description.
Finally, delete columns node.
Now we have all 4 fields under one Rows Layout (which means there is only one column).
Let’s also change Description’s control from Text Box to Text Area.
Change Command Icon
We also want to change the icon for the add button on the home screen. Double click on UpcomingEvents screen from the Solution Explorer. Select the Add Group Event button.
In the Properties window, change its Display Name property to, simply, Add Event. Also, in the Icon dropdown menu, you will see a list of built-in icons for you to choose from. Select Add.
Now press F5 key to try the application. You will see the new Add icon.
The Add Event dialog now has one column.
Use the dialog to add several test events to the list!
When you’re done. Close the browser and return to Visual Studio.
Customize Screen Query
We want make sure we only show upcoming events (not all events) and have them sorted by event time.
Next to GroupEvents data member, click Edit Query.
The Screen Query Designer will appear. Use it to filter and sort by EventTime like the following. We are indicating that we only want to show events greater or equal to Today in Ascending order.
Click the Back button to go back to Screen Designer when you’re done.
Customize the List Row
If you look at the Group Events list, you will see there is a Group Event (singular) node under it. It represents the UI of each individual entry in the list. By default, it is using the Summary control, which simply displays the first text property of the entry. In our case, the first text property is event’s Title. That’s why you see event titles in the list.
Let’s customize it so it shows the date of the event as well. Change Group Event’s control from Summary to Rows Layout.
Delete Location and Description.
Select the Title node. In Properties window, change the Font Style property to Large. Similarly, change Event Time’s Font Style property to Small.
Press F5 to run the app. It now looks like this.
Get the hang of it? Now return to Visual Studio for another cool trick.
Use Tile List
In some scenarios, you might prefer to use a tile list to save some space. For example, each event list item has a lot of unused space to the right. Let’s try a Tile List instead.
Select Group Events node, change its control from List to Tile List.
Now press F5 again.
Mind blown yet?
What’s Next?
In this post, we created our first list screen and add dialog. We learned how to customize screen query, list, and layout.
Next time, I will show you how to create the Guest List screen.
-andy (Program Manager, LightSwitch Team)