When you buy this book you support this site! - Thank You for your support!

Sep 14

Written by: Michael Washington
9/14/2010 6:52 PM  RssIcon

To demonstrate LightSwitch functionality in a real world example, I have decided to create a Student information System. Eventually this will handle attendance and grades, but, for this first installment it will simply allow you to enroll students.

image

First, let us examine how a Student Information System usually works. A Course, and a Teacher make up a Section. A Student and a Section make up an Enrollment.

An Enrollment is the “heart” of a Student Information System. A Section, and an Enrollment are for a “period of time”. Grades, Attendance, and all other elements of the Student Information System, are tied to (associated with), Enrollments.

In this article we will build the system up to Enrollments.

You can get a copy of LightSwitch from: http://www.microsoft.com/visualstudio/en-us/lightswitch

Create The Project

image

Create a new Visual Studio project.

image

Call it LightSwitchStudentInformationSystem.

Set-up The Security

image

In the Solution Explorer, right-click on Properties and select Open.

image

Select Access Control, and select Use Forms authentication.

image

Also in Access Control, create TeacherAccess and AdministrativeAccess permissions, and check Granted for debug for all permissions.

The SecurityAdministration permission is built-in and allows a user to have access to the built-in User and Roles management screens.

The TeacherAccess and AdministrativeAccess permissions will be used by custom code (created in a later tutorial) to determine what menu items a user will have access to.

image

Hit F5 to run the application.

image

You will be able to create Roles and indicate what Permission each role has.

Create an Administrators role with “Administrative Access” and a Teacher role with “Teacher Access”.

image

You will also be able to create users and assign them to Roles.

image

Create a user called TestUser. When you are debugging you are always this user. We need to add the user to the user’s table, because later we will assign Students to this user.

Close the Silverlight application, and return to Visual Studio.

Create The Tables

image

In the Solution Explorer, right-click on Data Sources and select Add Table.

image

Create a table called Subject (you click on the title at the top of the table and type to change the name), with the schema you see above.

image

Create a table called Course with the schema you see above.

Click on the Relationship button.

image

Set the criteria you see above and click OK.

image

You will see a Subject field added to the Course table that associates Course with Subject.

LightSwitch will maintain data integrity, and not allow us to delete a Subject that has associated Courses.

image

Create a table called Teacher with the schema you see above.

image

Create a table called Section with the schema you see above.

image

Click on the Relationship button.

image

Set the criteria you see above and click OK.

image

Click on the Relationship button.

image

Set the criteria you see above and click OK.

image

Click on the Computed Property button.

image

Call the field SectionDisplay and give it the Type of String.

image

In the Properties window, click on the Edit Method link.

image

Enter the following code:

 

if ((this.Course != null) && (StartDate != null) && (Teacher != null))
{
    // Set result to the desired field value
    result = String.Format("{0} ({1}) [{2} - {3}]", Course.CourseName, Teacher.UserName,
        StartDate.ToShortDateString(), ((StopDate.HasValue) ? StopDate.Value.ToShortDateString() : ""));
}

 

Save the code and close the code window (very important, otherwise you will get an error when you try to run the application).

image

Click on the name of the Section table.

image

In the Properties for the table, set SectionDisplay as the Summary Property.

We do this because when we create the Screens to display the data, we want this field to be used whenever there is a list that is only able to display one field for the table (usually a selection list).

image

Create a table called Student with the schema you see above.

image

Create a table called Enrollment with the schema you see above.

image

Click on the Relationship button.

image

Set the criteria you see above and click OK.

image

Click on the Relationship button.

image

Set the criteria you see above and click OK.

image

Click on the Computed Property button.

image

Call the field EnrollmentDisplay and give it the Type of String.

image

In the Properties window, click on the Edit Method link.

image

Enter the following code:

 

if ((Student != null) && (Section != null) && (StartDate != null))
{
	// Set result to the desired field value
	result = String.Format("{0} ({1}) [{2} {3}]", Student.DisplayName,
	this.Section.Teacher.UserName,
	Section.Course.CourseName, StartDate.ToShortDateString());
}

 

Save the code and close the code window.

image

Click on the name of the Enrollment table.

image

In the Properties for the table, set EnrollmentDisplay as the Summary Property.

image

Next, click on StartDate and then click “Include in Unique Index”. Repeat the steps for the Section and Student fields.

