Signed-In Part 1 – Introduction (Andy Kung)

Before I show you all the wonderful things about LightSwitch, let me tell you a little story behind this post.

I’m a college football fan. During the football season, I’d attend the game watching events organized by the local alumni association. At every event, the organizer would pass around a sign-in sheet, asking for basic information like name, class year, email, etc. Later, the organizer would transcribe it into an Excel spreadsheet and report the attendance to the school. The information is crucial for funding and future event planning.

Mmm… paper, pencil, manual transcription? How can we modernize this process? Well, how about having the guests sign in via a mobile device at each event? We can save the data to the cloud. The organizer can later access and export the data. Sounds like a decent idea?

In this blog series, I’m going to show you how to build such app in just a couple of hours with LightSwitch! I’m going to called it… the Signed-In app.

I will assume that you know little about LightSwitch and try to keep everything simple and explanatory. To give you an idea of what you will accomplish at the end of the series. Here is the final app in action:

The organizer launches the app on a mobile device (phone or tablet) and logs in. The app shows a list of upcoming events.

The organizer can also add a new event.

The organizer taps on an event to open the sign-in sheet and hands the mobile device to a guest. The guest will fill out some information and complete the sign in process.

The organizer can tap on a signed in guest to view more information.

Ready? Let’s get started!

Set up your machine

First thing first. You will need the following installed on your machine:

• Visual Studio 2012 (Ultimate/Premium/Professional)
• Visual Studio 2012 Update 2 - CTP 4

Create a LightSwitch Project

Launch Visual Studio and create a new LightSwitch HTML Application project. You can choose either Visual Basic or Visual C#. We will be writing very little code in this walkthrough. Name the project Signed-In.

Create Tables

Before we proceed, let’s think about what kind of database tables we will need. We have many group events, and each group event has many guests. So let’s create a GroupEvent table and a Guest table.

In Visual Studio, click Create new table in the welcome screen.

Table Designer will appear with a new table. Name the table GroupEvent and add the following properties:

• Title (String)
• EventTime (Date Time)
• Location (String)
• Description (String)
• Uncheck Required box. We’ll make it an optional field.
• Set the Maximum Length property to 1000 in the Properties window, since descriptions are usually long.

Click New Table on the tool bar to add a new table.

Name the new table Guest and add the following properties:

• FirstName (String)
• LastName (String)
• ClassYear (String)
• Email (Email Address)
• Phone (Phone Number)
• WantNewsletter (Boolean)
• HowFound (String)
• In the Properties window, click Choice List. Enter some choice values and click OK.
  
• CheckinTime (DateTime)

Notice LightSwitch provides Types such as Email Address and Phone Number. Each provides a specialized visual in the client. For example, when Email Address is used, the UI will automatically checks for valid emails address so you don’t have to write that code!

Create Table Relationship

Now let’s indicate a one to many relationship between GroupEvent and Guest. Click Relationship button in the tool bar.

Select GroupEvent under the To column and make sure it looks like the following. The dialog spells it out for you at the bottom:

A ‘Guest’ must have a ‘GroupEvent’. A ‘GroupEvent’ can have many ‘Guest’ instances. Sounds about right. Click OK.

You will now see a line connecting the two tables indicating a one-to-many relationship. It also automatically handles foreign keys for you. Notice the Guest table now has a GroupEvent property.

The tables appear in the Solution Explorer. Here is where you will manage your assets.

What’s Next?

We’ve gotten the logistics taken care of. In the next post, we will go over creating the Upcoming Events screen and start designing some exciting UI!

-andy (Program Manager, LightSwitch Team)