Signed-In Part 3 – Guest List Screen (Andy Kung)

Signed-In Part 3 – Guest List Screen (Andy Kung)

Rate This
  • Comments 10

Welcome to part 3 of the Signed-In walkthrough! So far, we’ve got a mobile app that displays a list of upcoming events. It also allows you to add new events to the list.

If you missed the previous posts you can read them here:

In this post, we will build the guest list that allows guest to sign in to an event.

Create a Sign-in Screen

From our Upcoming Events screen, we’d like to go to the sign-in screen when we tap on an event.

Open UpcomingEvents screen in Screen Designer. Select Group Events node.

clip_image001

In Properties window, click Item Tap link. It currently indicates that there is None associated with the Item Tap gesture.

clip_image002

The Edit ItemTap Action dialog will appear. This is very similar to adding a button on the screen like we did earlier. Except this time, we choose viewSelected. Click OK.

clip_image003

Why not editSelected you ask? Because we do not want to edit the event itself (like updating the event title, description, etc). Instead, we’d like to view the Guests associated with the event.

That’s why in the Add New Screen dialog, we also check and include GroupEvent Guests. Name the new screen Guestlist. Click OK.

clip_image005

You’ll be taken to the newly created screen.

clip_image007

The screen shows the details about the event as well as the guest list. Since all we need is the guest list, let’s delete the Details node.

clip_image008

Create a Sign-In dialog

Now we need a button for signing in. In other words, we need a button to add a guest to the list. Sounds familiar? You already know how to do this!

Expand Command Bar node and click Add.

clip_image009

Choose addAndEditNew under Guests and click OK.

clip_image010

Name the new screen SignIn and click OK.

clip_image012

In the new screen, delete Group Event node, since we already know which event the guest list is associated with.

clip_image013

Move everything into one column like we did for Add New event dialog.

clip_image014

Let’s also change Display Name property for Want Newsletter and How Found to something more descriptive, such as:

  • Would you like to receive our newsletter?
  • How did you hear about this event?

Go back to Guestlist screen. Change the Display Name of the Add Guest button to Sign In. Choose an icon you like.

Press F5 to run the application. Select an event and sign yourself in!

image

Return to Visual Studio by closing the browser.

Customize the Guestlist

The guest list only shows FirstName. This is because the list item is using a Summary control. As we mentioned before, Summary control simply displays the first text property of an entry.

clip_image017

Change the control of Guest node from Summary to Columns Layout. Delete everything but First Name and Last Name.

image 

If we run the application, the Guestlist screen now shows the full name of the guest.

image

Create a Popup

How would the organizer find out more details about a guest? Let’s make it show more info when you tap on a guest.

You have probably noticed a Popups node in the screen content tree. That’s what we will use. The biggest difference between a popup and a dialog is that a popup does not have the built-in Save/Cancel buttons. It is really just a simple… well, popup. Therefore it is typically used to show simple information.

image

Drag and drop Selected Item from the Guests data member to the Popups node on the content tree.

image

The fields in the popup are currently using editable controls like textboxes. We’d like to make it non-editable. We can change the control one by one. But there is a shortcut! Select Selected Item node on the content tree. In Properties window, check Use Read-only Controls property. It will automatically flips everything under the group node to use non-editable controls.

clip_image023

One last thing, we need to indicate when to show the popup. Select Guests node.

image

In Properties window, click Item Tap action.

clip_image025

The Edit ItemTap Action dialog will appear. Click OK to accept the default. We are indicating to show the popup called Selected Item when we tap on the list item.

clip_image026

Press F5 and try it out! Tapping on a guest will show more information in a popup.

image

We have a fully functional app now! Have you noticed that we have not written a single line of code??? I mean… crazy right?

Let’s keep improving it. Are you ready for some more advanced scenarios?

Write Default Logic

One thing you may have noticed is that in the Sign In dialog, you have to manually enter the Checkin Time. That’s a bit odd. Let’s remove it from the dialog and set the current time as default.

