Note: Nintex Apps is in beta release.

Sliding Panels

Similar to Nintex Apps modals, sliding panels are containers for Nintex Apps components that can 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 the Action Framework.

Using Sliding Panels

Sliding panels are generally used to give additional/optional information related to the action the end user is currently taking. They can be added to a Nintex Apps page through an Action Framework action such as Open Sliding Panel.

After adding the action, click the Configure Panel button in the properties pane to begin configuring the sliding panel for that particular action.

Sliding panels can be set everywhere action flows are available, and every Toggle Sliding Panel or Open Sliding Panel action will create a unique sliding panel for that action. This means you can have multiple sliding panels appear at one time, all of which are uniquely configured for whatever action activates them.

Note:  The Close Sliding Panels action will close 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

Creating a sliding panel: a use case

One of the most common use cases for a sliding panel is a mobile-friendly menu within a navigation component. Let's create one within a Nintex Apps page to illustrate sliding panel concepts and properties.

  1. Navigate to an existing Nintex Apps page or create a new one.

  2. Drag a navigation component into the canvas.

  3. Click Add Nav Item, then click the newly-created Navigation Item.

  4. Set its fields:

    • Label: Menu
    • Icon: Select an appropriate icon.

  5. Click the Actions tab.

  6. Click Add action.

  7. Set the Action type to Open Sliding Panel.

  8. Set Behavior to Open.

  9. Click Configure panel.

Much like configuring Nintex Apps modals, you will now see a Nintex Apps window containing a separate canvas. Here you may configure the properties for your sliding panel, as well as drag and drop components into its canvas.

For this example:

  1. Set your sliding panel properties:
    • Origin: Left
    • Close when User Clicks Outside of Panel: Checked
    • Width: 200px
  2. Drag a Header component into the sliding panel canvas.
  3. Set the Header component's fields:
    • Title: Menu
    • Subtitle: Mobile
  4. Close the Sliding Panel configuration window.
  5. Click Save.
  6. Click Preview.

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

This is a simple example, but you can use this model as a basis for a variety of use cases:

  • Listing a full set of navigation items within a mobile-friendly menu. (Bonus points if it's within a principal page's header!)
  • Adding related information to a record page using merge syntax.
  • Placing advanced page operations within an "experts-only" panel.

Experiment with different sliding panel properties and components to create useful additions to your apps.

Properties

Component properties

  • Origin: This determines which part of the screen the sliding panel will slide in from. There are four selectable options:

    • Left
    • Right
    • Top
    • Bottom

  • Slide Style: This property determines how a sliding panel will enter the screen. There are three options:

    • 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 figuratively side-by-side, and the two slide over 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 style 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.

  • Close when user clicks outside of panel: Check this box to have the sliding panel close if the end user clicks anywhere outside of the sliding panel. If this box is unchecked, users may still interact with all other Nintex Apps components while the sliding panel is open.

  • Width: Sets the fixed width of the sliding panel. Accepts all standard sizing measurements.

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.

Click add Add interaction then select:

  • Action type: Determines the type of user interaction that triggers the action script.

In the dots-vertical More Options menu on the selected interaction, click Add action, then edit the Action Type:

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.