The reason we do this, is to prevent a duplicate enrollment. Normally a primary key would be set on the database table to prevent data from being saved that would violate business rules (a student cannot have two enrollments in the same section that start on the same day).

With LightSwitch, you simply add the fields, to the Unique Index, that should not be duplicated.

image

Save and Build Solution.

Create Screens

image

In the Solution Explorer, right-click on Screens and select Add Screen…

image

Select Editable Grid Screen, and select Students for Screen Data, and click OK.

image

Select Editable Grid Screen, and select Teachers for Screen Data, and click OK.

image

Select List and Details Screen, and select Subjects for Screen Data.

Select Subject Details and Subject Courses for Additional Data to Include, and click OK.

image

Select List and Details Screen, and select Courses for Screen Data.

Select Course Details and Course Sections for Additional Data to Include, and click OK.

image

Select List and Details Screen, and select Sections for Screen Data.

Select Section Details and Section Enrollments for Additional Data to Include, and click OK.

image

Your Solution Explorer should resemble the image above.

Enter Data

image

Hit F5 to run the application.

image

Enter some Students.

image

Remember, you will need to click the Save button in the upper left-hand corner to save the data.

image

Enter Teachers by using the user name.

Ensure you create a Teacher named TestUser (you will need it later).

image

Enter Subjects.

image

Enter Courses. Notice you will be able to use the button to select a Subject.

image

Enter Sections. Notice you will be able to use the button to select a Course and a Teacher.

image

On the Section screen, you will be able to enter Enrollments.

image

You will be able to select a Student using the button.

Create enrollments for TestUser that begin before the current date (you will need them later).

Note: You will notice that it is possible to create an Enrollment that does not match the valid dates for the Section. We will show how you can add code to prevent this in a future article in this series. However, with LightSwitch you never HAVE to write code, so it is an option to simply enter only valid data.

Home Page To Show Teachers Their Currently Enrolled Students

As the final task for this tutorial, we will create a Home Page for Teachers that shows them the students that are currently enrolled in their sections.

See the tutorial: A LightSwitch Home Page for instructions on creating a Home Page that shows the Name of the current user, and how to set the screen as the Startup Screen.

image

When you make the changes, and you run the application, it should look like the image above.

image

In the screen designer, click the Add Data Item… button.

image

Select Queries then Enrollments (SelectAll).

image

Select Edit Query next to EnrollmentCollection.

image

The Edit Query screen will show.

image

Create a filter for the StartDate.

Select Global for the Value Type.

image

This will allow you to select Today for the value.

image

Continue to add conditions to the filter as seen above.

When you add the criteria for Teacher, you will be able to navigate to it.

image

Select Parameter.

image

Select Add New…

image

Enter Teacher for the Parameter name.

image

Click on Back to HomePage, to return to the screen designer.

image

Click on the Teacher parameter.

image

In the Properties, select Name for the Parameter Value.

image

You will see a line connecting the Teacher parameter to the Name.

image

Add the EnrolmentCollection to the screen.

image

It will add it as a DataGrid, click on it and change it to a List.

image

Right-Click on the Command Bar and select delete. The Command Bar section will still show, but all the buttons inside it will be deleted.

image

When you run the application it will show the currently enrolled students for the Teacher.

You can download the source code here:

http://silverlight.adefwebserver.com/files/LightSwitch/LightSwitchStudentInformationSystem_Part1.zip 

 

The LightSwitch Student Information System Series

44 comment(s) so far...


Gravatar

Re: LightSwitch Student Information System

You are a teacher of first-class Thank you for your wonderful work

By anwar on   9/15/2010 4:30 AM
Gravatar

Re: LightSwitch Student Information System

Very good, and I even liked the intro graphic - Your getting artistic! :-)

I was over the moon until I saw you write a little bit of code, even though you state you NEVER have to write code??? Which is lucky with your spelling! "Dsiplay Name"??? LOL (About half way down mate) - Anywag, great stuff, keep it up!!!

By Alan Beasley on   9/15/2010 4:33 AM
Gravatar

Re: LightSwitch Student Information System

@anwar - Thank you for the kind words.

By Michael Washington on   9/15/2010 4:32 AM
Gravatar

Re: LightSwitch Student Information System

@Alan Beasley - You like that diagram? Only took me 2 hours... Yeah that 'Dsiplay' thing :) It's like when the "Masters" always have something about their painting that is not correct so as not to insult the Gods... :)

