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 

publishEvent 

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

Similar to sendCustomMessage but for WebComponent based microfrontends only.

Params

• event CustomEvent - Custom event to be published

Example

// 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

Example

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.

Example

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.

Params

• initFn 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.

Example

const initListenerId = LuigiClient.addInitListener((context) => storeContextToMF(context))

removeInitListener 

Removes an init listener.

Params

• id string - the id that was returned by the addInitListener function

Example

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.

Params

• contextUpdatedFn function - the listener function called each time Luigi context changes

Example

const updateListenerId = LuigiClient.addContextUpdateListener((context) => storeContextToMF(context))

removeContextUpdateListener 

Removes a context update listener.

Params

• id string - the id that was returned by the addContextUpdateListener function

Example

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.

Params

• inactiveFn function - the listener function called each time a micro frontend turns into an inactive state

Example

LuigiClient.addInactiveListener(() => mfIsInactive = true)
const inactiveListenerId = LuigiClient.addInactiveListener(() => mfIsInactive = true)

removeInactiveListener 

Removes a listener for inactive micro frontends.

Params

• id string - the id that was returned by the addInactiveListener function

Example

LuigiClient.removeInactiveListener(inactiveListenerId)

addCustomMessageListener 

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

Params

• customMessageId string - the custom message id
• customMessageListener customMessageListenerCallback - the function that is called when the micro frontend receives the corresponding event

Example

const customMsgId = LuigiClient.addCustomMessageListener('myapp.project-updated', (data) => doSomething(data))

Meta:

• since: 0.6.2

removeCustomMessageListener 

Removes a custom message listener.

Params

• id string - the id that was returned by the addInitListener function

Example

LuigiClient.removeCustomMessageListener(customMsgId)

Meta:

• since: 0.6.2

getToken 

Returns the currently valid access token.

Example

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.

Example

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: true

getActiveFeatureToggles 

Returns a list of active feature toggles

Example

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.

Params

• params Object
• keepBrowserHistory boolean = true

Example

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.

Params

• shouldDesanitise boolean = false - defines whether the specially encoded characters should be desanitised

Example

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.

Example

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

Example

LuigiClient.getCoreSearchParams();

Returns: Core search query parameters

addCoreSearchParams 

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.

Params

• searchParams Object
• keepBrowserHistory boolean = true
• preventLuigiConfigUpdate boolean = false - If true, the configChanged function will be triggered (since 2.29.0). By default it is set to false.

Example

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.

Example

const permissions = LuigiClient.getClientPermissions()

Returns: Object - client permissions as specified in the navigation node

setTargetOrigin 

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.

Params

• origin string - target origin

Example

LuigiClient.setTargetOrigin(window.location.origin)

Meta:

• since: 0.7.3

sendCustomMessage 

Sends a custom message to the Luigi Core application.

Params

• 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
  • .id string - a string containing the message id
  • .MY_DATA_FIELD * - any other message data field

Example

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.

Example

const userSettings = LuigiClient.getUserSettings()

Returns: Object - current user settings

Meta:

• since: 1.7.1

getAnchor 

Returns the current anchor based on active URL.

Example

LuigiClient.getAnchor();

Returns: anchor of URL

Meta:

• since: 1.21.0

setAnchor 

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

Params

• anchor string

Example

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}'.

Params

• data Object - a data object containing the view group name and desired label

Example

LuigiClient.setViewGroupData({'vg1':' Luigi rocks!'})

Meta:

• since: 2.2.0

initListenerCallback 

Callback of the addInitListener

Type: Function

Params

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

customMessageListenerCallback 

Callback of the customMessageListener

Type: Function

Params

• customMessage Object - custom message object
  • .id string - message id
  • .MY_DATA_FIELD * - any other message data field
• listenerId string - custom message listener id to be used for unsubscription

linkManager 

navigate 

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.

Params

• 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
  • .title string - modal title. By default, it is the node label. If there is no label, it is left empty
  • [.size] 'fullscreen' | 'l' | 'm' | 's' = "l" - size of the modal
  • .width string - updates the width of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
  • .height string - updates the height of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
  • .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.
  • .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
  • .title string - split view title. By default, it is the node label. If there is no label, it is left empty
  • [.size] number = 40 - height of the split view in percent
  • [.collapsed] boolean = false - creates split view but leaves it closed initially
• drawerSettings Object - opens a view in a drawer. Use these settings to configure if the drawer has a header, backdrop and size
  • .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
  • .backdrop boolean - by default, it is set to false. If it is set to true the rest of the screen has a backdrop
  • [.size] 'l' | 'm' | 's' | 'xs' = "s" - size of the drawer

Example

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.

Params

• path string
• addHistoryEntry boolean = false - adds an entry in the history
• [modalSettings] Object - opens a view in a modal. Use these settings to configure the modal's title and size

Example

LuigiClient.linkManager().updateModalPathInternalNavigation('microfrontend')

Meta:

• since: 1.21.0

navigateToIntent 

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')

Params

• 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'}

Example

LuigiClient.linkManager().navigateToIntent('Sales-settings', {project: 'pr2', user: 'john'})
LuigiClient.linkManager().navigateToIntent('Sales-settings')

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.

Params

• path string - navigation path
• [modalSettings] Object - opens a view in a modal. Use these settings to configure the modal's title and size
  • .title string - modal title. By default, it is the node label. If there is no label, it is left empty
  • [.size] 'fullscreen' | 'l' | 'm' | 's' = "l" - size of the modal
  • .width string - updates the width of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'
  • .height string - updates the height of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'
  • .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
  • .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

