Learn how to prototype web and mobile apps

How to simulate a complex search on a Data List in your web prototypes (multi-criteria)

In this tutorial you’ll learn how to simulate a complex search based on several criteria on a Data List.

You can download the below example here.

UI prototypes: simulate searches (multi-criteria)

1) In a web prototype, go to the Data Masters tab and create a new Data Master.

2) Name it ‘customer’ and create three fields: customer, status and reason.

3) Select the ‘category’ type for the ‘status’ and ‘reason’ fields.

4) Select the ‘status’ field (by clicking on the gray circle in the far-left column) and click on the gear button. In the pop-up, add the values ‘passed’, ‘failed’, ‘rejected’ and select the “Radio button list” as the field’s default type. Click OK.

5) Now select the ‘reason’ field and do the same to add the values ‘original’, ‘cancellation’, ‘correction’ and ‘replacement’. In the same dialog, select the the ‘List box’ as the default type for the ‘Reason’ fields. Click OK.


6) Double-click on the Data Master you’ve just created and select the tab ‘View and edit records’. Write some example data in the ‘customer’ field and choose an option from each drop down for the ‘status’ and ‘reason’ fields. Click OK.

7) Drag a Data List widget to the screen. Name it ‘customer’ and select the Data Master and all its fields. 

8) As we saw in a previous tutorial, now we can simply drag the ‘Status’ field and the ‘Reason’ field from the Data Master table to the canvas to get a form. Drag two Buttons as well and place and name them as you can see in the example.


9) Select the ‘Search’ Button and go to the events tab. Add an ‘On click’ + ‘Set value’ event, select the entire Data List and click on ‘Calculate’. Then build the expression displayed in the image below, by dragging – in this order – the FILTER data function, the Data Master, the ‘Status’ field from the Data Master tab, the text function HAS and the ‘Status’ field in the Screens tab to the expression builder:


10) Click OK twice. Then click on the gear icon next to the word ‘do’ in Events tab, select ‘add action’, and add another ‘Set value’ event. Select the entire Data List again and click on ‘Calculate’ and build the expression displayed below:


This time, after the FILTER function, we dragged the Data List instead of the Data Master (in the ‘Screen’ tab). This is to filter the results of the first filter. In this way it’s possible to add more and more search criteria. Notice also that in both cases we used the ‘HAS’ text function instead of the ‘equals’. That makes the search more flexible and, if there isn’t any match for the first criteria, then the next criteria will be applied. Click OK twice.

11) Now select the ‘clear’ button. Go to events and add an ‘On click’ + ‘Set value’ event. Select the entire Data List and click OK. That will show again all the records every time you click the ‘clear’ button.

That’s all! You can now click on ‘Simulate’ and enjoy!

Next tutorial > Simulate a real-time predictive search in your interactive prototypes


  1. Cristianne Bastos

    August 31, 2015 at 7:37 pm

    the way that is written is not working.
    “Go to events and push the ‘add event’ button. Select ‘set value’, then select the Data List and leave the ‘value is’ field empty. Press ok. That will empty the values in the Data List every time you press the clear button.”

    Worked for me like this:
    Go to events and push the ‘add event’ button. Select ‘set value’, then select the Data List and and push the calculator button. Select the DataMaster and press ok twice. That will empty the values in the Data List every time you press the clear button.

    Is it my mistake?

    • Danielle Schneider

      September 3, 2015 at 2:18 am

      Hi Christianne,

      That is one way to accomplish that. We’re currently working on rewriting some tutorials that have become slightly outdated due to recent updates, so stay posted for new and improved tutorials.