Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create an interactive list with multiple tabs using table widgets

Learn how to create an interactive list by using the Special Component Table widget in this tutorial.

In this tutorial, 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. In this, we showed you how to create an interactive list with tabs and a search bar that allows you to filter your data entries. Here, we will create our interactive list in your prototypes using the Special Component Table widget. In our example prototype, users can switch between list tabs using the side menu.

You can download the example below here.

interactive-prototypes-interactive-list

Creating a list with multiple tabs with the Text widget

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 list, (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. 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-interactive-list-widgets

7. To create your interactive list with multiple tabs, drag a dynamic panel to the canvas.

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

9. 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 tabs. The Text box should contain the name of the tab and the Paragraph, a short description. Group these widgets together.

10. Now, go to the Special Components section of the basic widget library and drag  Table widget to Panel 1. In the Properties tab, build your table depending on the number of entries desired (in our example we have used 6 columns and 8 rows).

interactive-prototypes-table-widget

11. Use Text and Image widgets to create the entries in your table.

interactive-prototypes-table-widget-2

12. Repeat steps 10 & 11 for Panels 2 & 3, modifying the information in each tab information accordingly.

Adding events to make our list interactive

  • 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” + “Change Style” event, selecting the Text widget from the first tab.
  • Below, tick the Text box and change the text color to white.
  • Click OK.
  • Right click on the event you’ve just created and add another “On Click” + “Change Style” event, selecting the Image widget from within the same 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-interactive-list-event

Finally, 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” + “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 two events to ‘WITH previous’.

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

interactive-prototypes-interactive-list-event-2

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

Next tutorial > Create a confirmation pop up