About Dashboard Profile
We call the combination of a group of widgets dashboard profile
. There are two types of dashboard profile
: system profile
and user-defined profile
Users can add dashboard profile by themselves, add widgets to the profile, modify the properties of widgets, and realize data binding between multiple widgets
Here, it mainly describes the system profile
System Profile - Default Profile
The dashboard is implemented through the module a-dashboard
. Therefore, a default profile
is defined in the module a-dashboard
a-dashboard/front/src/config/config.js
export default function(Vue) {
return {
profile: {
default: {
root: {
widgets: [
{ module: 'a-dashboard', name: 'widgetAbout' },
],
},
},
...
},
};
}
System Profile- Override by Config
If we want to provide our own system profile
with our own combination of widgets in our own developed system, we can override the config file at frontend of the project, such as:
src/front/config/config.default.js
export default {
modules: {
'a-dashboard': {
profile: {
default: {
root: {
widgets: [
{ module: 'a-dashboard', name: 'widgetAbout' },
],
},
},
},
},
},
};
Because CabloyJS is a framework of frontend and backend separation, the frontend can be deployed to different scenarios, such as web
, app
, etc. We can also provide different system profile
for different scenarios
About Config and Scenarios, please refer to: Config
System Profile - Override by Event at backend
In addition to the config override mechanism
at frontend, the backend also provides an event override mechanism
. When a user logs in to the system, an event a-base:loginInfo
will be raised at backend. In response to this event, we can provide a system profile
to the frontend
Through the backend event mechanism, more fine-grained control can be achieved, such as different system profile
of role-based
or user-based
For example, the module test-party
provides a system profile
through the backend event mechanism. Now, let’s see how it works:
About Event at Backend, please refer to: Event at Backend
1. Declaration of Event
test-party/backend/src/meta.js
event: {
implementations: {
'a-base:loginInfo': 'test/event/loginInfoDashboard',
},
Name | Description |
---|---|
a-base:loginInfo | module name:event name |
test/event/loginInfoDashboard | the API route for responding to the event |
2. Definition of API Route
test-party/backend/src/routes.js
{ method: 'post', path: 'test/event/loginInfoDashboard', controller: testEventUserVerify, meta: { auth: { enable: false } } },
3. Controller Action
test-party/backend/src/controller/test/event/userVerify.js
async loginInfoDashboard() {
const data = this.ctx.request.body.data;
const info = data.info;
info.config = extend(true, info.config, {
modules: {
'a-dashboard': {
profile: {
default: dashboardProfileDefault,
},
},
},
});
this.ctx.success();
}
Comments: