Course Manager VS 2012 Sample Part 5 – Detail Screens (Andy Kung)

Course Manager VS 2012 Sample Part 5 – Detail Screens (Andy Kung)

Rate This
  • Comments 1

This week I’ve been writing a series of articles on building the Course Manager Sample, if you missed them:

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

You can download the sample available in both VB and C# online here:

Download the LightSwitch HTML Client Preview

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

 

In Part 4, we identified the main workflow we want to implement. We created screens to add a student, search for a student, and register a course. In this post, we will continue and finish the rest of the workflow. Specifically, we will create detail screens for student and section records and a course catalog screen that allows user to filter sections by category.

clip_image001

Screens

Student Detail

Remember the Search Students screen we built in Part 4? If you click on a student link in the grid, it will take you to a student detail screen.

clip_image002

This is pretty cool. But wait… we didn’t really build this screen! In reality, LightSwitch recognizes that this is a common UI pattern, and therefore it generates a default detail screen for you on the fly. Of course, we can always choose to build and customize a detail screen, as we’re about to do for Student and Section.

Adding a detail screen

Create a screen using “Details Screen” template on Student table. In this screen, we want to also include student’s enrollment data, so let’s check the “Student Enrollments” box.

Make sure “Use as Default Details Screen” is checked. It means that this detail screen will be used as the detail screen for all student records by default. In other words, if you click on a student link, it will take you to this detail screen instead of the auto-generated one. As a side note, if you forget to set it as the default details screen here. You can also set the property of the Student table (in table designer).

clip_image004

By default, the details screen template lays out the student info on top and the related enrollment data on the bottom.

clip_image005

We can make similar layout tweaks to the student portion as we did for “Create New Student” screen in Part 4 (such as moving the student picture to its own column, etc).

Including data from related tables

I’d like to draw your attention to the Enrollments portion of the screen. Since Enrollment is a mapping table between Student and Section, the grid shows you a student (shown as a summary link) and a section (shown as a picker). Neither of the fields is very useful in this context. What we really want is to show more information about each section (such as title, meeting time, instructor, etc.) in the grid. Let’s delete both Enrollment and Section under Data Grid Row.

clip_image006

Use the “+ Add” button and select “Other Screen Data.”

clip_image007

It will open the “Add Screen Data” dialog. Type “Section.Course.Title”. You can use Intellisense to navigate through the properties in this dialog. Click OK.

clip_image008

The Title field will now appear in the grid. Follow similar steps to add some other section fields. The “Add Screen Data” dialog is a good way to follow the table relationship and include data that is many levels deep.

clip_image009

Making a read-only grid

Now we have an editable grid showing the sections this student is enrolled in. However, we don’t expect users to directly edit the enrollments data in this screen. Let’s make sure we don’t use editable controls (ie. TextBox) in grid columns. A quick way to do this is to select the “Data Grid Row” node. Check “Use Read-only Controls” in Properties. It will automatically selects read only controls for the grid columns (ie. TextBox to Label).

clip_image010

We also don’t expect users to add and delete the enrollments data directly in the data grid. Let’s delete the commands under data grid’s “Command Bar” node. In addition, data grid also shows you an “add-new” row for inline add.

clip_image011

We can turn it off by selecting the “Data Grid” node and uncheck “Show Add-new Row” in Properties.

clip_image012

Launching another screen via code

In Part 4, we’ve enabled the Register Course screen to take a student ID as an optional screen parameter. The Student picker will be automatically set when we open the Register Course screen from a Student detail screen. Therefore, we need a launch point in the student detail screen. Let’s add a button on the enrollment grid.

Right click on the Command Bar node, select Add Button.

clip_image013

Name the method RegisterCourse. This is the method called when the button is clicked.

clip_image014

Double click on the added button to navigate to the screen code editor.

clip_image015

Write code to launch the Register Course screen, which takes a student ID and a section ID as optional parameter.

Private Sub RegisterCourse_Execute() ' Write your code here.  Application.ShowRegisterCourse(Student.Id, Nothing) End Sub

That’s it for Student Detail screen. F5 and go to a student record to verify the behavior.

clip_image016

Section Detail

Now that we’ve gone through customizing the student detail screen, let’s follow the same steps for Section. Please refer to the sample project for more details.

  1. Create a screen using “Details Screen” template on Section table. Include section enrollments data
  2. Tweak the UI and make the enrollment grid read-only
  3. Add a button to the enrollment grid to launch Register Course screen

Course Catalog

In Course Catalog screen, we’d like to display a list of course sections. We’d also like to filter the list by the course category. In Part 2, we’ve created a custom query for exactly this purpose called SectionsByCategory. It takes a category ID as a parameter and returns a list of sections associated with the category. Let’s use it here!

Create a screen using “Search Data Screen” template. Choose SectionsByCategory as screen data.

clip_image018

In screen designer, you will see SectionsByCategory has a query parameter called CategoryId. It is also currently shown as a TextBox on the screen. User can enter a category ID via a text box to filter the list. This is not the most intuitive UI. We’d like to show a category dropdown menu on the screen instead.

clip_image019

Select SectionCategoryId (you can see it is currently bound to the query parameter) and hit DELETE to remove this data item. After it is removed, the text box will also be removed from the visual tree.

clip_image020

Click “Add Data Item” button in the command bar. Use the “Add Data Item” dialog to add a local property of Category type on the screen.

clip_image021

Select CategoryId query parameter, set the binding via property.

clip_image022

Drag and drop the Category property to the screen content tree (above the Data Grid). Set the “Label Position” of Category to “Top” in Properties.

clip_image023

Follow the Course Manager sample for some layout tweaks and show some columns as links (as we did in Search Students). Now, if you click on a section link. It will open up the Section Detail screen we customized!

clip_image024

Conclusion

In this post, we’ve completed the main workflow in Course Manger. We are almost done! All we need is a Home screen that provides some entry points to start the workflow.

clip_image025

 

clip_image027

Setting a screen as the home (or startup) screen is easy. We’ve also made it easy to lay out static images, text, and group boxes on the screen. In the next post, we will conclude the Course Manager series by finishing our app with a beautiful Home screen!

Coming up next: Course Manager Sample Part 6 – Home Screen

-andy

Leave a Comment
  • Please add 1 and 7 and type the answer here:
  • Post
  • Hi, I think we also need a AvailableStudents Query besides AvailableSections Query.

    Because when I register Course from the Section Detail Screen,I can add duplicated students .So ,How to avoid this? Simply delete the Register Course Button is a way.

    Can you help me out?

    Thank you!

Page 1 of 1 (1 items)