Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create a searchable list with data masters in your prototypes

Learn how to create an advanced list with a search bar using data masters and data lists in this tutorial.

Here, we showed you how to create a simple content list in your prototypes using the Basic widget library Text Table widget, Data Masters and the Data List widget. Here, learn how to create an interactive list with tabs and a search bar that allows you to filter your data entries. In our example prototype, users can switch between data list tabs using the side menu and filter the data entries using the search bar in the prototype’s header.

You can download the below example here.

interactive-prototypes-content-list-data-masters

Creating a list with data masters

1. Create a new web prototype.

2. To reproduce the side menu on the left in our example, drag an Image widget to the canvas. Add a logo to match our example. We have provided all of the assets that we used in our example here, should you wish to replicate our downloadable example.

3. Create tabs to represent each tab you wish to introduce into your data master, (in our example we have 3 tabs: Great Houses, Extinct Houses and Vassals Houses). Create the tabs using Image and Text widgets with SVG vectors so that you can change their appearance easily.

4. Group each set of Image and Text widgets that make up each tab. Then, group everything in the side menu together.

5. Drag a Rectangle widget to the canvas and move it to the back of the canvas by choosing ‘Send to Back’ in the Order options. Change the background color to black and resize it to match our example.

6. To create the webpage header, drag an Input Text Field, an Image widget and a Hotspot widget to the canvas and place them at the top left of the canvas, to match our example.

7. Add an image that represents a search icon and then group these widgets together. This will be your search bar.

8. Then, drag a Text box and an Image widget to the canvas and place them at the top right. Add an image to represent the user’s avatar and write the name of the user in the Text box. Group the Image and Text widgets together. This will show the user’s profile information.

9. Drag another Rectangle widget to the center of the canvas and resize it to match the size of Rectangle_2 in our example. Move it to the back of the canvas by choosing ‘Send to Back’ in the Order options.

interactive-prototypes-content-list-data-masters-assets

10. To create your content list, go to the Data Masters tab and create a new data master by clicking on the ‘+’ option.

11. In the dialog that appears, give your data master a name by typing it into the Name field.

12. Fill in the Name and Type entries for your data master to match our example.

13. The first field, named ‘Sigil’ should have a File Upload Type, the last ‘type’ should have a Category Type, and the rest can be left as the default: Text. Click OK.

interactive-prototypes-content-list-data-masters-details

14. Back in the canvas, double click on the data master you have just created in the Outline tab to edit its details.

15. In the ‘View and edit records’ tab, fill in the entries as desired. Click OK.

These will be the entries that your data master will display in your prototype and should be identical to the names of your tabs in the side menu.

16. Back in the canvas, go to the Dynamic content section of the basic widget library and drag a Data List widget to the center of the canvas.

17. In the dialog that appears, give your data list a name to help you identify it in the Identifier box, (ours is called GoT).

18. From the Data Masters drop down, select your data master.

19. Below, place all your data master fields in the right box apart from the type attribute. Click OK.

interactive-prototypes-content-list-data-list

Tips: You can distinguish the data list’s rows from each other by changing the color of the odd and even rows in the Properties tab. Additionally, you can resize the width of each row by selecting the ‘Current_row_1’ from the Outline tab (within the data list) and dragging and adjusting it as needed in the canvas. By resizing the current row, all subsequent rows will take on the new settings.

20. Finally, drag a dynamic panel to the canvas and place it in between the header and the data list.

21. Resize it to match our example and add two additional panels.

22. Double click in Panel 1 to edit its contents and drag an Image, Text box and Paragraph widget. The image you choose should represent the first of your three data master tabs. The Text box should contain the name of the tab and the Paragraph, a short description.

23. Repeat the last step for Panels 2 & 3, modifying the tab’s information accordingly.

interactive-prototypes-content-list-dynamic-panels

Now, we’ll add four events sequences to make your data list interactive

1. First, we’re going to add an event to the search bar to allow users to navigate and filter your data list.

  • Select the Hotspot widget from within the search bar group.
  • Go to the Events tab and create and “On Click” + “Set Value” event, selecting the data list from the Outline tab.
  • Below, set the value as ´Calculated´ and build the following expression:

Filter function [Data Master from Data Masters tab, search bar group Input Text Field from Screens>Outline Tab].

  • Click OK twice.

