Container Grid Properties

Use the Vizlib Container Grid properties panel to configure container objects, layout settings, appearance, templates, interactivity, and alternate states.

Container Objects

Vizlib Container Grid supports an unlimited number of master items. These master items are added using the Container Objects settings.

Container Objects

The Container Objects header displays how many objects have currently been added to the sheet and lists all the container objects which have been currently added. You can click Add Container Object to add a new object, and select the chart displayed when the sheet opens for the first time by selecting an option from the Active Chart in Container drop-down.

Figure 1:  Container Objects

Container Object Master Items

To add a new item, you choose between a single and a grid View Type, then select a Master Item from the drop-down. Each item represents a Master Item of your choice. The Grid View Type allows you to display several master items together with a grid layout, choosing from a list of pre-set definitions. You can also enter a Title, add a Label, and add a custom Icon, setting the icon Size and Icon position.

Figure 2:  Container Object

You can choose to display the chart when a condition is met with Conditional Show, and also set an Active Condition to display the master item. The container object can also be used with Vizlib Actions, by clicking Add Action, then making a selection from Pick Action and entering the data you need.

Figure 3:  Conditional Show, Actions

Container Settings

Container Settings contain the basic configuration for the layout of the container object.

Container Mode

Vizlib Container Grid supports five types of Container Mode: Tabs, Accordion, Dropdown, Carousel and Hidden. Once you've selected a container mode you'll be able to see the layout and visibility settings. You'll be able to alter the look and feel in the Appearance section of the property panel. Each type of container has different Appearance settings, so we've included those in separate articles for Accordion, Carousel, Dropdown and Tabs.

Figure 4:  Container Mode

Tabs

Tabs settings allow you to choose Responsive Mode, where you can select then size where the re-sized object converts to accordion. You can also select the Position for the layout, customize the Width of the object, and add a condition for displaying the object with Conditional Container Show.

Figure 5:  Tabs

Accordion

Accordion layout settings allow you to choose the Accordion Position, the Space-between size, and add a condition for displaying the object with Conditional Container Show.

Figure 6:  Accordion

Dropdown

Dropdown settings allow you to select the Position for the layout, customize the Width of the object, and add a condition for displaying the object with Conditional Container Show.

Figure 7:  Dropdown

Carousel

Carousel settings let you choose a layout Position and a Horizontal Alignment, as well as and add a condition for displaying the object with Conditional Container Show.

Figure 8:  Carousel

Hidden Mode

With Hidden mode, you won't display any of the container mode options, although you can add a condition for displaying the object with Conditional Container Show.

Figure 9:  Hidden

Example

The following figure shows an example of a Vizlib Container Grid object in analysis mode, moving between the different container modes in a navigation menu on the left.

Figure 10:  Example

Appearance

Appearance settings control the look and feel of your container object. The settings you'll display in Appearance depend on the type of container object you select (e.g. an Accordion object will have different settings to a Carousel object).

General

The Appearance settings for each container object all have a General section, you can add a Title, Subtitle and Footnote and Toggle off hover menu. You can also choose to Show details, which will display information about the data in the chart (dimensions, measures, descriptions).

Figure 11:  General

Appearance - Accordion Settings

Each container mode has its own set of Appearance settings, so the settings in this section will only be displayed when you select Accordion as your Container Mode in Container Settings. For more information about container modes, please see our article here.

Inactive Tab

With Inactive Tab settings you can apply changes to the inactive (unselected) tab, setting the Font Color, Background Color, Background Opacity, Font Size, Font Style, and Border Color Properties.

Figure 12:  Inactive Tab

Active Tab

The Active Tab settings control the appearance of the active (selected) tab. You can set the Active Font Color, Active Background Color, Active Background Opacity, Active Font Size and Active Font Style.

Figure 13:  Active Tab

You can also select the Active Border Style, the Active Tab Indicator, Indicator Position, Indicator Border Width and Indicator Color.

Figure 14:  Border, Indicator

Tabs Settings

Tabs Settings allow you to choose the Text Alignment, enable text wrapping with Overflow Text, and set the Hover Color and Hover Opacity.

Figure 15:  Tabs Settings

Appearance - Tabs

Each container mode has its own set of Appearance settings, so the settings in this section will only be displayed when you select Tabs as your Container Mode in Container Settings. For more information about container modes, please see our article here.

