Signed-In Part 1 – Introduction (Andy Kung)

Signed-In Part 1 – Introduction (Andy Kung)

Rate This
  • Comments 9

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.

clip_image002

The organizer can also add a new event.

clip_image004

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.

image

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

image

Ready? Let’s get started!

Set up your machine

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

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.

clip_image010

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.

clip_image012

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.

clip_image013

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

clip_image015

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.
      clip_image016
  • CheckinTime (DateTime)

clip_image017

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.

clip_image018

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.

clip_image019

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.

clip_image020

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

clip_image021

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)

Go to next article --> Signed-In Part 2 – Upcoming Events Screen

Leave a Comment
  • Please add 4 and 1 and type the answer here:
  • Post
  • Nice explanation Andy!! Really Cool!!

    Thanks

  • Andy,

    Just love it!

    Looking forward to the rest of the series.

    Thanks for sharing

    paul.

  • Keep posting!!!

    Thanks!!!

  • Don't you love how it is fast and easy to create the app but it takes two blog post to document it :)

  • Hi Andy

    Many thanks for taking the time to share your knowledge and ideas.

    Please keep it up!

    Thanks and regards, Mark.

  • Nice one Andy!

  • Great work. I appreciate you taking the time to document and explain the development process. A great one-to-many relationship. Cheers.

  • So nice.

    thanks for sharing

  • Andy - Thanks for this effort, I am hooked. - I really like how you laid out all the screens at the start. I now have the "end result" - so now I GOT to do this..... Thank you again for your EDU/411 on the subject. Your time was NOT wasted. - Brent ( a new LS Dev )

Page 1 of 1 (9 items)