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 drag and drop the Button Set onto a page. A Button Set can also 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 on Salesforce

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

Button Set Properties

Click the Button Set component to access this property pane.

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

  • Spacing: Sets the spacing of the Header relative to other components on the page. Spacing can be managed for Top Margin, Bottom Margin, Left Margin, Right Margin. All margins can be set to one of the following:

    • None
    • Extra Small
    • Small
    • Reduced
    • Regular
    • Increased
    • Large
    • Extra Large
    • Huge

    Note

    These sizes are relative to one another; the baseline is determined by Design System settings.

Display Logic tab [[]]

Standard display logic options are available.

Button Group Properties

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

Properties [[]]

  • 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.
  • Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.

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.

Basic Tab [[]]

  • Button Label: Text for the button. The default label is “Button.”
  • 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 [[]]

To add actions to a button:

  • Add Action: Click add to add actions and set them.

  • Convert to Action Sequence: Click action-sequences to establish an action sequence.

    • Display Name: Give the sequence a memorable name.
    • Description: Describe the goal or purpose of the sequence.

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.

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 Hot Key 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 allow you to display or hide buttons, based on defined data conditions.

  • Render Conditions: These conditions govern when a button will display.
  • Enable Conditions: These conditions govern when a displayed button is disabled or enabled.