The easiest way to create business applications for the Desktop and the Cloud
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.
Right click on HTMLClient node and select Add Screen.
In the Add New Screen dialog, choose:
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.
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.
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.
Select both Title and Event Time (use CTRL+Click to multi-select).
Drag them out of Columns Layout.
Repeat the same for 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.
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.
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.
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.
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?
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)
Go to next article --> Signed-In Part 3 – Guest List Screen
How do I customize the save button on the dialog to allow me to transfer to a second page for a multi-step wizard like experience?
@Dave - This is what you can try... Instead of building multiple screens to create a multi-step wizard like experience, you can have one screen with multiple screen tabs, each representing a step. You can hide the screen tab titles (Hide Tab Titles property) and put a "Next" button to go to the next screen tab (use screen.showTab API) at each step. In the last step, you can write a "Save" button (myapp.commitChanges) which will save everything and close the dialog.
I don't see the Command Bar node to create and Add Dialog, Any clue?
Thanks in advance!
You will need to install Visual Studio 2012 Update 2 CTP4 to see the latest features including the command bar. See this post on how to install and get started: blogs.msdn.com/.../getting-started-with-lightswitch-in-visual-studio-2012-update-2-ctp4.aspx
@Horving - Are you using the latest preview (found in Visual Studio 2012 Update 2 - CTP 4)? Also, the command bar is only available on group controls that are used as tabs.
Beth and Just you both nailed it!!! Thank you once again.
Fantastic post (and the series)!! Thanks!! Some "guidance" on how to use the features was badly needed... :-)
Tried this on the iPad (IOS 6.1.3) Safari browser. Problems when adding a new event. The event date/time entry only gives dropdowns. So one is unable to actually type in a "day" as it only gives a dropdown of "DD" as the only option. Anyone have a workaround without custom controls?
Re the DD of adding a new event... same issue on the Windows Phone 7.