Button Properties

Use the Vizlib Button properties panel to configure button items, customize appearance, set up actions, and control interactivity.

Appearance

Appearance settings manage the look and feel of your Vizlib Button.

General

In the General settings (Figure 1), you can enter a Title, Subtitle, Footnote and choose to Toggle off hover menu. You can also choose to Show Details to display information about dimensions, measures or descriptions.

Figure 1: General

Button Sizing and Spacing

In Button Sizing and Spacing (Figure 2), you can choose to customize the Sizing, setting a Button Width, Button Height and Spacing.

Figure 2: Button Sizing and Spacing

Position

In Position (Figure 3), you can choose the Group Orientation and Horizontal Alignment.

Figure 3: Position

Colors

With Colors settings (Figure 4) you can choose a Single or Multicolor palette for the button, choosing from a range of preset color schemes, select a separate option for the Hover Color, and select a Transparent Background.

Figure 4: Colors

Borders & Shadow

In Borders & Shadow (Figure 5) you can choose to enable a Border, setting a Corner Radius, Border Width, choose a Border Color and select a Shadow Type when you Enable shadow.

Figure 5: Border & Shadow

Font

Font settings (Figure 6) include controls to set the Font Color, Font Style, the Font Family and Font Size.

Figure 6: Font

Button Items

Button Items settings control the individual settings for each button. You can have multiple buttons and actions within a sheet.

Colors, labels, and icons can be managed individually for each button; other appearance and animation settings are global.

Creating a Button

1. Drag the Button extension to the sheet
2. From the properties panel, click Button Items
3. A default name of Button 1 is assigned; click Button 1 to amend its properties.

Applying Button Item Properties

Setting the Name, Label, and Adding an Icon

• Name - enter a unique name for your button.
• Button Label - enter the button label that is visible to users. Tooltip text - add a small sentence to guide your users.
• Button icon - slide the toggle to the right to enable an icon. Click the default icon (thumbs up) to view the list of icons. Use the Search field to narrow down your choices.
• Icon color - select from the preset colors, enter a Hex code, or click the palette icon to view the color picker. Icon size - use the slider to adjust the size of the icon on the button.
• Icon position - select from the options: Left, Right, Centre (hides the button label), Above, Below.

Figure 1: Enter Name, Label, and Icon details

Changing the Font Color and the Button Background

Other customizations include changing the button's:

• Font Color - slide the toggle to the right to use the Automatic color (white).
• Background - slide the toggle to the left to add Custom colors or to the right to keep the Automatic color (blue).
• Active Color - set the color for the button's active state.
• Inactive Color - set the color for the button's inactive state (when it isn't in use).
• Image Background URL - enter a URL to an image instead of a full color.
• Show/Hide Condition - add to only display the button when a condition is met.

Figure 2: Font Color, Background

Setting Color Based on State Conditions

• Active State - enter a Hex color expression which is applied if the condition is true.
• Disabled State - choose from Opacity or Gray to apply when the button cannot be pressed.

There's an example of these states in Figure 4.

Figure 3: Active State

Active     Disabled (Opacity)    Disabled (Grey)

Figure 4: Button State Examples

Selecting an Action

1. Click Add Action.
2. The default action is the Selection in Field, so the heading of the Action always matches the action you've selected from the Pick Action drop-down list.
3. Select from the list of Vizlib Actions. The fields displayed below the Action (in our example - Field and Field Value) change according to the Vizlib Action you've selected.

Figure 5: Selecting an Action

Interactivity, Vizlib Actions, Alternate State

These settings control how users interact with Vizlib Button in analysis mode, including available actions, animation behavior, and alternate state configuration.

Vizlib Actions

The best way to make the most of Vizlib Button is to use Vizlib Actions, with multiple actions can be used on a single button (Figure 1). You can add actions in the Button Items section of the property panel. Click Add Action to start, and then select an action from the Pick Action drop-down.

Figure 1:  Figure 1: Vizlib Actions

We've use cases for actions you can use on Vizlib Button in Table 1.

Table 1: Actions Use Cases

Interactivity

Interactivity settings (Figure 2) allow you to control how users interact with your Vizlib Button in analysis mode. You can enable Animations to improve the user experience by highlighting button actions, selecting from the On Hover and On Click drop-downs. If you enable Allow Overflow, buttons will appear outside of the object boundaries. Selecting Disable Export to hide the export button, and enable a Tooltip to display the button label or name on cursor hover.

Figure 2: Interactivity

Alternate State

Alternate State (Figure 3) allow you to set an alternate states to assign the object to an alternate selection state.

You can find more information about working with alternate states here.

Figure 3: Alternate State