Skip to main content
Version: 1.x

Core configuration

To compose the application, micro-lc needs to consume a configuration at runtime. When loaded, the fe-container performs a GET request to /api/v1/microlc/configuration: the expected response is the configuration in JSON format. This endpoint is always called, even in parallel if necessary.

Configuration structure​

The configuration is a JSON object with two root properties. It defines the theming of the application, and the characteristics of the plugins to render.

theming​

  • type: object;
  • required: true;
  • description: contains the theming information. This property can be used to brand the application and to customize the user experience.

See the theming parameters section for details.

shared​

  • type: object;
  • required: false;
  • description: contains shared properties to be injected into plugin elements. This property can be used to share HTTP headers/cookies and/or other amenities with underlying plugins.

See shared parameters section for details.

plugins​

  • type: array;
  • required: true;
  • description: the list of the plugins to render. It contains information on how to integrate the plugins in micro-lc.

Each element of this array is an object correspondent to a plugin. The structure of the object is detailed in the plugin parameters section.

internalPlugins​

  • type: array;
  • required: false;
  • description: the list of the plugins that will be registered, but will not appear on the menu. It contains information on how to integrate the plugins in micro-lc.

Each element of this array is an object correspondent to an internal plugin. The structure of the object is detailed in the internal plugin parameters section.

analytics​

  • type: object;
  • required: false;
  • description: contains the analytics information. This property can be used to instantiate Google Analytics previous user acceptance.

For the details of its content, see the analytics parameters section.

rightMenu​

  • type: array;
  • required: false;
  • description: contains the list of web-components that will be injected in the right section of the topbar.

For the details of its content, see the right menu parameters section.

Theming parameters​

This bit of the configuration object enables the customization of some part of the user experience, as well as the branding of the application.

  • type: object;
  • required: false;
  • description: contains the properties that are usually applied in the HTML header tag.

pageTitle​

  • type: string;
  • required: false;
  • description: the string that will be displayed on the browser tab;
  • default: Microlc.

favicon​

  • type: string;
  • required: false;
  • description: the url of the icon that will be displayed on the browser tab;
  • default: Mia-Platform logo.
  • type: object;
  • required: true;
  • description: contains the information needed to display the company logo.

url_light_image​

  • type: string;
  • required: true;
  • description: the url of the logo image for light theme.

url_dark_image​

  • type: string;
  • required: false;
  • description: the url of the logo image for dark theme.
  • type: string;
  • required: false;
  • description: the url of the site the users are redirected to when they click the logo.

alt​

  • type: string;
  • required: true;
  • description: the alternative text to display if the logo is not found;
  • default: Logo.

variables​

  • type: object;
  • required: true;
  • description: contains the variables that will be used to brand the application, overriding the default style.

primaryColor​

  • type: string;
  • required: false;
  • description: the primary color of the application. Accepted values are 3, 6, or 8 digits Hex and CSS color keywords.
    Its value is applied to the --microlc-primary-color css variables, and is used to calculate the 89% tint stored in the --microlc-primary-color-tint-89 variable;
  • default: #1890FF.
  • type: string;
  • required: false;
  • description: the location on the page in which the menu will be rendered;
  • default: sideBar;
  • accepted values: [sideBar, topBar, fixedSideBar].

enableDarkMode​

  • type: boolean;
  • required: false;
  • description: indicate if your app supports the dark mode;
  • default: false;

Shared parameters​

This bit of the configuration object enables the injection of common properties shared by plugins.

props​

  • type: object;
  • required: false;
  • description: contains an object with properties to inject on plugin components.

Plugin parameters​

Information about the plugins to be embedded in the application are contained in these object.

id​

  • type: string;
  • required: true;
  • description: the unique identifier of the plugin.

aclExpression​

  • type: string;
  • required: false;
  • description: expression to evaluate the users that can access the plugin (i.e. groups.admin && groups.ceo or groups.admin && permissions.companies.view from version 0.9.0).

label​

  • type: string;
  • required: true;
  • description: the label showed in the side menu.

icon​

  • type: string;
  • required: false;
  • description: the icon showed in the side menu. The supported icons are the Font Awesome free ones. You have to specify all the needed classes;
  • example: fas fa-tag;
  • default: no icon.

order​

  • type: integer;
  • required: false;
  • description: the position in the side menu;
  • default: 0.

integrationMode​

  • type: string;
  • enum: href, qiankun, iframe;
  • required: false;
  • description: the way in which the plugin will be integrated in micro-lc. See Plugin configuration section for mode details.

pluginRoute​

  • type: string;
  • required: true for integrationMode of type qiankun or iframe;
  • description: the path of the main application on which the plugin is rendered.

