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