By Michael Washington on   9/15/2010 4:34 AM
Gravatar

Re: LightSwitch Student Information System

LOL - I'll believe you! the Gods wouldn't!!!

I've only just seen that I wrote "Anywag" LOL - I didn't do that on purpose either...
Tell you what, I'll be the pot, you be the kettle! :-)

By Alan Beasley on   9/15/2010 5:10 AM
Gravatar

Re: LightSwitch Student Information System

@Alan Beasley - Anywag? Thats not how you spell that ? :)

By Michael Washington on   9/15/2010 5:28 AM
Gravatar

Re: LightSwitch Student Information System

What Anwar said.

Put this where it can be voted on. It'll be #1 with a bullet.

By Richard Waddell on   9/15/2010 6:05 PM
Gravatar

Re: LightSwitch Student Information System

This is exactly want all programmers in the companies and institutions
I mean Light Switch is required exactly
Light Switch = quality and implementation of all the tasks + little effort + time wasted little
Also I do not forget the presence of top trainers like Mr. Washington
THank you so much

By anwar on   9/17/2010 5:45 PM
Gravatar

Re: LightSwitch Student Information System

Michael thanks for posting this writeup. One question - there seems to be a disconnect between the built in Administrator Users table and the UserName string property of the Teachers table. Maybe that will be handled in some later extension of this tutorial?

