The easiest way to create business applications for the Desktop and the Cloud
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:
LightSwitch Course Manager End-to-End Application (Visual Studio 2012)
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.
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).”
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:
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:
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.
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.
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.
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.
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()
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!
This concludes our Course Manager Sample series. For more LightSwitch training resources please head to the LightSwitch Developer Center. Thank you very much for following!
I have been working with LightSwitch for awhile, and studied many samples and books. This series has been excellent, and really lays out the process for developing an app beautifully.
Your depth on a number of topics has helped me understand processes that other authors have included, but not explained. I look forward to using this new knowledge to re-design several apps, and make them truly easier for my clients.
Andy, I cannot agree more with Tim's comment. Excellent update for VS2012. Keith.
Thanks forr a greate series of Articles, It would be good to add some reporting to this app... :)
Great job, Andy!!! However, I think you need to add some reporting functionality to this...reporting will just make it COMPLETE...Cheers!!!
Maybe reporting via Office Integration Pack ...
Execellent demonstration project Andy! I really like the style of icons you have chosen. May I ask where you found them so that I can use the same style in a project I am building?
Thank you, Gary.
Excellent. Enjoyed the 'Home' screen layout post. You made it so easy.
Andy, what are you using for mockups?
Awesome tutorial, Andy. Definitely the best one I've done about Lightswitch.
To deanvanrooyen: you can use Balsamiq, it's a great App for mockups.
I so wish I had seen this earlier - Fantastic!
Would you consider showing loading of sample data, and a way to clear all the files in the project regardless of constraints and a a simple method to work with say 7days of the week for any month columns with their headings.
Any plans to extend this sample with an LS HTML front-end?