Properties - Element List - Dimensions

In Vizlib Toolbar, you can use dimensions to add to the Element List.

Note: If you want to change any color settings, you'll use the color picker. You can find a complete guide to using the color picker here.

This topic contains the following sections:

Choose Input - Dimension

To add a dimension in Vizlib Toolbar, go the Choose Input setting and select Dimension from the drop-down (Figure 1). You'll create a new element in the property panel Element List.

Figure 1: Choose Input

Dimension - Output Type

When you open the new element settings, you'll see the dimension name and a choice of four output types: Selection Bar, Dropdown, Image and Calendar (Figure 2). Click on the Output Type you want to use to select it (in Figure 2 the calendar is selected).

Figure 2: Output Type

Selection Bar

The selection bar Label Settings (Figure 3) allow you to enter a Label Expression, choose to override the global Layout Settings, display a List Label, and select a Label Position. If you choose to Override global settings, you can also set the label Font color with the color picker, and choose the Font family, Font style, and Font size.

If you choose a Responsive Font size, the font will change size if the toolbar object is re-sized.

Figure 3: Selection Bar Label

The Padding Settings (Figure 4) allows control over the padding both above and below and to the sides of the values in the selection bar.

Figure 4: Selection Bar padding settings

The Selection Bar Settings (Figure 5) contain controls for the Button type, selection bar Orientation, a choice of whether to Wrap the selection bar items, set a Value Width, and select the vertical and horizontal Alignment.

Figure 5: Selection Bar Settings

Sorting settings (Figure 6) allows all the normal settings for sort. Note that for selection bar, very often the Sort by state should be disabled. This is particularly true when using the Quick Selection option.

Figure 6: Sorting Settings

The Quick selection option (Figure 7) allows an alternative mode of selection where confirmation is not needed after selecting values. This is particularly useful in selection bar mode but if you prefer to not show the more advanced options for selections it can be used in dropdowns too.

Figure 7: Quick Selection

Dropdown Label Settings (Figure 8) allow you to enter a Label Expression, display a List Label, and select a Label Position. You can also set the label Font color with the color picker, and choose the Font family, Font style, and Font size. If you choose a Responsive Font size, the font will change size if the toolbar object is re-sized.

Figure 8: Dropdown Label

The Dropdown Settings (Figure 9) allow you to choose a Max dropdown height, set a dynamic or customized Dropdown width, select a Cell height, and choose the Alignment for the dropdown items.

Figure 9: Dropdown Settings

The Quick Selection option (Figure 10) allows an alternative mode of selection where confirmation is not needed after selecting values. This is particularly useful in selection bar mode but if you prefer to not show the more advanced options for selections it can be used in dropdowns too.

Figure 10: Quick Selection

Image

Image Label Settings (Figure 11) allow you to enter a Label Expression, choose to override the global Layout Settings, display a List Label, and select the Label Position. You can also set the label Font color with the color picker, and choose the Font family, Font style, and Font size. If you choose a Responsive Font size, the font will change size if the toolbar object is re-sized.

Figure 11: Image Label

The Image Settings (Figure 12) allow you to select an Image Source, choose the Orientation, whether to Wrap the image, and choose a dynamic or fixed Size. You can also set the image Height and Width using the sliders.

Figure 12: Image Settings

You can also choose a Stretch Image option and select the Image Alignment (Figure 13).

Figure 13: Stretch and Alignment

Calendar

Calendar Label Settings (Figure 14) allow you to enter a Label Expression, choose to override the global Layout Settings, display a List Label, and choose a Label Position. You can also set the label Font color with the color picker, and choose the Font family, Font style, and Font size. If you choose a Responsive Font size, the font will change size if the toolbar object is re-sized.

Figure 14: Calendar Label

Calendar Settings (Figure 15) allow you to choose a Picker Type (from Single Picker, Range Picker, Always one date and Always one range) and customize a Date format mode, choosing to display Month/Year drop-downs. If you use date ranges, you can add Custom Ranges (entering a Reference date) and set the Object alignment.

Figure 15: Calendar Settings

Actions (Figure 16) can be added in text and button visualizations.

Figure 16: Actions

Bookmarks (Figure 17) can be added in selection bars and dropdowns.

Figure 17: Calendar Settings

Line objects (Figure 18) can at any time to help with separation of objects in the design.

Figure 18: Line Object