What I mean is that the administrative section Users table that vsls created for us seems to have a matching column name (User Name/UserName) to the column in the Teachers table. The values are in common too. I see that one cannot create a relationship between the built in Administrative Users table, and the Teachers table that one creates in this tutorial (or at least that the administration Users table is not available in the Teacher's table Add Relationship dialog.

I know you didn't get into useing user/role at all in this tutorial; but assuming that the Users table is supposed to tie in to the Teachers table, and that teachers are meant to log in to the app and use it, it seems kind of funny that one can't relate the tables. Maybe there is something on this in the vsls developer center videos.

By MichaelS on   9/19/2010 4:49 PM
Gravatar

Re: LightSwitch Student Information System

@MichaelS - I will show how you can limit access and only show records relating to a Teacher without needing to make a direct association with the tables in part 3 (in a few days).

By Michael Washington on   9/19/2010 4:49 PM
Gravatar

Re: LightSwitch Student Information System

the code Student.DsiplayName, should be Student.DisplayName in enrollmentdisplay.

By tom higgins on   9/20/2010 5:58 AM
Gravatar

Re: LightSwitch Student Information System

@tom higgins - I was consistant. the code does work. That is the actual property name.

By Michael Washington on   9/20/2010 5:58 AM
Gravatar

Re: LightSwitch Student Information System

Hi,

Thanks for the lovely walkthrough. I have a doubt though. When i created the project and executed after setting up the "TeachersAccess" and "AdministratorsAccess" in the project properties, i dont see the "Administration" menu as displayed in your screenshot. Can you please help?

Thanks,
Magesh

By Magesh on   9/23/2010 12:44 PM
Gravatar

Re: LightSwitch Student Information System

@Magesh - You have to click Granted for debug for SecurityAdministration in Access Control

By Michael Washington on   9/23/2010 12:45 PM
Gravatar

Re: LightSwitch Student Information System

Great stuff.

I had one question, however. I noted on the screen where the relationship is implemented, the graphical convention for showing one-to-many (1 to infinitysymbol) is exactly the opposite of the convention I was accustomed to in over 25 years of work as a data modeler/architect. The way I was taught, the 1 goes to the end of the relationship line connected to the singleton occurrence and the infinitysymbol (or crows feet, etcf) is displayed on the opposite end (where the "many" collection is depicted). This convention is used in SQL Server (msdn.microsoft.com/en-us/library/Aa224825.erdiag1(l=en-us,v=SQL.80).jpg), VS 2010 EDM ("1-*"), VS 2010 DB Diagrams, SSMS DB Diagrams, Access, TOAD, and just about any other database diagramming tool out there.

Just curious - is MS trying to set a new convention? It can be visually confusing.

By Robby on   9/24/2010 4:14 PM
Gravatar

Re: LightSwitch Student Information System

@Robby - I am unsure. You will want to post a question on the LightSwitch forums social.msdn.microsoft.com/Forums/en-US/lightswitchgeneral/threads

By Michael Washington on   9/24/2010 4:16 PM
Gravatar

Re: LightSwitch Student Information System

Re Robby's Question

I don't see any contradiction in the use of cardinality symbols. For example, Enrollment sits between Section and Student. Its function is to support the M-M relationship between Section and Student; each entry in Enrollment enrolls one Student in one Section. So the Enrollment entity is associated with 1 Section and 1 Student (as shown on the diagram).

By bill burrows on   10/11/2010 3:24 PM
Gravatar

Re: LightSwitch Student Information System

Congratulations for your articles.
Would it be possible to make a table's field to accept only NON EXISTING entries. I mean, the field City of a table holding the cities to reject all the existing entries and return the CityID of the existing entry instead of a newly inserted record's id?
I hope you do understand what I am talkin about.

By NAngel on   10/12/2010 7:16 AM
Gravatar

Re: LightSwitch Student Information System

@NAngel - In part 2 (lightswitch.adefwebserver.com/Blog/tabid/61/EntryId/7/LightSwitch-Student-Information-System-Part-2-Business-Rules-and-Screen-Permissions.aspx) I show how I prevent someone from adding duplicate attendance. I belive that is the sort of thing that you are asking about.

By Michael Washington on   10/12/2010 7:44 AM
Gravatar

Re: LightSwitch Student Information System

@Chris - That problem sounds like a LightSwitch framework issue, you will want to post a question on the LightSwitch forums social.msdn.microsoft.com/Forums/en-US/lightswitchgeneral/threads

By Michael Washington on   10/24/2010 8:27 AM
Gravatar

Re: LightSwitch Student Information System

Re: Robby's Question. I think it's a case where the visual presentation is a little confusing and overabundant. The infinity sign is next to the Section and Student rows in Enrollment, but they really apply to the entire Enrollment. Then there's 'Enrollments' embedded in the Student and Section icons - Enrollment is represented as a collection twice, once in the little icon and once implied by the infinity sign. I'm not sure that showing both is useful. For me it was confusing at first. But - great article. Lightsiwthc is very impressive.

By Richard Waddell on   3/24/2011 7:29 PM
Gravatar

Re: LightSwitch Student Information System

@Richard Waddell - I agree, In a real app (not a tutorial) I would clean the UI layout up a lot.

By Michael Washington on   3/24/2011 7:30 PM
Gravatar

Re: LightSwitch Student Information System

This is great information. I am wondering about the database.
Where is the data stored. Once you create the tables. since u did not connected to any database.

By Mete on   3/25/2011 4:20 AM
Gravatar

Re: LightSwitch Student Information System

@Mete - The data is stored in a local SQ Express Database until you deploy the application.

By Michael Washington on   3/25/2011 4:21 AM
Gravatar

Re: LightSwitch Student Information System

Hi,

Thank you, excellent article! Is there any chance that you could provide a download for the source code?

Thank you,
Adrian

By Adrian Maty on   3/28/2011 12:03 PM
Gravatar

Re: LightSwitch Student Information System

@Adrian Maty - I plan to redo the code in Beta 2 and post the code.

By Michael Washington on   3/28/2011 12:04 PM
Gravatar

Re: LightSwitch Student Information System

This tutorial has been updated to Beta2

By Michael Washington on   4/2/2011 10:21 AM
Gravatar

Re: LightSwitch Student Information System

Thaks for the gr8 post Michael.
Could you also please explain , why is Lightswitch and what is it replacing with ?
can this Light switch be integrated with any other Microsoft technoliges /applications ?
I am trying to understand , where will this Lightswitch fit into in Reality .Thanks v much .

By amsullu on   6/7/2011 7:09 AM
Gravatar

Re: LightSwitch Student Information System

@amsullu - I would simply describe LightSwitch as "A Framework around EF / WCF RIA / Silverlight to create Silverlight applications".

By Michael Washington on   6/7/2011 7:54 AM
Gravatar

Re: LightSwitch Student Information System

Hello Michael and thanks for your post.

I need to write a student immunization tracking system. My big concern is that if I develope it using LightSwitch will there be obsticles that will make it impossible to get around. I would hate to have it 80% complete and then realize that I have to go to some other development methodology.

Thanks

By fishy on   6/10/2011 11:08 AM
Gravatar

Re: LightSwitch Student Information System

@fishy - I understand your concern, However, Silverlight Custom Controls are the answer to any limitation I encounter with LightSwitch.

By Michael Washington on   6/10/2011 11:41 AM
Gravatar

Re: LightSwitch Student Information System

Thanks for the quick response.

Can I determine at runtime if they are running out-of-browser and enable things like exporting to excel?

Thanks

By fishy on   6/11/2011 5:50 AM
Gravatar

Re: LightSwitch Student Information System

Another question: If all of my data access is sql server is there any advantage of using wcf ria services?

By fishy on   6/11/2011 5:54 AM
Gravatar

Re: LightSwitch Student Information System

@fishy - Please post questions to the forums, thanks :)

