Course Manager VS 2012 Sample Part 3 – User Permissions & Admin Screens (Andy Kung)

Course Manager VS 2012 Sample Part 3 – User Permissions & Admin Screens (Andy Kung)

Rate This
  • Comments 3

Welcome to part 3 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

In Part 2, we created tables, relationships, queries, and learned some useful data customizations. Now we’re ready to build screens. One of the first things I usually like to do (as a LightSwitch developer) is to build some basic screens to enter and manipulate test data. They can also be useful end-user screens for a data admin. I call them the “raw data screens.” Obviously we don’t want to give all users access to these special screens. They need to be permission based.

In this post, we will set up permissions, create raw data screens, write permission logic, and learn some screen customization techniques. Let’s continue our “SimpleCourseManager” project from Part 2! You can download the full sample application here:

Download the LightSwitch HTML Client Preview 

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

Setting up the App

Course Manager is a Desktop application using Windows authentication. Let’s go ahead a set that up. Double click on Properties in the Solution Explorer to open the application designer.

clip_image001

Application Type

Under “Application Type” tab, make sure Desktop is selected (this is the default).

clip_image002

Application Logo

We can also specify a logo for the application. Under “General Properties” tab, select a logo image from your computer.

clip_image003

Authentication

Under the “Access Control” tab, select “Use Windows authentication” and “Allow any authenticated Windows user.” Any authenticated Windows user has access to the application. We are going to define special permissions on top of this general permission.

User Permissions

You will find a built-in SecruityAdministration in the list of permissions. LightSwitch uses this permission to show or hide the built-in screens that define Users and Roles. As the developer, I want to make sure that I have all the permissions under debug mode (so I can see all the screens). Check “Granted for debug” box for SecurityAdministration.

clip_image005

Let’s add another permission called “ViewAdminScreen” to the list. We will use it to show or hide our raw data screens later. Again, check “Granted for debug” box.

clip_image007

At this point, if you hit F5 to launch the running app, you will see a Desktop application with your Windows credential at the upper right corner. You will also see the Administration menu group with the built-in Roles and Users screens (because we’ve enabled SecurityAdministration permission for debug mode).

clip_image009

Raw Data Screens

Now let’s create our first screen. Create a list-details screen on Students called “ManageStudents.”

clip_image011

In the screen designer, use the “Write Code” dropdown menu to select ManageStudents_CanRun. This method defines the condition ManageStudents screen will show up in the running application.

clip_image012

We only want to show this raw data screen for users with ViewAdminScreen permission (that we defined in earlier steps). In the code editor, write:

Private Sub ManageStudents_CanRun(ByRef result As Boolean)
    ' Only show this screen to admin user
    result = User.HasPermission(Permissions.ViewAdminScreen)
End Sub

Let’s hit F5 again. We will see the Manage Students screen we just created. By default, it is place under Tasks menu group. Let’s organize all the raw data screens under Administration menu group.

clip_image014

Go back in the LightSwitch IDE and open application designer. Under “Screen Navigation” tab, delete Manage Students screen from Tasks group and add it under Administration group.

clip_image016

Follow the same steps to add other raw data screens (with ViewAdminScreen permission):

Screen Name

Screen Template

Screen Data

ManageStudents

List and Details

Students

ManageInstructors

List and Details

Instructors

ManageCategories

List and Details

Categories

ManageCourses

List and Details

Courses (include Sections, CourseCategories)

Organize your screens to have this menu structure.

clip_image017

Use these screens to enter some sample data for students, instructors, categories, courses, and sections.

Screen Customizations

In the Course Manager sample project, we’ve also made some screen customizations to improve user experience. Here are the highlights:

Manage Students

In “Manage Students” screen, we’d like to:

  • Show the list items as links
  • Use “Address Editor” control for the address fields
  • Add time tracking fields and show them as read-only text boxes

clip_image019

Show list items as links

In the screen designer, select Student’s Summary control (under the List control). Check “Show as Link” in the Properties.

clip_image020

Use Address Editor control for the address fields

In the screen designer, right click on “Student Details” node, select “Add Group” to add a group node.

clip_image021

Change the group node to use “Address Editor” control.

clip_image022

Now, drag the Street node and drop it in (STREET LINE 1). Repeat the drag-and-drop for City, State, and Zip.

clip_image023

Add time tracking fields and show them as read-only text boxes

In the screen designer, select “Student Details” node. Click on “+ Add” button and select “Created Time” to add the field. Repeat and add “Updated Time” and “Updated By.”

clip_image024

Use the “Write Code” dropdown menu in the command bar. Select ManageStudents_Created.

clip_image025

<Screen>_Created is called after the UI elements on the screen have been constructed. We want to make them read-only. Write:

Private Sub ManageStudents_Created()
    ' Make some controls read only
    FindControl("CreatedTime").IsReadOnly = True
    FindControl("UpdatedTime").IsReadOnly = True
    FindControl("UpdatedBy").IsReadOnly = True
End Sub

Manage Courses

In “Manage Courses” screen, we’d like to:

  • Use a multi-line text box for Description field (set Lines property for the TextBox control)
  • Use a “List box mover” UI for the many-to-many relationship (see “How to Create a Many-to-Many Relationship”)

clip_image027

Use a multi-line text box for Description field

Select the Description TextBox control and in the Sizing section of the properties window set the Lines to 5.

image

Create a “List box mover” UI

You can create this control out of two lists and a couple buttons. Take a look at the “List Box Mover UI” section of the post: How to Create a Many-to-Many Relationship for details on how to create this. The same technique described in that post will work in Visual Studio 2012.

Conclusion

We now have a functional Desktop application using Windows authentication. We also defined permission logic to limit certain screens to privileged users. We also customized some of these admin screen UIs to fit our needs.

Coming up next: Course Manager Sample Part 4 - Implementing the Workflow

-andy

Leave a Comment
  • Please add 7 and 3 and type the answer here:
  • Post
  • Thanks! great work!

  • I think that is is a tremendous effort from your end.

    It is a very promissing and efficient way to develop applications.

    Thanks

  • Great tutorial. I'm using visual studio 2012. I am stuck at the last part and can't seem to follow how to create the List box mover” UI. Can anyone help please?

    Thanks

Page 1 of 1 (3 items)