Sliding Panels

Similar to Skuid popups, sliding panels are hidden containers for Skuid 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.

Note

Sliding panels will not function in pages with the Salesforce® header or Salesforce sidebar enabled. If you are working within Skuid on Salesforce, you must disable both of them to use sliding panels within your page.

Properties

Basic

  • 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.
  • Close When User Clicks Outside of Panel: Check this box to have the sliding panel close if the user clicks anywhere outside of the sliding panel. If this box is unchecked, users may still interact with all other Skuid components while the sliding panel is open.
  • Width: Sets the fixed width of the sliding panel. Accepts all standard Skuid sizing measurements.

Usage

Sliding panels are generally used to give additional/optional information related to the action the user is currently taking. They can be added to a Skuid page through one of the following Action Framework actions:

After selecting one of the above actions, 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 the Action Framework is 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.

The Close All Sliding Panels action will close all sliding panels, regardless of their origin.

Example

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 Skuid page to illustrate sliding panel concepts and properties.

  1. Navigate to an existing Skuid page or create a new one.
  2. Drag a navigation component into the canvas.
  3. Click the + button to add a new navigation item.
  4. Click the New Navigation Item.
  5. Set its fields:
    • Label: Menu
    • Icon: sk-icon-menu
  6. Click the Actions tab.
  7. Click Add Action.
  8. Set the Action Type to Toggle Sliding Panel.
  9. Click the Configure Panel button.

Much like configuring Skuid popups, you will now see a Skuid popup 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
    • Slide Style: Push
    • Width: 100px
  2. Drag a page title component into the sliding panel canvas.
  3. Set the page title component’s fields:
    • Title: Menu
    • Sub-Title: Mobile
  4. Click Save.
  5. Click Preview.

While within the Skuid page, clicking the navigation item you’ve configured above will toggle the sliding panel you’ve configured open and closed.

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 master 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 Skuid apps.