Luigi Client

This document outlines the features provided by the Luigi Client API. It covers these topics:

  • Lifecycle - functions that define the lifecycle of different Luigi elements
  • Callbacks - callback functions for initListener and customMessageListener
  • Link manager - you can use the linkManager instead of an internal router
  • Split view - allows you to open a micro frontend in the lower part of the content area in a "split screen" view
  • uxManager - functions related to user interface
  • storageManager - Storage Manager API to store/retrieve objects from Luigi Core local storage

API Reference

Lifecycle

Use the functions and parameters to define the Lifecycle of listeners, navigation nodes, and Event data.

publishEvent

Web Component API only

Publish an event that can be listened to from the container host.

Similar to sendCustomMessage but for WebComponent based microfrontends only.

Parameters
Examples
Click to copy
 
// case 1: publish an event from a WC based microfrontend

// wcComponent.js
// sending a message to parent host
this.LuigiClient.publishEvent(new CustomEvent('sendSomeMsg', { detail: 'My own message' }));

// host.html
myContainer.addEventListener('custom-message', event => {
  console.log('My custom message from the microfrontend', event.detail.data);
}

// case 2: publish an event from a compound microfrontend

// secondChild.js
// Set the custom event name = 'sendInput' and
// send a message to its parent (main.html) and sibling (firstChild.js)
this.LuigiClient.publishEvent(new CustomEvent('sendInput', { detail: 'My own message' }));

// main.html
myContainer.addEventListener('custom-message', event => {
  console.log('My custom message from microfrontend', event.detail.data);
}

// Note: eventListeners.name must match CustomEvent name above
// eventListeners.source = input1 = id of secondChild.js, which is where the message being sent from
compoundConfig = {
 ...
 children: [
  {
    viewUrl: 'firstChild.js'
    ...
    eventListeners: [
          {
            source: 'input1',
            name: 'sendInput',
            action: 'update',
            dataConverter: data => {
              console.log(
                'dataConverter(): Received Custom Message from "input1" MF ' + data
              );
              return 'new text: ' + data;
            }
          }
     ]
  },
  {
    viewUrl: 'secondChild.js',
    id: 'input1',
  }

isLuigiClientInitialized

Check if LuigiClient is initialized

Examples
Click to copy
 
const init = LuigiClient.isLuigiClientInitialized()

Returns boolean client initialized state

Meta

  • since: 1.12.0

luigiClientInit

Starts the handshake with Luigi Core and thereafter results in initialization of Luigi Client. It is always ran by default when importing the Luigi Client package in your micro frontend. Note that when using defer-luigi-init to defer default initialization, you will need to initialize the handshake using this function manually wherever needed.

Examples
Click to copy
 
LuigiClient.luigiClientInit()

Meta

  • since: 1.12.0

addInitListener

Registers a listener called with the context object and the Luigi Core domain as soon as Luigi is instantiated. Defer your application bootstrap if you depend on authentication data coming from Luigi.

Parameters
  • initFn Lifecycle~initListenerCallback the function that is called once Luigi is initialized, receives current context and origin as parameters
  • disableTpcCheck boolean if set to true third party cookie check will be disabled via LuigiClient.
Examples
Click to copy
 
const initListenerId = LuigiClient.addInitListener((context) => storeContextToMF(context))

removeInitListener

Removes an init listener.

Parameters
  • id string the id that was returned by the addInitListener function.
Examples
Click to copy
 
LuigiClient.removeInitListener(initListenerId)

addContextUpdateListener

Registers a listener called with the context object when the URL is changed. For example, you can use this when changing environments in a context switcher in order for the micro frontend to do an API call to the environment picked.

Parameters
  • contextUpdatedFn function the listener function called each time Luigi context changes
Examples
Click to copy
 
const updateListenerId = LuigiClient.addContextUpdateListener((context) => storeContextToMF(context))

removeContextUpdateListener

Removes a context update listener.

Parameters
  • id string the id that was returned by the addContextUpdateListener function
Examples
Click to copy
 
LuigiClient.removeContextUpdateListener(updateListenerId)

addInactiveListener

Registers a listener called upon micro frontend inactivity. This happens when a new micro frontend gets shown while keeping the old one cached. Gets called when:

  • navigating with preserveView
  • navigating from or to a viewGroup

Does not get called when navigating normally, or when openAsModal or openAsSplitView are used. Once the micro frontend turns back into active state, the addContextUpdateListener receives an updated context.

Parameters
  • inactiveFn function the listener function called each time a micro frontend turns into an inactive state
Examples
Click to copy
 
LuigiClient.addInactiveListener(() => mfIsInactive = true)
const inactiveListenerId = LuigiClient.addInactiveListener(() => mfIsInactive = true)

removeInactiveListener

Removes a listener for inactive micro frontends.

Parameters
  • id string the id that was returned by the addInactiveListener function
Examples
Click to copy
 
LuigiClient.removeInactiveListener(inactiveListenerId)

addCustomMessageListener

Registers a listener called when the micro frontend receives a custom message.

Parameters
Examples
Click to copy
 
const customMsgId = LuigiClient.addCustomMessageListener('myapp.project-updated', (data) => doSomething(data))

Meta

  • since: 0.6.2

removeCustomMessageListener

Removes a custom message listener.

Parameters
  • id string the id that was returned by the addInitListener function
Examples
Click to copy
 
LuigiClient.removeCustomMessageListener(customMsgId)

Meta

  • since: 0.6.2

getToken

Returns the currently valid access token.

Examples
Click to copy
 
const accessToken = LuigiClient.getToken()

Returns string current access token

getContext

Returns the context object. Typically it is not required as the addContextUpdateListener() receives the same values.

Examples
Click to copy
 
const context = LuigiClient.getContext()

Returns Object current context data

getEventData

Returns the context object. It is an alias function for getContext().

Returns Object current context data

Meta

  • deprecated: This is deprecated.

getActiveFeatureToggles

Returns a list of active feature toggles

Examples
Click to copy
 
const activeFeatureToggleList = LuigiClient.getActiveFeatureToggles()

Returns Array a list of feature toggle names

Meta

  • since: 1.4.0

addNodeParams

Sets node parameters in Luigi Core. The parameters will be added to the URL.

Parameters
  • params Object
  • keepBrowserHistory boolean (optional, default true)
Examples
Click to copy
 
LuigiClient.addNodeParams({luigi:'rocks'}, true);

getNodeParams

Returns the node parameters of the active URL. Node parameters are defined like URL query parameters but with a specific prefix allowing Luigi to pass them to the micro frontend view. The default prefix is ~ and you can use it in the following way: https://my.luigi.app/home/products?~sort=asc&~page=3.

NOTE: some special characters (<, >, ", ', /) in node parameters are HTML-encoded.

Parameters
  • shouldDesanitise boolean defines whether the specially encoded characters should be desanitised (optional, default false)
Examples
Click to copy
 
const nodeParams = LuigiClient.getNodeParams()
const nodeParams = LuigiClient.getNodeParams(true)

Returns Object node parameters, where the object property name is the node parameter name without the prefix, and its value is the value of the node parameter. For example {sort: 'asc', page: 3}

getPathParams

Returns the dynamic path parameters of the active URL. Path parameters are defined by navigation nodes with a dynamic pathSegment value starting with :, such as productId. All path parameters in the current navigation path (as defined by the active URL) are returned.

NOTE: some special characters (<, >, ", ', /) in path parameters are HTML-encoded.

Examples
Click to copy
 
const pathParams = LuigiClient.getPathParams()

Returns Object path parameters, where the object property name is the path parameter name without the prefix, and its value is the actual value of the path parameter. For example {productId: 1234, ...}

getCoreSearchParams

Read search query parameters which are sent from Luigi Core

Examples
Click to copy
 
LuigiClient.getCoreSearchParams();

Returns any Core search query parameters

addCoreSearchParams

Web App API only

Sends search query parameters to Luigi Core. The search parameters will be added to the URL if they are first allowed on a node level using clientPermissions.urlParameters.

Parameters
  • searchParams Object
  • keepBrowserHistory boolean (optional, default true)
Examples
Click to copy
 
LuigiClient.addCoreSearchParams({luigi:'rocks'}, false);

getClientPermissions

Returns the current client permissions as specified in the navigation node or an empty object. For details, see Node parameters.

Examples
Click to copy
 
const permissions = LuigiClient.getClientPermissions()

Returns Object client permissions as specified in the navigation node

setTargetOrigin

Web App API only

When the micro frontend is not embedded in the Luigi Core application and there is no init handshake you can set the target origin that is used in postMessage function calls by Luigi Client. Typically used only in custom micro-frontend frameworks that are compatible with LuigiClient API.

Parameters
Examples
Click to copy
 
LuigiClient.setTargetOrigin(window.location.origin)

Meta

  • since: 0.7.3

sendCustomMessage

Web App API only

Sends a custom message to the Luigi Core application.

Parameters

  • message Object an object containing data to be sent to the Luigi Core to process it further. This object is set as an input parameter of the custom message listener on the Luigi Core side

    • message.id string a string containing the message id
    • message.MY_DATA_FIELD any any other message data field
Examples
Click to copy
 
LuigiClient.sendCustomMessage({id: 'environment.created', production: false})
LuigiClient.sendCustomMessage({id: 'environment.created', data: environmentDataObj})

Meta

  • since: 0.6.2

getUserSettings

Returns the current user settings based on the selected node.

Examples
Click to copy
 
const userSettings = LuigiClient.getUserSettings()

Returns Object current user settings

Meta

  • since: 1.7.1

getAnchor

Returns the current anchor based on active URL.

Examples
Click to copy
 
LuigiClient.getAnchor();

Returns any anchor of URL

Meta

  • since: 1.21.0

setAnchor

Sends anchor to Luigi Core. The anchor will be added to the URL.

Parameters
Examples
Click to copy
 
LuigiClient.setAnchor('luigi');

Meta

  • since: 1.21.0

setViewGroupData

This function allows you to change node labels within the same view group, e.g. in your node config: label: 'my Node {viewGroupData.vg1}'.

Parameters
  • data Object a data object containing the view group name and desired label
Examples
Click to copy
 
LuigiClient.setViewGroupData({'vg1':' Luigi rocks!'})

Meta

  • since: 2.2.0

Lifecycle~initListenerCallback

Callback of the addInitListener

Type: Function

Parameters

  • context Object current context data
  • origin string Luigi Core URL

Lifecycle~customMessageListenerCallback

Callback of the customMessageListener

Type: Function

Parameters

  • customMessage Object custom message object

    • customMessage.id string message id
    • customMessage.MY_DATA_FIELD any any other message data field

  • listenerId string custom message listener id to be used for unsubscription

linkManager

The Link Manager allows you to navigate to another route. Use it instead of an internal router to:

  • Provide routing inside micro frontends.
  • Reflect the route.
  • Keep the navigation state in Luigi.

Offers an alternative way of navigating with intents. This involves specifying a semanticSlug and an object containing parameters. This method internally generates a URL of the form #?intent=<semantic object>-<action>?<param_name>=<param_value> through the given input arguments. This then follows a call to the original linkManager.navigate(...) function. Consequently, the following calls shall have the exact same effect:

  • linkManager().navigateToIntent('Sales-settings', {project: 'pr2', user: 'john'})
  • linkManager().navigate('/#?intent=Sales-settings?project=pr2&user=john')
Parameters
  • semanticSlug string concatenation of semantic object and action connected with a dash (-), i.e.: <semanticObject>-<action>
  • params Object an object representing all the parameters passed, i.e.: {param1: '1', param2: 2, param3: 'value3'}. (optional, default {})
Examples
Click to copy
 
LuigiClient.linkManager().navigateToIntent('Sales-settings', {project: 'pr2', user: 'john'})
LuigiClient.linkManager().navigateToIntent('Sales-settings')

withoutSync

Web App API only

Disables the navigation handling for a single navigation request. It prevents Luigi Core from handling the URL change after navigate(). Used for auto-navigation.

Examples
Click to copy
 
LuigiClient.linkManager().withoutSync().navigate('/projects/xy/foobar');
LuigiClient.linkManager().withoutSync().fromClosestContext().navigate('settings');

Meta

  • since: 0.7.7

newTab

Web App API only

Enables navigating to a new tab.

Examples
Click to copy
 
LuigiClient.linkManager().newTab().navigate('/projects/xy/foobar');

Meta

  • since: 1.16.0

preserveQueryParams

Web App API only

Keeps the URL's query parameters for a navigation request.

Parameters
  • preserve boolean By default, it is set to false. If it is set to true, the URL's query parameters will be kept after navigation. (optional, default false)
Examples
Click to copy
 
LuigiClient.linkManager().preserveQueryParams(true).navigate('/projects/xy/foobar');
LuigiClient.linkManager().preserveQueryParams(false).navigate('/projects/xy/foobar');

Meta

  • since: 1.19.0

getCurrentRoute

Gets the luigi route associated with the current micro frontend.

Examples
Click to copy
 
LuigiClient.linkManager().getCurrentRoute();
LuigiClient.linkManager().fromContext('project').getCurrentRoute();
LuigiClient.linkManager().fromVirtualTreeRoot().getCurrentRoute();

Returns promise a promise which resolves to a String value specifying the current luigi route

Meta

  • since: 1.23.0

Navigates to the given path in the application hosted by Luigi. It contains either a full absolute path or a relative path without a leading slash that uses the active route as a base. This is the standard navigation.

Parameters

  • path string path to be navigated to

  • sessionId string current Luigi sessionId

  • preserveView boolean preserve a view by setting it to true. It keeps the current view opened in the background and opens the new route in a new frame. Use the goBack() function to navigate back. You can use this feature across different levels. Preserved views are discarded as soon as you use the standard navigate() function instead of goBack()

  • modalSettings Object opens a view in a modal. Use these settings to configure the modal's title and size

    • modalSettings.title string modal title. By default, it is the node label. If there is no label, it is left empty
    • modalSettings.size ("fullscreen" | "l" | "m" | "s") size of the modal (optional, default "l")
    • modalSettings.width string updates the width of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    • modalSettings.height string updates the height of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    • modalSettings.keepPrevious boolean Lets you open multiple modals. Keeps the previously opened modal and allows to open another modal on top of the previous one. By default the previous modals are discarded.
    • modalSettings.closebtn_data_testid string lets you specify a data_testid for the close button. Default value is lui-modal-index-0. If multiple modals are opened the index will be increased per modal.

  • splitViewSettings Object opens a view in a split view. Use these settings to configure the split view's behaviour

    • splitViewSettings.title string split view title. By default, it is the node label. If there is no label, it is left empty
    • splitViewSettings.size number height of the split view in percent (optional, default 40)
    • splitViewSettings.collapsed boolean creates split view but leaves it closed initially (optional, default false)

  • drawerSettings Object opens a view in a drawer. Use these settings to configure if the drawer has a header, backdrop and size.

    • drawerSettings.header any By default, the header is visible. The default title is the node label, but the header could also be an object with a title attribute allowing you to specify your own title. An 'x' icon is displayed to close the drawer view.
    • drawerSettings.backdrop boolean By default, it is set to false. If it is set to true the rest of the screen has a backdrop.
    • drawerSettings.size ("l" | "m" | "s" | "xs") size of the drawer (optional, default "s")
Examples
Click to copy
 
LuigiClient.linkManager().navigate('/overview')
LuigiClient.linkManager().navigate('users/groups/stakeholders')
LuigiClient.linkManager().navigate('/settings', null, true) // preserve view
LuigiClient.linkManager().navigate('#?Intent=Sales-order?id=13') // intent navigation

updateModalPathInternalNavigation

Updates path of the modalPathParam when internal navigation occurs.

Parameters
  • path string
  • modalSettings Object? opens a view in a modal. Use these settings to configure the modal's title and size (optional, default {})
  • addHistoryEntry boolean adds an entry in the history (optional, default false)
Examples
Click to copy
 
LuigiClient.linkManager().updateModalPathInternalNavigation('microfrontend')

Meta

  • since: 1.21.0

openAsModal

Opens a view in a modal. You can specify the modal's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty. The default size of the modal is l, which means 80%. You can also use m (60%) and s (40%) to set the modal size. Optionally, use it in combination with any of the navigation functions.

Parameters

  • path string navigation path

  • modalSettings Object? opens a view in a modal. Use these settings to configure the modal's title and size (optional, default {})

    • modalSettings.title string modal title. By default, it is the node label. If there is no label, it is left empty
    • modalSettings.size ("fullscreen" | "l" | "m" | "s") size of the modal (optional, default "l")
    • modalSettings.width string updates the width of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    • modalSettings.height string updates the height of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    • modalSettings.keepPrevious boolean Lets you open multiple modals. Keeps the previously opened modal and allows to open another modal on top of the previous one. By default the previous modals are discarded.
    • modalSettings.closebtn_data_testid string lets you specify a data_testid for the close button. Default value is lui-modal-index-0. If multiple modals are opened the index will be increased per modal.
Examples
Click to copy
 
LuigiClient.linkManager().openAsModal('projects/pr1/users', {title:'Users', size:'m'}).then((res) => {
    // Logic to execute when the modal will be closed
    console.log(res.data) //=> {foo: 'bar'}
 });

Returns promise which is resolved when closing the modal. By using LuigiClient.linkManager().goBack({ foo: 'bar' }) to close the modal you have access to the goBackContext when the promise will be resolved.

updateModalSettings

Web App API only

Updates the current title and size of a modal. If routing.showModalPathInUrl is set to true, the URL will be updated with the modal settings data. In addition, you can specify if a new history entry will be created with the updated URL.

Parameters

  • updatedModalSettings Object possibility to update the active modal. (optional, default {})

    • updatedModalSettings.title Object update the title of the active modal.
    • updatedModalSettings.size Object update the size of the active modal.
    • updatedModalSettings.width string updates the width of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    • updatedModalSettings.height string updates the height of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.

  • addHistoryEntry boolean adds an entry in the history, by default it's false. (optional, default false)

Examples
Click to copy
 
LuigiClient.linkManager().updateModalSettings({title:'LuigiModal', size:'l'});

openAsSplitView

  • See: splitView for further documentation about the returned instance

Opens a view in a split view. You can specify the split view's title and size. If you don't specify the title, it is the node label. If there is no node label, the title remains empty. The default size of the split view is 40, which means 40% height of the split view.

Parameters

  • path string navigation path

  • splitViewSettings Object opens a view in a split view. Use these settings to configure the split view's behaviour (optional, default {})

    • splitViewSettings.title string split view title. By default, it is the node label. If there is no label, it is left empty
    • splitViewSettings.size number height of the split view in percent (optional, default 40)
    • splitViewSettings.collapsed boolean opens split view in collapsed state (optional, default false)
Examples
Click to copy
 
const splitViewHandle = LuigiClient.linkManager().openAsSplitView('projects/pr1/logs', {title: 'Logs', size: 40, collapsed: true});

Returns Object instance of the SplitView. It provides Event listeners and you can use the available functions to control its behavior.

Meta

  • since: 0.6.0

openAsDrawer

Opens a view in a drawer. You can specify the size of the drawer, whether the drawer has a header, and whether a backdrop is active in the background. By default, the header is shown. The backdrop is not visible and has to be activated. The size of the drawer is set to s by default, which means 25% of the micro frontend size. You can also use l(75%), m(50%) or xs(15.5%). Optionally, use it in combination with any of the navigation functions.

Parameters

  • path string navigation path

  • drawerSettings Object opens a view in a drawer. Use these settings to configure if the drawer has a header, backdrop and size. (optional, default {})

    • drawerSettings.header any By default, the header is visible. The default title is the node label, but the header could also be an object with a title attribute allowing you to specify your own title. An 'x' icon is displayed to close the drawer view.
    • drawerSettings.backdrop boolean By default, it is set to false. If it is set to true the rest of the screen has a backdrop.
    • drawerSettings.size ("l" | "m" | "s" | "xs") size of the drawer (optional, default "s")
    • drawerSettings.overlap boolean enable resizing of main microfrontend iFrame after drawer open (optional, default true)
Examples
Click to copy
 
LuigiClient.linkManager().openAsDrawer('projects/pr1/drawer', {header:true, backdrop:true, size:'s'});
LuigiClient.linkManager().openAsDrawer('projects/pr1/drawer', {header:{title:'My drawer component'}, backdrop:true, size:'xs'});

Meta

  • since: 1.6.0

fromContext

Sets the current navigation context to that of a specific parent node which has the navigationContext field declared in the navigation configuration. This navigation context is then used by the navigate function.

Parameters
Examples
Click to copy
 
LuigiClient.linkManager().fromContext('project').navigate('/settings')

Returns linkManager link manager instance

fromClosestContext

Sets the current navigation context which is then used by the navigate function. This has to be a parent navigation context, it is not possible to use the child navigation contexts.

Examples
Click to copy
 
LuigiClient.linkManager().fromClosestContext().navigate('/users/groups/stakeholders')

Returns linkManager link manager instance

fromVirtualTreeRoot

Sets the current navigation base to the parent node that is defined as virtualTree. This method works only when the currently active micro frontend is inside a virtualTree.

Examples
Click to copy
 
LuigiClient.linkManager().fromVirtualTreeRoot().navigate('/users/groups/stakeholders')

Returns linkManager link manager instance

Meta

  • since: 1.0.1

fromParent

Enables navigating to sibling nodes without knowing the absolute path.

Examples
Click to copy
 
LuigiClient.linkManager().fromParent().navigate('/sibling')

Returns linkManager link manager instance

Meta

  • since: 1.0.1

withParams

Sends node parameters to the route. The parameters are used by the navigate function. Use it optionally in combination with any of the navigation functions and receive it as part of the context object in Luigi Client.

Parameters
Examples
Click to copy
 
LuigiClient.linkManager().withParams({foo: "bar"}).navigate("path")

// Can be chained with context setting functions such as:
LuigiClient.linkManager().fromContext("currentTeam").withParams({foo: "bar"}).navigate("path")

Returns linkManager link manager instance

withOptions

Web App API only

Sets options to customise route changing behaviour. The parameters are used by the navigate function. Use it optionally in combination with any of the navigation functions and receive it as part of the context object in Luigi Client.

Parameters

  • options Object navigation options

    • options.preventHistoryEntry boolean By default, it is set to false. If it is set to true, there is no browser history being kept.
    • options.preventContextUpdate boolean By default, it is set to false. If it is set to true, there is no context update being triggered.
Examples
Click to copy
 
LuigiClient.linkManager().withOptions(
{ preventContextUpdate:true, preventHistoryEntry: true }
).navigate('/overview')

Returns linkManager link manager instance

Meta

  • since: 1.25.0

pathExists

Checks if the path you can navigate to exists in the main application. For example, you can use this helper method conditionally to display a DOM element like a button.

Parameters
  • path string path which existence you want to check
Examples
Click to copy
 
let pathExists;
 LuigiClient
 .linkManager()
 .pathExists('projects/pr2')
 .then(
   (pathExists) => {  }
 );

Returns promise a promise which resolves to a Boolean variable specifying whether the path exists or not

hasBack

Checks if there is one or more preserved views. You can use it to show a back button.

Returns boolean indicating if there is a preserved view you can return to

goBack

Discards the active view and navigates back to the last visited view. Works with preserved views, and also acts as the substitute of the browser back button. goBackContext is only available when using preserved views.

Parameters
  • goBackValue any data that is passed in the goBackContext field to the last visited view when using preserved views
Examples
Click to copy
 
LuigiClient.linkManager().goBack({ foo: 'bar' });
LuigiClient.linkManager().goBack(true);

splitView

Split view Allows to open a micro frontend in a split screen in the lower part of the content area. Open it by calling const splitViewHandle = LuigiClient.linkManager().openAsSplitView. At a given time, you can open only one split view. It closes automatically when you navigate to a different route. When you call handle.collapse(), the split view gets destroyed. It recreates when you use handle.expand(). openAsSplitView returns an instance of the split view handle. The functions, actions, and event handlers listed below allow you to control and manage the split view.

Meta

  • since: 0.6.0

collapse

Collapses the split view

Examples
Click to copy
 
splitViewHandle.collapse();

Meta

  • since: 0.6.0

expand

Expands the split view

Examples
Click to copy
 
splitViewHandle.expand();

Meta

  • since: 0.6.0

close

Closes and destroys the split view

Examples
Click to copy
 
splitViewHandle.close();

Meta

  • since: 0.6.0

setSize

Sets the height of the split view

Parameters
  • value number lower height in percent
Examples
Click to copy
 
splitViewHandle.setSize(60);

Meta

  • since: 0.6.0

on

Registers a listener for split view events

Parameters
  • name ("expand" | "collapse" | "resize" | "close") event name
  • callback function gets called when this event gets triggered by Luigi
Examples
Click to copy
 
const listenerId = splitViewHandle.on('expand', () => {});
const listenerId = splitViewHandle.on('collapse', () => {});
const listenerId = splitViewHandle.on('resize', () => {});
const listenerId = splitViewHandle.on('close', () => {});
*

Returns string listener id

Meta

  • since: 0.6.0

removeEventListener

Unregisters a split view listener

Parameters
Examples
Click to copy
 
splitViewHandle.removeEventListener(listenerId);

Meta

  • since: 0.6.0

exists

Gets the split view status

Examples
Click to copy
 
splitViewHandle.exists();

Returns boolean true if a split view is loaded

Meta

  • since: 0.6.0

getSize

Reads the size of the split view

Examples
Click to copy
 
splitViewHandle.getSize();

Returns number height in percent

Meta

  • since: 0.6.0

isCollapsed

Reads the collapse status

Examples
Click to copy
 
splitViewHandle.isCollapsed();

Returns boolean true if the split view is currently collapsed

Meta

  • since: 0.6.0

isExpanded

Reads the expand status

Examples
Click to copy
 
splitViewHandle.isExpanded();

Returns boolean true if the split view is currently expanded

Meta

  • since: 0.6.0

uxManager

Use the UX Manager to manage the appearance features in Luigi.

showLoadingIndicator

Adds a backdrop with a loading indicator for the micro frontend frame. This overrides the loadingIndicator.enabled setting.

hideLoadingIndicator

Removes the loading indicator. Use it after calling showLoadingIndicator() or to hide the indicator when you use the loadingIndicator.hideAutomatically: false node configuration.

closeCurrentModal

Closes the currently opened micro frontend modal.

addBackdrop

Adds a backdrop to block the top and side navigation. It is based on the Fundamental UI Modal, which you can use in your micro frontend to achieve the same behavior.

removeBackdrop

Removes the backdrop.

setDirtyStatus

This method informs the main application that there are unsaved changes in the current view in the iframe. It can be used to prevent navigation away from the current view, for example with form fields which were edited but not submitted. However, this functionality is not restricted to forms. If you use withoutSync() together with setDirtyStatus(), this is a special case in which the dirty state logic needs to be handled by the micro frontend. For example, if the user navigates with an Angular router, which would trigger withoutSync(), Angular needs to take care about dirty state, prevent the navigation and ask for permission to navigate away, through uxManager().showConfirmationModal(settings).

Parameters
  • isDirty boolean indicates if there are any unsaved changes on the current page or in the component

showConfirmationModal

Shows a confirmation modal.

Parameters

  • settings Object the settings of the confirmation modal. If you don't provide any value for any of the fields, a default value is used

    • settings.type ("confirmation" | "success" | "warning" | "error" | "information") the content of the modal type. (Optional)
    • settings.header string the content of the modal header (optional, default "Confirmation")
    • settings.body string the content of the modal body. It supports HTML formatting elements such as <br>, <b>, <strong>, <i>, <em>, <mark>, <small>, <del>, <ins>, <sub>, <sup>. (optional, default "Are you sure you want to do this?")
    • settings.buttonConfirm (string | false) the label for the modal confirmation button. If set to false, the button will not be shown. (optional, default "Yes")
    • settings.buttonDismiss string the label for the modal dismiss button (optional, default "No")
Examples
Click to copy
 
import LuigiClient from '@luigi-project/client';
const settings = {
 type: "confirmation",
 header: "Confirmation",
 body: "Are you sure you want to do this?",
 buttonConfirm: "Yes",
 buttonDismiss: "No"
}
LuigiClient
 .uxManager()
 .showConfirmationModal(settings)
 .then(() => {
    // Logic to execute when the confirmation modal is dismissed
 });

Returns promise which is resolved when accepting the confirmation modal and rejected when dismissing it

showAlert

Shows an alert.

Parameters

  • settings Object the settings for the alert

    • settings.text string the content of the alert. To add a link to the content, you have to set up the link in the links object. The key(s) in the links object must be used in the text to reference the links, wrapped in curly brackets with no spaces. If you don't specify any text, the alert is not displayed

    • settings.type ("info" | "success" | "warning" | "error") sets the type of alert

    • settings.links Object provides links data

      • settings.links.LINK_KEY Object object containing the data for a particular link. To properly render the link in the alert message refer to the description of the settings.text parameter

        • settings.links.LINK_KEY.text string text which replaces the link identifier in the alert content
        • settings.links.LINK_KEY.url string URL to navigate when you click the link. Currently, only internal links are supported in the form of relative or absolute paths
        • settings.links.LINK_KEY.dismissKey string dismissKey which represents the key of the link.

    • settings.closeAfter number (optional) time in milliseconds that tells Luigi when to close the Alert automatically. If not provided, the Alert will stay on until closed manually. It has to be greater than 100

Examples
Click to copy
 
import LuigiClient from '@luigi-project/client';
const settings = {
 text: "Ut enim ad minim veniam, {goToHome} quis nostrud exercitation ullamco {relativePath}. Duis aute irure dolor {goToOtherProject} or {neverShowItAgain}",
 type: 'info',
 links: {
   goToHome: { text: 'homepage', url: '/overview' },
   goToOtherProject: { text: 'other project', url: '/projects/pr2' },
   relativePath: { text: 'relative hide side nav', url: 'hideSideNav' },
   neverShowItAgain: { text: 'Never show it again', dismissKey: 'neverShowItAgain' }
 },
 closeAfter: 3000
}
LuigiClient
 .uxManager()
 .showAlert(settings)
 .then(() => {
    // Logic to execute when the alert is dismissed
 });

Returns promise which is resolved when the alert is dismissed

getCurrentLocale

Gets the current locale.

Returns string current locale

setCurrentLocale

Web App API only

Sets current locale to the specified one.

NOTE: this must be explicitly allowed on the navigation node level by setting clientPermissions.changeCurrentLocale to true. (See Node parameters.)

Parameters
  • locale string locale to be set as the current locale

isSplitView

Web App API only

Checks if the current micro frontend is displayed inside a split view

Returns boolean indicating if it is loaded inside a split view

Meta

  • since: 0.6.0

isModal

Web App API only

Checks if the current micro frontend is displayed inside a modal

Returns boolean indicating if it is loaded inside a modal

Meta

  • since: 0.6.0

isDrawer

Web App API only

Checks if the current micro frontend is displayed inside a drawer

Returns boolean indicating if it is loaded inside a drawer

Meta

  • since: 1.26.0

getCurrentTheme

Gets the current theme.

Returns any current themeObj

getCSSVariables

Web App API only

Gets the CSS variables from Luigi Core with their key and value.

Examples
Click to copy
 
LuigiClient.uxManager().getCSSVariables();

Returns Object CSS variables with their key and value.

Meta

  • since: 2.3.0

applyCSS

Web App API only

Adds the CSS variables from Luigi Core in a

Examples
Click to copy
 
LuigiClient.uxManager().applyCSS();

Meta

  • since: 2.3.0

storageManager

Web App API only

StorageManager allows you to use browser local storage of key/values. Every storage operation is sent to be managed by Luigi Core. The idea is that different micro frontends can share or persist items using local storage, as long as they come from the same domain and follow the same-origin policy. Since all storage operations are asynchronous (sending an event to Luigi Core that will reply once operation is finished), all the methods return Promises.

setItem

Stores an item for a specific key.

Parameters
  • key string key used to identify the value
  • value Object item to store; object must be stringifyable
Examples
Click to copy
 
LuigiClient.storageManager().setItem('keyExample','valueExample').then(() => console.log('Value stored'))

Returns Promise<void> resolves an empty value when the storage operation is over. It will launch an error if storage is not supported, the value cannot be stringified, or if you are using a Luigi reserved key.

Meta

  • since: 1.6.0

getItem

Retrieves an item for a specific key.

Parameters
  • key string used to identify the value
Examples
Click to copy
 
LuigiClient.storageManager().getItem('keyExample').then((value) => console.log);

Returns Promise<Object> resolves an item retrieved from storage. It will launch an error if storage is not supported.

Meta

  • since: 1.6.0

removeItem

Removes an item for a specific key.

Parameters
  • key string used to identify the value
Examples
Click to copy
 
LuigiClient.storageManager().removeItem('keyExample').then((value) => console.log(value + ' just removed')

Returns Promise<Object> resolves an item just removed from storage. It will launch an error if storage is not supported or if you are using a Luigi reserved key.

Meta

  • since: 1.6.0

clear

Clears all the storage key/values.

Examples
Click to copy
 
LuigiClient.storageManager().clear().then(() => console.log('storage cleared'))

Returns Promise<void> resolves when storage clear is over.

Meta

  • since: 1.6.0

has

Checks if a key is present in storage.

Parameters
  • key string key in the storage
Examples
Click to copy
 
LuigiClient.storageManager().has(key).then((present) => console.log('item is present '+present))

Returns Promise<boolean> true if key is present, false if it is not

Meta

  • since: 1.6.0

getAllKeys

Gets all the keys used in the storage.

Examples
Click to copy
 
LuigiClient.storageManager().getAllKeys().then((keys) => console.log('keys are '+keys))

Returns Promise<Array<string>> keys currently present in the storage

Meta

  • since: 1.6.0