Luigi Compound Container API

This document outlines the parameters provided by the Luigi Compound Container. Luigi Compound Container provides the possibility to insert multiple webcomponent-based microfrontends in one container.
In addition you can use standard addEventListener function to react on events emmitted by the Luigi Compound Container. The list of events and their meaning can be found here.

API Reference

viewurl

The URL used for the renderer.

Type: string

Examples

Click to copy
 
<luigi-container viewurl="/index.html"></luigi-container>
Click to copy
 
myContainer.viewurl = "/index.html"

compoundConfig

The configuration for the compound microfrontend. Take a look at the compound parameter for details.

Type: Object

Examples

Click to copy
 
renderer = { use: 'grid', config: { columns: '1fr 1fr 1fr 2fr', layouts: [{maxWidth: 600, columns: '1fr', gap: 0, ...}]}};
children = [{ viewUrl: '/main.js', context: { label: 'WC', ...}, layoutConfig: {column: '1 / -1', ...}, eventListeners: [{ source: 'input1', ...}}]}];
myContainer.compoundConfig = { renderer, children };

Meta

  • since: 1.0.0

deferInit

If set to true defers from initializing the microfronted automatically. In that case init() can be used.

Type: boolean

Examples

Click to copy
 
<luigi-container viewurl="/index.html" defer-init></luigi-container>
Click to copy
 
myContainer.deferInit = true

Meta

  • since: 1.0.0

locale

The locale to be passed to the compound micro frontend.

Type: string

Examples

Click to copy
 
<luigi-container locale="en_us"></luigi-container>
Click to copy
 
myContainer.locale = "en_us"

Meta

  • since: 1.4.0

nodeParams

The parameters to be passed to the compound micro frontend. Will not be passed to the compound children.

Type: Object

Examples

Click to copy
 
<luigi-container viewurl="/index.html" node-params='{"node":"param"}'></luigi-container>
Click to copy
 
myContainer.nodeParams = {foo: bar}

Meta

  • since: 1.0.0

noShadow

If set to true, the Luigi compound container webcomponent will not use the shadow DOM for rendering.

Type: boolean

Examples

Click to copy
 
<luigi-container viewurl="/index.html" no-shadow></luigi-container>
Click to copy
 
myContainer.noShadow = true

Meta

  • since: 1.2.0

searchParams

The search parameters to be passed to the compound micro frontend.

Type: Object

Examples

Click to copy
 
<luigi-container viewurl="/index.html" search-params='{"search":"param"}'></luigi-container>
Click to copy
 
myContainer.searchParams = {foo: bar}

Meta

  • since: 1.0.0

pathParams

The path parameters to be passed to the compound micro frontend.

Type: Object

Examples

Click to copy
 
<luigi-container viewurl="/index.html" path-params='{"path":"param"}'></luigi-container>
Click to copy
 
myContainer.pathParams = {foo: "bar"}

Meta

  • since: 1.0.0

context

The stringified context to be passed to the compound microfrontend.

Type: string

Examples

Click to copy
 
<luigi-container viewUrl="/index.html" context='{"label": "Dashboard"}'></luigi-container>
Click to copy
 
myContainer.context = {label: "Dashboard"}

Meta

  • since: 1.0.0

clientPermissions

The clientPermissions to be passed to the compound micro frontend.

Type: Object

Examples

Click to copy
 
<luigi-container viewurl="/index.html" client-permissions='{"permission": "adminGroup"}'></luigi-container>
Click to copy
 
myContainer.clientPermissions = {permission: "adminGroup"}

Meta

  • since: 1.0.0

userSettings

The user settings to be passed to the compound micro frontend.

Type: Object

Examples

Click to copy
 
<luigi-container viewurl="/index.html" user-settings='{"language": "de", "theme":"sap_horizon"}'></luigi-container>
Click to copy
 
myContainer.userSettings = {language: 'de', theme: 'sap_horizon'}

Meta

  • since: 1.0.0

anchor

The anchor value to be passed to the compound micro frontend.

Type: string

Examples

Click to copy
 
