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 components 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 components 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

(Just need to look up a property? Try going directly to the Property Library.)

Component properties

General tab [[]]

  • Title: A descriptive name for the modal that will appear in the modal’s header.

  • Full screen modal: If checked, the modal displays across the available width of the screen.

    • Width: Adjust the width of the modal using percentage, pixel, or other forms of measurement.

      Note

      This property is not available if Full screen modal is checked.

  • Show close icon: If checked, the modal displays an icon at the corner that can be used to close the modal.

    • Close icon (optional): The icon used to close the modal. Click the field picker to select an icon.
  • Show header: If checked, the modal includes a header with the Title contained within it. If unchecked, the header (and title) does not display.

  • Show button footer: If the Builder clicks add Add Button in the modal, this determines whether that button displays. If checked, the modal includes a footer with one (or more) button. If unchecked, the footer—and the buttons–do not display.

    • Footer button alignment: Choose the alignment of the added buttons:

      • Left
      • Middle
      • Right
  • Display errors: Display errors will show either “On page” or “In modal”. This controls where the errors will show allowing the end user to better understand the action they need to take.

  • ARIA role: Determines which type of user interface element the component represents for assistive technology. The available options all refer to standard landmark ARIA roles. For more technical information on each role type, refer to MDN web docs.
    • Banner: Used for defining global site details, such as company name, global search, logos, and similar information.
    • Complementary: Used for content that, while related to the main content area, is not necessary for that main area to stand alone. Typically used for sidebars and other supplementary information.
    • Content Info: Used for footers that appear on each page, which typically contain copyright information, navigation items, or similar content.
    • Form: Used to identify sections that comprise a singular form–even though it may be comprised of multiple components.
    • Main: Used to identify primary focus of the page.
    • Navigation: Used to indicate a section containing links for navigating a site.
    • Region: Used as a more generic landmark in order to indicate an area is relevant, but not categorized under the other available roles.
    • Search: Used to indicate a section contains elements for searching the page or site.

Advanced tab [[]]

  • Unique ID (optional): Skuid automatically generates an alphanumeric ID for the modal; if preferred, give it a practical name.
  • Moveable: If checked, end users can move the modal to a different location on the screen.
  • Resizable: If checked, end users can resized the modal.

Styles tab [[]]

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

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

Click add Add action, then select:

Nested elements