Inactive Tab

With Inactive Tab settings you can apply changes to the inactive (unselected) tab, setting the Font Color, Background Color, Background Opacity, Font Size, Font Style, and Border Color Properties.

Figure 16:  Inactive Tab

Active Tab

The Active Tab settings control the appearance of the active (selected) tab. You can set the Active Font Color, Active Background Color, Active Background Opacity, Active Font Size and Active Font Style.

Figure 17:  Active Tab

You can also select the Active Border Style, the Active Tab Indicator, Indicator Position, Indicator Border Width and Indicator Color.

Figure 18:  Active Border, Indicator

Navigation Bar

The Navigation Bar is the area behind the container tabs. You can set the Navigation Background Color, Navigation Background Opacity, Navigation Border Style, Navigation Border Color, Navigation Border Width, Navigation Border Radius and the distance between tab in Separation with Tabs Space Between.

Figure 19:  Navigation Bar

Tabs Settings

Tabs Settings allow you to choose the Text Alignment, enable text wrapping with Overflow Text, and set the Hover Color and Hover Opacity.

Figure 20:  Tabs Settings

Appearance - Carousel Settings, Dropdown Styling

Each container mode has its own set of Appearance settings, so the settings in this section will only be displayed when you select the correct container mode. To display the settings for Carousel container mode, select Tabs as your Container Mode in Container Settings. To display the Dropdown Styling settings, select the Dropdown container mode. For more information about container modes, please see our article here.

Carousel Arrows

With Carousel Arrows settings you can enable arrows to highlight data in the chart. You can embed Arrows inside the container, set the Arrows Margin, choose a custom Arrows Icon, and Arrow Bottom.

Figure 21:  Carousel Arrows

You can also set the Arrows Color, Hover Arrows Color, the Arrows Opacity and the Arrows Size.

Figure 22:  Arrows Color, Size

Carousel Indicators

When you enable carousel Indicators, you can choose a custom Indicators Icon, Indicator Color, Active Indicator Color, Indicator Opacity, and Indicator Size.

Figure 23:  Carousel Indicators

Carousel Slide Show

When you enable the carousel Slide Show, you can set the Switch Time for each slide.

Figure 24:  Carousel Slide Show

Dropdown Styling

When you choose a dropdown container mode, you'll open the Dropdown Styling settings, where you can choose the style of Background Color (this example uses Gradient styling), Gradient Color (Start), Gradient Color (End), Font Color, Font Size and Font Style.

Figure 25:  Dropdown Styling

You can also choose a Border Style, choose a Border Color and Border Thickness.

Figure 26:  Border

Templates

Vizlib Container Grid supports Vizlib Templates now, so you can pick the look and feel you want and apply it with one click.

Using Templates

You can find template settings in the property panel under Templates.

Figure 27:  Templates

To use templates, click on View Templates to open the template screen. You'll see a list of available themes, so you can choose the theme you want and it'll be applied right away. If you need to change the template theme, select one and apply the changes with one click.

Figure 28:  Templates Example

Managing Templates

If you find you need to make more changes to the template theme, you can use the settings in the Appearance tab to set the look and feel you want.

If you'd like to know more about managing or working with Vizlib Templates, please see our article on creating and saving templates here.

Interactivity and Alternate States

These settings control how users interact with the container grid object and allow you to assign it to an alternate selection state.

Interactivity

Interactivity settings control how the user interacts with the container grid object. You can choose to show a Full screen Icon to maximise objects when in analysis mode.

Figure 29:  Interactivity

Alternate State

Alternate State permits you to assign the Vizlib Container Grid to an alternate selection state, enable to Alternate States Manager and Show Alternate State Icon. You can find more information about working with alternate states here.

Figure 30:  Alternate State

Context Menu

The right-click context menu in Container Grid separates container-level options from inner chart options based on where you click. This applies to all nesting levels, including Container Grids added as Master Items that contain other Master Item objects (for example, a Container Grid with a nested Table).

The context menu displays different options depending on where you right-click:

• Container element (for example, the navigation bar) - Under Container options, the software displays only container-related options.

  Figure 31: Container options

  

• Inner chart — Under Chart options, the software displays the chart's own options, with container-specific actions available in a dedicated Container options submenu.

  Figure 32: Chart options

  

Data export for the currently displayed inner chart is accessible from Container options > Export Data > Excel.