Category selection indicator

Collapsed navigation categories in the left nav now display a selection highlight when one of their child nodes is the currently active route, providing better visual feedback for users navigating nested menu structures. See #5175.

setDirtyStatus for Web Component Client API

The setDirtyStatus method is now available in the Web Component Client API, bringing parity with the iframe-based client. This allows web component micro frontends to indicate unsaved changes and trigger confirmation dialogs on navigation. See #5166.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Support for groups/categories in profile items

Profile items can now be organized into groups and categories in the Vega layout. This allows for a more structured and organized profile menu when dealing with many profile items. See #5094.

Adds missing functions to webcomponent client api

With this release we added missing functions like addCoreSearchParams, updateModalPathInternalNavigation, setDirtyStatus, setCurrentLocale and updateModalSettings to the webcomponent client api.

See our changelog.

Webcomponent based micro frontends can now used in user settings dialog

With this release it is possible to display web component based micro frontends in the user settings dialog. More informations can be found in our docu

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Client support angular library supports Angular v19

The angular support library for Luigi Client supports now Angular version 19.

Appswitcher improvement

Adds the option selectionConditions for appswitcher items to be resolved as selected for other routes than their corresponding links. Additionally it can be matched against context values of the current node.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Renamed closeAlert to notifyAlertClosed

We deprecated the function closeAlert and renamed it to notifyAlertClosed.

showAlert promise for micro frontends based on webcomponents

The showAlert function returns a promise for micro frontends based on web components. The promise resolves to either a dismissKey, if defined in the alert settings, or the unique ID of the alert.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

getCurrentRoute Has Been Added

The 'getCurrentRoute' function has been added to the Luigi Element API - it gets the Luigi route associated with the current micro frontend. Also, a safety check has been added to avoid potential backwards compatibility issue.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Possibility to update viewUrl for Luigi Container

With this release we added the possibility for Luigi Container to updateViewUrl for iframe based micro frontends.

See our changelog.

disableTpcCheck Has Been Added

The 'disableTpcCheck' parameter has been added to addInitListener the Luigi client - if set to true third party cookie check will be disabled via LuigiClient.

disable-tpc-check Has Been Added

There's an option to disable third party cookie check declaratively - the 'disable-tpc-check' attribute must be added to the entry HTML file. For more information check authorization configuration in our documentation.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Custom element manifest support

With this release we introduced a custom element manifest for Luigi container and Luigi compound container.

Luigi Compound Container improvments

Furthermore we added the attributes theme, active-feature-toggle-list and locale for the Luigi Compound Container.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

hideGlobalSearch Has Been Added

hideGlobalSearch has been added to the Luigi core API - if set to true, the global search disappears when the affected node is clicked.

skipCookieCheck Has Been Added

skipCookieCheck has been added to the Luigi container API - if set to true, the third party cookie check is skipped.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Renderer for navigation header in btpToolLayout

When experimental 'btpToolLayout' parameter is set the optional renderer for navigation header might be used.

Left navigation item groups in btpToolLayout

When experimental 'btpToolLayout' parameter is set the 'expanded' state is new default for nav item groups in left navigation.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Client Support Angular library

The client-support-angular library now additionally supports Angular 18.

Improving context updating method

With this release we improved the context updating method in compound container.

See our changelog.

Added new function to the api

With this release we added navigateToIntent to the webcomponent client API. In addition LuigiContainer supports getToken function for iframe based micro frontends as well as getCurrentRoute and fromParent for webcomponent micro frontends.

Light dom container

Furthermore we added the attribute no-shadow to the Luigi Container and Luigi Compound Container. With this option, the containers do not have a shadow DOM.

Security for iframe based micro frontends

With this version you have the possibility to specify sandbox and allow rules for iframe based micro frontends.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

E2E Tests With Nightwatch, WebdriverIO and Puppeteer

The testing-utilities library now additionally supports Nightwatch, WebdriverIO and Puppeteer. You can now use these testing frameworks for your e2e tests.

getCurrentRoute Has Been Added

getCurrentRoute has been added to the Luigi core API which as the name suggests returns the current Luigi route.

getCurrentTheme in WC Client

The method getCurrentTheme is now part of the core API so you can now use it in the WebComponent client too.

Fix Top Nav Children Not Rendered

Fixed issue where nodes weren't rendered in the top navigation under certain conditions.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Accessibility for Left Nav in BTP Layout

The Left Nav is now keyboard accessible when the BTP Layout is active.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Opt Out of Luigi Error Handling for 404s

