Skip to main content
Version: 1.x

Core plugins

To extend the potential of micro-lc, Mia-Platform created some configurable plugins called core plugins.

These plugins are open source and can be deployed using the console with low effort.

microlc-element-composer​

This plugin is publicly available on GitHub and can be used to compose the UI of your page, with the precondition that each piece has been made as custom-elements.

The layout can be composed using rows and columns: it will be adaptive thanks to the flex layout.

caution

In addition to the properties that you can configure for each custom-element, the plugin always injects the 3 following properties:

  • eventBus: an RxJS's Subject used as communication channel between components;

  • currentUser: an object which may represent the session currently authenticated user;

  • headers: an object made of standard/custom HTTP headers, which may propagate cookies and other helpful settings to manage frontend HTTP calls.

type​

  • type: string;
  • enum: row, column, element;
  • required: true;
  • description: type of object to render.

tag​

This property is mandatory only for element type.

  • type: string;
  • required: false;
  • description: tag of the custom element to render.

url​

This property is considered only for element type.

  • type: string;
  • required: false;
  • description: URL of the entry point used to register and boot the custom element.

attributes​

  • type: object;
  • required: false;
  • description: attributes injection for the DOM element.

properties​

  • type: object;
  • required: false;
  • description: properties injection for the DOM element.

busDiscriminator​

This property is considered only for element type.

  • type: string;
  • required: false;
  • description: Event bus discriminator, used to create a dedicated communication channel.
    By default, is injected the general communication channel.

content​

  • type: object;
  • required: false;
  • description: the definition of the children components. This field makes this structure recursive.

Structure example​

{
  "type": "row",
  "content": [{
    "type": "column",
    "attributes": {
      "style": "width: 89%",
    },
    "content": [{
      "type": "element",
      "tag": "button",
      "url": "https://your-host.com/your/component/entry.js",
      "properties": {
        "property-a": "value-a"
      }
    }]
  }]
}