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

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

Rate This
  • Comments 15

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)

Leave a Comment
  • Please add 3 and 8 and type the answer here:
  • Post
  • This great little mini series has got me started, at last, using the HTML client.

    Great stuff Andy, thank you.

    (Should "Guest_Note" above be "Note"?)

  • @David - Thanks David! It is actually "Guest_Note". findContentItem takes the programmatic name of the element. In this case, "Guest_Note" is the programmatic name and "Note" is the display name. You can find them in Properties window.

  • It a nice series Andy. Just looking for couple of more details like: adding more icon symbols to show on command bar. Verifying user permissions to show or hide add button on command bar so that unauthorized user can’t perform that task or doesn’t see the screens. Is there a place to write app start code (which gets executes at server and/or client)? Something like Application.cs in Silverlight version (to track user agent details) or do we need to handle in home screen’s create method or global session start event? Customize layout to display logged-in user name on right hand top (header) or bottom left corner (footer). Do you recommend any tool to change msls-light.css (like theme roller)? I know too many questions, appreciate your time and thanks in advance.

  • What about the pagination? Is there a such element in Light Switch?

  • Hi Andy,

    I like your post but to complete it I tried to publish it to Windows Azure.

    When I browse to the published site I get: You do not have permission to view this directory or page. (HTTP-error 403)

    Can you tell me how to make it also work in the cloud?

    Thanks!

    KR Harmen

  • @Suneel -  check out these links:

    Changing the theme: blogs.msdn.com/.../signed-in-part-4-authentication-and-branding-andy-kung.aspx

    Adding the username: lightswitchhelpwebsite.com/.../Retrieving-The-Current-User-In-The-LightSwitch-HTML-Client.aspx

    Getting permissions to enable/disable controls: blogs.msdn.com/.../using-lightswitch-serverapplicationcontext-and-webapi-to-get-user-permissions.aspx

    @Geo - Paging is built-in to the list controls. As you swipe down the list, more items are loaded dynamically. You still control the #of records to retrieve in a page via the Screen Designer. See also: blogs.msdn.com/.../lightswitch-tips-amp-tricks-on-query-performance.aspx

    @Harmen - Since LS apps can now have multiple clients, when you publish your app, you'll need to navigate to the subfolder of the client you want to run. The folder is named the same as the client. i.e. http://mysite.com/HTMLClient

    HTH,

    -Beth

  • thanks for the article its really helpful and really enjoyed making it! ... please make more..!!

  • Nice tutorial.  Thanks!

    I did go thru the entire 1 thru 5, published up to Azure successfully, works great on desktop browsers.  But when testing on a Windows Phone 7 IE, every time I cancel a screen or for that matter saving a screen, like adding an event, the app takes me right back to the login screen.  Doesnt matter if I ck the remember me.  Anyone else seeing this issue?

  • Thanks, it works!

    KR Harmen

  • As soon as I added the search 'field' as outlined in steps above, IE10.006, Windows 8,  crashes. Removing the search field and all is well again. the search field works in Chrome and Firefox.

  • @delaneybill - sorry you're having trouble but I can't repro your issue. Can you please file a bug and let us know your system info? Are all search fields you create crashing IE? You might be able to just attach the VS debugger to IE and send us the crash dump in the bug. Here's where you should file bugs:

    connect.microsoft.com/VisualStudio

    Thanks,

    -Beth

  • Andy, can you show and hide a tab control in a similar fashion?

  • I've been working with LigthSwitch during last three months developing several solutions. I think it's a very useful tool. I've integrated LigthSwitch applications with SQL reporting services.

    My problem is:

    I have an application which works well locally when I use a WebBrowser Control to show the report inside the application, reports are in azure and there is no problems, the authentication form for azure is one of application screen and the reports in the same way, but when I publish the application in Azure I always received a message Out-of-Browser application...required elevated permissions in Internet Explorer. Could you help me with this problem?

  • thank you  really . i was really useful series.

  • Great article thanks.

    I've been wondering if it's possible to restrict some screens but not others with forms authentication? For example, I want to allow the search screen for anonymous access but request credentials for the other screens.

Page 1 of 1 (15 items)