If you have implemented your own page not found error handler function, then you can set ignoreLuigiErrorHandling to true in your routing configuration.

Update Context via Core API

This addition lets you update the context values for visible iframes and Luigi web components.

Remove Favicon Console Warning

The console warning that appears when the favicon isn't present or is in the wrong format has been removed.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Added onClick Navigation for Categories in the TabNav Bar

With Luigi v2.11, clicking the category in the TabNav bar can be configured to navigate to a node in the same category.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Added an On Close Promise for LuigiClient's openAsModal

We've added a promise to the Luigi Client's openAsModal that resolves when the modal is closed. You can also access the goBackContext When you close the modal using LuigiClient.linkManager().goBack({ foo: 'bar' }).

Cypress Is Now Supported by the Testing Utilities

We have extended the scope of Luigi testing utilities to add cypress support. This will help with writing end-to-end (e2e) tests for your Luigi projects.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Add test id for elements in horizontal navigation

In this release, we've enhanced the horizontal navigation by incorporating a datatest-id attribute to HTML elements, facilitating improved testing support.

Set view group data via webcomponent api

We have extended the Luigi webcomponent API with the function setViewGroupData. Webcomponents are now also able to set view group data like Luigi Client.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Bugfixes

With this release, we prevent browser history changes from Luigi client on context update. changelog.

Lazy loading for compound web components

In this release, we have extended the compound web component to support lazy loading within child web components of compound or nested structures. Here is the documentation on how to configure the lazyLoadingOptions.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Luigi Container

Luigi Container recently had its v1.0 release. This is Luigi's newest feature which aims to make micro frontend development even easier. It is a web component that can be used to render a Luigi micro frontend without the need of a Luigi Core application. It can work with any framework that supports HTML. The Luigi Compound Container can be used to include multiple micro frontends on the same page.

Installation

Luigi Container can be installed via an npm package:

npm install @luigi-project/container

To import it into your project, use:

import '@luigi-project/container';

Usage

After importing the package, you can use the Luigi Container anywhere in your application. You can configure it just like a regular Luigi application, for example by using parameters such as viewURL (which specifies the URL of the micro frontend):

    <luigi-container 
        viewURL="https://www.example-microfronted.com" 
        webcomponent="false" 
        label="my label"
        context='{"label": "Calendar"}'>
    </luigi-container>

The Luigi Compound Container works similarly to Luigi's compound web components feature and it allows you to insert multiple micro frontends on the same page:

    <luigi-compound-container 
        context='{"label": "Dashboard"}'
        compoundConfig = { your config here }>
    </luigi-compound-container>

Examples

You can find a Luigi Container test application on GitHub. Check out the documentation for installation instructions.

You can also take a look at our Luigi Container UI5 tutorial which shows you how to install and use Luigi Container inside an UI5 app.

New webcomponentCreationInterceptor function

We added the function webcomponentCreationInterceptor which can be included in the general settings configuration. The function is called on web component creation, and it gives you full control over the created web component DOM element. You can modify it according to your needs just before it is added to the DOM tree. You can find more details in the documentation.

Option to disable topNav for children of root node

In this release, we added the topNav navigation parameter. It is a boolean which determines whether children of the root node will be shown in the top navigation. If set to false, children of the root node will not be rendered in the top navigation, but in the left navigation (default) or in the horizontal navigation (tabNav) if this is configured on the node. You can find more information as well as an example in the documentation.

Luigi Client functions for web components

In this release, we added the possibility to use more Luigi Client functions with web-component-based micro frontends. The following functions are now also available for web components:

• getPathParams - returns the dynamic path parameters of the active URL
• getCoreSearchParams - reads search query parameters which are sent from Luigi Core
• getClientPermissions - returns the current Client permissions as specified in the navigation node.
• getAnchor - returns the current anchor based on the active URL.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

getUserSettings for web components

In Luigi 2.6, we added the possibility to use the getUserSettings function with web components. You can find more information in the pull request. If you have been following our previous releases, you may notice we already introduced multiple other Luigi Client functions for web components, for example in Luigi 2.4.

Bugfixes

In Luigi 2.6, we fixed an issue regarding contexts in the left-side navigation. For more information, see the pull request.

You can also check our changelog for a full list of bugfixes in every Luigi release, including minor releases that are not listed on our blog.

Global context

In Luigi v2.5, we added a new globalContext navigation parameter and a set of Luigi Core API functions: setGlobalContext and getGlobalContext. The global context contains key-object pairs which are inherited from all node contexts. You can find more information in the pull request.

Return empty object for getContext

Within the Client Support Angular library, the LuigiContextService.getContext function can now return an empty object if not set yet. Previously, this value could be null/undefined. You can find more information in the pull request.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Luigi Client functions for web components

With this release, we added the possibility to use more Luigi Client functions with web-component-based micro frontends. The following functions are now available also for web components:

• addNodeParams - sets node parameters in Luigi Core
• getNodeParams - returns the node parameters of the active URL
• setAnchor - sends anchor to Luigi Core
• modalSettings.keepPrevious - allows you to open multiple modals

Added onLoad functionality for web components

We added an onLoad functionality to web component micro frontends. An event wc_ready is sent when the web component is ready, which should then initialize Luigi Client. It is possible to defer this initialization using deferLuigiClientWCInit: true. For more information, see the pull request.

data-testid attribute for the modal close button

In this release, we added the possibility to configure a data-testid attribute for the close button of a modal. The attribute can be specified via the modalSettings in openAsModal. For more information, see the pull request.

Removed onunload listener

Due to deprecation of the unload event, we removed the onunload listener from Luigi.

Write updated modal settings to URL

In this release, we added some new features to the updateModalSettings function. If routing.showModalPathInUrl is set to true, the URL will be updated with the modal settings data. With the new addHistoryEntry parameter, you can also add an entry in the browser history by setting it to true. You can find more information in the feature's pull request.

Expand category by navigation

We added the option to expand the left-side menu by navigating to the children of a Luigi category. You can configure this option in the Luigi general settings. Simply set the expandCategoryByNavigation to true.

Transfer theme variables

This new Luigi feature allows you to transfer a dedicated list of CSS variables to the micro frontends. You can optionally set this in the Luigi general settings as part of the theming element. Additionally, you can use the method getCSSVariables in the Luigi Core API and Client API. For more information, see the pull request.

Semi-collapsible button style

In Luigi 2.3, we introduced the option to define a style for the button to expand/close a semi-collapsible menu. You can do this with the help of the new semiCollapsibleButtonStyle parameter. You can find more information in the pull request.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

setViewGroupData function

A new setViewGroupData function was added to the Luigi Client API. It allows you to conveniently change node labels within the same view group. In your Luigi node configuration, you can enable it with e.g. label: 'my Node {viewGroupData.vg1}' and use the function to add a label: LuigiClient.setViewGroupData({'vg1':' Luigi rocks!'}). You can find more information in the documentation.

TabNav header micro frontend

In Luigi v2.2, we added a new feature that allows you to create a micro frontend header in the horizontal navigation, a.k.a. tabNav. This feature can only be used if web components are enabled and the showAsTabHeader parameter is set to true. You can find more information in the documentation.

Breadcrumbs feature

Luigi v2.2 allows you to add a breadcrumbs element to your navigation. You have the freedom to configure the look and feel of the breadcrumbs by creating your own custom code for them. At the end, your code should return a variable called breadcrumbs. You can find a couple of examples in the documentation.

Prevent re-rendering of web components

In certain cases, such as when web components got a context update, they were re-rendered. We fixed this in Luigi v2.2. For more information, see the pull request.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

getDirtyStatus method in Luigi Core API

In Luigi 2.1.0, we added a getDirtyStatus method that enables you to check if there are unsaved changes in the browser through Luigi Core. You can find more information in the Luigi Core API documentation. This new method can be used together with setDirtyStatus which is a part of the Luigi Client API.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

The Luigi project has reached a new milestone and released Luigi 2.0! There are some important changes in this release which users should take note of.

Ending support for IE11

As of v2.0, Luigi will no longer be able to support the Internet Explorer 11 browser. IE11 is also no longer supported by Microsoft and Edge is recommended instead.

Updating to Angular 14 and 15

Luigi v2.0 will no longer be able to support Angular versions 13 or below. The Luigi Angular support library can now be used with Angular 14 or 15 instead. You can read about how to update your Angular version here.

Renaming GitHub branch to main

For Luigi v2.0, we renamed our GitHub default branch from master to main. This means that if you have cloned the Luigi repository, you need to switch to the main branch. You can use the following commands to do so:

git branch -m master main
git fetch upstream
git branch -u upstream/main main

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Enhanced Left Navigation Accessibility

In Luigi v1.26.0, we resolved issues related to accessibility in the left side navigation. We made the collapsed-state left navigation buttons accessible via keyboard and the collapsed-state category popups closeable via the escape key. For reference, see the pull request.

Callback Added to OpenAsModal for Core API

We added the parameter onCloseCallback to openAsModal in the Luigi Core API. The callback function is called upon closing the opened modal. For more information, see the pull request.

Luigi Client Type Declaration for Web Components

In this release, we added Luigi Client type declaration for Web Components. For more information, see the pull request.

Alignment of StatusBadge

We added a new property which allows you to set the alignment of Luigi's status badge element. You can set the align attribute to right or left, and the default is left. For example:

statusBadge: {
    label: 'Settings',
    type: 'positive',
    align: 'right'   

Titles for Expand and Collapse Category Buttons

In the current release, we introduced a way to configure a title/label for expand and collapse buttons on navigation node categories. You can configure each button individually by using the category attributes titleExpandButton and titleCollapseButton, or you can set defaults for all buttons using defaults.category.

Function 'isDrawer' in Luigi Client API

In Luigi v1.26.0, we added the isDrawer function to the Luigi Client API. This function checks if the current micro frontend is displayed inside a drawer. Some similar functions that were already available before this release are isModal and isSplitview.

External Link Option for Intent-Based Navigation

We added the possibility to define external links for intent-based navigation. For example, for this intentMapping:

{
      semanticObject: 'External',
      action: 'view',
      externalLink: { url: 'https://www.sap.com', openInNewTab: true }
}

Any of the following should navigate to www.sap.com in a new tab:

LuigiClient.linkManager().navigateToIntent('External-view')
LuigiClient.linkManager().navigate('/#?intent=External-view')
Luigi.navigation().navigate('/#?intent=External-view')

See the pull request and advanced scenarios for more information.

LuigiElement Shadow Mode Configuration

Luigi Client's LuigiElement no longer sets the shadow mode to closed. Instead, there is an option to configure it as open or closed. See the pull request for more information.

History Handling for Modals

In this release, we improved the browser history handling of modals. Due to the limitation of the history.length object to 50 entries in Chrome and Firefox browsers, this was changed to a history.state object. See the pull request for more information.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Ignore events from inactive iframes

With the changes made in Luigi v1.25, you will have the configurable option to no longer trigger events when an iframe micro frontend is not active. For reference, see the pull request.

getActiveFeatureToggles in Luigi Web Components

We added the function getActiveFeatureToggleList to the Luigi Web Components API. For more information, see the pull request.

Create React App Luigi Template

Create React App is a simple way to create React apps with no build configuration. With this release, Luigi added a new template to enable you to quickly deploy React micro frontends with Luigi. You can find the template on our GitHub repository.

Implement tests by using luigi mock module

Starting from this release, you can test Luigi using the Luigi mock module. This feature enables you to test micro frontends standalone without depending on Luigi Core. In the usual workflow, messages coming from Luigi Client to Luigi Core are processed by the Core and a proper response is sent back. However, by adding the Luigi mock module for Angular to your imports, you can intercept all Client calls and send a mocked Core response back. You can find more information in the documentation.

ViewGroup Background Option

In Luigi v1.25, we introduced the loadOnStartup property, which is added to a viewGroupSettings entry, in order to specify that a viewGroup is always present in the background. To use it, set loadOnStartup to true, and it will load the respective viewGroup and preloadUrl in the background as soon as the app starts. For more information, see the documentation.

Option to hide top navigation

Starting from this release, you can use the new parameter header.disabled which allows you to hide only the top navigation in Luigi. Keep in mind we already have a similar hiding option for the left navigation or all navigation.

New js-test-application for e2e tests

We introduced a new Vanilla JS test application to replace using Luigi Fiddle locally as a test application. The new test application has no default Luigi config. A test has to call the application with a specific config. For more information, see the pull request.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Custom item renderer for app switcher

With this release, we added an itemRenderer to the app switcher which allows you to fully customize the list of items that appear in the app switcher. It also allows you to add a function to close the custom app switcher dropdown. You can find more information in the documentation.

Responsive padding for the Shellbar Component

We added a way to make the Shellbar padding responsive by using the header.responsiveShellbarPaddings parameter. This means the top navigation will be adapted automatically for different devices. This feature became available with the latest Fundamental Styles release.

Multiple modal dialogs

Luigi now allows you to open multiple modals by using the modalSettings.keepPrevious API function. When you set this to true, the previously opened modal will be kept allowing to open another model on top of it. By default, the previous modals are discarded. You can find more information in the relevant documentation and pull request.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Disable keyboard accessibility for user settings dialog

When the user settings dialog is opened, it is no longer possible to navigate to other UI elements outside it using the keyboard. For more information see the pull request.

getCurrentRoute function

We added a new getCurrentRoute function which belongs to the LinkManager in Luigi Client. It can be used to get the Luigi route associated with the current micro frontend. The function returns a promise which resolves to a string value specifying the current Luigi route. You can find more information here.

Scalable keyboard accessibility for Language Dropdown

This release brings improvements to the language dropdown within the user settings dialog. For example, it is now possible to navigate through the list of languages using the up and down arrow keys, while Enter selects the item. You can find more information here.

Updated Luigi version in Core examples

The Luigi Core examples were updated to the latest version of Luigi. The examples are now using Fundamental Styles v0.23.0, which you can learn more about here.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Update to Fundamental Styles v0.23.0

With the new release, we updated Luigi Core to version 0.23.0 of Fundamental Styles. You can read about all changes in the release notes. This update brought breaking changes and was described in the Fundamental Library blog post. You can also review the Luigi changes here.

Disable keyboard accessibility on all elements outside drawers and modals

When a drawer, modal, or confirmation modal is opened, keyboard actions outside of them are now disabled. Pressing TAB key will no longer select elements in the background that are not part of the modal/drawer. For more information, see the Luigi issues 2411 and 2690.

Add functionality for allow attribute to be separated by semicolons

Luigi allowRules now follow the Feature Policy convention and allow the attributes to be separated by semicolons. You can find more information here.

Bugfixes

For a full list of bugfixes, see the GitHub release page.

Update to Fundamental Styles v0.20.0

With Luigi v.1.21 release, we updated to version 0.20.0 of Fundamental Styles. This included a small change in the columns attribute of our product switcher. You can set the number of columns to auto, which would result in 3 columns if the entities are less than or equal to 6, or 4 columns if not. You can find more information here.

Automatic navigation for modalPathParam

It is now possible to keep Luigi Core and Luigi Client navigation in sync for modals with a modalPathParam. This means that when the user navigates to a new URL inside a modal, the Luigi Core path changes as well. You can use the ClientSupportAngular library to use this feature with an Angular app.

More precise settings for modal size

Instead of only having three default sizes for a modal, the user can now specify an exact size in 'px', '%', 'rem', 'em', 'vh' or 'vw'. We introduced the modalSettings.width and modalSettings.height parameters for this purpose. You can find more information in the Luigi documentation.

Removal of experimental flag for web components

As of Luigi v.1.21.0, it is not required to include the experimental flag to enable web components. You can find more information here.

keepURL in PageNotFoundHandler

A new parameter keepURL for the PageNotFoundHandler function allows you to change the main URL behavior in case of a "Page Not Found" error. You can now define to keep the erroneous URL in the browsers address bar (e.g. to correct a typo). An example configuration would look like this:

...
 routing: {
              useHashRouting: true,
              pageNotFoundHandler: (path, anyMatch) => {
                return {
                  redirectTo: '/error',
                  keepURL: true
                };
              }
          },
...

Luigi Core navigate function returns promise

The navigate function in Luigi returns a promise, which makes it easier to perform actions after changing the route. You can find more information here.

New getNavFooterContainer function

In Luigi v.1.21, we added a new function which allows you to get the footer container. It looks like this:

 Luigi.elements().getNavFooterContainer()

You can find more information here.

Url anchor support for micro frontends

Two new functions were introduced in the Luigi Client API: getAnchor() and setAnchor(). They allow the micro frontend to read and write the anchor part of the main URL to leverage in-page navigation such as scrolling. For example, if your URL is http://example.com#myAnchor, the function LuigiClient.getAnchor() would return a string myAnchor. You can find more information here.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

New SAP icon styles support

In addition to basic SAP icons, Luigi now supports the use of different SAP Icon suites like TNT and businessSuiteInAppSymbols. In order to use these icons, it is recommended to add @font-face from the Fundamental Styles project configuration to your custom styles. You can find more information here.

Global search improvements

We added two new parameters related to our global search: globalSearchCenteredCancelButton and searchFieldCentered.

When the searchFieldCentered boolean is set to true, the search input field in Luigi will be rendered in the center of the shellbar.

You can use globalSearchCenteredCancelButton to define the label of the cancel button. It will be displayed if you want to hide the search field on a smaller viewport. This property is only available if searchFieldCentered is active.

Dynamic pathSegment for breadcrumbs and navheader

As of Luigi 1.20, dynamic pathSegments are also available for breadcrumbs and navheader. You can find more information here.

Parameter handlers improvements

In Luigi 1.20, we added an optional boolean argument called keepBrowserHistory to addCoreSearchParams. It allows for the change of params without an additional browser history entry. We also added a function to manipulate current node parameters called addNodeParams which provides the same functionality. It gives you the option to keep browser history or not. You can find more information here.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Replacing CSS static value with SAP Fiori 3 variable

We replaced the CSS static value in LeftNav with a SAP Fiori 3 variable. Now, in Luigi background themes, Fiori 3 variables are used instead of plain colors. To switch theme, you can replace the CSS variables stylesheet.

You can find more information here.

Node category merging improvements

We improved the Luigi category property. Now, the first node with a "non-string" category can define the category's configuration and the category config object includes a new property id. If defined, it serves as the "collection key" for categorized nodes instead of the label property. You can find more information here.

New Core API function clearNavigationCache

We introduced a new Core API function called clearNavigationCache. It allows you to clean nodeData cache for children resolution and titleResolver cache. For more information, see the documentation and PR.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

customAlertHandler function

The new customAlertHandler function allows you to disable the default Luigi alerts and configure your own. It receives settings and openFromClient as parameters. For example:

Luigi.setConfig({
  ...,
  settings: {
    customAlertHandler: ()=>{
     return new Promise((resolve, reject) => {
       //custom alert implementation
     });
    }
  }
})

You can find more information here or in the general settings documentation.

TooltipText parameter

We implemented a new TooltipText parameter which allows you to set a custom tooltip which will be shown when you hover over the nodes in the navigation. The parameter needs to be added to the navigation: section of the Luigi configuration file. Additionally, there is a defaults.tooltipText parameter which allows you to set (or disable) the tooltip for all nodes. For more information, read the documentation.

updateModalSettings method

The new Luigi Client method updateModalSettings allows you to change the size and title of a modal. This means that if the open micro frontend changes route internally, it can be reflected in the modal header. You can find more information in the Luigi Client API.

Core API templating for compound children and external link nodes

We enabled Core API templating for compound children and external link nodes, meaning it's possible to use {i18n.currentLocale} with a viewUrl. You can find more information here.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

New replaceIntentRoute parameter

A new parameter replaceIntentRoute was introduced. It defines whether the intent navigation route resolves to actual path automatically or not.

For example, when the parameter is defined, an address http://localhost:4200/#?intent=Sales-settings?param1=abc&param2=bcd will be translated to its actual path: http://localhost:4200/projects/pr2/settings?~param1=abc&~param2=bcd. And with hashRouting enabled, the example http://localhost:4200/#?intent=Sales-settings?param1=abc&param2=bcd will translate to:http://localhost:4200/#/projects/pr2/settings?~param1=abc&~param2=bcd.

Improved user settings

The dropdown in Luigi's user settings dialog was refactored to the latest Fiori3 specifications to be easily accessible via keyboard. You can find more information here.

Also, the Profile dropdown entities in user settings are now accessible via keyboard. You can learn more here.

getCurrentLocale works with Luigi Client Web Components

With our newest release, you can use the getCurrentLocale function within Web Components of Luigi Client. For more information see the changes here.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Extended intent based navigation

A new API method navigateToIntent was introduced. The 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 will have the exact same effect:

linkManager().navigateToIntent('Sales-settings', {project: 'pr2', user: 'john'})
linkManager().navigate('/#?intent=Sales-settings?project=pr2&user=john')

newTab option in linkManager

This is another improvement to the Luigi Client linkManager API. It is an option that allows you to open paths in a new window through Luigi Client linkManager:

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

You can read more in the documentation here.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Update Fundamental Library Styles to v0.18

In this release, we updated the version of Fundamental Styles from v0.17 to v0.18. There is a new layout for User Menu from Fiori 3. You can find more details on the Fundamental Styles page.

Extend Luigi Emulator functionality

We improved the Luigi testing utilities, which you can learn more about in our documentation.

The Luigi Emulator was extended with the following features:

• Add LuigiMockModule and LuigiMockUtil.
• LuigiMockModule is part of @luigi-project/client-support-angular
• LuigiMockUtil will be part of the new @luigi-project/testing-utils
• Luigi Mock message elements are added onto the DOM and hidden from end user.

Add User Settings placeholder

It is now possible to specify placeholder values for input fields in the User Settings configuration. For example:

userAccount: {
      label: 'User Account',
      sublabel: 'username',
      icon: 'account',
      title: 'User Account',
      settings: {
        name: { type: 'string', label: 'Name', placeholder: 'Type your name' },
        ...
        }
 }

This feature is optional and you can find more information in the User Settings Luigi documentation.

Reset Luigi via the Luigi Core API

There are situations where you want to completely reset Luigi's state (cached micro frontends, etc.) e.g. if a very basic thing has changed at runtime that affects the whole application, like a theme switch, but a full page refresh is not desired.

To make this easier, we included a new reset function in the Luigi Core API. You can find the details in the Core API documentation.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Breaking changes in Fundamental Library Styles

NOTE: The Fundamental Library Styles changes will only affect you if you have customized Fundamentals CSS in your application.

With Luigi v1.13.0, the new v0.17.0 of Fundamental Library Styles was included. It led to having breaking changes in the Luigi Dialog/Modal layout and Shellbar Counter. New HTML attributes were added to those components to increase accessibility. You can see the new layout of these components here: Dialog and Shellbar Counter.

Extend options of enum type in user settings

In Luigi's user settings, an enum array can now store options objects. You can use them if you want to add more options in the user settings for the user to choose from. These objects need value and label as key. For example:

language: {
  type: 'enum',
  label: 'Language and Region',
  options: [
    { value: 'de', label: 'German' },
    { value: 'en', label: 'English' },
    { value: 'fr', label: 'French' },
    { value: 'es', label: 'Spanish' }
  ]
}

For more information, read the documentation.

Dispatch hashchange event

For viewGroup navigation, a new hashchange event is dispatched if the hash was changed, in order to support UI frameworks whose routers rely on this event. You can see the PR for more details.

Introduce i18n variable in viewUrl

In this release, we introduced the environment variable {i18n.currentLocale} which can be used in a Luigi viewUrl to indicate the page needs to be translated to a certain language. For example:

{
  pathSegment: 'home',
  label: 'Home',
  viewUrl: 'https://example.com/{i18n.currentLocale}/microfrontend.html',
}
  ...

{i18n.currentLocale} will be replaced by the current locale automatically. You can read more about viewUrl or localization in our documentation.

Disable browser history option

We added a new parameter that can be added to Luigi's routing configuration section. If the disableBrowserHistory parameter is set to true, this will prevent any navigation changes from being added to browser history. You can find more details here.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Web components

In Luigi v1.7.0, we introduced a great new feature - support for Web Components. This has the potential to add a lot of new capablities to your Luigi apps, including a simple way to include more than one micro frontend on one page. You can find more resources and tutorials about Web Components here. You can find the documentation for web components on our website here.

An example of Luigi Web Components can be found on our sandbox application Luigi Fiddle. You can click the "Modify Config" button to see how the Web Components are configured in Luigi. The full source code of Luigi Fiddle can also be found on our GitHub repo, in case you also want to delve deeper into the example.

Luigi Client Angular support library

Also in v.1.7.0, we introduced a support library for Luigi Client in Angular. After you import the library to your project, you can use different features related to routing and contexts in Luigi. You can find more information about the library here.

Fundamental Library Styles - breaking changes

With Luigi v1.9.0, the new v0.14.0 of Fundamental Library Styles were included. Its previous v0.12.0 led to having breaking changes in the Luigi left side navigation and the shellbar. All icons were moved out from pseudo-classes into a dedicated tag under the button. You can see all breaking changes of Fundamental Library Styles v0.12.0 here.

Confirmation modals

With v.1.10.0, we introduced support for different types of confirmation modals. Modals can be of type confirmation, success, error, warning, or information and they can be configured using the Luigi Core API. The confirmation button can also be hidden with the settings.buttonConfirm parameter.

More features

For a full list of new features and bugfixes, see our changelog.

Storage API for micro frontends

In Luigi 1.6.0, we implemented a few API functions that will enable the use of local storage with Luigi Core and Luigi Client. The Client can send storage messages which are received by the Core. This means different micro frontends can now share or persist items using the browser's local storage. To learn more, read the documentation.

Drawer component

It is now possible to open a micro frontend in a drawer. This feature can be implemented using the Luigi APIs. The drawer size, backdrop, and header can be configured by the developer using simple parameters. You can find the corresponding functions in our documentation for the Luigi Core and Luigi Client.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Luigi tutorials

A new resource to help you learn how Luigi works has been published. It is a group of 6 tutorials which guide you through creating a simple web shopping application. You can find them here: Luigi Tutorials.

NOTE: In order to answer questions and earn points in the tutorials, you need to be logged in. If you don't have an account on developers.sap.com, you can create one for free.

The goal of these tutorials is to provide a beginner-friendly, yet still relatively deep overview of how Luigi works. The tutorials show you how to create an app written in both React and UI5. They also include examples of useful Luigi Core and Client API functions. In the end, you can learn how to localize your app and enable it to be displayed in two languages - English and German.

Learning is best done by doing, so we hope these tutorials will be helpful when developing your own applications with Luigi.

If you have any questions or issues with the tutorials, please contact our team on Slack.

Intent-based navigation

Luigi Client now allows you to navigate through micro frontends by using an intent-based navigation. This type of navigation decouples navigation triggers from the actual navigation targets. Rather than directly encoding the name of the target app into the URL fragment, app developers can provide a navigation intent such as display or edit. You can find an example of how to use it in our documentation.

New Core API functions

The Luigi Core Auth API was improved by the addition of two new login and logout functions. They allow you to login or logout a user dynamically. You can read more about them on the Luigi Core API page.

Accordion effect in categories

This new feature allows a category in Luigi navigation to act as an accordion - when the user clicks another category, the previously expanded category is collapsed and the new one is expanded. This feature can be used by configuring the sideNavAccordionMode parameter. Read more in our navigation parameters reference.

New global search

A new disableInputHandlers parameter was added to the global search configuration. It disables internal handlers (for example on:keyUp) on the search input field. Read more about it here.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Theming API

Luigi now supports theming, which can help you provide a better user experience. For example, you can enable a light and dark theme for your app. For more details on how to use theming, go to the Luigi Core API theming section.

Feature toggles

As of v1.4.0, Luigi also offers support for feature toggles. Feature toggles are a technique that can make development teams more efficient. Luigi allows you to add feature toggles through the Core API or through URL parameters. The full documentation can be found here.

Luigi example with NextJS

Have you ever wondered if you can use Luigi with NextJS? The answer is "yes", and in this release we included a new example Luigi application that is running on top of NextJS. You can install the example and try it yourself by following the steps here.

Fundamental Styles update

With Luigi v1.4.0, the new v0.11.0 of Fundamental Library Styles were included. As a result, there were breaking changes to the Luigi Alerts. The classes fd-overlay fd-overlay--message-strip were removed from Fundamental Library Styles and we added a new class luigi-alert--overlay to keep the same look and feel as in the past. You can see all breaking changes of Fundamental Library Styles here.

Core and Client API additions

Two new functions were added to the Luigi Core API, setDocumentTitle and getDocumentTitle. They allow you to set and get a document title without configuring the Luigi header.

The Luigi Client API also includes a new function, closeCurrentModal, which fires a luigi.close-modal event.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

Global search

This new feature has the potential to improve your Luigi application dramatically. You can now add a search toggle to your app which is displayed in the top navigation. Full functionality is included with the Luigi default settings, but you can also create a custom search that fits your needs exactly. We encourage you to take a look at the full documentation and provided example to learn more.

Fundamental Styles update

With Luigi version v1.3.0, the new v0.10.0 of Fundamental Library Styles were included. As a result, there were breaking changes to the Luigi side navigation. You can see the updated layout here.

Support for authorization code flow with PKCE

If you use OIDC for authorization, you can now authenticate using PKCE. You can see the full changes in the code here. Fun fact: this issue was fixed by an external developer. We'd like to remind you that Luigi is 100% open source and we love receiving contributions and suggestions on GitHub. If you have any ideas, don't hesitate to participate.

Bugfixes

For a full list of bugfixes in this release, see our changelog.

The Luigi project is growing quickly and attracting more attention in the open-source community. Micro frontend architecture is becoming more popular as an efficient strategy for future-proof, scalable applications. New features are added to Luigi regularly, and we want to keep you up to date.

This is why we are adding a blog to our website to inform you of the latest Luigi releases, updates, and other important news! You can expect regular posts in the future documenting every release and other Luigi-related topics. If you have an idea for a blog post, you can write to aleksandra.simeonova@sap.com.

And yes, our first blog post is just to let you know that we have a blog now. #meta #nerdy

P.S. Follow us on Twitter and YouTube for more Luigi content.