Button Set

The Button Set component is a container for one or more Button Groups, each of which contain one or more buttons. These buttons can be configured to perform a set of actions using the Action Framework.

Note: While the Button Set is the recommended way to create buttons, if you prefer integrating buttons with headers, Nintex Apps also supports the creation of buttons within the Ink Page Header component.

Using the Button Set Component

The Button Set lets you create Button Groups, each containing one or more buttons that can trigger actions on the page's models.

Just add a Button Set to a page. A Button Set can also be added to other components (such as a Responsive Grid or Tab Set, among others) or embedded into modals, drawers, or sliding panels.
Adjust the Button Set properties to determine the location of the Button Groups.
On the component, click add Add button group to add a Button Group.
- Click the Button Group to add buttons to the group and configure Button Group properties.
- Click an individual button to configure the button itself, and to open the Actions tab in the Button's properties pane to add individual actions or create full Action Framework scripts.

Nintex Apps for Salesforce

Important: You can add a custom Salesforce button type to the Button Set component. However, if you deploy a Nintex Apps page with that Button Set within the Salesforce Support Service Cloud, unexpected functionality may result.

Properties

Component properties

Click the Button Set component to access this property pane.

General Tab

Unique ID (optional): Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
Model: Button sets can be attached to one model. Doing so makes all data-related button types—such as Save, Cancel, and Delete—automatically affect the model selected here.
Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

Note:
To refresh available style variant options, click refresh Refresh style variants.

This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

Layout tab

Position: This field determines the alignment of the buttons within the container. You can choose:
- Right ( default )
- Left
- Center
Expand to fill: The Button Set component extends across the entire width of its container (whether it's a page, a grid division, or a tab). By default, Button Groups are clustered together within the Button Set and displayed in the selected Position. When Expand to Fill is checked, Button Groups stretch horizontally across the entire area of the Button Set (even if the Button Group only holds one button).
Margins: Sets a component's margin (the space around it) relative to other components on the page.
- To set margins for all sides, click All.
- To set margins for each side individually, click Separate.
Margin values can be set to any configured spacing variable for the page's design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Display logic tab

Standard display logic options are available to display or hide the component or feature.

Nested elements

Button Group properties

Click the border of the Button Group to access this property pane. To add a new Button Group, click the Button Set, then click add Add button group.

General tab

Unique ID (optional): Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

Note:
To refresh available style variant options, click refresh Refresh style variants.

This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.
Display type:
- Detached: Buttons within the Button Group are separated by spacing.
- Attached: Buttons within the Button Group are attached to each other.
- Combo: Buttons are stacked under the leftmost button in the Button Group and are accessible by clicking an arrow to open the dropdown button menu.
  - Icon: The icon to be included to the Combo button label. Click the field picker to select an icon.
  - Icon position: Sets the position of the icon on the button group label.
    - Left
    - Right
- Menu: Buttons within the Button Group are displayed as a menu on the page that can be accessed by selecting the arrow next to the Button Group's label.
  - Allow HTML in label: Determines HTML rendering behavior for Button label contents. When enabled, any HTML syntax will be rendered. When disabled, HTML syntax is displayed as plain text. For example:
    
    Enabled:
    This text is important
    Disabled:
    
    <strong>This text is important</strong>
  - Label (optional): Text for the Button Group's label. The default label is "Select." Can also contain rendered HTML if Allow HTML in label is enabled.
  - Icon (optional): The icon to be included to the Button Group label. Click the field picker to select an icon.
  - Icon position: Sets the position of the icon on the button group label.
    - Left
    - Right

Layout tab

Margins: Sets a component's margin (the space around it) relative to other components on the page.
- To set margins for all sides, click All.
- To set margins for each side individually, click Separate.
Margin values can be set to any configured spacing variable for the page's design system. Margin cannot be set an arbitrary value; it must use a design system variable.

Display logic tab

Standard display logic options are available to display or hide the component or feature.

Button properties

Click the button itself to access this property pane. To add an new button to a Button Group, click the Button Group's border, then click add Add button.

General tab

Unique ID (optional): Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.

Note:

To refresh available style variant options, click refresh Refresh style variants.

This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

Allow HTML: Determines HTML rendering behavior for Button label contents. When enabled, any HTML syntax will be rendered. When disabled, HTML syntax is displayed as plain text. For example:

Enabled:
This text is important
Disabled:

<strong>This text is important</strong>
Button label: Text for the button. The default label is "Button." Can contain merge syntax or HTML.

Button icon ( optional ): The icon to be included to the button label. Click the field picker to select an icon.
Button icon position: Set the position for the icon on the button.
- Left
- Right
Aria label: Add a label to be used by access technologies such as screen readers and conforms to Web Accessibility Initiative—Accessible Rich Internet Applications ( WAI-ARIA ) specifications. This property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

Note: If no Aria Label is specified, access technologies will use the Button label.

Actions tab

Add actions to a button:

Click add Add action, then select:

Action Type: Use action flows to launch actions.

Note: Use the Show/hide menu action to add a dropdown menu to the button.

Tooltip tab

A floating box that displays when the end user hovers over a button, the tooltip provides guidance usage.

Text: The tooltip's content.
Position: This field determines the alignment of the tooltip relative to the button:
- Top (default): Above the button.
- Bottom: below the button.
- Left: to the left of the button.
- Right: to the right of the button.
Note: The Position settings are contingent upon available space. For example, if the Button Set is at the top of the page, and the tooltip position is set to Top, the tooltip cannot display above the button: there's not space. So it will display below the button.
Tooltip style:
- Dark (default): The tooltip box is a black.
- Light: The tooltip box is white, with a drop shadow.
Compact size?: If checked, reduces the amount of padding around the text in the tooltip box.

Hotkeys tab

This tab allows you to establish a set of hotkeys that will immediately execute the actions associated with the button. Select the modifier and key, then test.

Note: Nintex Apps focus hotkeys will not override hotkeys previously assigned by the operating system or browser, so be sure to test the key combination. If it's not providing the expected results, the key combination may already be assigned. Try a different combination.

Click add Add Hotkey and then configure:

Modifiers include:
- Alt
- Ctrl
- Command
- Shift
Key: Lists all available keys.
Ignore hotkey if end user is typing in input element: If checked, the hotkey combination will be ignored while the user is entering content into any text field. (Useful if the hotkey combo would conflict with standard data entry keys, like arrows keys.)

Display logic tab

Standard display logic options are available to display or hide the component or feature.