Popups

A Popup element—sometimes called a modal—is a dialog box that overlays, a page, allowing the user to see and interact with a selected set of Skuid components and their data without actually leaving the page.

How data is displayed within a popup is determined by which component(s) are added to the popup’s dialog box.

Warning

Skuid does not support using popups with sliding panels.

Using Popups

Add Popup boxes wherever you can add action triggers to the page:

  • Add a Show Popup action wherever the Action Framework is used.
  • On a Button Set or Page Title component button, by selecting Pop Up as the button type.
  • On a Table component when creating row, global, or mass actions, or interactions, by selecting Pop Up as the Action Type.

Once you create the trigger, add an icon and/or label that users can select to open the popup.

Then, customize the Popup box itself by clicking Configure Popup:

  • Add a Title that will display on the popup’s header. You can also adjust the Width or even change the icon used to close the Popup.
  • Since the Popup is essentially a container, add component(s) to the popup to display data:
    • As always, be sure to attach the component to the appropriate model, and configure it to display the necessary data.

Best Practices

  • Because popups are a way to display a small subset of data without navigating away from the page, they often include one (or more) data components. But bear in mind that a popup is a limited space, a temporary “working area.” Use popups for specific, concentrated tasks that the user needs to complete before returning to a workflow on the underlying page.

    To display a more complex or detailed set of tasks in an element that nonetheless allows the user to easily navigate back to their main workflow, consider using a Tab Set component.

Properties

Basic tab [[]]

  • Popup Title: A descriptive name for the popup that will appear in the popup’s header.
  • Width: Adjust the width of the popup using percentage, pixel, or other forms of measurement.

Advanced tab [[]]

  • Close Icon (optional): The icon positioned at the corner of the popup; used to close the popup. Click the field picker to select an icon.

After Close Actions tab [[]]

Set actions that will occur once the popup is closed.

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