Temporary Drawer

  • Updated
Status

Release Available

Status

Framework Name

4.2

Current

Mui Only
General

A temporary drawer is a navigation drawer, which can be toggled open or close. By default, the drawer is closed and is opened temporarily above all other content until a user selects a section, clicks outside the drawer over the overlay, or presses the Esc key.

Temp-Drawer.png

A drawer can be accessed through the syntax $nav.drawer and can have one of the following positions:

  • top

  • left

  • right

  • bottom

Example 207. Code JSON

{
      "layoutId": "1c989ae5-cbe0-4f5f-9117-a93f0bfb8108",
      "name": "panel_Drawer1",
      "children": [
        {
          "layoutId": "6dfe0cf3-c4b3-47c8-9fb3-8b5664a929e5",
          "name": "panel_Drawer_Tab",
          "children": [
            {
              "layoutId": "89a44ad3-3bc0-4f20-b173-53cd3c5d3050",
              "name": "drawer1_Tab",
              "children": [
                {
                  "layoutId": "5d85b7df-51ba-47ff-b572-6f3b73d3e443",
                  "name": "drawer1_PanelView"                }
              ]
            }

Example 208. Actions - Code JSON

{
  "name": "Panel_Drawer1",
  "actionType": "normal",
  "property": {},
  "appearance": {
    "label": "Drawer - Top",
    "style": "primary",
    "position": "top-left"  },
  "validation": [],
  "successHandler": {},
  "failureHandler": {},
  "pendingHandler": {},
  "handler": {
    "updates": [
      {
        "name": "$nav.drawer.add;",
        "value": "panel_Drawer1",
        "position": "top"      }
    ]
  },
  "ariaLabel": "Drawer - Top"}

Use the following configuration to set the dimensions or size of the drawer across all the positions.

Example 209. Code JSON

 {
  "layoutId": "1c989ae5-cbe0-4f5f-9117-a93f0bfb8108",
  "name": "panel_Drawer1",
  "children": [
    {
      "layoutId": "6dfe0cf3-c4b3-47c8-9fb3-8b5664a929e5",
      "name": "panel_Drawer_Tab",
      "children": [
        {
          "layoutId": "89a44ad3-3bc0-4f20-b173-53cd3c5d3050",
          "name": "drawer1_Tab",
          "children": [
            {
              "layoutId": "5d85b7df-51ba-47ff-b572-6f3b73d3e443",
              "name": "drawer1_PanelView"            }
          ]
        },
        {
          "layoutId": "ffa5ab5f-9825-49d4-b937-dda348f25cad",
          "name": "drawer2_Tab",
          "children": [
            {
              "layoutId": "c8522391-63e8-48e6-b33d-33b6c74ff2e1",
              "name": "drawer2_PanelView"            }
          ]
        }
      ]
    }
  ],
  "width": "700px",
  "height": "500px"}