Sliding Panels

Similar to Nintex Apps modals, sliding panels are containers for Nintex Apps components that appear from any of the four sides of the screen. They are useful for optional information, hidden menus, or sidebars on mobile. You can integrate them into your page using Action flows.

Jump to:

Using Sliding Panels

You can add Sliding Panels to a Nintex Apps page by using Action flows with the Open sliding panel visual navigation action.

Once added, you can configure the Component properties.

You can add the component wherever action flows are available, and every Toggle Sliding Panel or Open Sliding Panel action creates a unique sliding panel. This means you can have multiple sliding panels appear at one time. Each panel is uniquely configured for the action that triggers it.

Note:  The Close Sliding Panels action closes all sliding panels, regardless of their origin.

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.

Add Sliding Panels

To add a Sliding Panel from within the Surfaces area:

  1. Click .

  2. Select Sliding Panel.

  3. Configure the Component properties in the properties panel.

  4. Click and drag the components you want onto the canvas.

  5. Click Save.

To add a Sliding Panel when building an Open sliding panel action:

  1. In the Elements panel, click Action flows.

  2. Click .

  3. In the modal that appears, type a name and description for the action flow.

  4. Click Create.

  5. In the action flow canvas, click .

  6. In the modal that appears, select Open sliding panel.

  7. In the Settings panel, expand the Select a sliding panel drop-down and click Create new sliding panel.

  8. In the modal that appears, type a name for the sliding panel.

  9. Select one of the following options:

    • Create: Creates a sliding panel and allows you to edit it later.

    • Create and edit: Creates the sliding panel and immediately opens the canvas to edit it. In the canvas, you can:

      • Drag and drop the components you want.

        You can configure the Component properties in the properties panel.

  10. Click Save.

Delete Sliding Panels

  1. In the Surfaces area, click the Sliding Panel you want to delete.

  2. In the canvas, click .

Use case: Create a Sliding Panel using the Navigation component

One of the most common use cases for a sliding panel is a menu within a Navigation component.

  1. Go to an existing Nintex Apps page or create one. For more information, see Create and customize Nintex Apps pages.

  2. Click and drag a Navigation component onto the canvas.

    Note:  The Navigation component includes one navigation item by default. To add more navigation items, click Add Nav Item.

  3. Click the newly added component and configure the properties.

  4. Go to the Interactions tab.

  5. Under Click, select Run action flow.

  6. Under Action flow, click Add and click Add action flow.

  7. Click Create new action flow.

  8. In the action flow canvas that appears, click .

  9. In the modal that appears, select Open sliding panel.

  10. In the Settings panel, configure the following properties:

    • Select a sliding panel: Select the sliding panel you want to use. For more information, see Add Sliding Panels.

    • Behavior: Select Open. For more information, see Open sliding panel.

For this example:

  1. Configure the following Sliding panel properties:

    • Origin: Left

    • Close when User Clicks Outside of Panel: Turn on the toggle

    • Width: 200px

  2. Drag a Header component onto the sliding panel canvas.
  3. Configure the following Header component properties:
    • Title: Menu
    • Subtitle: Mobile
  4. Click Save.
  5. Click Preview.

Within the Nintex Apps page, click the navigation item you've configured above to open the sliding panel. To close the panel, click anywhere on the page.

This is a simple example. You can use this model as the basis for a variety of use cases, including the following:

  • List a complete set of navigation items in a mobile-friendly menu. This works effectively when placed in the Header component of a Principal page. For more information, see Principal and Dependent Pages.

  • Add related information to a record page using merge syntax.

You can explore different sliding panel properties and components to create useful additions to your apps.

Component properties

  • Unique Id: An automatically generated alphanumeric identifier for the component. You can rename it if needed. (Required)
  • Label: The name of the component that is displayed in the Surfaces area.

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

  • Origin: Determines the side of the screen from which the sliding panel appears. The following options are available:
    • Left
    • Right
    • Top
    • Bottom
  • Slide style: Determines how a sliding panel appears on the screen. The following options are available:

    • Overlay: The sliding panel overlays the page content.

    • Reveal: Main page content slides to the side to reveal the panel underneath—the opposite of overlay.

    • Push: Main content and panel are positioned side-by-side, sliding together to show the panel.

    Important: 

    Nintex Apps allows builders to add multiple sliding panes to a page and have more than one panel open at a time. It is possible to configure those panels to have different origins and slide styles.

    However, mixing multiple pages, origin options, and slide styles on a single page can result in unexpected behaviors (especially with Push and Reveal Slide style). For this reason, building a page where users can Reveal or Push two panels at the same time is not recommended.

  • Width: Sets the fixed width of the sliding panel, using a number and a sizing unit. For more information, see Sizing measurements.
  • Close when user clicks outside of panel: To close the sliding panel when the user clicks anywhere outside of the sliding panel, turn on the toggle. When turned off, users can still interact with other Nintex Apps page elements while the sliding panel remains open.
  • Display errors: Determines where data and page errors from components within a panel appear.
    • In sliding panel: Displays errors on the sliding panel.
    • On page: Displays errors on the page where the panel appears. Use this when the panel affects data outside the panel, so errors appear in the broader page context.

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

    Used to describe elements where text may not be visible, this property can be a specific string of text, the merge variables of one or more fields, or a combination of the two.

Interactions trigger Action flows based on typical ways an end user may interact with a page element or component. You can configure Interactions on various elements. Options vary, but may include:

  • Click

  • Right click

You can configure actions to run once 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 section. For more information about context variables, see Context.