Visual Navigation

Visual navigation actions determine what the end user sees in the browser.

Jump to:

Show modal

Displays the modal.

  • Select a modal: Select an existing modal or click Create new modal. For more information, see Modals.

Close modals

Closes the modals.

  • Behavior: Select one of the following options:

    • Close all: Closes every open modal at once.

    • Close topmost: Closes the topmost modal.

Open sliding panel

This opens (or toggles) the sliding panel. For more information, see Sliding Panels.

Note:  To keep the panel open, turn off the Close when user clicks outside of panel toggle in the sliding panel properties.

  • Behavior: Select one of the following options:

    • Open: Displays the panel.

      Note:  If Open is selected, and the action flow containing this action occurs again, the sliding panel is not closed. To allow the panel to open and close each time, select Toggle as the behavior.

    • Toggle: Shows the panel if it’s hidden or hides it if it’s visible.

Close sliding panel

Closes one or all open sliding panels.

  • Behavior: Select one of the following options:
    • Close all: The button closes all open panels.
    • Close topmost: The button closes the topmost panel.

Show toast message

Displays a toast message in the bottom left of the screen to alert the user about page changes or notifications. To prevent user input until the message disappears, use the Block UI with message.

  • Allow HTML: To render HTML markup in the Message to display text, turn on the toggle. For example:

    • When the toggle is turned on: This text is important

    • When the toggle is turned off: <strong>This text is important</strong>

  • Message to display: The text that appears in the toast message. Supports Variables, Merge syntax, and renders HTML if the Allow HTML toggle is turned on.

  • Display duration: Sets how long the toast message remains on the screen.

  • Click to dismiss: To allow users to close the toast message by clicking on it, turn on the toggle. When turned off, the toast message disappears after the duration set in the Display duration property.

  • Style variant: Select one of the following options:

    • Default: Refers to the Default style variant.
    • Error: Refers to the Error style variant.
    • Warning: Refers to the Warning style variant.

    For more information, see Property Reference.

    Note:  Other toast variants are not currently available.

  • Position: Determines the alignment of the toast message on the screen. Select one of the following options:

    • Bottom left

    • Bottom center

    • Bottom right

    • Top left

    • Top center

    • Top right

Block UI with message

Stops users from interacting with the page and shows a message about updates or important actions.

  • Message: Text that blocks the UI.

  • Subtext: Smaller text that displays below the Message text to give more information.

  • Timeout (seconds): Sets how long the message blocks the UI. Select one of the following options:

    • 0.5-10: Sets the duration to block the UI, in increments within this range.

    • Never: Keeps the UI blocked until an Unblock the UI action occurs.

      Important:  If you select the Never timeout option, make sure to include the Unblock the UI action in the script.

  • Show spinner: To display a spinning icon that loops as long as the message is displayed, turn on the toggle.

  • Style: Determines the UI Blocker variant used to display the message.

    • Default: Refers to the Default style variant.
    • Dark: Refers to the Dark style variant.

    Note:  Other UI blocker variants are not currently available.

Unblock UI

Unblocks the UI once the actions between Unblock UI and Block UI with message have completed.

Go to URL

Sends users to a Nintex Apps page or an external website.

  • URL: The link that redirects the users. This can be:

    • A URL
    • An ID field for a Salesforce object
    • A page parameter

  • Open URL in: Select one of the following options:

    • Current Window:

      • If the button is used within an iFrame, the URL opens in the current iFrame.

        Note:  Other content blocks on the page remain the same.

      • If the button is not used within an iFrame, the URL opens in the current window.

    • Blank Window: Opens the URL in a new tab.

    • Parent Window: Opens the URL in the main browser window, even if the button is placed inside an iFrame.

      When working with Nintex Apps Lightning components:

      • Select Current Window to redirect only the contents of the Nintex Apps Lightning component.
      • Select Parent Window to redirect the entire page.

