Modals

A modal is a dialog box that overlays the current page. Use modals to display components related to a specific task or secondary information without requiring users to leave the page.

Jump to:

Use modals

You can create modals in the Surfaces area of the Index. When you add a modal, it appears on the canvas, where you can add and configure components to define its content and behavior.

To display a modal to the end user, add a Show modal action to an Action flows and select the modal. You can reuse the same modal across multiple action flows.

Work with modals

  1. In the Surfaces area, click .

  2. Select Modal.

    The modal appears on the canvas.

  1. In the Elements panel, click Action flows.

  2. Click .

  3. Type a modal Name and Description.

  4. Click Create.

  5. Add the Show modal action to the canvas. For more information, see Add an action.

  6. In the Properties panel, under Select a modal, you can:

    • Select an existing modal from the drop-down.

    • Create a new modal:

      1. Click Create modal.

      2. Type Modal name.

      3. Click Create to return to the action flow canvas or Create and edit to begin editing the modal.

  1. In the Surfaces area, select the modal you want to delete.

  2. On the canvas, click the modal, and click .

  • Drag and drop components into the following areas:

    • Modal: Contains the primary content and controls used to complete the task.

    • Footer: Contains action buttons such as Confirm, Save, or Cancel.

Context considerations

As a surface, this element serves as a context container, filtering and displaying context-specific data. Rather than hardcoding values, you'll define one or more context variables—named placeholders for fields like record Ids—to identify which data should be shown. These context variables are assigned each time an action flow calls this surface, allowing you to reuse the same panel, modal, or drawer for multiple scenarios simply by passing in different values each time it's opened.

Set context variables explicitly in each action that opens a surface.

For more information, see Context.

Best Practices

  • Keep in mind that a modal provides limited space and acts as a temporary working area. Use modals for specific tasks that users complete before returning to the workflow on the underlying page.

  • Use modals as row actions within the Table component, using context conditions to display related data.

  • To prevent a modal from closing accidentally when users click outside it, turn on the Restrict closing the modal toggle. When turned on, users can only close the modal by clicking or by leaving the page.

Component properties

  • Unique Id (Required): An automatically generated alphanumeric identifier for the component. You can rename if needed.

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

    Note: 

    • To refresh available style variant options, click Refresh style variants.

    • This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • Title: A descriptive name for the modal that appears in the modal's header.

  • Full screen modal: To display the modal across the full width of the screen, turn on the toggle.

  • Width: Sets the width of the modal using percentage, pixel, or other forms of measurement. For more information, see Sizing measurements.

    Note: This property is not available when the Full screen modal toggle is turned on.

  • Restrict closing the modal: To restrict closing the modal, turn on the toggle. When turned on, users can only close the modal by clicking within the modal. Pressing Esc or clicking outside the modal does not close it.

  • Show close icon: To display the close icon in the modal, turn on the toggle.

    • Close icon (Optional): The icon is used to close the modal. To edit and reset the icon, click .

  • Show header: To display a header with the Title, turn on the toggle. When turned off, the header and Title do not display.

  • Show footer: To display a footer, turn on the toggle.

  • Display errors: Determines where error messages are displayed.

    • In modal: Displays error messages within the modal.

    • On Page: Displays error messages on the page.

  • ARIA role: Determines which type of user interface element the component represents for assistive technology. The available options refer to standard landmark ARIA roles. For more information on each role type, see MDN web docs.

    • Dialog: Use to define a window that overlays the main content and requires user interaction. A dialog can contain forms, messages, or other interactive content and does not necessarily require immediate action.

    • Alert dialog: Use to define a type of dialog that displays important or urgent information and requires immediate user response before continuing. It is used for critical confirmations or warnings and should contain at least one action for the user to resolve the message.

  • ARIA label: Determines what description will be read by assistive technology, such as screen readers, by setting the ARIA-label HTML attribute, which is part of the Web Accessibility Initiative—Accessible Rich Internet Applications (WAI-ARIA) specification. For more information, see ARIA-label attribute.

    This property is used to describe elements where text may not be visible. It can be a specific string of text, the merge variables of one or more fields, or a combination of both. For more information, see Merge syntax.

  • Moveable: To allow end users to move the modal to a different position on the screen, turn on the toggle.

  • Resizable: To allow end users to resize the modal, turn on the toggle.

Set the conditions that determine which style variant is applied to the modal. Create one or more display logic rules and configure the conditions for each rule. At runtime, Nintex Apps evaluates the rules and applies the corresponding style variant when the conditions are met.

  • : Click to add a new display logic rule.

  • Display: Select the display option from the drop-down for the rule.

  • If: Defines the conditions that determine when the selected display option is applied.

    • All: Applies the display option only when all conditions in the rule evaluate to true.

    • Any: Applies the display option when at least one condition in the rule evaluates to true.

  • Manage conditions: Click to select and apply display logic statements.

    • Add group: Click to add nested group of conditions. Each group can use its own All are true or Any are true logic.

    • Create logic statement: Click to create a display logic statement with conditions and expressions.

Note:  For information on individual condition properties, see Design System Studio.

Set actions to run when the modal is closed.

To add actions, click Add. The following options are available:

Context variables for context containers are managed from the Context variables property tab. For more information about context variables, see Context.