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, Skuid 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.

Skuid SFX

Warning

You can add a custom Salesforce button type to the Button Set component. However, if you deploy a Skuid 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 [[]]

  • 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.
  • 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).

Advanced tab [[]]

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

Styles tab [[]]

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

  • 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, Skuid 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.

  • Margin: Sets a component’s margin (the space around it) relative to other components on the page.

    • To set margins for all sides, click border-all All.
    • To set margins for each side individually, click border-separate 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 [[]]
  • 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
Advanced tab [[]]
  • Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
Styles tab [[]]

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

  • 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, Skuid 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 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 [[]]
  • 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:

Note

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

Advanced tab [[]]
  • Unique ID (optional): Skuid automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
Styles tab [[]]

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

  • 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, Skuid 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.

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

Skuid 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.