By Michael Washington on   6/11/2011 5:57 AM
Gravatar

Re: LightSwitch Student Information System

I hope LightSwitch will not be killed by Microsoft. This company has just hit another gold mine again. If you only knew how long I have been waiting to develop an application and then be able to deploy it into the cloud for subscription. May God bless Microsoft and her employees! I'm only worried about the cost of development tool for LightSwitch.

By Gideon on   7/25/2011 11:13 AM
Gravatar

Re: LightSwitch Student Information System

My comment is not only specific to this one. I'm not a programmer, at all. I started learning Access last year because spreadsheets weren't cutting it for me any more - and then I discovered Lightswitch which was Beta then, and now I'm an absolute fan.

So my understanding is that I'm exactly the person that Lightswitch was aimed at - someone who is trying to do business stuff, and needs to churn out an LOB app in a week, to get my work done better.

But I have a problem. I don't have a lot of time to learn programming, and I've started learning a bit of VB to get the most important things done I needed. Now I'm beginning to try to learn some more complex things (you know, the more you can do, the more you find you need to do), and most of the blogs I find give only C# examples. Needless to say ... that's where I get lost. I can hardly speak VB, let alone translate C# into VB, and for all the work I'd done until now, I selected VB as the language. Redoing all of that is a rather uninviting thought.

So my question is, whether it would be too much to ask to also put the VB code in the examples? I'm sure I'm not the only one in this position, and Lightswitch does offer VB as the first option when you have to choose a language.

If would be greatly appreciated!

By Ashton on   10/13/2011 4:26 AM
Gravatar

Re: LightSwitch Student Information System

@Ashton - Yes it is true that LightSwitch has a target market of programmers who prefer VB. However, Lightswitch is also a great product for Silverlight programmers and they mostly use C#. However, the main reason is that it is a lot of work to provide, and test the code in two languages. If a blogger wants to post articles here using VB that would be welcome. Perhaps in the future that blogger could be you :)

By Michael Washington on   10/13/2011 4:31 AM
Gravatar

Re: LightSwitch Student Information System

where is the code mike :-)

By cemre on   12/20/2011 12:21 PM
Gravatar

Re: LightSwitch Student Information System

@cemre - There is a link at the end of the article.

By Michael Washington on   12/20/2011 12:47 PM
Gravatar

Re: LightSwitch Student Information System

Great work & thanks for your work. I had recently made a record system with a few changes in it, the problem is that my published software is working on my computer but at any other computer it fails to work. Sometimes the app doesn't run at all and once it gave message of Connection to database failed. Please, kindly help me out. Thanks

By Murtaza on   5/5/2012 8:39 PM
Gravatar

Re: LightSwitch Student Information System

Hmmm, what is the format of the password for adding a user? I usually use customer user tables and have a password that is not as strict as the one for an ASPNETDB. Loved your OnlineOrdering tutorial - am now attacking the SIS one but keep getting error saying password is not strict enough! I'll keep searching for the format on google.com and msn.com!

By CyclingFoodmanPA on   6/27/2012 7:17 AM
Gravatar

Re: LightSwitch Student Information System

Ok, I found the format for the password at: http://msdn.microsoft.com/en-us/library/ff649314.aspx in case anyone else has a problem. I was able to add the users and when I was adding them, I saw the * in the form for the passwords. However, when I go to edit a user, I am not seeing the * for the password and the password confirmation. Any ideas? If I would have created the user screen, I would have created a textbox as a password type (from my Silverlight days, and even in html).

By CyclingFoodmanPA on   6/27/2012 7:34 AM
Gravatar

Re: LightSwitch Student Information System

Hi, Please can you tell me how you set the filter:

Or StopDate is Null

?? i cant seem to do this?

By oli on   6/28/2012 5:09 AM
Gravatar

Re: LightSwitch Student Information System

Very nice tutorial. Keep sharing this valuable information.

By Daniel Ford on   2/20/2013 7:58 PM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation