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
Use the functions and parameters to define the Lifecycle of listeners, navigation nodes, and Event data.
Check if LuigiClient is initialized
const init = LuigiClient.isLuigiClientInitialized()
Returns boolean client initialized state
Meta
- since: 1.12.0
Starts the handshake with Luigi Core and thereafter resulting in initialization of Luigi Client. It is always ran by default when importing 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.
LuigiClient.luigiClientInit()
Meta
- since: 1.12.0
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.
initFn
Lifecycle~initListenerCallback the function that is called once Luigi is initialized, receives current context and origin as parameters
const initListenerId = LuigiClient.addInitListener((context) => storeContextToMF(context))
Removes an init listener.
id
string the id that was returned by theaddInitListener
function.
LuigiClient.removeInitListener(initListenerId)
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.
contextUpdatedFn
function the listener function called each time Luigi context changes
const updateListenerId = LuigiClient.addContextUpdateListener((context) => storeContextToMF(context))
Removes a context update listener.
id
string the id that was returned by theaddContextUpdateListener
function
LuigiClient.removeContextUpdateListener(updateListenerId)
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.
inactiveFn
function the listener function called each time a micro frontend turns into an inactive state
LuigiClient.addInactiveListener(() => mfIsInactive = true)
const inactiveListenerId = LuigiClient.addInactiveListener(() => mfIsInactive = true)
Removes a listener for inactive micro frontends.
id
string the id that was returned by theaddInactiveListener
function
LuigiClient.removeInactiveListener(inactiveListenerId)
Registers a listener called when the micro frontend receives a custom message.
customMessageId
string the custom message idcustomMessageListener
Lifecycle~customMessageListenerCallback the function that is called when the micro frontend receives the corresponding event
const customMsgId = LuigiClient.addCustomMessageListener('myapp.project-updated', (data) => doSomething(data))
Meta
- since: 0.6.2
Removes a custom message listener.
id
string the id that was returned by theaddInitListener
function
Meta
- since: 0.6.2 LuigiClient.removeCustomMessageListener(customMsgId)
Returns the currently valid access token.
const accessToken = LuigiClient.getToken()
Returns string current access token
Returns the context object. Typically it is not required as the addContextUpdateListener() receives the same values.
const context = LuigiClient.getContext()
Returns Object current context data
Returns the context object. It is an alias function for getContext().
Returns Object current context data
Meta
- deprecated: This is deprecated.
Returns a list of active feature toggles
const activeFeatureToggleList = LuigiClient.getActiveFeatureToggles()
Returns Array a list of feature toggle names
Meta
- since: 1.4.0
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.
const nodeParams = LuigiClient.getNodeParams()
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}
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.
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, ...}
Read search query parameters which are sent from Luigi Core
LuigiClient.getCoreSearchParams();
Returns any Core search query parameters
Sends search query parameters to Luigi Core. If they are allowed on node level, the search parameters will be added to the URL.
searchParams
Object
LuigiClient.addCoreSearchParams({luigi:'rocks'});
Returns the current client permissions as specified in the navigation node or an empty object. For details, see Node parameters.
const permissions = LuigiClient.getClientPermissions()
Returns Object client permissions as specified in the navigation node
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.
origin
string target origin
LuigiClient.setTargetOrigin(window.location.origin)
Meta
- since: 0.7.3
Sends a custom message to the Luigi Core application.
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 sidemessage.id
string a string containing the message idmessage.MY_DATA_FIELD
any any other message data field
LuigiClient.sendCustomMessage({id: 'environment.created', production: false})
LuigiClient.sendCustomMessage({id: 'environment.created', data: environmentDataObj})
Meta
- since: 0.6.2
Returns the current user settings based on the selected node.
const userSettings = LuigiClient.getUserSettings()
Returns Object current user settings
Meta
- since: 1.7.1
Callback of the addInitListener
Type: Function
Callback of the customMessageListener
Type: Function
customMessage
Object custom message objectcustomMessage.id
string message idcustomMessage.MY_DATA_FIELD
any any other message data field
listenerId
string custom message listener id to be used for unsubscription
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')
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{}
)
LuigiClient.linkManager().navigateToIntent('Sales-settings', {project: 'pr2', user: 'john'})
LuigiClient.linkManager().navigateToIntent('Sales-settings')
Disables the navigation handling for a single navigation request
It prevents Luigi Core from handling url change after navigate()
.
Used for auto-navigation
LuigiClient.linkManager().withoutSync().navigate('/projects/xy/foobar');
LuigiClient.linkManager().withoutSync().fromClosestContext().navigate('settings');
Meta
- since: 0.7.7
Enables navigating to a new tab.
LuigiClient.linkManager().newTab().navigate('/projects/xy/foobar');
Meta
- since: NEXT_RELEASE
Keeps the URL's query parameters for a navigation request.
preserve
boolean By default, it is set tofalse
. If it is set totrue
, the URL's query parameters will be kept after navigation. (optional, defaultfalse
)
LuigiClient.linkManager().preserveQueryParams(true).navigate('/projects/xy/foobar');
LuigiClient.linkManager().preserveQueryParams(false).navigate('/projects/xy/foobar');
Meta
- since: NEXT_RELEASE
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.
path
string path to be navigated tosessionId
string current Luigi sessionIdpreserveView
boolean preserve a view by setting it totrue
. 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 sizemodalSettings.title
string modal title. By default, it is the node label. If there is no label, it is left emptymodalSettings.size
("l"
|"m"
|"s"
) size of the modal (optional, default"l"
)
splitViewSettings
Object opens a view in a split view. Use these settings to configure the split view's behavioursplitViewSettings.title
string split view title. By default, it is the node label. If there is no label, it is left emptysplitViewSettings.size
number height of the split view in percent (optional, default40
)splitViewSettings.collapsed
boolean creates split view but leaves it closed initially (optional, defaultfalse
)
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 atitle
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 tofalse
. If it is set totrue
the rest of the screen has a backdrop.drawerSettings.size
("l"
|"m"
|"s"
|"xs"
) size of the drawer (optional, default"s"
)
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
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.
path
string navigation pathmodalSettings
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 emptymodalSettings.size
("l"
|"m"
|"s"
) size of the modal (optional, default"l"
)
LuigiClient.linkManager().openAsModal('projects/pr1/users', {title:'Users', size:'m'});
Update current title and size of a modal.
updatedModalSettings
Object possibility to update the active modal. (optional, default{}
)
LuigiClient.linkManager().updateModalSettings({title:'LuigiModal', size:'l'});
- 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.
path
string navigation pathsplitViewSettings
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 emptysplitViewSettings.size
number height of the split view in percent (optional, default40
)splitViewSettings.collapsed
boolean opens split view in collapsed state (optional, defaultfalse
)
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
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.
path
string navigation pathdrawerSettings
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 atitle
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 tofalse
. If it is set totrue
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, defaulttrue
)
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
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.
navigationContext
string
LuigiClient.linkManager().fromContext('project').navigate('/settings')
Returns linkManager link manager instance
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.
LuigiClient.linkManager().fromClosestContext().navigate('/users/groups/stakeholders')
Returns linkManager link manager instance
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.
LuigiClient.linkManager().fromVirtualTreeRoot().navigate('/users/groups/stakeholders')
Returns linkManager link manager instance
Meta
- since: 1.0.1
Enables navigating to sibling nodes without knowing the absolute path.
LuigiClient.linkManager().fromParent().navigate('/sibling')
Returns linkManager link manager instance
Meta
- since: 1.0.1
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.
nodeParams
Object
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
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.
path
string path which existence you want to check
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
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
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.
goBackValue
any data that is passed in the goBackContext field to the last visited view when using preserved views
LuigiClient.linkManager().goBack({ foo: 'bar' });
LuigiClient.linkManager().goBack(true);
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
Collapses the split view
splitViewHandle.collapse();
Meta
- since: 0.6.0
Expands the split view
splitViewHandle.expand();
Meta
- since: 0.6.0
Closes and destroys the split view
splitViewHandle.close();
Meta
- since: 0.6.0
Sets the height of the split view
value
number lower height in percent
splitViewHandle.setSize(60);
Meta
- since: 0.6.0
Registers a listener for split view events
name
("expand"
|"collapse"
|"resize"
|"close"
) event namecallback
function gets called when this event gets triggered by Luigi
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
Unregisters a split view listener
id
string listener id
splitViewHandle.removeEventListener(listenerId);
Meta
- since: 0.6.0
Gets the split view status
splitViewHandle.exists();
Returns boolean true if a split view is loaded
Meta
- since: 0.6.0
Reads the size of the split view
splitViewHandle.getSize();
Returns number height in percent
Meta
- since: 0.6.0
Reads the collapse status
splitViewHandle.isCollapsed();
Returns boolean true if the split view is currently collapsed
Meta
- since: 0.6.0
Reads the expand status
splitViewHandle.isExpanded();
Returns boolean true if the split view is currently expanded
Meta
- since: 0.6.0
Use the UX Manager to manage the appearance features in Luigi.
Adds a backdrop with a loading indicator for the micro frontend frame. This overrides the loadingIndicator.enabled setting.
Removes the loading indicator. Use it after calling showLoadingIndicator() or to hide the indicator when you use the loadingIndicator.hideAutomatically: false node configuration.
Closes the currently opened micro frontend modal.
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.
Removes the backdrop.
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.
isDirty
boolean indicates if there are any unsaved changes on the current page or in the component
Shows a confirmation modal.
settings
Object the settings of the confirmation modal. If you don't provide any value for any of the fields, a default value is usedsettings.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 tofalse
, the button will not be shown. (optional, default"Yes"
)settings.buttonDismiss
string the label for the modal dismiss button (optional, default"No"
)
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
Shows an alert.
settings
Object the settings for the alertsettings.text
string the content of the alert. To add a link to the content, you have to set up the link in thelinks
object. The key(s) in thelinks
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 displayedsettings.type
("info"
|"success"
|"warning"
|"error"
) sets the type of alertsettings.links
Object provides links datasettings.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 parametersettings.links.LINK_KEY.text
string text which replaces the link identifier in the alert contentsettings.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 pathssettings.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 than100
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
Gets the current locale.
Returns string current locale
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.)
locale
string locale to be set as the current locale
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
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
Gets the current theme.
Returns any current themeObj
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. Since all storage operations are asynchronous (sending an event to Luigi Core that will reply once operation is finished), all the methods return Promises.
Stores an item for a specific key.
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
Retrieves an item for a specific key.
key
string used to identify the value
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
Removes an item for a specific key.
key
string used to identify the value
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
Clears all the storage key/values.
LuigiClient.storageManager().clear().then(() => console.log('storage cleared'))
Returns Promise<void> resolves when storage clear is over.
Meta
- since: 1.6.0
Checks if a key is present in storage.
key
string key in the storage
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
Gets all the keys used in the storage.
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