Widget Container Settings

Container Settings allow you to control the appearance, positioning, behaviour, and interactions of widgets within a report slide. When a widget is selected, its container settings are displayed in the right-side Settings Panel under the Container tab. Not all settings are available for every widget — available options depend on the selected widget type.

---

Access Container Settings

1. Open a Report Workspace and open a slide.
2. Select an existing widget or insert and select a new one.
3. In the right-side Settings Panel, click the Container tab — the available container settings for the selected widget are displayed.

---

Container Settings Availability by Widget

Widget	Widget Name	Position & Size	Header	Padding	Background	Border	Tooltip	Clickability	Conditional Visibility	Tags
Text	✔	✔		✔	✔	✔	✔	✔	✔
Image	✔	✔	✔	✔	✔	✔	✔	✔	✔
Chart	✔	✔	✔		✔	✔	✔		✔
Network	✔	✔	✔	✔	✔	✔	✔		✔	✔
Data Filter	✔	✔	✔			✔
Table	✔	✔	✔	✔	✔	✔	✔		✔	✔
Insight Panel	✔	✔		✔	✔	✔
Panel	✔	✔	✔	✔	✔	✔	✔
Video	✔	✔	✔	✔		✔	✔		✔
Icon	✔	✔		✔	✔	✔		✔
Trend Indicator	✔	✔		✔	✔	✔		✔	✔
Dynamic Control	✔	✔				✔			✔
Navigation Link	✔	✔		✔		✔			✔
Horizontal Line	✔	✔		✔
Vertical Line	✔	✔		✔

---

Widget Name

Define a custom name for the widget. The name is used to identify the widget within the report workspace, helping to distinguish widgets when multiple are present on the same slide.

---

Position and Size

Define the location and dimensions of the widget within the slide.

• Position:
  • Top — Vertical position of the widget (maximum: 720px).
  • Left — Horizontal position of the widget (maximum: 1332px).
• Size:
  • Width — Widget width.
  • Height — Widget height.

caution

Height is automatically managed when Auto Height is enabled.

---

Header

Enable and customise a widget header. When enabled, the following options become available:

• Title — Text displayed within the header.
• Font — Font family for the header text.
• Font Size — Size of the header text.
• Font Weight — Thickness or boldness of the header text.
• Font Color — Colour of the header text.
• Text Alignment — Align header text to the left, centre, or right.
• Height — Height of the header area.
• Padding — Internal spacing of the header (Top, Bottom, Left, Right).
• Border — Border displayed around the header, including Size, Style, Position, Colour, and Border Radius.
• Background Color — Background colour behind the header.

---

Padding

Controls the internal spacing between the widget content and its container edges.

• Top / Bottom / Left / Right — Individual padding values for each side.
• Max Horizontal Padding Sum — Maximum allowed combined value of left and right padding.
• Max Vertical Padding Sum — Maximum allowed combined value of top and bottom padding.

---

Background

Enable and customise the widget background appearance.

• Background Color — Background colour behind the widget content.
• Backdrop Blur — Apply a blur effect to content displayed behind the widget background.

---

Border

Enable and customise the widget border. Available settings:

• Border Size
• Border Type
• Border Color
• Border Style
• Border Placement
• Border Radius

---

Tooltip

Display additional information when users interact with the widget. When enabled, the following settings are available:

• Message — Tooltip text.
• Font — Tooltip font family.
• Font Size — Tooltip text size.
• Font Weight — Tooltip text thickness or boldness.
• Font Color — Tooltip text colour.
• Background Color — Tooltip background colour.
• Icon — Icon displayed within the tooltip.
• Icon Size — Tooltip icon size.
• Icon Color — Tooltip icon colour.
• Container — How the tooltip is displayed: Floating or Inline.
• Placement — Where the tooltip appears relative to the widget.
• Padding — Tooltip spacing (X-Padding, Y-Padding).

---

Clickability

Configure actions that occur when users interact with the widget. Configured actions are functional in Preview Mode and Shared Report View.