Example

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 

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.

Params

• updatedModalSettings Object - possibility to update the active modal
  • .title Object - update the title of the active modal
  • .size Object - update the size of the active modal
  • .width string - updates the width of the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'
  • .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.

Example

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

openAsSplitView 

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.

See: splitView for further documentation about the returned instance
Params

• path string - navigation path
• splitViewSettings Object - opens a view in a split view. Use these settings to configure the split view's behaviour
  • .title string - split view title. By default, it is the node label. If there is no label, it is left empty
  • [.size] number = 40 - height of the split view in percent
  • [.collapsed] boolean = false - opens split view in collapsed state

Example

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.

Params

• 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.
  • .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.
  • .backdrop boolean - by default, it is set to false. If it is set to true the rest of the screen has a backdrop.
  • [.size] 'l' | 'm' | 's' | 'xs' = "s" - size of the drawer
  • [.overlap] boolean = true - enable resizing of main microfrontend iFrame after drawer open

Example

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.

Params

• navigationContext string

Example

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.

Example

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.

Example

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.

Example

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.

Params

• nodeParams Object

Example

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 

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.

Params

• options Object - navigation options
  • .preventHistoryEntry boolean - by default, it is set to false. If it is set to true, there is no browser history being kept.
  • .preventContextUpdate boolean - by default, it is set to false. If it is set to true, there is no context update being triggered.

Example

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.

Params

• path string - path which existence you want to check

Example

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.

Params

• goBackValue any - data that is passed in the goBackContext field to the last visited view when using preserved views

Example

LuigiClient.linkManager().goBack({ foo: 'bar' });
LuigiClient.linkManager().goBack(true);

withoutSync 

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

Example

LuigiClient.linkManager().withoutSync().navigate('/projects/xy/foobar');
LuigiClient.linkManager().withoutSync().fromClosestContext().navigate('settings');

Meta:

• since: 0.7.7

newTab 

Enables navigating to a new tab.

Example

LuigiClient.linkManager().newTab().navigate('/projects/xy/foobar');

Meta:

• since: 1.16.0

preserveQueryParams 

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

Params

• preserve boolean = false - by default, it is set to false. If it is set to true, the URL's query parameters will be kept after navigation.

Example

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.

Example

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

splitView 

collapse 

Collapses the split view

Example

splitViewHandle.collapse();

Meta:

• since: 0.6.0

expand 

Expands the split view

Example

splitViewHandle.expand();

Meta:

• since: 0.6.0

close 

Closes and destroys the split view

Example

splitViewHandle.close();

Meta:

• since: 0.6.0

setSize 

Sets the height of the split view

Params

• value number - lower height in percent

Example

splitViewHandle.setSize(60);

Meta:

• since: 0.6.0

on 

Registers a listener for split view events

Params

• name 'expand' | 'collapse' | 'resize' | 'close' - event name
• callback function - gets called when this event gets triggered by Luigi

Example

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

Params

• id string - listener id

Example

splitViewHandle.removeEventListener(listenerId);

Meta:

• since: 0.6.0

exists 

Gets the split view status

Example

splitViewHandle.exists();

Returns: boolean - true if a split view is loaded

Meta:

• since: 0.6.0

getSize 

Reads the size of the split view

Example

splitViewHandle.getSize();

Returns: number - height in percent

Meta:

• since: 0.6.0

isCollapsed 

Reads the collapse status

Example

splitViewHandle.isCollapsed();

Returns: boolean - true if the split view is currently collapsed

Meta:

• since: 0.6.0

isExpanded 

Reads the expand status

Example

splitViewHandle.isExpanded();

Returns: boolean - true if the split view is currently expanded

Meta:

• since: 0.6.0

uxManager 

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).

Params

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

showConfirmationModal 

Shows a confirmation modal.

Params

• 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
  • .type 'confirmation' | 'success' | 'warning' | 'error' | 'information' - the content of the modal type. (Optional)
  • [.header] string = ""Confirmation"" - the content of the modal header
  • [.body] string = ""Are you sure you want to do this?"" - the content of the modal body. It supports HTML formatting elements such as <br>, <b>, <strong>, <i>, <em>, <mark>, <small>, <del>, <ins>, <sub>, <sup>.
  • [.buttonConfirm] string | false = ""Yes"" - the label for the modal confirmation button. If set to false, the button will not be shown.
  • [.buttonDismiss] string = ""No"" - the label for the modal dismiss button

Example

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.

Params

• settings Object - the settings for the alert
  • .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
  • .type 'info' | 'success' | 'warning' | 'error' - sets the type of alert
  • .links Object - provides links data
    • .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
      • .text string - text which replaces the link identifier in the alert content
      • .url string - URL to navigate when you click the link. Currently, only internal links are supported in the form of relative or absolute paths
      • .dismissKey string - dismissKey which represents the key of the link
  • .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

Example

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 

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.)

Params

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

isSplitView 

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 

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 

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: * - current themeObj

getCSSVariables 

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

Example

LuigiClient.uxManager().getCSSVariables();

Returns: Object - CSS variables with their key and value.

Meta:

• since: 2.3.0

applyCSS 

Adds the CSS variables from Luigi Core in a

Example

LuigiClient.uxManager().applyCSS();

Meta:

• since: 2.3.0

storageManager 

storageManager 

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.

Params

• key string - key used to identify the value
• value Object - item to store; object must be stringifyable

Example

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.

Params

• key string - used to identify the value

Example

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.

Params

• key string - used to identify the value

Example

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.

Example

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.

Params

• key string - key in the storage

Example

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.

Example

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