Reorder Tables, Help Panel, and Extensions in VC using Group Variable
Overview
Normally the tables, help panel, and extensions appear in default order i.e., at first tables followed by the help panel and then extensions. As an admin, you can easily rearrange each tab and section order.
Step-by-Step Guide
- Follow the steps to Edit your Visualizer Type.
- On the UI Builder page, click Prototype.
- On the Prototype page, if the different segments appear in half width, click the three dots menu and then click Full Width.
Here the tables, help panel, and extensions appear in the default order.
To change the default order, follow the steps to Edit Group Variable.
- Add the below code after the curly bracket.
"sectionPosition": { "Section Name 1": [ "Extensions", "varContiner", "helpComp" ]},
Here, varContiner refers to tables, and “helpComp” refers to the help panel. While Extensions refer to charts, images, videos, and custom JavaScript extensions you implement.
- Replace section name 1 with the name of the tab. If the tab has multiple sections, then give the name of the particular section in place of section name 1.
- Now reorder the items within section name 1 in the order in which you want them to appear on the Prototype page.
For instance, regarding the above image, the order of the different items are table, help panel, and image and to interchange the position of help panel and table, the code would be
"sectionPosition": { "Supply Cost": [ "helpComp", "varContiner", "Extensions" ]},
Click Save.
Click Value Collaborator on the Visualizer Type page. Click Save.
- Click Prototype.
On the Prototype page, the position of the different components appears changed as per the code.
- Similarly, you can add any number of tabs and sections. Just expand the code as follows:
"sectionPosition": { "Section Name 1": [ "helpComp", "varContiner", "Extensions" ], "Section Name 2": [ "helpComp", "varContiner", "Extensions" ], "Section Name 3": [ "helpComp", "varContiner", "Extensions" ]},
and so on.