Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to create a content list with multiple tabs in your prototypes

Learn how to create content lists with multiple tabs in your prototypes with the help of Dynamic panels and the Text Table widget in this tutorial.

We use lists for content and/or figures all the time, like in Microsoft Excel. With multiple tabs, we can organize lists more efficiently. Learn how to create a content list in your mobile app prototype easily by following the steps below.

You can download the example below here.

interactive-prototypes-home-screen-full-wireframe

Creating a content list in your prototype

First, we’ll create the layout of the Home screen.

1. Create an iPhone 6 mobile app prototype.

2. In the Screens tab, add a second screen by clicking on the ‘+’ option. Rename this screen ‘List-page’.

3. Back in the Home screen, use Image widgets to create the visual layout of your home screen as desired. If you would like to match our Game of Thrones example, here are the assets to do so.

4. Drag the iOS9 Status bar to the top of the canvas to match our example.

5. Add a Button widget to the canvas and rename it “Get Started”.

interactive-prototypes-home-screen-content-list

That’s everything you’ll need for the Home screen. Next, we’ll create the layout of the Link-page screen using Text Table widgets.

1. Go to the Link-page screen, navigating from the Screens tab. Use Text widgets and the ‘Previous’ arrow Label widget from the iOS9 widget library to create a header block, and group these widgets together.

interactive-prototypes-header-content-list

2. Drag another iOS9 Status bar to the top of the canvas.

3. Drag a dynamic panel onto the canvas and add two additional panels to it.

4. Double click in Panel 1 to edit it. Drag a Text Table widget and a Text widget into it.

5. Rename the Text widget as the header of your first tab. In our example it’s “Great Houses”.

6. Select the Table Text widget and go to the Properties tab. Give the table 3 columns and 9 rows and fill in the table with the data that you would like your first tab to display.

interactive-prototypes-text-table-widget

Repeat steps 4 through 6 for the other two tabs (in panels 2 & 3 respectively).

7. Finally, add three buttons to the canvas to represent the three tabs that the user will click between to access the different tables. Rename them to match the Text widgets in each of your dynamic panel’s panels.

interactive-prototypes-button-widgets

Note: You can also use the Tab bar in the iOS or Android widget libraries for this step. 

Adding events to the screens in your prototype

First, we’ll add events to the Home screen

  • In the Home screen, select the Button widget and go to the Events tab below and add an ‘On Tap” + “Change Style” event, selecting the button from the Outline tab.
  • Below, tick the Border and the Text options. Change the borders style to solid and change the border and text color to blue. Click OK.
  • Right click on the event you’ve just created and select the ‘Add action after selected’ option.
  • Add an “On Tap” + “Link To” event, selecting the List-page screen from the list.
  • Below, add a Slide Left effect and click OK.

This event will change the style of the button when it’s clicked to move to the Link-page screen.

Now, we’ll add events to the Link-page screen

  • Go to the Link-page screen, select the arrow label widget and go to the Events tab below and add an ‘On Tap” + “Change Style” event, selecting the button from the Outline tab.
  • Below, tick the Border and the Text options. Change the borders style to solid and change the border and text color to blue. Click OK.
  • Right click on the event you’ve just created and select the ‘Add action after selected’ option.
  • Add an “On Tap” + “Link To” event, selecting the Home screen from the list.
  • Below, add a Slide Left effect and click OK.

This event will change the style of the button when it’s clicked to go back to the home page.

Finally, we’ll add events to the buttons representing the tabs in our table.

  • In the Link-page screen, select the button that represents the first tab (Button 1) and go to the Events tab.
  • Create an “On Tap” + “Change Style” event, selecting Button 1.
  • Below, click the Text option and change the color to blue. Click OK.
  • Right click on this event and select the “Add action after selected” option.
  • Create another “On Tap” + “Change Style” event, selecting Button 2.
  • Below, click the Text option and change the color to gray. Click OK.
  • Right click on this event and select the “Add action after selected” option.
  • Create another “On Tap” + “Change Style” event, this time selecting Button 3.
  • Below, click the Text option and change the color to gray. Click OK.
  • Right click on this event and select the “Add action after selected” option to add a final event to this button.
  • Create an “On Tap” + “Set Active Panel” event, this time selecting Panel 1 from the dynamic panel. Below, add a Fade transition effect.

This event will ensure that upon simulation, the content in Panel 1 will be shown, the active tab will be highlighted (blue) and the other two will appear inactive (gray).

interactive-prototypes-events

Repeat these steps for the other two buttons, modifying the appropriate buttons and panel to be changed in each instance to make the relevant tab appear active and the other two inactive.

And that’s it! Click ‘Simulate‘ to view and interact with the content list in your prototype!