pluginUrl​

  • type: string;
  • required: true for integrationMode of type qiankun or iframe;
  • description: the entry point of the plugin (i.e., where the plugin is deployed).

props​

  • type: object;
  • required: false;
  • description: contains the properties injected during the boostrap of a plugin rendered with qiankun.

category​

  • type: string;
  • required: false;
  • description: sub-menu category in which the plugin should be inserted;

content​

  • type: array;
  • required: false;
  • description: array of plugins to insert in sub-menu. This property makes the structure recursive;
  • type: object;
  • required: true for integrationMode of type href;
  • description: contains the details about the href integration.

url​

  • type: string;
  • required: true;
  • description: the url of the external application.

sameWindow​

  • type: boolean;
  • required: true;
  • description: states if the link should be opened in a new window;
  • default: false

Internal plugin parameters​

The information regarding the internal plugins to be embedded in the application are contained in these object.

id​

  • type: string;
  • required: true;
  • description: the unique identifier of the plugin.

aclExpression​

  • type: string;
  • required: false;
  • description: expression to evaluate the users that can access the plugin (i.e. groups.admin && groups.ceo).

order​

  • type: integer;
  • required: false;
  • description: the position in the side menu;
  • default: 0.

integrationMode​

  • type: string;
  • enum: href, qiankun, iframe;
  • required: false;
  • description: the way in which the plugin will be integrated in micro-lc. See Plugin configuration section for mode details.

pluginRoute​

  • type: string;
  • required: true for integrationMode of type qiankun or iframe;
  • description: the path of the main application on which the plugin is rendered.

pluginUrl​

  • type: string;
  • required: true for integrationMode of type qiankun or iframe;
  • description: the entry point of the plugin (i.e., where the plugin is deployed).

props​

  • type: object;
  • required: false;
  • description: contains the properties injected during the boostrap of a plugin rendered with qiankun.
  • type: object;
  • required: true for integrationMode of type href;
  • description: contains the details about the href integration.

url​

  • type: string;
  • required: true;
  • description: the url of the external application.

sameWindow​

  • type: boolean;
  • required: true;
  • description: states if the link should be opened in a new window;
  • default: false.

Analytics parameters​

  • type: string;
  • required: true;
  • description: link used to redirect the user to the privacy policy.

disclaimer​

  • type: string;
  • required: true;
  • description: disclaimer showed to the users, generally used to inform them about the cookies that will be used.

gtmId​

  • type: string;
  • required: true;
  • description: container id for Google Analytics;
  • example: GTM-XXXXXX.

Right menu parameters​

entry​

  • type: string;
  • required: true;
  • description: link to the file containing the web-component declaration.

tag​

  • type: string;
  • required: true;
  • description: name of the web-component (to be inserted in HTML tags).

attributes​

  • type: object;
  • required: false;
  • description: generic object that contains the attributes to be injected for the web-component.

properties​

  • type: object;
  • required: false;
  • description: generic object that contains the properties to be injected for the web-component.

Example​

{
  "theming": {
    "header": {
      "pageTitle": "Mia-Platform",
      "favicon": "https://favicon-url.com"
    },
    "logo": {
      "url_light_image": "https://logo-url.com/light",
      "url_dark_image": "https://logo-url.com/dark",
      "alt": "My awesome logo"
    },
    "variables": {
      "primaryColor": "red"
    },
    "menuLocation": "topBar"
  },
  "analytics": {
    "privacyLink": "https://policies.google.com/",
    "disclaimer": "We use analytics cookies for...",
    "gtmId": "GTM-XXXXXX"
  },
  "rightMenu": [{
    "entry": "https://test.it/my-web-components.es.js",
    "tag": "my-web-component-name",
    "attributes": {
      "id": "abc"
    },
    "properties": {
      "propA": true
    }
  }],
  "plugins": [
    {
      "id": "plugin-1",
      "aclExpression": "groups.admin || groups.superadmin",
      "label": "Plugin number 1",
      "icon": "fas fa-rocket",
      "order": 0,
      "integrationMode": "qiankun",
      "pluginRoute": "/myAwesomePlugin",
      "pluginUrl": "https://plugin-url.com",
      "props": {}
    },
    {
      "id": "plugin-2",
      "label": "Plugin number 2",
      "icon": "fas fa-tag",
      "order": 1,
      "integrationMode": "href",
      "externalLink": {
        "url": "https://external-site.com",
        "sameWindow": false
      }
    }
  ],
  "internalPlugins": [
    {
      "id": "plugin-3",
      "aclExpression": "groups.admin || groups.superadmin",
      "order": 0,
      "integrationMode": "qiankun",
      "pluginRoute": "/myAwesomePlugin3",
      "pluginUrl": "https://plugin-url.com",
      "props": {}
    }
  ]
}