interactive-prototypes-content-list-data-masters-events-2

2. Next, we’re going to add events to our side menu so that users can switch between tabs.

  • Go to the first of your tabs in the side menu group, in our example ‘Great Houses’ and select the Text widget.
  • In the Events tab, add an “On Click” + “Set Value” event, selecting the data list.
  • Below, set the value to ‘Calculated’ and build the following expression:

Filter function [Data Master from Data Masters tab, [Vassals (Text) = type (Data master attribute)]]

Tip: To access the data master ‘type’ attribute, go to the Data Master tab in the Expression Builder, click on your data master and all the attributes will appear. Select the ‘type’ node and drag it to the Expression Builder.

  • Click OK twice.
  • Right click on the event you’ve just created and add an “On Click” + “Change Style” event, selecting the Text box from within the tab’s grouped widgets.
  • Below, tick the Text option and change the color of the text to white. This will ensure that upon simulation, the ticked tab will appear as white (selected). Click OK.
  • Right click on the event you’ve just created and add another “On Click” + “Change Style” event, this time selecting the Image widget from within the tab.
  • Below, tick the Color option and change the color of the image to blue. This will ensure that upon simulation, the ticked tab will appear as blue (selected). Click OK.
  • Right click on the event you’ve just created and add an “On Click” + “Set Active Panel” event, selecting the panel from within the dynamic panel that corresponds to the tab (in our example, we’ve selected the panel that contains the Great Houses info).
  • Ensure that all the links between the events are changed to ‘WITH previous’.

Now we’ll create events to make the other two tabs appear inactive when not selected.

  • Add another event: “On Click” + “Change Style”, selecting the text box from the Extinct Houses tab. Change the text to gray. Click OK.
  • Right click on this event and add another “On Click” + “Change Style” event, this time selecting the Image widget from within the Extinct Houses’ tab. Change the color to gray. Click OK.
  • Repeat the above two steps for the final tab: the Vassals Houses tab.
  • Repeat all steps in this event sequence for the the other two tabs, changing the active panel and styles respectively.

interactive-prototypes-content-list-data-masters-events-1

3. Next, we’re going to add events to ensure that the first tab loads in our data list when users access the page.

  • Select the Screen in the Outline tab and go to the Events tab.
  • Add an “On Page Load” + “Set Value” event, selecting the data list from the Outline tab.
  • Below, set the value as ‘Calculated’ and add the following expression:

Filter function [Data Master from Data Masters tab, [Great (Text) = type (Data master attribute)]]

  • Click OK twice.
  • Right click on the event you’ve just created and add an “On Page Load” + “Resize” event, selecting Rectangle_1.
  • Below, set the width to fixed; 234 px and the height to relative to parent; 100%. Click OK.
  • Right click on the event you’ve just created and add an “On Page Load” + “Resize” event, selecting Rectangle_2.
  • Below, set the width to fixed; 1133 px and the height to relative to parent; 100%. Click OK.
  • Set the link between the last two events to ‘WITH previous’.

These events will ensure that the data list will load the Great Houses tab when first accessed, with the correctly sized page.

interactive-prototypes-content-list-data-masters-events-3

4. Finally, we’re going to add events to our data list to ensure that the webpage adjusts to the number of entries being displayed at any given time, i.e. shrink when there are fewer entries and expand when there are a larger number.

  • In the Outline tab, select the ‘Current_row_1’ from within the data list and go to the Events tab.
  • Add an “On Data Change” + “Resize” event, selecting Rectangle_2.
  • Below, set the width as Current and the height as Calculated, and add the following expression:

[MAX function [[Data list, select ‘Pos.Y relative’ from the drop down + Data list, select Height], Window Height constant] + write ‘25’]

interactive-prototypes-content-list-data-masters-events-4

  • Click OK twice.
  • Right click on the event you’ve just created and add an “On Data Change” + “Resize” event, selecting Rectangle_1.
  • Below, set the width as Current and the height as Calculated, and add the following expression (the same as above):

[MAX function [[Data list, select ‘Pos.Y relative’ from the drop down + Data list, select Height], Window Height constant] + write ‘25’]

And that’s it! Click ‘Simulate’ to see and interact with your data list! Click on the tabs in the side menu to navigate between the tabs in the data list and use the search bar to filter entries.

 

Next tutorial > Create a confirmation pop up using data masters