Skip to content

Latest commit

 

History

History
1232 lines (749 loc) · 46.4 KB

luigi-client-api.md

File metadata and controls

1232 lines (749 loc) · 46.4 KB
Raw

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.

isLuigiClientInitialized

Check if LuigiClient is initialized

Examples
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
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
Examples
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
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
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
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
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
LuigiClient.removeInactiveListener(inactiveListenerId)

addCustomMessageListener

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

Parameters
Examples
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

Meta

  • since: 0.6.2 LuigiClient.removeCustomMessageListener(customMsgId)

getToken

Returns the currently valid access token.

Examples
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
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
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
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
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
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
LuigiClient.getCoreSearchParams();

Returns any Core search query parameters

addCoreSearchParams

Sends search query parameters to Luigi Core. If they are allowed on node level, the search parameters will be added to the URL.

Parameters
  • searchParams Object
  • keepBrowserHistory boolean (optional, default true)
Examples
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
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.

Parameters
Examples
LuigiClient.setTargetOrigin(window.location.origin)

Meta

  • since: 0.7.3

sendCustomMessage

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
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
const userSettings = LuigiClient.getUserSettings()

Returns Object current user settings

Meta

  • since: 1.7.1

getAnchor

Returns the current anchor based on active URL.

Examples
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
LuigiClient.setAnchor('luigi');

Meta

  • since: 1.21.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.

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')
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
LuigiClient.linkManager().navigateToIntent('Sales-settings', {project: 'pr2', user: 'john'})
LuigiClient.linkManager().navigateToIntent('Sales-settings')

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.

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

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

Meta

  • since: 1.16.0

preserveQueryParams

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
LuigiClient.linkManager().preserveQueryParams(true).navigate('/projects/xy/foobar');
LuigiClient.linkManager().preserveQueryParams(false).navigate('/projects/xy/foobar');

Meta

  • since: 1.19.0

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.

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 lets you specify a precise width for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    • modalSettings.height string lets you specify a precise height for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
  • 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
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
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 lets you specify a precise width for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
    • modalSettings.height string lets you specify a precise height for the modal. Allowed units are 'px', '%', 'rem', 'em', 'vh' and 'vw'.
Examples
LuigiClient.linkManager().openAsModal('projects/pr1/users', {title:'Users', size:'m'});

updateModalSettings

Update current title and size of a modal.

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

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
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
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
splitViewHandle.collapse();

Meta

  • since: 0.6.0

expand

Expands the split view

Examples
splitViewHandle.expand();

Meta

  • since: 0.6.0

close

Closes and destroys the split view

Examples
splitViewHandle.close();

Meta

  • since: 0.6.0

setSize

Sets the height of the split view

Parameters
  • value number lower height in percent
Examples
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
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
splitViewHandle.removeEventListener(listenerId);

Meta

  • since: 0.6.0

exists

Gets the split view status

Examples
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
splitViewHandle.getSize();

Returns number height in percent

Meta

  • since: 0.6.0

isCollapsed

Reads the collapse status

Examples
splitViewHandle.isCollapsed();

Returns boolean true if the split view is currently collapsed

Meta

  • since: 0.6.0

isExpanded

Reads the expand status

Examples
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
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
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}",
 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.)

Parameters
  • 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

getCurrentTheme

Gets the current theme.

Returns any current themeObj

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.

Parameters
  • key string key used to identify the value
  • value Object item to store; object must be stringifyable
Examples
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
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
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
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
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
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