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:
Predefined Panels
: Predefined panels in the system that can be assigned access rightsDynamic Panels
: The panel opened dynamically when the system is running, such as theprofile
page of the dashboard, or theproperties
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
- About
Module Data Version
, please refer to: Module Data Version- About
Definition of Function
, please refer to: Function & Menu- About
Function Authorization
, please refer to: Function Authorization
Comments: