Course Manager VS 2012 Sample Part 4 – Implementing the Workflow (Andy Kung)

Welcome to part 4 of the Course Manager series! If you missed the previous posts you can read them here:

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

In Part 3, we’ve set up a Desktop application with Windows authentication. We’ve created some “raw data” screens and wrote permission logic. In this post, we will dive into the main workflows of Course Manager. You can download the sample available in both VB and C# online here:

 

LightSwitch Course Manager End-to-End Application (Visual Studio 2012)

We will be covering quite a few screens in the remainder of the series. Some of them are fairly straightforward. In which case, I will briefly highlight the concepts and reference you to the online sample. Others are more interesting and require some explanations. I will walk through these examples step-by-step. Let’s begin!

Workflow

Course Manager is designed with 4 main entry points or workflows. From the Home screen, you can:

1. Create a new student => view student detail => register a course for this student
2. Search for an existing student => view student detail => register a course for this student
3. Browse course catalog => view section detail => register this course for a student
4. Register a course for a student

Therefore, the rest of the series will focus on creating the following screens:

• Create New Student
• Search Students
• Register Course
• Course Catalog
• Student Detail
• Section Detail
• Home

Screens

Create New Student

Create a screen using “New Data Screen” template on Student table.

By default, the screen vertically stacks up all the controls (using Rows Layout). In our case, we’d like to show the Picture on the left column and the rest of the fields on the right column.

To do this, first change “Student Property” from “Rows Layout” to “Columns Layout.” Each node under a “Columns Layout” will represent a column.

We only want 2 columns on the screen. So essentially, we need 2 group nodes under “Columns Layout.” Each group node represents a column and contains some student fields. Right click “Student Property” and select “Add Group” to add a group node under “Student Property.” Repeat and create a 2nd group node.

We’d like the picture to be in the first column, so drag and drop Picture under the first group node. Set the image’s width and height to 150 and 200 via Properties to make it bigger. We don’t want the picture to display any label, so set “Label Position” to “None.” We’d also like the first column to fit tightly with the Picture, select the first group and set its “Horizontal Alignment” to “Left” via Properties.

Drag and drop the rest of the fields under the 2nd group node to make them appear in the 2nd column.

Let’s hit F5 to see the screen. As expected, we now have 2 columns on the screen. The first column shows a big image editor and the 2nd column contains the rest of the student fields. We can also use “Address Editor” to display the address fields instead, as we did in Part 3.

Search Students

Create a screen using “Search Data Screen” template on Student table.

In screen designer, you will get a Data Grid of students showing all student fields. Let’s make the grid easier to read by removing some non-essential fields. Delete Picture, Street, City, State from Data Grid Row.

We’d also need a way for the user to drill into a record to see more details. One feature worth mentioning here is the ability to show a label-based control as links (provided the field is part of a record). When a link is clicked, the detail screen of the related record will open.

Show a label as link

Select First Name under Data Grid Row. Check “Show as Link” in Properties. It will be shown as a column of links in the running app. When a link is click, the corresponding Student detail screen will open. Notice you can also choose a target screen to launch in the Properties. This is useful if you have multiple customized details screens for Student (we will cover this in the later post).

Notice the Search Data Screen template automatically sets the first column to show as links in this case. But you can do the same thing to any other columns.

Register Course

From Part 2, we know the Enrollment table is essentially a mapping table between Student and Section table. To register a course is to create an Enrollment record in the database. Let’s create a “New Data Screen” called “RegisterCourse” on Enrollment table.

In the screen designer, you will see the EnrollmentProperty, which is the new enrollment record we are creating, on the data list. EnrollmentProperty’s Section and Student fields are represented as 2 data pickers on the screen content tree.

Using a custom query for data picker

By default, the pickers on the screen will show you all available students and sections. In our case, when a student is selected, we only want to show the sections this student has not yet enrolled in.

In Part 2, we’ve already created a custom query called AvailableSections. This query takes a StudentId as parameter and returns a list of Sections this student has not enrolled in. This is exactly what we need! Click “Add Data Item” button in the command bar. Use the “Add Data Item” dialog to add AvailableSections on the screen.

