custom item renderer for options in context switcher (SAP#1008)

client/src/lifecycleManager.js

@@ -373,7 +373,7 @@ class LifecycleManager extends LuigiClientBase {
    * 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.
    * @param {string} origin target origin.
    * @memberof Lifecycle
-   * @since 0.7.2
+   * @since 0.7.3
    */
   setTargetOrigin(origin) {
     helpers.setTargetOrigin(origin);

core/examples/luigi-sample-angular/src/luigi-config/extended/settings.js

@@ -14,7 +14,6 @@ class Settings {
   responsiveNavigation = 'simpleMobileOnly'; // Options: simple | simpleMobileOnly | semiCollapsible
   sideNavFooterText = `Luigi Client: ${version || 'unknown'}`;
   thirdPartyCookieCheck = {
-    thirdPartyCookieDetection: true,
     // thirdPartyCookieScriptLocation: 'https://domain/init.html',
     thirdPartyCookieErrorHandling: () => {
       const alert = {

core/src/navigation/ContextSwitcher.html

@@ -49,10 +49,14 @@
               on:click="{() => goToOption(node, selectedOption)}"
               data-testid="{getTestId(node)}"
             >
+              {#if customOptionsRenderer}
+              {@html customOptionsRenderer(node, node.label === selectedLabel)}
+              {:else}
               <a
-                class="fd-menu__item {node === selectedLabel ? 'is-selected' : ''}"
+                class="fd-menu__item {node.label === selectedLabel ? 'is-selected' : ''}"
                 title="{label}"
               >{label}</a>
+              {/if}
             </li>
             {/await} {/each} {/if}
           </ul>
@@ -83,7 +87,8 @@
     IframeHelpers,
     RoutingHelpers,
     StateHelpers,
-    NavigationHelpers
+    NavigationHelpers,
+    GenericHelpers
   } from '../utilities/helpers';
 
   const dispatch = createEventDispatcher();
@@ -96,6 +101,7 @@
   export let options = null;
   export let selectedOption;
   export let fallbackLabelResolver = null;
+  export let customOptionsRenderer;
   let preserveSubPathOnSwitch;
   let getUnsavedChangesModalPromise = getContext(
     'getUnsavedChangesModalPromise'
@@ -111,11 +117,14 @@
         const contextSwitcherConfig = LuigiConfig.getConfigValue(
           'navigation.contextSwitcher'
         );
-
+        customOptionsRenderer =
+          contextSwitcherConfig.customOptionsRenderer &&
+          GenericHelpers.isFunction(contextSwitcherConfig.customOptionsRenderer)
+            ? contextSwitcherConfig.customOptionsRenderer
+            : undefined;
         contextSwitcherEnabled = !!contextSwitcherConfig;
         config = contextSwitcherConfig;
         options = undefined;
-
         if (contextSwitcherConfig) {
           actions = await LuigiConfig.getConfigValueAsync(
             'navigation.contextSwitcher.actions'

docs/general-settings.md

@@ -43,7 +43,6 @@ settings: {
     hideAutomatically: true
   },
   thirdPartyCookieCheck = {
-    thirdPartyCookieDetection: true,
     //thirdPartyCookieScriptLocation: 'https://domain/init.html',
     thirdPartyCookieErrorHandling: () => {
       const alert = {

docs/navigation-advanced.md

@@ -271,6 +271,8 @@ contextSwitcher: {
       lazyloadOptions: false,
       fallbackLabelResolver: (id) => (id.toUpperCase()),
       options: [{label,pathValue}, {label,pathValue}],
+      customOptionsRenderer: (option, isSelected) => {let className = 'fd-menu__item' + (isSelected ? ' is-selected' : '');
+      return `<a class="${className}">${option.label} test</a>`;},
       actions: [{label,link,position,clickHandler?}]
     },
 ```

docs/navigation-parameters-reference.md

@@ -262,6 +262,12 @@ The context switcher is a drop-down list available in the top navigation bar. It
   - **label** defines the context element label. If not defined, the **pathValue** is passed to **fallbackLabelResolver** to set its value. The default value is **pathValue**, if **fallbackLabelResolver** is not defined.
   - **pathValue** defines the context element path that is appended to **parentNodePath** and reflects a **pathSegment**.
 
+### customOptionsRenderer
+- **type**: function
+- **parameters**: [option](navigation-parameters-reference.md#options), isSelected
+- **description**: - **description**: enables you to add custom items to the context switcher by rendering code inside a `<li>` element. The function take an **option** object and a boolean **isSelected** as a parameter. It is recommended to use this function carefully because it is possible to inject JavaScript code.
+
+
 ### actions
 - **type**: array
 - **description**: defines a list of additional elements that are shown on above or below the context switcher **options**.