<luigi-container viewurl="/index.html" anchor='#foo'></luigi-container>
Click to copy
 
myContainer.anchor = '#foo'

Meta

  • since: 1.0.0

documentTitle

The document title value to be passed to the compound micro frontend.

Type: string

Examples

Click to copy
 
<luigi-container viewurl="/index.html" document-title='Luigi App'></luigi-container>
Click to copy
 
myContainer.documentTitle = 'Luigi App'

Meta

  • since: 1.2.0

hasBack

The hasBack value to be passed to the compound micro frontend. It indicates that there is one or more preserved views. Useful when you need to show a back button.

Type: boolean

Examples

Click to copy
 
<luigi-container viewurl="/index.html" has-back></luigi-container>
Click to copy
 
myContainer.hasBack = true

Meta

  • since: 1.2.0

dirtyStatus

The dirty status value to be passed to the compound micro frontend. It's used to indicate that there are unsaved changes when navigating away.

Type: boolean

Examples

Click to copy
 
<luigi-container viewurl="/index.html" dirty-status></luigi-container>
Click to copy
 
myContainer.dirtyStatus = true

Meta

  • since: 1.2.0

webcomponent

The following properties can be set for the web component object. By default, the web component is set to true.

Type: (boolean | WebComponentSettings | string)

Parameters

  • WebComponentSettings Object?

    • WebComponentSettings.type string : string, like module.
    • WebComponentSettings.selfRegistered boolean : if it is true, the web component bundle will be added via script tag.
    • WebComponentSettings.tagName string : tag name where web component is added to DOM.

  • string string must be a stringified JSON object from type WebComponentSettings.

Examples

Click to copy
 
<luigi-container webcomponent="{ type: 'module', selfRegistered: true, tagName: 'my-webcomponent'}"></luigi-container>
Click to copy
 
myContainer.webcomponent = { type: 'module', selfRegistered: true, tagName: 'my-webcomponent'}

Meta

  • since: 1.0.0

skipInitCheck

If set to true, skips handshake and ready event is fired immediately.

Type: boolean

Examples

Click to copy
 
<luigi-container viewurl="/index.html" skipInitCheck></luigi-container>
Click to copy
 
myContainer.skipInitCheck = true

Meta

  • since: 1.4.0

activeFeatureToggleList

The list of active feature toggles to be passed to the compound microfrontend.

Type: Array<string>

Examples

Click to copy
 
<luigi-container viewUrl="/index.html" active-feature-toggle-list='["enable-foo", "allow-bar"]'></luigi-container>
Click to copy
 
myContainer.activeFeatureToggleList = ["enable-foo", "allow-bar"]

Meta

  • since: 1.4.0

theme

The theme to be passed to the compound microfrontend.

Type: string

Examples

Click to copy
 
<luigi-container viewUrl="/index.html" theme='sap_horizon'></luigi-container>
Click to copy
 
myContainer.theme = 'sap_horizon'

Meta

  • since: 1.4.0

updateContext

Function that updates the context of the compound microfrontend.

Parameters

  • contextObj Object The context data

Examples

Click to copy
 
containerElement.updateContext({newContextData: 'some data'})

Returns void

Meta

  • since: 1.0.0

notifyAlertClosed

A function that notifies the microfrontend that the opened alert has been closed.

Parameters

  • id string the id of the opened alert
  • dismissKey string? the key specifying which dismiss link was clicked on the alert message (optional)

Examples

Click to copy
 
containerElement.notifyAlertClosed('my-alert-id', 'my-dismiss-key')

Returns void

Meta

  • since: 1.7.0

notifyConfirmationModalClosed

A function that notifies the microfrontend if the confirmation modal was confirmed or declined.

Parameters

  • confirmed boolean
  • value boolean if the confirmation modal was confirmed or declined.

Examples

Click to copy
 
containerElement.notifyAlertClosed(true)

Returns void

Meta

  • since: 1.7.0

init

Manually triggers the micro frontend rendering process when using the defer-init attribute.

Returns void

Meta

  • since: 1.0.0