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.

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.