Select StudentId query parameter and bind it to EnrollmentProperty’s Student.Id field in the Properties.

Finally, select the Section picker on the screen. Set the Choices property to AvailableSections. The source of the picker is now set to the custom query instead of the default “select all.”

Adding local screen choice list properties

Now we have a Section picker that filters its list of Sections based on a Student. We’d also like to further filter it down by Academic Year and Academic Quarter. We need a choice list picker for Academic Year and a choice list picker for Academic Quarter on the screen.

LightSwitch enables the ability to add a choice list as a screen property. Use “Add Data Item” dialog, add a local property of Integer type called AcademicYear. Mark it as not required since we’d like it to be an optional filter.

Select the newly created AcademicYear. Click “Choice List” in Properties. Enter choice list options in the dialog.

Create a group node on the screen content tree using “Columns Layout.”

Use “+ Add” button to add “Academic Year.” A picker will be added to the screen.

Follow similar steps. Add an optional local property of String type called AcademicQuarter. Set its choice options to Fall/Winter/Spring/Summer. Add it below the Academic Year picker.

Applying additional filters on custom query

Now we have Academic Year and Academic Quarter pickers on the screen. We need to wire them up to the custom query. This means that we need to create 2 additional filters to the AvailableSection query. To do this, click “Edit Query” on AvailableSections to go to query editor.

Add 2 optional parameterized filters for AcademicYear and AcademicQuarter. We are marking the parameters as optional so if they are not specified, it still returns results.

Click “Back to RegisterCourse” link on top to go back to the screen designer. You will see AvailableSections now has 2 more parameters.

Select AcademicYear parameter, set parameter binding to AcademicYear, which is the local choice list property we just added.

Follow the same steps to bind AcademicQuarter.

Using optional screen parameters to pre-set screen fields

Our workflow indicates that we can also navigate to Register Course screen from a student or section screen. Wouldn’t it be nice if we could pre-populate the student or section picker in this case? To achieve this, we need to create optional screen parameters.

Use “Add Data Item” dialog, add a local property of Integer type called StudentId. Mark it as not required since it will be used as an optional parameter.

In the Properties, check “Is Parameter.” Repeat the same steps to create a local property of Integer type called SectionId. Set it as an optional parameter.

Just a side note, if a screen has required screen parameters, it will not be shown on the menu of the running application. This makes sense because the screen can only be opened with parameters. In our case, we have 2 optional screen parameters. “Register Course” screen will still show up in the menu since it can be open with or without screen parameters.

Now we write logic to handle the screen parameters if they’re available. Use the “Write Code” dropdown menu and select RegisterCourse_InitializeDataWorkspace method.

At the end of the method, add:

' StudentId is an optional screen parameter
If (StudentId.HasValue) Then
    ' If StudentId is set, run a query to get the student record, pre-set the student field on the screen
    Me.EnrollmentProperty.Student = DataWorkspace.ApplicationData.Students_Single(StudentId)
End If

' SectionId is an optional screen parameter
If (SectionId.HasValue) Then
    ' If SectionId is set, run a query to get the section record, pre-set the section field on the screen
    Me.EnrollmentProperty.Section = DataWorkspace.ApplicationData.Sections_Single(SectionId)
End If

We check if the screen is supplied with a StudentId (or SectionId) parameter. If so, we run a query to get the student (or section) record and pre-set the field of the EnrollmentProperty on the screen.

Adjusting screen layout with runtime screen designer

Let’s hit F5 to run the application and make some layout adjustments on the fly. Click “Design Screen” button in the ribbon to launch the runtime screen designer.

Select the screen root node. Make the following tweaks and Save the design.

• Label Position = Top
• Horizontal Alignment = Left
• Vertical Alignment = Top
• Move Student picker above Section picker
• Use Modal Window Picker control for both Student and Section

Ahh. Much better!

Conclusion

We have covered quite a few topics in this post! We created “Create New Student,” “Search Students,” and “Register Course” screens.

During the process, we customized screen layouts, added detail links, utilized custom queries, created screen parameters, etc. These are all very useful techniques for your own apps. We will continue the rest of the screens in Part 5.

Coming up next: Course Manager Sample Part 4 – Detail Screens

-andy