• Accent Color — Accent colour used for clickable interactions.
• Add Action — Click Add Action to configure widget actions. Available action types:
  • Slide Link — Redirect users to another slide within the report. Select Slide Link as the action type and specify the Target Slide.
  • External — Open an external URL when the widget is clicked. Select External Link as the action type and enter the URL.

note

Multiple actions can be added to the same widget.

---

Conditional Visibility

Conditional visibility shows or hides a widget based on a variable's value. The widget appears only when a defined condition is met, and disappears when it is not. This is useful for building interactive reports where clicking a button reveals additional information, shows a pop-up panel, or toggles between different views on the same slide.

How It Works

Every slide has a set of variables — named values that act as shared signals between widgets. A variable has a name (e.g., "show-details") and a value (e.g., "yes" or null).

When you enable conditional visibility on a widget, you define:

1. Which variable to watch — the variable name (e.g., "show-details").
2. What value makes it visible — the expected value (e.g., "yes").

Slide Variable Value	Widget Behaviour
Matches the expected value	Visible — the widget appears normally.
Does not match (or is empty)	Hidden — the widget disappears.

Set Up Conditional Visibility

1. Select a widget on your slide.
2. In the Settings Panel, go to Container → Conditional Visibility.
3. Toggle it on using the switch.
4. Fill in the following fields:
   • Variable Name — The name of the variable this widget should watch (e.g., "show-help", "active-tab"). This must match exactly the variable name used by the control that triggers it.
   • Value — The value the variable must have for this widget to become visible (e.g., "true", "panel-a").

caution

The variable name and value are case-sensitive. "ShowHelp" and "showhelp" are treated as different variables.

Trigger Visibility with Dynamic Controls

A widget with conditional visibility will not appear on its own — a Dynamic Control widget must set the variable to the correct value.

1. Add a Dynamic Control widget to the same slide.
2. In its settings, configure:
   • Variable Name — Must match the variable name on the conditionally visible widget exactly.
   • Variable Value — Must match the value the conditionally visible widget expects.
   • Toggle on Click — When enabled, clicking the button a second time clears the variable and hides the widget. When disabled, clicking always sets the value.
3. Configure the button's appearance (label, colour, icon) for both active and non-active states.

You can have multiple Dynamic Controls set different values for the same variable, and multiple widgets watching the same variable with different expected values — enabling tab-like interfaces where different buttons show different content panels.

The Close Button

You can add a close button to a conditionally visible widget, giving users a way to dismiss it without clicking the original control again.

• Show Close Button — Toggle on to display an X button on the widget.
• Placement — Choose where the close button appears: Top Left or Top Right.

When clicked, the close button clears the variable (sets it to empty), which hides the widget.

Close on Outside Click

When enabled, clicking anywhere outside the widget dismisses it — similar to how a pop-up closes when you click elsewhere on the page. This is useful for overlay-style widgets like floating panels or pop-ups.

note

Close on Outside Click only takes effect when the widget is currently visible (its variable condition is met). It clears the variable when triggered, which hides the widget.

Behaviour in Design Mode vs Viewer Mode

• Design Mode — When a widget's condition is not met, the widget is shown at reduced opacity so you can still see and edit it. When the condition is met, it appears at full opacity.
• Viewer / Preview Mode — When a widget's condition is not met, it is completely hidden. When the condition is met, it appears with a smooth fade-in animation.

Conditional Visibility Examples

Example 1: A "Show Details" button

You want a details panel to appear when a user clicks a button.

1. Add a widget with the details content and enable conditional visibility:
   • Variable Name: show-details
   • Value: yes
2. Add a Dynamic Control widget:
   • Variable Name: show-details
   • Value: yes
   • Toggle on Click: On
   • Active Label: Hide Details
   • Non-Active Label: Show Details

Result: Clicking the button shows the panel. Clicking it again hides it.

Example 2: Tabbed content

You want three panels that switch based on which tab button is clicked.

1. Create three content widgets, each with conditional visibility:
   • Widget A: Variable Name active-tab, Value tab-1.
   • Widget B: Variable Name active-tab, Value tab-2.
   • Widget C: Variable Name active-tab, Value tab-3.
