Button Items settings (Figure 1) 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.

TABLE OF CONTENTS

• Creating a button
• Applying Button item properties
  • Setting the name, label, and adding an icon
  • Changing the font color and the button background
  • Setting color based on state conditions
  • Selecting an Action

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

Back to Contents

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

Back to Contents

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 

Back to Contents