Button Set

The Button Set component is a container for one or more buttons, each of which can be configured to perform a set of actions through the Action Framework. While the functionality is similar to the Page Title component, the Button Set’s flexible layout make it a valuable element for creating Skuid pages.

Note

While the Button Set is the suggested way to create buttons, if you prefer integrating buttons with headers, Skuid continues to support the creation of buttons within the Page Title component.

Using the Button Set Component

To add buttons in early Skuid releases, it was necessary to place a Page Title component within the Skuid page, then create a button within that Page Title component—regardless of whether there you needed header text. (Not the most intuitive workflow.)

Button Sets allow you to create buttons without using the Page Title component.

  • 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 popups, drawers, or sliding panels.
  • Adjust the Button Set properties to determine the button location.
  • On the component, add one (or more) buttons, then configure the button actions in the Button Properties pane using the Action Framework. For each button, you can configure individual actions or use the Run Multiple Actions action type to create full Action Framework scripts.

By default, data-related actions on Button Sets (Save, Cancel, etc.) will only affect the model the Button Set is attached to. However, you can use Run Multiple Actions to save additional models that the Button Set component is not attached to.

Best Practices

Every button set stretches horizontally across the entire area of its container—whether that container be a tab, a grid division, or the entire screen—even if the Button Set only holds one button. Because of this, there are two best practice layout options for Button Set layout:

  • Use the Button Set to create a centralized button area at the top of your Skuid page.

    or

  • Use the Button Set within a Responsive Grid to position the Button Set beside the component it affects.

Warning

Using a custom Salesforce button on a Skuid page with the Salesforce Support Service Cloud console may result in strange functionality.

Properties

Button Set Properties

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

Advanced tab [[]]

Display Logic tab [[]]

Conditional rendering allows you to display or hide the Button Set component, based on defined data conditions.

Button Properties

Basic tab [[]]

  • Button Type: Choose the type of action that the button will initialize:
    • Run Multiple Actions: The best option if using the Action Framework to create a series of actions initialized by the button.
    • Go to URL: A shortcut to the Go to URL action.
    • Pop Up: The button opens a popup.
      • Configure popup: Opens a blank popup window that can be configured.
    • Delete: The button deletes the selected on-screen item.
    • Save: The button saves all on-screen changes.
      • Roll back entire save on any error:
        • Not checked: If multiple models are selected using Additional Models to Save, and there is an error during a save for a specific model, changes to that model will not be saved, but changes to any other models included in the button’s properties will be saved.
        • Checked: If multiple models are selected using Additional Models to Save, and there is an error during a save, changes will not be saved to any other models included in the button’s properties.
    • Cancel: The button cancels all on-screen changes.
    • Custom: Run Skuid Snippet: The button runs a Skuid snippet.
      • Snippet Name: The name of the snippet to run.
  • Button Type (Skuid SFX only*): Choose the action the button with initialize:
    • Share: The button opens the User and Group Sharing list, showing who has sharing access to the record in context.
    • Clone: The button clones the selected record and allows the end user to rename the record.
    • Custom SF Button/Link: This allows you to access and use custom buttons created on the object the Button Set is linked to (via the model).
      • Custom Button/Link Name: Name of custom button.

Additional properties will vary based on the chosen Button Type.

  • Button Label: Text for the button. The default label is “New Button.”
  • Button Icon (optional): The icon to be included to the button label. Click the field picker to select an icon.
  • Additional Models to save and Additional Models to cancel: By default, the Save button only saves changes made to the model the Button Set is attached to; similarly, the Cancel button only cancels changes to that model. To save or cancel changes to additional models on the page, select the models from the list.
  • Redirect URL, After Save Redirect URL, and After Cancel Redirect URL: These are shortcuts to the Go to URL action and its related properties. The After Save Redirect URL and After Cancel Redirect URL will take affect after a save or cancel completes, respectively.

Actions tab [[]]

If Run Multiple Actions is selected as the Button Type in the Basic tab, this tab becomes available.

  • Actions:
    • fa-plus-circle Add Action: Click to add actions and set them.
    • Convert to Action Sequence: Click to establish an action sequence.
      • Display Name: Give the sequence a memorable name.
      • Description: Describe the goal or purpose of the sequence.
  • Action Types: Use the Action Framework to launch actions from the Queue.

Advanced tab [[]]

  • Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.
  • CSS Class (optional): Assign a CSS class to the component’s DOM element.
  • Is Secondary: If checked, will change the button’s style to match the style of the standard Cancel button.

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.

  1. Modifiers include:
    • Alt
    • Ctrl
    • Command
    • Shift
  2. Key: Lists all available keys.
  3. 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 [[]]

Conditional rendering allows 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.

Warning

Using a custom Salesforce button on a Skuid page with the Salesforce Support Service Cloud console may result in strange functionality.