Justinmind

SUPPORT

Learn how to prototype web and mobile apps

Dynamic Content widgets for wireframing

In this tutorial, you will learn about the different types of dynamic content widgets (UI elements) available for you to use in your interactive prototypes.

Dynamic Content widgets

The widgets located in the Dynamic Content section of the basic widget library are also known as container widgets. This means that they can contain other widgets within them and behave as a single widget.

The contents of a container can be edited so you can add new items or modify current ones. To edit the content inside a widget, double click on the widget or right click on it and choose the ‘Edit Content’ option.

2-interactive-prototypes-dynamic-content

When you are finished editing the content, double click on the widget or right click on it and choose the ‘Exit Edit Content’ option.

 Dynamic Panel widget

1-interactive-prototypes-dynamic-content

The Dynamic Panel widget is an advanced widget that can contains a group of panels that act as containers for other widgets. Only one panel is displayed at a time. When a Dynamic Panel is created, it has a single container by default.

  • You can add additional panels to the Dynamic Panel by clicking on the Plus icon in the top left-hand corner of the widget.

3-interactive-prototypes-dynamic-content

You can also duplicate a panel, allowing you to copy all content within the panel to another by right clicking on the source panel and selecting the ‘Duplicate panel’ option.

  • When you select a panel from the floating drop down at the top of the widget, it will automatically be displayed.
  • To remove a panel, click on the panel you wish to remove, right click on the dynamic panel and select the ‘Remove panel’ option.
  • To edit a panel’s name, go to the Properties tab and change the value of the ID Layer in General settings. The panels are automatically labeled when you create them but you can change their names in order to organize your Dynamic Panel.
  • To change the default panel, go to the Properties tab and select the desired panel from the Default Later in General settings. Every Dynamic Panel has a default panel which is the one that will be displayed when starting the simulation of the prototype.

See more on using dynamic panels here.

Data List widget

4-interactive-prototypes-dynamic-content

The Data widgets are those related to the Data Master’s visual representation. These widgets will help you visualize the contents of your Data Masters as well as some information related to them.

The Data List widget displays records of a Data Master as a list. This list’s data source is always a single Data Master which is selected when the list is created. This widget displays only one header and one row when editing it in the user interface but it is expanded during simulation, replicating its rows displaying a different row for each Data Master’s record instance.

To create a Data List for a Data Master:

  1. Click on the Data List widget.

  2. A dialog will appear asking for information regarding the data source the Data List will use.

  3. If you have not created a Data Master, you will be prompted to create one before continuing.

  4. Fill in the required fields and click OK.

  5. Once the dialog is closed, simply click on the desired place on the canvas to finally create the item.

6-interactive-prototypes-dynamic-content

Data Grid widget

5-interactive-prototypes-dynamic-content

Similarly to the Data List widget, the Data Grid widget displays records of a Data Master, but in a grid not a list. Creating a Data Grid requires the same steps as creating a Data List (see steps above).

Once a Data Grid is created, you can change some of its properties, including its identifier in the Properties panel, that cannot be changed in the Data Master:

  • To select a row, click on the left edge of the row when the cursor displays a right pointing arrow.
  • To select a column, click on the top edge of the column when the cursor displays a down pointing arrow.
  • To insert a new column, right-click on the Data Grid widget and select ‘New Column’ in the contextual menu.
  • To remove a column, select it and click Delete. You can also remove it if you select the option ‘Delete’ in the contextual menu of a column.
  • The order of the Data Grid’s columns can be modified once created. To move a column to a different position within the Data Grid, drag and drop it to the desired position. An orange grid will guide you when placing the column between other columns.
  • To resize a row or column, select the desired cell, entire row or column and drag its sizing handles to adjust.

Changing a Data List or Data Grid’s properties

When a Data List/Grid widget is selected on a screen you can change some of its properties in the Properties panel:

7-interactive-prototypes-dynamic-content

Find more information about Data Lists and Grids in the Data Simulation section.

Summary widget

 

9-interactive-prototypes-dynamic-content

The Summary widget is a special text label which shows information about a Data Grid. This widget cannot be directly edited like a normal Label as its content is automatically generated using its associated Data Grid information. The information displayed by this widget is the total number of rows and the currently displayed ones.

To change its associated Data Grid, select the Summary widget and select the desired Data Grid in the Properties panel.

Index widget

 

8-interactive-prototypes-dynamic-content

The Index widget is a special text label which shows information about the Data Grid’s pages. This widget cannot be directly edited like a normal Label as its content is automatically generated using its associated Data Grid information. The information displayed by this widget is the index of pages of the Data Grid. The current page index will be highlighted using a bold font style. Notice that the number of pages of a Data Grid will depend on the field ‘Rows per page’ in the Data Grid widget’s properties.

To change its associated Data Grid, select the Index widget and select the desired Data Grid in the Properties panel.

Next tutorial > UI container elements for wireframing