Open SignIn screen. Delete Checkin Time from the screen content tree.

clip_image030

We’re ready to write some default logic. Open Guests in table designer. Click HTMLClient tab at the bottom. This allows you to write JavaScript-based entity code that can run in the HTMLClient (browser) instead of using C# or VB which can only execute on the server.

image

Open Write Code dropdown menu in the tool bar. Select created.

image

The code editor will appear. Write the following JavaScript code:

myapp.Guest.created = function (entity) {    

    // Write code here.    

    entity.CheckinTime = new Date();    

    entity.WantNewsletter = true;    

};

 

 

If you sign in to an event again, you will not need to manually enter the time and you’re checked for receiving newsletter by default.

Write Dynamic Screen Title

Another thing we could improve is that all Guestlist screens have Guestlist as the title. Let’s make it something more descriptive.

Open Guestlist screen and select Guests tab node. Open Write Code dropdown menu from the tool bar. Select Guests_postRender.

image

In Code Editor, write the following JavaScript code:

myapp.Guestlist.Guests_postRender = function (element, contentItem) {

           // Write code here. 

    contentItem.screen.details.displayName = contentItem.value.GroupEvent.Title;

             };

You can think of contentItem as the visual element and contentItem.value is the data member behind the visual element.

The Guestlist screen now dynamically updates its title based on the event.

image

What’s Next?

Guess what? We have completed all the core functionalities of our Signed-In app! We can hand the app to a guest to sign in at an event.

Next time, I will show you how to enable authentication and brand your app!

-andy (Program Manager, LightSwitch Team)

Go to next article --> Signed-In Part 4 – Authentication and Branding

Leave a Comment
  • Please add 2 and 2 and type the answer here:
  • Post
  • Great series, Andy!  Looking forward to authentication bits.  Specifically how to allow guest access in a forms auth HTML Client.  Basically, I need to automatically logon users to a guest account using HTML Client.

  • Pretty cool series.  Appreciate the effort you've put in to it and look forward to the next installment(s)

  • Thank you, for this course.

    Please consider a facebook authentication as well in the next course, if not hard to implement

  • I my evaluation there are only two pieces still missing in this amazing html platform:

    1. Some way to retrieve the user name equivalente to application.user.name in desktopclient and,

    2. Some way to filter the lists or tile lists. A filter button that would show a filter dialog would do the job.

    Great job and I look forward to seeing the solution to the issues above soon!

  • Many thanks Andy. Cannot wait for the next instalment. It will be great if users can login from Twitter, Facebook etc and manage their credentials and account details.

  • I really enjoyed the "learning" comment of: "We’re ready to write some default logic. Open Guests in table designer. Click HTMLClient tab at the bottom. This allows you to write JavaScript-based entity code that can run in the HTMLClient (browser) instead of using C# or VB which can only execute on the server.----- Thanks

  • In Visual Studio 2013 (C# Html Client ) when i Click Write A Code>Guest_Created i Get The Following Code :

     partial void Guest_Created()

           {

           }

    i don't have Access to

      entity.CheckinTime

       entity.WantNewsletter  

    should go different way in vs 2013?

  • I also tried

    this.CheckinTime=new Date();

    this.WantNewsletter=true;

    i don't get  error but it is not working.

  • the problem solved , i had to check the Html Client then write the code , now the code works but i have issues with intelliSense , when i type entity. i get the error : intellisense was unable to determine an accurate completion list for this expression, ...

    the code works , but i don't have access to intellisense.

    also another issue with popup , when the popup opens it opens exactly on top of selected item , i mean it covers the selected item text , i cant see the item , because the popup open not beside it but exactly on top of the selected item.

    in your example it is opening beside the selected item title . is it anyway to change the location ? or it is vs2013 bug.checked with different browser , problem still exist.

    thank you .

  • got the issue with changing title , but maybe i am typing something wrong because of not having intelliSense.

Page 1 of 1 (10 items)