Hello LightSwitchers! I hope you’re all having fun and building cool stuff with RTM. In case you missed it, here are the previous posts:
Course Manager VS 2012 Sample Part 1 – Introduction
Course Manager VS 2012 Sample Part 2 – Setting up Data
Course Manager VS 2012 Sample Part 3 – User Permissions & Admin Screens
Course Manager VS 2012 Sample Part 4 – Implementing the Workflow
Course Manager VS 2012 Sample Part 5 – Detail Screens
You can download the sample available in both VB and C# online here:
In this post, we will walk through how to design a “Home” screen.
In LightSwitch, you can indicate a screen to be the “start-up screen” of the application. Meaning, the screen will be automatically launched when you start the application. In our case, we want to create a home screen that provides some entry points for different workflows when the user first starts the application.
Creating a blank screen
Let’s first create blank screen to be our home screen. To create a blank screen, you can pick any screen template in the Add New Screen dialog and leave the Screen Data to be “(None).” In our case, we will pick list-detail screen template, name the screen “Home,” and leave the Screen Data “(None).”
Setting the start-up screen
Double click on Properties node in Solution Explore to open the application designer.
Select the “Screen Navigation” tab in the application designer. In the menu structure tree, select “Home” and click “Set” at the bottom. This will set the “Home” screen as the start-up screen of the application. Finally, use the up/down arrow buttons on the right to move the “Home” screen to the top of the menu.
If you hit F5 now, you will see the “Home” screen is automatically opened when you launch the application. The menu on the top also reflects the ordering you specified in the application designer.
We have a blank canvas on start-up. It’s time to use some creative juice in designing our home screen. Before we start, let’s draw out what we want to build… and this is what we have:
To sum up, we want:
- A title (for the application)
- A subtitle (for welcome message)
- A description (for instructions, news, etc.)
- An image icon and entry point (link) to each of our 4 main workflows (covered in my previous posts)
- Search students
- Create student
- Register course
- Course catalog
Let’s draw some boxes around the picture and see how we could create this structure. There are essentially 2 big groups vertically stacked on top of each other:
- Top group: Contains 3 rows of text
- Bottom group: Contains a group box that encloses a 4 x 2 table
Let’s go back to the IDE. Double click on “Home” in Solution Explorer to open the screen designer. We will first create the top and bottom group. Since they will be vertically stacked, change the root from “Columns Layout” to “Rows Layout.” Set the Vertical Alignment to “Top” in Properties window, so things will not stretch vertically.
Use the “Add” dropdown to add 2 groups under the Home screen node.
The bottom group is a group box, so we will use the Group Box Layout (which is a new addition in Visual Studio 2012). Change the display name of the group box to “Common Tasks” via Properties.
Adding static text
Now we’d like to add some title text to the screen. In our previous release, you would need to create a local property, write code to initialize the property, and add the control on the screen to achieve this. In Visual Studio 2012, LightSwitch has improved the experience for adding static text and images on the screen. To do so, select the group in which you’d like to add a text. Click the “+ Add” button and select “Add Text…”
Enter the text in the dialog and click OK.
That’s it! A label control (for displaying the text) is now added to the group.
Since we’re adding a title, we can choose a bigger font style from Properties.
If you run the application now, you will see the title appear on the screen in a larger and bold font.
You can follow the same steps to add a subtitle and description (with different font styles) to the screen.
Creating a table layout
We’re now ready to move on to the bottom group. If you look back at our drawing, we need a table under the group box control. The table consists of 4 columns and 2 rows. Why do we use a table layout instead of rows and columns layout here? Well, you certainly can. Table layout, however, lines things up better in this case. For example, if you need a larger margin between and image and text, you can adjust it for the entire column at once (instead of lining it up one by one). Plus, I need an excuse to show you the table layout
Add a new group under the Group Box group. Change the control to Table Layout. Set the Horizontal alignment to “Left” in the Properties window.
Add 4 groups under the Table Layout. These groups will automatically be using the TableColumn Layout. They represent the 4 columns in our table.
Adding a static image
Now we’d like to add some images to the first and third column of the table. Similar to adding a static text, select the column node and click on “+ Add” button. Select “Add Image…” in the list.
Select an image from your computer and click OK.
An Image control is added under column 1. Set the image size to 80px x 80px via Properties.
Add another static image below the first. This image will appear as the 2nd row of column 1.
Follow what you’ve learned, add two rows of text in column 2, two rows of images in column 3, and two rows of text in column 4.
Let’s run the application and see where we are.
Adding a link to a screen
We’re almost there! We just need to add a link for each workflow. We can achieve this by adding a command that navigates to a workflow screen. Right click on the first static text (for searching students) and select “Add Button…”
In the dialog, name the method SearchStudents and click OK.
A command will be added. Change the control from Button to Link.
Double click on the command to go to the code. Write the following to launch the SearchStudent screen when the user clicks on the command.
Private Sub SearchStudents_Execute() Application.ShowSearchStudents() End Sub
Follow the same steps to add the rest of links. Let’s run the application to see the home screen!
In this post, we learned how to set a start-up screen. We added static images and texts (with different fonts). Finally we use the table layout to line up items on our home screen. If you’ve been following the previous blog posts, you have just created the Course Manager app from scratch!