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.
In Properties window, click Item Tap link. It currently indicates that there is None associated with the Item Tap gesture.
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.
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.
You’ll be taken to the newly created screen.
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.
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.
Choose addAndEditNew under Guests and click OK.
Name the new screen SignIn and click OK.
In the new screen, delete Group Event node, since we already know which event the guest list is associated with.
Move everything into one column like we did for Add New event dialog.
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!
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.
Change the control of Guest node from Summary to Columns Layout. Delete everything but First Name and Last Name.
If we run the application, the Guestlist screen now shows the full name of the guest.
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.
Drag and drop Selected Item from the Guests data member to the Popups node on the content tree.
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.
One last thing, we need to indicate when to show the popup. Select Guests node.
In Properties window, click Item Tap action.
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.
Press F5 and try it out! Tapping on a guest will show more information in a popup.
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.
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.
Open Write Code dropdown menu in the tool bar. Select created.
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.
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.
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)