2. Create three Dynamic Control buttons:
   • Button 1: Variable Name active-tab, Value tab-1, Toggle: Off.
   • Button 2: Variable Name active-tab, Value tab-2, Toggle: Off.
   • Button 3: Variable Name active-tab, Value tab-3, Toggle: Off.

Result: Clicking Button 1 shows Widget A and hides B and C. Since toggle is off, one panel is always visible.

Example 3: Dismissible pop-up

You want a widget that appears on a button click and can be closed by clicking the close button or clicking outside.

1. Create the pop-up content widget with conditional visibility:
   • Variable Name: show-popup, Value: open
   • Show Close Button: On, Placement: Top Right
   • Close on Outside Click: On
2. Create a Dynamic Control button:
   • Variable Name: show-popup, Value: open, Toggle: On

Result: Clicking the button opens the pop-up. The user can close it using the X button, clicking outside, or clicking the button again.

---

Widget Tags

Widget tags create a filtering link between two widgets on the same slide. When tags are activated on a widget, the connected widget filters its content to show only items matching the tag values.

Tags are most commonly used to connect a Network or Table widget to an Insight Panel widget.

Widget Compatibility

Not all widget types can be connected to each other. The system checks compatibility and only offers valid connections:

Source Widget	Can Connect To
Network	Chart, Network, Table, Insight Panel
Table	Chart, Network, Table, Insight Panel
Filter	Chart, Network, Table

note

Only widgets on the same slide can be connected. Tags do not work across different slides.

How Tags Work

Each tag entry has two parts:

• Tag Values — One or more text labels (e.g., "leadership", "communication"). These are the filtering criteria.
• Connected Widget — The target widget that is filtered when tags are activated.

When tags are activated, the tag values are sent to the connected widget, which filters its content accordingly. When tags are deactivated, the filter is removed and the connected widget shows all content.

Set Up Tags

1. Select a widget on your slide.
2. In the Settings Panel, find the Tags section.
3. Click Add Tag — this button is only available if compatible widgets exist on the same slide.
4. For each tag entry:
   • Tags field — Type one or more tag values and press Enter to add each one. Previously used tag values appear as suggestions.
   • Widget — Select the target widget to filter. The dropdown shows only compatible widgets.

caution

When you edit tags (add, modify, or remove), any currently active tag filters are automatically turned off. You will need to re-activate them after making changes.

Activate Tag Filters

Tags are not active by default after setup.

1. Look for the bolt icon in the widget's header area — it appears only when the widget has tags defined and its header is enabled.
2. Click the bolt icon to toggle tag filters on or off:
   • Active — Tag values are sent to connected widgets, filtering their content.
   • Inactive — No filtering is applied.

How Tags Affect the Insight Panel

When tag filters are activated on a source widget connected to an Insight Panel:

• The tag values are sent to the Insight Panel's selected tags list.
• The Insight Panel filters its insights to show only those whose tags overlap with the selected tag values.
• If multiple source widgets are actively connected to the same Insight Panel, tag values are merged and insights matching any of them are shown.
• When tags are deactivated on a source widget, its values are removed from the filter. If no other sources are actively filtering, the Insight Panel shows all insights.

Tag Examples

Example: Network → Insight Panel

You have a Network widget and an Insight Panel and want users to filter insights by theme.

1. Select the Network widget.
2. In the Tags section, click Add Tag.
3. Enter tag values: "leadership", "influence".
4. Select the Insight Panel as the connected widget.
5. In the report viewer, click the bolt icon on the Network widget's header.
6. The Insight Panel now shows only insights tagged with leadership or influence.
7. Click the bolt icon again to remove the filter and see all insights.

Example: Multiple tag entries

You can define multiple tag entries on a single widget, each pointing to a different target:

• Tag 1: Values "centrality" → connected to Insight Panel A.
• Tag 2: Values "bridging" → connected to Insight Panel B.

Activating tags on this widget filters both panels simultaneously, each with its own tag values.