Create a Show/Hide Toggle Button

Have a component―a Skuid Table or a Form, for example―that end 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. Add a Button Set to the canvas.
  2. Click add Add button to create a new button, and then select it.
  3. In the Button Properties pane’s General tab:
    • 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 add 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.

  1. Click Save.

Warning

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