Designing a multi-criteria filter in a Data List

With Justinmind, you can simulate complex, multi-criteria searches on a Data List.UI prototypes: simulate searches (multi-criteria)
To learn how, follow these steps:

  1. Go to the Data Masters palette and create a new Data Master.
  2. In the Data Master, create three fields. We named ours “customer”, “status”, and “reason”. Leave the ‘type’ as ‘text’ for the “customer” field and select the ‘category’ ‘type’ for the “status” and “reason” fields.
  3. Select the “status” field (click on the gray circle in the far-left column) and click on the gear icon. In the pop-up, add the values “passed”, “failed”, “rejected” and select the “Radio button list” as the field’s default type.Data-driven-prototyping-Simulate-complex-searches-on-data-lists
  4. Repeat this last step for the “reason” field, but add the values “original”, “cancellation”, “correction” and “replacement”. In the same dialog, select the the “List box” as the default type for the “Reason” field.
  5. 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.
  6. Drag a Data List widget to the Canvas and select the Data Master you created and all its fields.
  7. Look back to the Data Masters palette, and expand the field list (click on the ‘arrow’ icon next to the Data Master name). Drag “status” field to the Canvas, which will create a search form. Drag the “reason” field to the Canvas to create another search form.
  8. Drag two Buttons to the Canvas. Name one “Search”, and the other “Clear”.Data-driven-prototyping-Simulate-complex-searches-on-data-tables
  9. Select the “Search” Button and add an “On Click” + “Set Value” event, selecting the entire Data List as the target of the action. For the value, click “Calculated” and then click “Add expression”.
  10. In the Calculated Expression builder that appears, follow these steps to create the expression:

    1. Drag the “Filter” function into the open space in the expression.
    2. Click on the Data Masters tab in the Calculated Expression builder. Drag the Data Master next to the “Filter” function you just placed in the expression.
    3. Next to the Data Master in the expression, drag the “Status” field from the Data Master palette.
    4. Next to the “Status” field, drag the “HAS” text function.
    5. Lastly, still in the Calculated Expression builder, click back to the ‘Screens’ tab and drag the “Status” radio list from the expression Canvas. Click “OK” twice to exit the builder.Data-driven-prototyping-Simulate-complex-searches-on-data-lists-expression
  11. Back in the Events palette, click on the gear icon next to the word “do”, and select “Add action”. Create another “On Click” + “Set Value” event, and select the Data List again as the target of the action. For the value, again click “Calculated” and “Add expression”. Follow these steps to create the expression:

    1. Drag the “Filter” function to the first space in the expression.
    2. Next to it, drag the Data List.
    3. Drag the “HAS” function next to the Data List in the expression.
    4. In the first space that appears, drag the “reason” attribute.
    5. In the last space, drag the “Reason” list box. Click “OK” twice to exit the builder. Data-driven-prototyping-Simulate-complex-searches-on-data-table-expression
  12. Back on the Canvas, select the “Clear” button. Create an “On Click” + “Set Value” event, selecting the entire Data List as the target of the action. For the value, click the “From current data master” radio button. This will reset the values of the Data List so you can perform the search again.

Click “Simulate” to interact with your prototype.

You can download our example here.