The easiest way to create modern business applications for the Cloud and Office 365
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:
LightSwitch Course Manager End-to-End Application (Visual Studio 2012)
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.
Under “Application Type” tab, make sure Desktop is selected (this is the default).
We can also specify a logo for the application. Under “General Properties” tab, select a logo image from your computer.
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.
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.
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.
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).
Now let’s create our first screen. Create a list-details screen on Students called “ManageStudents.”
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.
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)
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.
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.
Follow the same steps to add other raw data screens (with ViewAdminScreen permission):
List and Details
Courses (include Sections, CourseCategories)
Organize your screens to have this menu structure.
Use these screens to enter some sample data for students, instructors, categories, courses, and sections.
In the Course Manager sample project, we’ve also made some screen customizations to improve user experience. Here are the highlights:
In “Manage Students” screen, we’d like to:
In the screen designer, select Student’s Summary control (under the List control). Check “Show as Link” in the Properties.
In the screen designer, right click on “Student Details” node, select “Add Group” to add a group node.
Change the group node to use “Address Editor” control.
Now, drag the Street node and drop it in (STREET LINE 1). Repeat the drag-and-drop for City, State, and Zip.
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.”
Use the “Write Code” dropdown menu in the command bar. Select ManageStudents_Created.
<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
In “Manage Courses” screen, we’d like to:
Select the Description TextBox control and in the Sizing section of the properties window set the Lines to 5.
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.
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
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.
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?