Welcome to the last installment of the Signed-In app walkthrough! In case you missed the previous posts:
- Signed-In Part 1 – Introduction
- Signed-In Part 2 – Upcoming Events Screen
- Signed-In Part 3 – Guest List Screen
- Signed-In Part 4 – Authentication and Branding
We have built a cross-platform mobile app in the 4 part series. There are 2 more topics I’d like to cover with the Signed-In app: creating a search screen and dynamic UI.
Create a Search Screen
It is fairly common to have a search box on a list, allowing the user to quickly filter a list of items. Let’s see how we can add a search box to our Upcoming Events screen.
Open Upcoming Events screen. Click Edit Query next to the GroupEvents data.
It will take us to the Screen Query Designer. In Part 2, we added a filter to show only upcoming events. Now, we need to add another filter and tie that to a textbox on the screen. In other words, we need a filter that says “show me events that contain the search text in the event title.”
Click Add Filter to create a new And filter. Select Title and contains. We need to wire it up with a query parameter, so select Parameter.
Select Add New to create a new parameter.
New query parameter called Title will show up at the bottom of the designer.
Select the newly created query parameter, check Is Optional in the Properties window. This indicates that if the user does not type anything in the search box, we will show all the upcoming events.
Go back to Upcoming Events screen by clicking Back button.
You will see the query parameter Title as part of the GroupEvents data.
Now, we need to wire up a textbox to the query parameter. Drag the query parameter to the screen content tree, right above the tile list. It will add a UI element using Text control.
Since we want it to be a search box, change the control from Text to Text Box.
Press F5 and run the application. Try the search functionality we just implemented.
Return to Visual Studio by closing the browser.
There is another trick here. We can hide the search box’s title and add a watermark instead. This will save us some space as well. Select Title on the screen content tree.
In Properties window, set Placeholder to Search. This will create a watermark in the textbox. Also, change Label Position to None. This will hide the label Title.
The search box will now look like this:
Dynamically Show and Hide UI
Another common scenario is to show and hide a piece of UI based on some other values on the screen. For example, if a guest selects “Other” for the question “How did you hear about this event,” we’d like to get more information by showing an additional text field in the dialog.
First, we need to add an optional field in the Guest table to capture this data. Open Guest table in the designer and add a Note field. Uncheck Required box to make it an optional field. In Properties window, set Maximum Length to 500.
Open Sign In screen. Drag and drop Note from Guest data to the content tree. This will create a textbox for Note in the dialog. Change the control from Text Box to Text Area.
Select Note node. Uncheck Is Visible in Properties window. This will hide the text area by default.
Since we want to show the text area only when HowFound field is set to Other, let’s write some logic for that.
Select the Screen node. Open the Write Code dropdown in the toolbar and select created.
Write the following code in the code editor.
myapp.SignIn.created = function (screen) {
// Write code here.
screen.Guest.addChangeListener("HowFound", function (e) {
var contentItem = screen.findContentItem("Guest_Note");
contentItem.isVisible = (screen.Guest.HowFound == "Other");
});
};
Our logic says that when the HowFound field is changed, check its value. If the value is Other, show the text area, otherwise hide it.
If we run the app now, the Note text area will hide and show based on what the guest choses in the previous question.
Conclusion
This concludes our Signed-In series. If you have other topics in mind, please let us know. We will do our best to cover them in future posts. Thank you very much for following!
-andy (Program Manager, LightSwitch Team)