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();
    }