Note: Nintex Apps is in beta release.

Modals

A modal—sometimes called a popup—is a dialog box that overlays a page. Modals are often used to show a subset of components related to a particular process—or show secondary, related data—without forcing the user to leave the page.

Using Modals

Modals can be created in the Surfaces area of the Index. Once a modal is created, it can be selected from the Index. Once selected, drag and drop components into the modal to configure its appearance. To display a modal to the end user, create an action flow with the Show modal action. Modals can be reused across more than one action flow.

 

Manage modals

To add a modal from within the Surfaces area:

  1. In the Surfaces area, click the plus icon.

  2. Click Modal. The modal element appears in the canvas.

 

To add a modal from while building a Show modal action:

  1. In the Select a modal property, click Create new modal.

  2. Provide a modal name, which is used as the Title property.

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

 

To delete a modal:

  1. In the Surfaces area, click the modal you wish to remove.

  2. In the canvas, click More Options on the modal's component toolbar.

 

To call a modal from the Show modal action, select it within the action's properties. Modals can be reused across action flows—but ensure all necessary context variables are configured properly.

 

To edit the components within a modal, drag and drop them into either the primary "modal" area or the "footer" area. The modal area is commonly used for arranging the main components of the modal's intended process, while the footer is commonly used for confirm/cancel buttons, alongside other secondary elements.

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.

Context variables must be set explicitly in each action that opens a surface.

For more information, see Context

Best Practices

  • 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.
  • Modals are commonly used as row actions within the Table component—utilizing context conditions to display related data.
  • To prevent a modal from accidentally closing when a user clicks elsewhere, consider enabling the Restrict closing the modal property. When enabled, the only way to close a modal is to click the X button within it (or leave the page entirely).

Properties

Component properties

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

  • Restrict closing the modal: When enabled, modals can only be closed by clicking the X button within the modal—pressing Escape or clicking outside the modal will not close it.

  • 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
  • Unique ID (optional): Nintex Apps 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.

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, 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 menu.

    Note: 

    To refresh available style variant options, click refresh 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.

Note:  For information on individual condition properties, see the Display Logic docs.

Style variant conditions

These conditions govern which style variant is applied and displayed on a component or element.

Note: 

You can create one, or more, style variant conditions and set each individually.

  1. Click Add a new condition to add a new style variant condition.
  2. C lick the new style variant condition and configure.

When Nintex Apps executes the display logic, the style variant conditions are evaluated in order.

  • Use this Style Variant if...: The model conditions that must be met to enable the styling.

    • ALL conditions are met
    • ANY conditions are met
    • Custom logic is met
      • Condition logic: The custom logic for grouping and applying one or more conditions.
    • Style variant: The style variant to be rendered if conditions are met.

Set actions that will occur once the modal is closed.

Click add Add action, then select:

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