Ensure special characters in a URL are percent-encoded so the link works correctly. For more information, see Percent-encoding. This is important when using URL parameters, Variables or Merge syntax

  • Correct URL example: https://example.nintex.app/app/page?who_id={{ContactId}}&retURL=skuid__ui%3Fpage%3DPage%26id%3D{{Another.Id}}

  • Incorrect URL example: https://example.nintex.app/app/page?who_id={{ContactId}}&retURL=skuid__ui?page=Page&id={{Another.Id}}

You can use JavaScript functions like encodeURI() or encodeURIComponent() to encode URLs.

Show/hide menu

Allows the builder to add a drop-down menu to a button, image, or row action.

  • Menu location: Determines where the menu appears. The following options are available:

    • Current component: Displays the menu at the current component. (Default)

    • Mouse option: Displays the menu at the current mouse position.

  • 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 drop-down menu.

    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.

To construct the menu,

  1. On the menu, click Add option group.
    • Label: The text label for the group.
    • Icon: Select an icon for the group. (Optional)
  2. On the group, click Add option.
    • Label: The text label for the menu item.
    • Icon: Select an icon for the menu item. (Optional)
  3. To configure action for the menu item, go to Interactions properties tab. Interactions can be configured on various elements. Options vary, but may include:

    • Click

      • Go to URL: The link that redirects the users.

      • Run action flow: To select an existing action flow or add an action flow, click Add action flow.

    For more information, see Action flows.

Show/hide component

Hides or shows a selected Nintex Apps UI element, such as a component or any element with a unique ID like Field Editor fields or Navigation items.

  • Behavior:

    • Toggle: The button displays the component if it's hidden or hides it if it's currently displayed.
    • Show: The button displays a hidden component.
    • Hide: The button hides a displayed component.

  • Component: Select the component to toggle, show, or hide. Components are listed by their type and unique ID

    Note:  Each component’s unique ID is displayed in the General properties tab.

Run component action

Launches component-specific features within the UI.

  • Component: Select the Nintex Apps component to run the action on. Components are listed by component type and unique ID.
  • Action to Run: Select the component-specific action to run. Available actions vary by component:

  • Open all sections: Opens all closed sections within the selected Accordion.

  • Close all sections: Closes all open sections within the selected Accordion.

  • Toggle section

    • Section: Determines which section is toggled open or closed based on the section's unique Id.

  • Event Source actions

    • Event Source: The event source that contains the event action.

      • On-click: Accesses the event source action that allows users to view or edit that event's details.
      • Create event: Accesses the event action that allows the users to create a new event.

        • Note:  Both On-click and Create event require these actions to already exist on the event source within the Calendar component.

  • Go to date

    Navigates to a date in the calendar. When run, the action will navigate to the selected date (Day and List view); the week containing the date (Week view); or the Month containing the date (Month view).

    • Date type

      • Specific date: Use the date selector to choose the day you want.

      • Result of formula: 

        • Formula context model: Set the context for the formula by selecting the model referenced in the merge syntax. (Optional)
        • Formula: Use merge syntax and Nintex Apps's formula functions to define the date.

  • Select view

    Displays the calendar in the selected view. Options include:

    • Month
    • Week
    • Day
    • List

    Note:  The selected view must exist within the calendar.

  • Go to previous slide: Moves the selected Carousel component to the previous slide.

  • Go to next slide: Moves the selected Carousel component to the next slide.

Go to page

Navigates to the Target page in the component.

  • Target page:
    • First page
    • Last page
    • Previous page
    • Next page

  • Open all accordion sections

    • Only applies to Filter Sets with a Vertical with accordions layout.

    • Opens all accordion sections in the selected Filter Set.

  • Close all accordion sections

    • Only applies to Filter Sets with a Vertical with accordions layout.

    • Closes all accordion sections in the selected Filter Set.

Change Form mode

