Create a Show/Hide Toggle Button

Have a component―a Skuid Table or a Field Editor, for example―that users need to display and hide as needed? Or maybe you want to show or hide a button or field? It’s easy: use the Button Set component to add a button with the Toggle Component action type.

Assumptions

Note

The tutorial below assumes you have a Skuid page with a functioning model. In this case, we will use an model that displays accounts.

Add a Show/Hide Button

Create the button [[]]

  1. Drag and drop the Button Set into the canvas.
  2. Click fa-plus-circle Add Button to create a new button, and then select it.
  3. In the Button Properties pane’s Basic tab:
    • Button Type: Run Multiple Actions
    • Button Label: Add a helpful label (for example Show/Hide Accounts)
    • Button Icon: Add a useful icon, if desired.

Create the button actions [[]]

  1. With the button selected, click the Actions tab in the Button Properties.

  2. Click fa-plus-circle Add Action, then select the newly-created action.

  3. In the action:

    • Action Type: Toggle Component
    • Behavior: Toggle
    • Component: Select the component, button, or field from the pick list.

    Note

    How do you find the correct component? Click a candidate, and a border will flash around the item in the page composer.

    Not the correct element? Select another until you find the right element.

  4. Click Save.

Warning

Using the Toggle Component action type on a component with its own conditional rendering settings may result in unpredictable behavior.