diff --git a/docs/README.md b/docs/README.md
index b201522beb..66c14a9cb8 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,38 +1,51 @@
-# Luigi Documentation
+# Luigi Documentation
-The aim of this documentation is to provide step-by-step instructions for Luigi as well as to provide a comprehensive reference of all the features you can use.
+If you are new to Luigi, read the [Getting started guide](getting-started.md) to learn more about its structure and key features.
-If you are new to Luigi, go to the [Getting started guide](getting-started.md) to learn more about its structure and key functions.
+## Luigi Core
-## Luigi Core
+Luigi Core enables you to create web applications with an easily configurable and consistent user interface.
-Set up and configure your main Luigi application by following these guides. The Luigi Core libraries allow you to create a user interface where you can configure navigation, authorization, and more.
+[Installation](application-setup.md) shows you the first steps to prepare your application for development.
-* [Application setup](application-setup.md) shows you the first steps to prepare your application for development.
-* [Navigation configuration](navigation-configuration.md) shows you how to configure navigation in Luigi.
-* [Navigation parameters reference](navigation-parameters-reference.md) lists the parameters you can use to configure the top and side navigation.
-* [Authorization configuration](authorization-configuration.md) guides you through the configuration to secure Luigi.
-* [Authorization events](authorization-events.md) guides you through the event configuration to react to Luigi authorization events.
-* [General settings](general-settings.md) provides you with additional configuration parameters for Luigi.
-* [Luigi lifecycle hooks](lifecycle-hooks.md) allows you to execute custom logic on any of the Luigi lifecycle steps.
-* [Core API](luigi-core-api.md) provides you with API features that help you enrich and use Luigi Core.
-* [Luigi UI features](luigi-ux-features.md) provides different customization options for some of the Luigi UI components.
+### Configuration
-## Luigi Client
+> **TIP:** [Luigi Fiddle](https://fiddle.luigi-project.io) allows you to configure a very simple application and get a feel for the process.
-Luigi Client enables you to connect micro frontends or views to the main Luigi Core application. Find the Luigi Client API documentation here and learn more about the functions and parameters used to define lifecycles, links, and the appearance of the application.
+To configure your Luigi application, simply edit the files in the `luigi-config` folder of your project. Luigi configuration is divided into several sections, which are outlined in the guides below:
-* [Lifecycle](luigi-client-api.md#lifecycle) gives you details on the lifecycle of listeners, navigation nodes, and Event data.
-* [Link Manager](luigi-client-api.md#linkmanager) allows you to navigate to a specific route.
-* [UX Manager](luigi-client-api.md#uxmanager) helps you manage the appearance features in Luigi, such as the behaviour of backdrop or loading indicators.
+* [Navigation (basic)](navigation-configuration.md) - configure basic top and side navigation, links, and categories.
+* [Navigation (advanced)](navigation-advanced.md) - create a dynamic path, reuse micro frontends with the same origin, and configure additional navigation elements.
+* [Routing](navigation-parameters-reference.md#routing) - define routing options for your application.
+* [Authorization](authorization-configuration.md) - configure login and security features for your application.
+ * [Authorization events](authorization-events.md) - define event configuration used to react to Luigi authorization events.
+* [General settings](general-settings.md) - fully customize a micro frontend, define a header, make your application responsive, and more.
+* [Lifecycle hooks](lifecycle-hooks.md) - execute custom logic on any of the Luigi lifecycle steps.
-## Core/Client communication
-* [Communication](communication.md) describes how to configure features related to communication between Luigi Core and Client.
+The following guides outline Luigi Core API features and additional UI options that exist outside the configuration files:
+
+* [Core API](luigi-core-api.md) - API features that help you enrich and use Luigi Core.
+* [Luigi UI features](luigi-ux-features.md) - customization options for some of the Luigi UI components.
+
+## Luigi Client
+
+Luigi Client enables you to connect micro frontends to an already existing Luigi Core application.
+
+[Installation](https://github.com/SAP/luigi/tree/master/client) shows you how to install the Luigi Client.
+
+Read the Luigi Client API documentation to learn more about the functions and parameters you can use to communicate with the core application:
+
+* [Lifecycle](luigi-client-api.md#lifecycle) - manage the lifecycle of listeners, navigation nodes, and event data.
+* [Link Manager](luigi-client-api.md#linkmanager) - navigate to a specific route.
+* [UX Manager](luigi-client-api.md#uxmanager) - manage appearance options such as the behavior of backdrop or loading indicators.
+
+## Advanced
+* [Communication](communication.md) describes how to send custom messages between Luigi Core and Client.
## Examples
-Follow the Luigi [application examples](../core/examples/README.md) for an in-depth look at Luigi capabilities.
+Check the Luigi [application examples](../core/examples/README.md) for an in-depth look at Luigi capabilities.
## Development
-Read the [development and code formatting guidelines](https://github.com/SAP/luigi#development) if you are interested in contributing.
+Read the [development and code formatting guidelines](https://github.com/SAP/luigi#development) if you are interested in contributing.
diff --git a/docs/assets/app-switcher.png b/docs/assets/app-switcher.png
new file mode 100644
index 0000000000..5cea2436ff
Binary files /dev/null and b/docs/assets/app-switcher.png differ
diff --git a/docs/assets/context-switcher.png b/docs/assets/context-switcher.png
new file mode 100644
index 0000000000..d562357577
Binary files /dev/null and b/docs/assets/context-switcher.png differ
diff --git a/docs/assets/product-switcher.png b/docs/assets/product-switcher.png
new file mode 100644
index 0000000000..016eca70d1
Binary files /dev/null and b/docs/assets/product-switcher.png differ
diff --git a/docs/assets/profile.png b/docs/assets/profile.png
new file mode 100644
index 0000000000..01a1c4dab6
Binary files /dev/null and b/docs/assets/profile.png differ
diff --git a/docs/navigation-advanced.md b/docs/navigation-advanced.md
new file mode 100644
index 0000000000..e95945513b
--- /dev/null
+++ b/docs/navigation-advanced.md
@@ -0,0 +1,331 @@
+# Advanced navigation
+
+This document shows you how to configure the following Luigi features:
+
+* [View groups](#view-groups)
+* [Dynamically changeable paths](#dynamically-changeable-paths)
+* [Contexts](#contexts)
+* [Profile](#profile)
+* [Context switcher](#contextswitcher)
+* [Product switcher](d#productswitcher)
+* [App switcher](#appswitcher)
+* [Additional options](#additional-options)
+
+
+## View groups
+
+View groups are a way to reuse micro frontends (views) in Luigi.
+
+Imagine your application hosts two micro frontend views: `http://example.com/a#e` and `http://example.com/b#f`. Due to hash routing and a different path up to `#`, they are, by default, rendered in different iframes. However, as they both have the **same origin**, such as `example.com`, you want to render them in the same iframe. To achieve that, define the **viewGroup** parameter for any navigation node. Children of that node will automatically be considered part of the same view group.
+
+Nodes belonging to the same view group are always rendered in their own view group iframe. Nodes not belonging to any view group follow the same-origin iframe rendering policy.
+
+The view groups feature also offers out-of-the-box caching. Each time you navigate to another view group, either a new iframe is created or it is reused if already exists. In both cases, the iframe you are navigating from becomes hidden and is available for you to use again. If you navigate back to the first iframe and it should be updated with new data, such when a new entry was added in the second iframe and you want to display it in a table in the first iframe, you must define a **preloadUrl** parameter for the view group under **navigation.viewGroupSettings**.
+
+You can also preload view groups. You just need to define which URL you want to preload, and Luigi will preload the view after some user interactions when the browser is most likely to be idle. This option is active by default, but you can deactivate it with the [**preloadViewGroups**](navigation-parameters-reference.md#preloadviewgroups) configuration flag.
+
+For more information on setting caching with view refreshing and preloading for view groups, read [this document](navigation-parameters-reference.md#node-parameters).
+
+Further options related to view groups can be configured using the parameters listed here. These parameters should be placed just before `nodes:` in the `navigation:` section of the configuration file:
+
+### viewGroupsSettings
+- **type**: object
+- **description**: contains key-object pairs, where the key is the view group name as specified in the node properties, and the object contains key-value pairs. In each key-value pair, the key is the feature name and the value is the actual setting. The following options are supported:
+- **attributes**:
+ - **preloadUrl**(string): needs to be an absolute URL of a micro frontend belonging to a view group. It may not be an URL of a node. It is recommended that you use a dedicated small, visually empty view, which imports Luigi Client and is fine with getting an empty context, for example, without an access token. The **preloadUrl** property is also required for view group caching in case you need a view group iframe to refresh whenever you navigate back to it.
+
+### preloadViewGroups
+- **type**: boolean
+- **description**: allows deactivating the default preloading of view group iframes.
+
+### defaults.isolateView
+- **type**: boolean
+- **description**: renders all views in new frames. This setting overrides the same-domain frame reuse. The **defaults.isolateView** is disabled by default, and you can overwrite it using the **isolateView** value on a single node level.
+
+## Dynamically changeable paths
+
+In Luigi, you can make a navigation path dynamically changeable according to your needs. This is accomplished by defining dynamic parameters within the **pathSegement** or **viewUrl** navigation paths.
+
+### Dynamic path parameters
+Instead of a static value for your **pathSegment**, you can add a colon to this value to make it act as a parameter. This tells Luigi to accept any value for this **pathSegment**.
+
+In this example, a sample path parameter called `:userId` is defined:
+
+```javascript
+navigation: {
+ nodes: [
+ {
+ pathSegment: 'home',
+ label: 'Home',
+ viewUrl: 'https://example.com/',
+ children: [
+ {
+ pathSegment: 'users',
+ label: 'User List',
+ viewUrl: 'https://example.com/users.html',
+ children: [
+ {
+ pathSegment: ':userId',
+ label: 'User Profile',
+ // E.g. if userId is 'JohnSmith'
+ // the main application URL will be https://[YOUR.WEBSITE]/users/JohnSmith
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+}
+...
+```
+
+### Dynamic viewUrl parameters
+
+You have the following options to add a parameter to **viewUrl**:
+- Place the parameter anywhere in the **viewUrl** value. For example, if the main application URL is `https://[YOUR.WEBSITE]/home/users/JohnSmith`, then the **viewUrl** of the micro frontend in the content area can be `https://example.com/users/details.html#id=JohnSmith`.
+- Use the [Luigi Client API](luigi-client-api.md) to access the node parameter values from the micro frontend. Use the `LuigiClient.getPathParams()` function.
+For example, to get the value of the **userId** parameter, use `LuigiClient.getPathParams().userId`.
+- Add a parameter to the context part of your configuration:
+
+```javascript
+{
+ pathSegment: ':userId',
+ label: 'User Profile',
+ viewUrl: 'https://example.com/users/details.html#id=:userId;',
+ context: {
+ user: ':userId'
+ }
+}
+ ...
+```
+
+In all these cases, the parameter is automatically replaced by the real value.
+
+### Dynamic Node parameters
+
+You can use dynamic node parameters to build the **viewUrl** and pass them to the micro frontend specified in the navigation node selected in the navigation path.
+
+You can specify them in the main application URL, similarly to URL query parameters with a specific prefix. The prefix is `~` by default, but you can reconfigure it using the global **nodeParamPrefix** setting.
+
+All parameters without the prefix are not passed to the micro frontend and are consumed by the main application.
+
+A sample **viewUrl** `https://[YOUR.WEBSITE]/home/users/allUsers?~sorting=asc&~page=2` supports sorting and paging by introducing the **sort** and **page** node parameters.
+
+Using dynamic node parameters in the previous example results in:
+
+```javascript
+navigation: {
+ nodes: [
+ {
+ pathSegment: 'home',
+ label: 'Home',
+ viewUrl: 'https://example.com/',
+ children: [
+ {
+ pathSegment: 'users',
+ label: 'User List',
+ viewUrl: 'https://example.com/users/list.html#pagenr={nodeParams.page};sort={nodeParams.sorting}',
+ children: [
+ {
+ pathSegment: ':userId',
+ label: 'User Profile',
+ viewUrl: 'https://example.com/projects/details.html#id=:userId;'
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+}
+...
+```
+
+ Use the following options to work with node parameters:
+
+Build the **viewUrl** by placing parameters anywhere in the **viewUrl** value using the following syntax: `nodeParams.{node param name}`. For example, if the main application URL is `https://[YOUR.WEBSITE]/home/projects/?~sorting=asc&~page=2` then the **viewUrl** of a micro frontend is `https://example.com/projects/list.html#pagenr=2;sort=asc`.
+
+
+### Dynamic viewUrl
+
+You can use both dynamic node parameters and path parameters to build a **viewUrl**.
+
+For example, if the web application URL is `https://[YOUR.WEBSITE]/something/sample_1/products?~sort=asc`, the micro frontend loads using a different URL, such as `https://example.com/project/sample_1/products?sort=asc`.
+
+When loading, the **viewUrl** uses the following dynamic URL parameters:
+
+- `:projectId = sample_1`
+- `sort = asc`
+
+```javascript
+Luigi.setConfig({
+ routing: {
+ nodeParamPrefix: '~'
+ },
+ navigation: {
+ nodes: [
+ {
+ pathSegment: 'something',
+ label: 'Something',
+ viewUrl: 'https://example.com/project',
+ children: [{
+ navigationContext: 'project',
+ pathSegment: ':projectId',
+ viewUrl: 'https://example.com/project/:projectId',
+ // Optionally, you can always call LuigiClient.getPathParams() to get the parameters
+ // context: {
+ // currentProject: ':projectId'
+ // },
+ children: [
+ {
+ pathSegment: 'products',
+ label: 'Products',
+ viewUrl: 'https://example.com/project/:projectId/products'
+ }
+ ]
+ }]
+ }
+ ]
+ }
+});
+```
+
+## Contexts
+
+Contexts can serve as an alternative way to create a dynamically changeable path in the **viewUrl**. They are used together with path parameters and utilize the Luigi Client to receive contexts for the micro frontends.
+
+You can create a context by adding these parameters to your node:
+
+### navigationContext
+- **type**: string
+- **description**: contains a named node that is mainly for use in combination with a dynamic **pathSegment** to start navigation from a dynamic node using `LuigiClient.linkManager().fromContext('contextname')`.
+
+### context
+- **type**: object
+- **description**: sends the specified object as context to the view. Use this property in combination with the dynamic **pathSegment** to receive the context through the context listeners of Luigi Client. This is an alternative to using the dynamic value in the **viewUrl**.
+
+Here is an example of a dynamic navigation node including a context:
+
+```javascript
+...
+ {
+ navigationContext: 'contextName',
+ pathSegment: ':projectId',
+ testId: 'myTestId',
+ viewUrl: '/some/path/:projectId',
+ context: {
+ projectId: ':projectId'
+ },
+ children: [node, node, node]
+ }
+```
+
+## Profile
+
+
+
+The profile is a drop-down list in the top navigation that allows you to override the logout item content if authorization is already configured. You can also add links to Luigi navigation nodes.
+
+You can configure the profile element in the top navigation by adding the **profile** property to the navigation object in the configuration file. Find all the parameters which you can use to configure a profile [here](navigation-parameters-reference.md#profile).
+
+Example:
+
+```javascript
+ profile: {
+ logout: {
+ label: 'End session'
+ icon: "sys-cancel",
+ customLogoutFn: myLogoutFn
+ },
+```
+
+
+## Context switcher
+
+
+
+The context switcher is a drop-down element in the top navigation. It allows you to switch between a curated list of navigation elements such as Environments. To do so, add the **contextSwitcher** property to the navigation object. Find all the parameters you can use to configure it [here](navigation-parameters-reference.md#context-switcher).
+
+ Example:
+
+```javascript
+contextSwitcher: {
+ defaultLabel: 'Select Environment ...',
+ testId: 'myTestId',
+ parentNodePath: '/environments',
+ lazyloadOptions: false,
+ fallbackLabelResolver: (id) => (id.toUpperCase()),
+ options: [{label,pathValue}, {label,pathValue}],
+ actions: [{label,link,position,clickHandler?}]
+ },
+```
+
+## Product switcher
+
+
+
+The product switcher is window in top the navigation which allows you to switch between navigation elements displayed there. To add it to your application, include the **productSwitcher** property in your **navigation** object. You may also add any of the parameters listed [here](navigation-parameters-reference.md#product-switcher).
+
+Example:
+```javascript
+productSwitcher: {
+ label: 'My Products',
+ testId: 'myTestId',
+ icon: 'grid',
+ items: [
+ {
+ icon: '',
+ label: 'Luigi in Github',
+ testId: 'myTestId',
+ externalLink: {
+ url: 'https://luigi-project.io/',
+ sameWindow: false
+ }
+ },
+ {
+ icon: '',
+ label: 'Project 1',
+ testId: 'myTestId',
+ link: '/projects/pr1'
+ }
+ ]
+ },
+```
+
+## App switcher
+
+
+
+The app switcher is a drop-down in top the navigation which allows you to switch between applications. To use it, add the **appSwitcher** property in your **navigation** object. You may also add any of the parameters listed [here](navigation-parameters-reference.md#app-switcher).
+
+Example:
+
+```javascript
+appSwitcher = {
+ showMainAppEntry: true,
+ items: [
+ {
+ title: 'Application One',
+ subTitle: 'the first app',
+ link: '/projects/pr1'
+ },
+ {
+ title: 'Application Two',
+ link: '/projects/pr2',
+ subTitle: 'the second app'
+ },
+ ]
+ };
+```
+
+## Additional options
+
+For more options and parameters which you can use to configure navigation in Luigi, read the [full parameter reference](navigation-parameters-reference.md). Some of the topics you can find there include:
+
+* Enabling and disabling the [loading indicator](navigation-parameters-reference.md#loadingindicatorenabled)
+* Hiding [navigation nodes](navigation-parameters-reference.md#hidefromnav) or [side navigation](navigation-parameters-reference.md#hidesidenav)
+* Including a horizontal [tab navigation](navigation-parameters-reference.md#tabnav) bar
+* Displaying content in a [modal](navigation-parameters-reference.md#opennodeinmodal)
+* Adding a [badge counter](navigation-parameters-reference.md#badgecounter) to your nodes
+* Defining a custom [testId](navigation-parameters-reference.md#testid) for your nodes
diff --git a/docs/navigation-configuration.md b/docs/navigation-configuration.md
index e7e73bfd52..3c9d1db35b 100644
--- a/docs/navigation-configuration.md
+++ b/docs/navigation-configuration.md
@@ -1,45 +1,41 @@
-# Navigation configuration
+# Basic navigation configuration
Read these guides to get started with configuring your navigation:
-* [Navigation elements](#navigation-elements)
+* [Navigation elements](#navigation-elements)
* [First steps](#first-steps)
* [Basic navigation parameters](#basic-navigation-parameters)
* [Grouping navigation nodes](#grouping-navigation-nodes)
* [category](#category)
- * [viewGroup](#viewgroup)
-* [Creating a dynamic path](#creating-a-dynamic-path)
- * [pathSegment parameters](#pathsegment-parameters)
- * [viewUrl parameters](#viewurl-parameters)
- * [Node parameters](#node-parameters)
- * [Dynamic viewUrl](#dynamic-viewurl)
If you are already familiar with the basics, take a look at:
+* [Advanced navigation configuration](navigation-advanced.md)
* [Full reference list of navigation parameters](navigation-parameters-reference.md)
## Navigation elements
-There are three main elements to Luigi:
+There are three main elements to Luigi:
-1. Top navigation which displays the main navigation path. Context, product, app, and profile [switchers](navigation-parameters-reference.md/#context-switcher) can also be displayed here.
-2. Side navigation which displays the child nodes of the root navigation node. It can include structures like collapsible dropdowns and menus.
+1. Top navigation which displays the main navigation path. Additionally, it can include context, product, app, and profile [switchers](navigation-parameters-reference.md/#context-switcher) .
+
+2. Side navigation which displays the child nodes of the root navigation node. It can include structures like collapsible dropdowns and categories which can be used for deep linking.
3. Main content window which renders the micro frontend.
-
+
## First steps
-Go to the `basicConfiguration.js` file in your `luigi-config` folder. You can configure the navigation by editing this file.
+To configure navigation, edit the `luigi-config/extended/navigation.js` file in your project.
-To experiment with navigation options, you can also use the [Luigi Fiddle](https://fiddle.luigi-project.io) page where you can configure a sample Luigi application.
+You can also use the file in `luigi-config/basic` or the [Luigi Fiddle](https://fiddle.luigi-project.io) to configure a simple application that is not intended for real-life purposes.
The configuration file consists of a tree-like structure of **navigation nodes**. The first level nodes represent the top navigation, while their children represent the side navigation. The nodes have some basic properties, such as labels, links, views, and (optionally) children. These properties are called **navigation parameters**.
-Here is an example of a simple navigation structure:
+Here is an example of a simple navigation structure:
-```javascript
+```javascript
navigation: {
nodes: [
{
@@ -82,27 +78,27 @@ navigation: {
The [first steps](#first-steps) example provides some basic navigation parameters:
### pathSegment
-This is used to build the path in the browser URL. The main application path is built from values in the navigation path, joined with the **/** character. For example, if the value of a node's **pathSegment** is `home`, the path for that node would be `[YOUR.WEBSITE]/home`. You can override this setting by using one of the following instead of **pathSegment**:
+This is used to build the path in the browser URL. The main application path is built from values in the navigation path, joined with the **/** character. For example, if the value of a node's **pathSegment** is `home`, the path for that node would be `[YOUR.WEBSITE]/home`. You can override this setting by using one of the following instead of **pathSegment**:
* **link** - define a specific internal path. Note that a valid path must always start from the **root node**. For example, if your root node is `home`, and you want to navigate to the `projects` directory:
- `link: '/home/projects'` is correct
- - `link: '/projects'`is not correct, since `/projects` is not the root node
+ - `link: '/projects'`is not correct, since `/projects` is not the root node
* **externalLink** - takes you to an external website. You must define the **url** of the website and whether it should be opened in a new window (`sameWindow: false`) or the same window (`sameWindow: true`).
### label
The name of the node which will be visible on your page.
### viewUrl
-The URL of the micro frontend which will be displayed in the main content area of your page.
+The URL of the micro frontend which will be displayed in the main content area of your page.
## Grouping navigation nodes
You may use these parameters if you want to group related navigation nodes:
-### category
-You can add the **category** property to navigation nodes you want to group. The resulting structure will be different depending on whether you want to group top or side navigation nodes. In both cases, you should define at least one node in a group with **label** and **icon** properties. For all other nodes, you can set **category** as a string with the label value.
+### category
+You can add the **category** property to navigation nodes you want to group. The resulting structure will be different depending on whether you want to group top or side navigation nodes. In both cases, you should define at least one node in a group with **label** and **icon** properties. For all other nodes, you can set **category** as a string with the label value.
* Top navigation:
-top navigation nodes in the same category will be rendered as a dropdown.
+top navigation nodes in the same category will be rendered as a dropdown.
* Side navigation:
-side navigation nodes will be grouped under a header with the category name. You can configure them to be **collapsible** or not.
+side navigation nodes will be grouped under a header with the category name. You can configure them to be **collapsible** or not.
This is an example of what a node with a category including a label and icon looks like:
@@ -114,7 +110,7 @@ This is an example of what a node with a category including a label and icon loo
sameWindow: false
},
label: 'Click here to visit the Luigi homepage',
-},
+},
...
```
@@ -128,166 +124,6 @@ To define all subsequent nodes, use the category label:
sameWindow: false
},
label: 'Click here to visit the Luigi homepage',
-},
+},
...
```
-
-### viewGroup
-
-Imagine your application hosts two micro frontend views: `http://example.com/a#e` and `http://example.com/b#f`. Due to hash routing and a different path up to `#`, they are, by default, rendered in different iframes. However, as they both have the **same origin**, such as`example.com`, and belong to the **same micro frontend** you want to render them in the same iframe. To achieve that, use the view groups feature. Define the **viewGroup** parameter for any navigation node. The children nodes will automatically be considered as part of the same view group.
-
-Nodes belonging to the same view group are always rendered in their own view group iframe. Nodes not belonging to any view group follow the same-origin iframe rendering policy.
-
-The view groups feature also offers out-of-the-box caching. Each time you navigate to another view group, either a new iframe is created or it is reused if already exists. In both cases, the iframe you are navigating from becomes hidden and is available for you to use again. If you navigate back to the first iframe and it should be updated with new data, such when a new entry was added in the second iframe and you want to display it in a table in the first iframe, you must define a **preloadUrl** parameter for the view group under **navigation.viewGroupSettings**.
-
-You can also preload view groups. You just need to define which URL you want to preload, and Luigi will preload the view after some user interactions when the browser is most likely to be idle. This option is active by default, but you can deactivate it with a [configuration flag](navigation-parameters-reference.md#node-parameters).
-
-For more information on setting caching with view refreshing and preloading for view groups, read [this document](navigation-parameters-reference.md#node-parameters).
-
-## Creating a dynamic path
-In Luigi, you can make a navigation path dynamically changeable according to your needs. This is accomplished by defining parameters within the **pathSegement** or **viewUrl** navigation paths.
-
-### pathSegment parameters
-Instead of a static value for your **pathSegment**, you can add a colon to this value to make it act as a parameter. For example, you can use `:userId`. This tells Luigi to accept any value for this **pathSegment**.
-
-This example shows you a defined `userId` path parameter:
-
-```javascript
-navigation: {
- nodes: [
- {
- pathSegment: 'home',
- label: 'Home',
- viewUrl: 'https://example.com/',
- children: [
- {
- pathSegment: 'users',
- label: 'User List',
- viewUrl: 'https://example.com/users/list.html',
- children: [
- {
- pathSegment: ':userId',
- label: 'User Profile',
- // E.g. if userId is 'JohnSmith'
- // the main application URL will be https://[YOUR.WEBSITE]/users/JohnSmith
- }
- ]
- }
- ]
- }
- ]
- }
-}
-...
-```
-
-### viewUrl parameters
-
-You have the following options to add a parameter to **viewUrl**:
-- Place the parameter anywhere in the **viewUrl** value. For example, if the main application URL is `https://[YOUR.WEBSITE]/home/users/JohnSmith`, then the **viewUrl** of the micro frontend in the content area can be `https://example.com/users/details.html#id=JohnSmith`.
-- Use the [Luigi Client API](luigi-client-api.md) to access the node parameter values from the micro frontend. Use the `LuigiClient.getPathParams()` function.
-For example, to get the value of the `userId` parameter, use `LuigiClient.getPathParams().userId`.
-- Add a parameter to the context part of your configuration:
-
-```javascript
-{
- pathSegment: ':userId',
- label: 'User Profile',
- viewUrl: 'https://example.com/users/details.html#id=:userId;',
- context: {
- user: ':userId'
- }
-}
- ...
-```
-
-In all these cases, the parameter is automatically replaced by the real value.
-
-### Node parameters
-
-You can use node parameters to build the **viewUrl** and pass them to the micro frontend specified in the navigation node selected in the navigation path.
-
-You can specify them in the main application URL, similarly to URL query parameters with a specific prefix. The prefix is `~` by default, but you can reconfigure it using the global **nodeParamPrefix** setting.
-
-All parameters without the prefix are not passed to the micro frontend and are consumed by the main application.
-
-A sample **viewUrl** `https://[YOUR.WEBSITE]/home/users/allUsers?~sorting=asc&~page=2` supports sorting and paging by introducing the **sort** and **page** node parameters.
-
-Using node parameters in the previous example results in:
-
-```javascript
-navigation: {
- nodes: [
- {
- pathSegment: 'home',
- label: 'Home',
- viewUrl: 'https://example.com/',
- children: [
- {
- pathSegment: 'users',
- label: 'User List',
- viewUrl: 'https://example.com/users/list.html#pagenr={nodeParams.page};sort={nodeParams.sorting}',
- children: [
- {
- pathSegment: ':userId',
- label: 'User Profile',
- viewUrl: 'https://example.com/projects/details.html#id=:userId;'
- }
- ]
- }
- ]
- }
- ]
- }
-}
-...
-```
-
- Use the following options to work with node parameters:
-
-Build the **viewUrl** by placing parameters anywhere in the **viewUrl** value using the following syntax: `nodeParams.{node param name}`. For example, if the main application URL is `https://[YOUR.WEBSITE]/home/projects/?~sorting=asc&~page=2` then the **viewUrl** of a micro frontend is `https://example.com/projects/list.html#pagenr=2;sort=asc`.
-
-
-### Dynamic viewUrl
-
-You can use both node parameters and path parameters to build a dynamic **viewUrl**.
-
-For example, if the web application URL is `https://[YOUR.WEBSITE]/something/sample_1/products?~sort=asc`, the micro frontend loads using a different URL, such as `https://example.com/project/sample_1/products?sort=asc`.
-
-When loading, the **viewUrl** uses the following dynamic URL parameters:
-
-- `:projectId = sample_1`
-- `sort = asc`
-
-```javascript
-Luigi.setConfig({
- routing: {
- nodeParamPrefix: '~'
- },
- navigation: {
- nodes: [
- {
- pathSegment: 'something',
- label: 'Something',
- viewUrl: 'https://example.com/project',
- children: [{
- navigationContext: 'project',
- pathSegment: ':projectId',
- viewUrl: 'https://example.com/project/:projectId',
- // Optionally, you can always call LuigiClient.getPathParams() to get the parameters
- // context: {
- // currentProject: ':projectId'
- // },
- children: [
- {
- pathSegment: 'products',
- label: 'Products',
- viewUrl: 'https://example.com/project/:projectId/products'
- }
- ]
- }]
- }
- ]
- }
-});
-```