About Sidebar Panels

The sidebar panel can be displayed in the following three regions: left sidebar, right sidebar, left side of status bar

Sidebar Panel Types

There are two types of sidebar panels:

  1. Predefined Panels: Predefined panels in the system that can be assigned access rights
  2. Dynamic Panels: The panel opened dynamically when the system is running, such as the profile page of the dashboard, or the properties page of the dashboard widget, etc.

Open Panel

You can configure the default sidebar panels through Config or open the panel dynamically through JS

1. Config

src/module/a-layoutpc/front/src/config/config.js

  layout: {
    sidebar: {
      left: {
        panels: [
          { module: 'a-layoutpc', name: 'panelMenu' },
          { module: 'a-layoutpc', name: 'panelAtom' },
          { module: 'a-layoutpc', name: 'panelSearch' },
        ],
      },
    },
  },

layout.sidebar.left.panels: Define the default open panels of the left sidebar

Name Description
module Panel’s module name
name Panel’s name

2. JS

The module a-layoutpc extends the method navigate by adding two options, scene and sceneOptions, which are used to specify the opening region and parameters of the panel

2.1 Open Predefined Panel

Open the panel Menu in the right sidebar

const panelUrl=null;
this.$view.navigate(panelUrl, { 
  scene: 'sidebar', 
  sceneOptions: {
    side: 'right',
    module: 'a-layoutpc',
    name: 'panelMenu',
  } 
});
Name Description
panelUrl Should be null, because the panel url has been defined in the panel’s function
scene sidebar: Specify open in sidebar
sceneOptions Options
sceneOptions.side Region: left/right/bottom
sceneOptions.module Panel’s module name
sceneOptions.name Panel’s name

2.2 Open Dynamic Panel

Open the Properties page of Dashboard’s widget in the right sidebar

src/module/a-dashboard/front/src/components/widget.vue

    onWidgetProperties(widget) {
      const panelUrl=`/a/dashboard/widget/properties?widgetId=${this.options.id}`;
      this.$view.navigate(panelUrl, {
        scene: 'sidebar',
        sceneOptions: { side: 'right', name: 'properties', title: 'Properties' },
        context: {
          params: {
            dashboard: this.dashboard,
            widget: this,
          },
        },
      });
    },
Name Description
panelUrl Panel’s Url
scene sidebar: Specify open in sidebar
sceneOptions Options
sceneOptions.side Region: left/right/bottom
sceneOptions.name Panel’s name
sceneOptions.title Panel’s title
context.params Panel’s parameters, please refer to: Page Open & Return Value

Add a new predefined panel

Because the essence of a panel is to display a page in the view container, there is no need to develop a Vue component, just define the corresponding function at backend

Let’s take the panel Menu as an example to show how to define a predefined panel

1. Definition of Function

src/module/a-layoutpc/backend/src/meta.js

...
panelMenu: {
  title: 'Menu',
  url: '/a/base/menu/list',
  menu: 2,
  public: 1,
},
...
Name Description
title Panel’s title
url Panel’s Url
menu const 2: Function’s type which means panel
public Public or not. If it is public, no authorization is required, and all users can access it

2. Initialization

src/module/a-layoutpc/backend/src/service/version.js

      if (options.version === 1) {

        // roleFunctions: panels
        const rolePanels = [
          { roleName: null, name: 'panelMenu' },
          { roleName: null, name: 'panelAtom' },
          { roleName: null, name: 'panelSearch' },
        ];
        await this.ctx.meta.role.addRoleFunctionBatch({ roleFunctions: rolePanels });

      }

    }

We need to add the authorization record of the panel to the database when the module data version is initialized. Because the public of the panel is true, the roleName here should be null

  1. About Module Data Version, please refer to: Module Data Version
  2. About Definition of Function, please refer to: Function & Menu
  3. About Function Authorization, please refer to: Function Authorization