Designing a multi-criteria filter in a Data List

With Justinmind, you can simulate complex searches on a Data List based on several criteria.

UI prototypes: simulate searches (multi-criteria)

To design a multi-criteria filter in your Data List, follow these steps: 

  1. In a web prototype, go to the Data Masters palette 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”.
    • Data-driven-prototyping-Simulate-complex-searches-on-data-lists
  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. 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.
    • Data-driven-prototyping-Simulate-complex-searches-on-data-tables
  9. Select the “Search” Button and go to the Events palette.
    • Add an “On Click” + “Set Value” event, select the entire Data List and click “Calculate”.
    • Then build the expression displayed in the image below, by dragging – in this order – the “Filter” function, the Data Master, the “status” field from the Data Master palette, the text function HAS and the ‘Status’ field in the Screens tab to the expression builder:
    • Data-driven-prototyping-Simulate-complex-searches-on-data-lists-expression
  10. Click “OK” twice. Then click on the gear icon next to the word “do” in Events palette, 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:
    • Data-driven-prototyping-Simulate-complex-searches-on-data-table-expression
    • 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” 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.

And that’s all. Click “Simulate” to interact with your prototype.

You can download our example here.