When we released Visual Studio LightSwitch 2011 last year, we published a sample project called “Course Manager.” We also wrote a series of tutorials based on the sample. With the release of Visual Studio 2012, it is a good time to update the Course Manager tutorials and highlight some of the new features.
Course Manager is designed for the Office of Registrar of a fictional art school. It tracks students, instructors, courses, enrollments, etc. Office staffs can use Course Manager to browse course catalog, create new students, and register courses for existing students. Course Manager is aimed to showcase what you can achieve with LightSwitch out-of-the-box. It demonstrates how you can customize on top of the intelligent defaults LightSwitch gives you to suit your business needs and workflows.
In this introductory post, we will focus on learning what Course Manager does from the end-user’s perspective. We will walk through some basic user scenarios and features. We will publish a series of supplement posts to go into development details.
Run the Sample
Before we start, make sure you have Visual Studio 2012 Professional, Premium, or Ultimate properly installed. Course Manager is available in both VB and C#. You can download the projects from MSDN Code Sample Gallery:
.jpg)
LightSwitch Course Manager End-to-End Application (Visual Studio 2012)
Unzip the project file, double click on the solution to launch Visual Studio LightSwitch. After the project is loaded, hit F5 to run the application!
Home Screen
Course Manager now launches and shows the home screen. The first thing you will notice is that Course Manager is a Desktop application with Windows authentication. You can see your name displayed on the upper right corner of the application. The application displays a logo on top, title, welcome text (with different font styles), and some entry points (with big pretty icons) to common screens. Since you (as the developer) are in debug mode, you also have access to all the permission-based screens, such as the screens under “Administration” menu group.
You might have noticed the look-and-feel of a LightSwitch application is different in Visual Studio 2012. In this release, LightSwitch comes with an additional shell/theme that provides a modern and immersive UI. A developer can, however, choose to use the Office-like shell/theme we shipped in version 1.
Browse Course Catalog
A student may call the office and ask for information about a particular course. A staff needs to be able to quickly find the course the student is looking and answer questions about availability, instructors, meeting times, etc.
To browse the course catalog, open “Course Catalog” screen from the menu. This screen shows a list of course sections. A course can have many sections (ie. Basic Drawing course is offered at 2 different time slots). A student can enroll in a course section. Each section has a maximum enrollment number allowed. The remaining space is calculated based on the current enrollments. You can filter this list by selecting a course category from the auto-complete box. Clicking on the Title link will take you to the details screen for the section. Clicking on the Instructor link will take you to the details screen for the instructor.
Create a Student
Say somebody really likes a course the school is offering, but has never taken courses at the school before. We need a screen to allow the office staff to add a new student record to the database before registering the course for the student.
To create a student, open “Create New Student” screen from the menu. Provide a student photo and fill out the student information. Click Save.
After the data is saved, the details screen for the student will appear. We can now register a course for the student. To do so, click “Register Course” button.
Register Course
If you open “Register Course” screen from the menu, the registration screen requires you to select a student and a course in order to create an enrollment. Since we launch the same “Register Course” screen from a student details screen, the student field is pre-selected for you. All we need to do now is to pick a course to register.
Click on the picker for “Select a course section” to see a list of available courses this student has not yet enrolled in. If you have selected the Academic Year/Quarter via the auto-complete boxes, the section list will be further filtered down accordingly.
Pick a course and click Save. Registration screen will close and you’re back to the student details screen. Click the refresh button on the enrollment grid to see the newly added course.
Find a Student
Last but not least, imagine an existing student calls to change the mailing address. A staff needs to find the student record quickly and update the information.
To search for a student record, open “Search Students” screen from the menu. Use the search box to find a student by last name. Click on the student link to open the student details screen.
This is the same student details screen we saw earlier but for a different student. Notice the name of the screen tab is based on the student name. This is very useful if you have multiple student records open at the same time.
We can go ahead and update the address on the screen. You can also find student’s registered courses shown at the bottom. You can filter the list by Academic Year and Academic Quarter. You can also add or remove an enrollment by clicking “Register Course” (as we saw earlier) or “Drop Course” (it will prompt for confirmation) button on the grid.
What’s Next?
We went over some basic user scenarios and workflows. By all means, this is a very simple application. Surely a real-world course registration system will be many times more complex. But believe it or not, this application covers many LightSwitch features that you will often use to build your fancy applications! On top of my head, this sample covers:
- Create summary and calculated field for a table
- Create permissions and enable authentications
- Create many-to-many relationships and UI
- Write middle-tier logic and validation
- Add static images and text with different font styles
- Create screen parameters and parameterized queries
- Customize screens and work with different layouts
Over the next week, we will publish supplemental walkthroughs on different parts of the sample. So stay tuned! Some topics have already been covered by other posts, in which case, we will highlight and reference them. If you are particularly interested in a topic we haven’t covered, please let us know and we can prioritize accordingly.
I hope you’re motivated to find out how to build Course Manager and anxious to learn more behind-the-scene tips and tricks!
Coming up next: Course Manager Sample Part 2 – Setting up Data
-andy