Modals¶
A Modal—sometimes called a popup—is a dialog box that overlays, a page, allowing the end 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 modal is determined by which component(s) are added to the modal’s dialog box.
Using Modals¶
Add Modals wherever you can add action triggers to the page. Add a Show Modal action wherever the Action Framework is used (for example, on the Table component when creating row, global, or mass actions, or interactions.
Once you create the trigger, add an icon and/or label that end users can select to open the modal.
Then, customize the Modal box itself by clicking Configure Modal:
- Add a Title that will display on the modal’s header. You can also adjust the Width or even change the icon used to close the modal.
- Since the modal is essentially a container, add component(s) to the modal 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 Modals 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 modal is a limited space, a temporary “working area.” Use Modals 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 end user to easily navigate back to their main workflow, consider using a Tab Set component.
Properties¶
Modal Properties¶
Basic Tab [[]]¶
- Modal Title: A descriptive name for the modal that will appear in the modal’s header.
- Close Icon (optional): The icon positioned at the corner of the modal; used to close the modal. Click the field picker to select an icon.
- Button Alignment: All modals have an Add Button option. Choose the alignment of the added buttons:
- Left
- Middle
- Right
- Width: Adjust the width of the modal using percentage, pixel, or other forms of measurement.
Styles tab [[]]¶
- Style Variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component’s style. Also, Skuid Builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.
After Close Actions tab [[]]¶
Set actions that will occur once the modal 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.
Modal Button Properties¶
When you add buttons to the Model, these buttons have their own properties which correspond to those for Button Set buttons.