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

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

Rate This
  • Comments 6

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

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_image002

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_image003

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. 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).

clip_image005

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.Title”. You can use Intellisense to navigate through the properties in this dialog. Click OK.

clip_image008

The Title field of the Section 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_image017

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_image018

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_image019

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_image020

Select CategoryId query parameter, set the binding via property.

clip_image021

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_image022

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_image023

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

Setting a screen as the home (or startup) screen is easy. Creating one that displays some static text and pictures require some extra steps. In the next post, we will conclude the Course Manager series by finishing our app with a beautiful Home screen!

clip_image027

-andy

Leave a Comment
  • Please add 5 and 5 and type the answer here:
  • Post
  • Hi Andy,

    May I know when you will post up the 'design home screen' tutorial for the above art school project? Thank you.

  • Hi Andy,

    Same as wei.ng... still waiting for the "design home screen" tutorial... TQ

  • Any word of the "design home screen" tutorial.?

  • Is there a plan to complete this tutorial?

  • Sorry for the delay guys! Part 6 is posted: blogs.msdn.com/.../course-manager-sample-part-6-home-screen-andy-kung.aspx

  • Hi Andy,

    May I custom the administration Users and Roles screens??

Page 1 of 1 (6 items)