Learn how to prototype web and mobile apps

How to simulate searches in a Data List in your web prototypes (single criteria)

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

You can see an example below and download it here.

Simulate searches in data-driven prototypes

To reproduce the example, follow the next steps:

1) In a new web prototype, drag an Input text field and a Button onto the canvas.

2) Create and populate a Data Master.

3) To have Data Master records displayed in a Data List, drag a Data List widget to the canvas and, from the pop-up dialog that will be displayed, name it and select the Data Master you’ve just created and all its fields.

Simulate data searches in UI prototypes: data list

4) Select the Button and go to the Events tab. Add an ‘On click’ + ‘Set Value’ event. Select the entire Data List as the component that will display the value, and click the Calculate button.

You must select the entire table and not just a cell or column: you’ll know that you did it correctly when the selected box groups the header and row together (it’s easier to navigate to it from the outline).

Simulate data searches in UI prototypes: events

5) In the expressions builder dialog, scroll down to the Data functions and drag the FILTER function to the expression. Now you’ll see two gaps in the function: the first one is for the source data you want to filter; the second is the rule that, applied to the filter, will define the records that will be displayed. In this case, in order to do a search that covers all the records in your example, click the Data Masters tab and move the Data Master into the first gap. Finally, from the Screens tab, drag the Input text field to the second gap.

Simulate data searches in UI prototypes: filter expression

6) Click OK twice.

And you’re done! Click on ‘Simulate’ and enjoy!

Next tutorial > Multi-criteria search on a Data List

One Comment

  1. Anna-Lena

    November 11, 2015 at 1:17 pm

    Hi! Is there any way we can influence search results? For example, that the search begins as soon as I start typing the third letter of a search phrase? Could it also show top search results? Thank you!