Changes the mode of the selected component.

  • Form mode: The mode to switch the selected component to. Options include:
    • Edit
    • Read with in-line editing
    • Read-only
  • Toggle between this and the default mode: To switch between the selected mode and the mode set in the component's Default mode property, turn on the toggle.

  • Go to page: Navigates to the Target page in the component.

    • Target page:

      • First page
      • Last page
      • Previous page
      • Next page

  • Open all drawers: Opens drawers for all rows in the selected List.

  • Close all drawers: Closes drawers for all rows in the selected List.

  • Show message block: Creates a new message block within the selected Message Area, with standard message block properties available.

  • Clear message blocks: Closes all message blocks currently displayed within the selected Message Area.

  • Expand sub-navigation: Expands all necessary navigation menus to highlight the selected navigation item. This is useful for showing deeply nested items, as it can highlight any item at any level.

    • Item: The navigation item to expand to.

  • Select navigation: Simulates a user clicking the selected navigation item, triggering the actions associated with it.
    • Item: The navigation item to select.

  • Load current page: Loads the selected Page Include.

    • Load in background: To allow subsequent actions to start while the included page is loading, turn on the toggle. To make all actions wait until the page finishes loading, turn off the toggle.

    • Show loading indicator: To display a loading indicator while the included page is loading, turn on the toggle.

  • Load new page: Loads a different page from the one already displayed into the Page Include.

    • Nintex Apps page: The Nintex Apps page to load.

    • Query string: The URL parameters to send along with the Page Include request. Values must be URL-encoded; multiple parameters are joined with an ampersand (&). This property accepts merge syntax.

  • Unload: Unloads the currently displayed Page Include.

  • Change Table mode: Changes the mode of the selected component.

    • Table mode: The mode to switch the selected component to. Select one of the following options:

      • Edit

      • Read with in-line editing

      • Read-only

      • Data grid

      • Toggle between this and the default mode: To switch between the selected mode and the mode set in the component's Default mode property, turn on the toggle.

  • Export Table data: Exports data from the Table specified in the action's Component property according to the configuration set in the Table's Export tab.

  • Go to page: Navigates to the Target page in the component.

  • Target page:
    • First page
    • Last page
    • Previous page
    • Next page

  • Show table configuration modal: Displays the Table Settings popup, which allows the users to reorder columns on the page and/or choose whether a column will be visible, or hidden on the page.

  • Open all drawers: Opens drawers for all rows in the selected Table.

Note:  When this action is run, each drawer activates any configured Before load actions. Note that drawers may have other actions configured, such as query actions.

  • Close all drawers: Closes drawers for all rows in the selected Table.

  • Expand sub-navigation: Expands all necessary navigation menus to highlight the selected navigation item. This is useful for showing deeply nested items, as it can highlight any item at any level.

    • Item: The navigation item to expand to.

  • Select navigation: Simulates a user clicking the selected navigation item, triggering the actions associated with it.
    • Item: The navigation item to select.

  • Navigate to step: Navigates users to a specific step in the Wizard component. Most useful if a list of actions requires a user be taken to a specific step, for example if a branch formula determines a user should proceed to an alternate area of the Wizard.

    • Step ID: The ID of the step to navigate the end user to. Compatible with merge syntax.

  • Navigate to previous step: Navigates users to the previous step in the Wizard component. This works for general purpose Previous button actions without requiring a specific step ID, as with the Navigate to Step action.

  • Navigate to next step: Navigates users to the next step in the Wizard component. This works for general purpose Next button actions without requiring a specific step ID, as with the Navigate to Step action.

  • Change layout: Manages the layout of the selected Wizard, which is initially set in the component's General properties. When a Wizard's layout is changed, the user remains on their current step, but the position of the step's content, as well as any enabled step/progress indicators, will shift.

    • Layout: Determines the layout to switch the selected Wizard to.

      • Toggle: Switches the Wizard to the opposite layout of what it's currently set to. For example, Horizontal > Vertical or vice versa.

      • Vertical: Switches the Wizard to the vertical layout. If the Wizard is already in a vertical layout, there is no effect.

      • Horizontal: Switches the Wizard to the horizontal layout. If the Wizard is already in a horizontal layout, there is no effect.