Display the Same Charts, Images, or Videos on Multiple Tabs & Sections of a Prototype

Overview

There are times you want the same Charts, Images, and Videos, collectively known as Extensions, to appear on multiple tabs and sections of a prototype.

Step-by-Step Guide

1. Open your Visualizer Type by following the steps to Edit your Visualizer Type.

2. Click Extensions. It expands to show the names of the charts, videos, or Image Overlays added.

   
   

3. Note the names of the extensions. Also, note the tabs and sections where you want the extensions to appear.

   
   

4. Open Group Variable by following the steps in Edit Group Variable.

   
   
5. Add the below code right after the curly bracket.

"Multi_tagging": {      "extension name 1": [      "section name 1",      "section name 2"    ],    "extension name 2": [      "section name 3",      "section name 4"    ]  },

6. Here, the extension names 1 and 2 refer to the names of the extensions while section name 1, section name 2, section name 3, and section name 4 refer to the name of the tabs. If the tabs have multiple sections, give the name of the section (and not the tab) in the place of the section name where you want the extension to appear.

7. Click Save and the Visualizer Type page appears.

   
   

8. Click Value Collaborator and then click Save on the top navigation.

   
   
9. Click Prototype. On the Prototype page, you can see that the same extensions are tagged to the same tabs and sections mentioned in Group Variable.

10. For instance, in the above prototype, the Discovery tab has an image, a video, and a chart. To display the same image, video, and chart in the Summary tab, the following would be the code to be pasted in the Group Variable right after the curly bracket.

"Multi_tagging": {     "CHT -1": [      "Summary"    ],    "IMG 1": [      "Summary"    ],    "VID -1": [      "Summary"    ]  },

11. The Summary tab now displays the same chart, image, and video.

12. If you want to display the chart in two different tabs namely Supply Cost and Client Acquisition (or two different sections or a tab and a section), the code would be:

"Multi_tagging": {      "CHT -1": [      "Supply Cost",      "Client Acquisition"    ] },

13. On the Prototype page, you can see that both tabs now display the chart.

"Multi_tagging": {      "extension name 1": [      "section name 1",      "section name 2", "section name 3"    ],    "extension name 2": [      "section name 1",      "section name 2"    ],  "extension name 3": [      "section name 1"    ]  },

14. Tag any number of extensions to any number of tabs and sections as shown above.