Signed-In Part 5 – Search Screen and Dynamic UI (Andy Kung)

Welcome to the last installment of the Signed-In app walkthrough! In case you missed the previous posts:

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.

clip_image001

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.

clip_image003

Select Add New to create a new parameter.

clip_image004

New query parameter called Title will show up at the bottom of the designer.

clip_image005

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.

clip_image006

Go back to Upcoming Events screen by clicking Back button.

clip_image007

You will see the query parameter Title as part of the GroupEvents data.

clip_image008

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.

clip_image009

Since we want it to be a search box, change the control from Text to Text Box.

clip_image010

Press F5 and run the application. Try the search functionality we just implemented.

clip_image012

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.

clip_image013

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.

clip_image014

The search box will now look like this:

clip_image015

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.

clip_image016

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.

clip_image018

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.

clip_image019

Select Note node. Uncheck Is Visible in Properties window. This will hide the text area by default.

clip_image020

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.

clip_image021

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.

clip_image023

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)