Custom item renderer for app switcher

core/src/navigation/LogoTitle.svelte

@@ -2,7 +2,7 @@
   import { beforeUpdate, createEventDispatcher, onMount, getContext } from 'svelte';
   import * as Header from './services/header';
   import { Routing } from '../services/routing';
-  import { NavigationHelpers, RoutingHelpers } from '../utilities/helpers';
+  import { NavigationHelpers, RoutingHelpers, GenericHelpers } from '../utilities/helpers';
 
   const dispatch = createEventDispatcher();
 
@@ -15,15 +15,22 @@
   export let selectedItem;
   export let defaultTitle;
   export let appSwitcherItems;
+  export let itemRenderer;
   export let pathParams;
   export let subTitle;
   export let defaultSubTitle;
   export let pathData;
   export let addNavHrefForAnchor;
+  let customItemRenderer__slotContainer;
   let previousPathData;
   let getUnsavedChangesModalPromise = getContext('getUnsavedChangesModalPromise');
   let getTranslation = getContext('getTranslation');
   let store = getContext('store');
+  const appSwitcherApiObj = {
+    closeDropDown: () => {
+      toggleDropdownState('appSwitcherPopover');
+    }
+  } 
 
   //TODO refactor
   const getComponentWrapper = () => {
@@ -33,6 +40,7 @@
           pathData,
           pathParams,
           appSwitcherItems,
+          itemRenderer,
           selectedItem,
           defaultTitle,
           title,
@@ -51,6 +59,8 @@
               pathData = obj.pathData;
             } else if (prop === 'appSwitcherItems') {
               appSwitcherItems = obj.appSwitcherItems;
+            } else if (prop === 'itemRenderer') {
+              itemRenderer = obj.itemRenderer;
             } else if (prop === 'pathParams') {
               pathParams = obj.pathParams;
             } else if (prop === 'selectedItem') {
@@ -90,6 +100,15 @@
     }
   });
 
+  function renderCustomList(item, slot, index){
+    setTimeout(()=>{
+      if(slot){
+        itemRenderer(item, slot.children[index], appSwitcherApiObj);
+      }
+    });
+    return '';
+  }
+
   export function goTo(path) {
     getUnsavedChangesModalPromise().then(() => {
       Routing.navigateTo(RoutingHelpers.applyPathParams(path, pathParams));
@@ -138,8 +157,9 @@
       ? 'fd-shellbar__logo--image-replaced'
       : ''} {hasLogo ? 'lui-customlogo' : ''}"
     aria-label={title}
-    on:click={(event) => {
-      NavigationHelpers.handleNavAnchorClickedWithoutMetaKey(event) && goTo('/');
+    on:click={event => {
+      NavigationHelpers.handleNavAnchorClickedWithoutMetaKey(event) &&
+        goTo('/');
     }}
     href="/"
     role="button"
@@ -170,8 +190,9 @@
       <a
         class="fd-shellbar__title lui-shellbar-single-app-title"
         data-testid="luigi-topnav-title"
-        on:click={(event) => {
-          NavigationHelpers.handleNavAnchorClickedWithoutMetaKey(event) && goTo('/');
+        on:click={event => {
+          NavigationHelpers.handleNavAnchorClickedWithoutMetaKey(event) &&
+            goTo('/');
         }}
         href="/"
       >
@@ -191,8 +212,9 @@
         {#if addNavHrefForAnchor}
           {#if appSwitcherItems && appSwitcherItems.length === 1}
             <a
-              href="{getRouteLink(appSwitcherItems[0])}"
-              class="fd-shellbar__title lui-shellbar-single-app-title">
+              href={getRouteLink(appSwitcherItems[0])}
+              class="fd-shellbar__title lui-shellbar-single-app-title"
+            >
               <span>
                 {$getTranslation(appSwitcherItems[0].title)}
               </span>
@@ -262,7 +284,10 @@
         id="appSwitcherPopover"
       >
         <nav class="fd-menu">
-          <ul class="fd-menu__list fd-menu__list--no-shadow">
+          <ul
+            class="fd-menu__list fd-menu__list--no-shadow"
+            bind:this={customItemRenderer__slotContainer}
+          >
             {#if showMainAppEntry && selectedItem}
               <li class="fd-menu__item">
                 <a
@@ -279,14 +304,26 @@
               </li>
             {/if}
             {#if appSwitcherItems && appSwitcherItems.length > 0}
-              {#each appSwitcherItems as item}
-                {#if item !== selectedItem && hasValidLink(item, pathParams)}
+              {#each appSwitcherItems as item, index}
+                {#if GenericHelpers.isFunction(itemRenderer)}
+                  {#if customItemRenderer__slotContainer}
+                    <li class="fd-menu__item" tabindex="0">
+                      {@html renderCustomList(
+                        item,
+                        customItemRenderer__slotContainer,
+                        index
+                      )}
+                    </li>
+                  {/if}
+                {:else if item !== selectedItem && hasValidLink(item, pathParams)}
                   <li class="fd-menu__item">
                     <a
                       role="button"
                       class="fd-menu__link"
-                      on:click={(event) => {
-                        NavigationHelpers.handleNavAnchorClickedWithoutMetaKey(event) && goTo(item.link);
+                      on:click={event => {
+                        NavigationHelpers.handleNavAnchorClickedWithoutMetaKey(
+                          event
+                        ) && goTo(item.link);
                       }}
                       href={addNavHrefForAnchor
                         ? getRouteLink(item, pathParams)

core/src/navigation/services/header.js

@@ -9,6 +9,7 @@ export const processHeaderSettings = component => {
       if (appSwitcher) {
         component.set({ appSwitcherItems: appSwitcher.items });
         component.set({ showMainAppEntry: appSwitcher.showMainAppEntry });
+        component.set({ itemRenderer: appSwitcher.itemRenderer });
       }
       component.set({
         hasApps:

core/src/utilities/helpers/generic-helpers.js

@@ -169,7 +169,7 @@ class GenericHelpersClass {
    * @returns {string} string without leading slash
    */
   trimLeadingSlash(str) {
-    return str.replace(/^\/+/g, '');
+    return this.isString(str) ? str.replace(/^\/+/g, '') : '';
   }
 
   /**
@@ -178,7 +178,7 @@ class GenericHelpersClass {
    * @returns string string without any trailing slash
    */
   trimTrailingSlash(str) {
-    return str.replace(/\/+$/, '');
+    return this.isString(str) ? str.replace(/\/+$/, '') : '';
   }
 
   getTrimmedUrl(path) {
@@ -396,6 +396,10 @@ class GenericHelpersClass {
   getRemotePromise(id) {
     return LuigiConfig._remotePromises ? LuigiConfig._remotePromises.promises[id] : undefined;
   }
+
+  isString(value) {
+    return typeof value === 'string' || value instanceof String;
+  }
 }
 
 export const GenericHelpers = new GenericHelpersClass();

docs/luigi-core-api.md

@@ -1277,6 +1277,7 @@ Add a feature toggle to an active feature toggles list
 ##### Parameters
 
 -   `featureToggleName` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the name of the feature toggle
+-   `fromUrlQuery`   (optional, default `false`)
 
 ##### Examples
 

docs/navigation-parameters-reference.md

@@ -856,6 +856,48 @@ The app switcher is a dropdown list available in the top navigation bar. It allo
 1. Define a [header object](general-settings.md#headerlogo) in the `settings:` section of your Luigi configuration.
 2. Add the **appSwitcher** parameter to the **navigation** object using the optional parameters listed below.
 
+### itemRenderer
+- **type**: function
+- **description**: This function allows you to customize the single list element rendered in the default app switcher popover.
+- **attributes**:
+  - **item** single application element
+  - **slot** `ul` element as slot. You can append your custom `li` entries to this `ul` element.
+  - **appSwitcherApiObj**
+      - **type**: Object
+      - **description**: It is an object with a function `closeDropDown` as property. This function closes the custom app switcher dropdown.
+- **example**:
+  ```javascript
+    appSwitcher: {
+      items:[...],
+      itemRenderer: (item, slot, appSwitcherApiObj) => {
+        let a = document.createElement('a');
+        a.setAttribute('class', 'fd-menu__link');
+        a.addEventListener('click', e => {
+          Luigi.navigation().navigate(item.link);
+          appSwitcherApiObj.closeDropDown();
+          e.stopPropagation();
+          Luigi.configChanged('navigation')
+        });
+        let span = document.createElement('span');
+        span.setAttribute('class', 'fd-menu__addon-before');
+        let i = document.createElement('i');
+        if (item.title === 'Application One') {
+          i.setAttribute('class', 'sap-icon--phone');
+        } else {
+          i.setAttribute('class', 'sap-icon--settings');
+        }
+        span.appendChild(i);
+        let spanText = document.createElement('span');
+        spanText.setAttribute('class', 'fd-menu__title');
+        spanText.innerText = item.title;
+        a.appendChild(span);
+        a.appendChild(spanText);
+        slot.appendChild(a);
+      }
+    }
+  ```
+- **since**: NEXTRELEASE
+
 ### items
 - **type**: array
 - **description**: defines the list of application elements.
@@ -868,7 +910,6 @@ The app switcher is a dropdown list available in the top navigation bar. It allo
 - **type**: boolean
 - **description**: includes the link to the root of the Luigi application in the drop-down using the **title** specified in the **settings/header** section of the configuration as a label.
 
-
 ## Global search
 
 The global search is an input field available in the top navigation bar. The search is available if the Luigi configuration file contains on its root level a section called `globalSearch`. Within this section you can implement and configure a search provider object.

test/e2e-test-application/e2e/tests/0-fiddle/fiddle-theming.spec.js

@@ -7,7 +7,10 @@ describe('Fiddle 2', () => {
     beforeEach(() => {
       newConfig = cloneDeep(fiddleConfig);
       newConfig.settings.theming = {
-        themes: () => [{ id: 'light', name: 'Fiori3 Light' }, { id: 'dark', name: 'Fiori3 Dark' }],
+        themes: () => [
+          { id: 'light', name: 'Fiori3 Light' },
+          { id: 'dark', name: 'Fiori3 Dark' }
+        ],
         defaultTheme: 'light'
         // nodeViewURLDecorator: {
         //   queryStringParameter: {

test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js

@@ -206,7 +206,8 @@ describe('Navigation', () => {
       //Choose option one above French
       cy.get('[data-testid="lui-us-language-dropdown"]')
         .should('exist')
-        .type('{upArrow}').type('{enter}');
+        .type('{upArrow}')
+        .type('{enter}');
 
       //Confirm with keyboard: Enter
       cy.get('.fd-popover__body--dropdown-fill')
@@ -221,7 +222,8 @@ describe('Navigation', () => {
       //Choose option one below English
       cy.get('[data-testid="lui-us-language-dropdown"]')
         .should('exist')
-        .type('{downArrow}').type('{enter}');
+        .type('{downArrow}')
+        .type('{enter}');
 
       //Confirm with keyboard: Enter
       cy.get('.fd-popover__body--dropdown-fill')

test/e2e-test-application/src/app/project/project.component.html

@@ -868,7 +868,8 @@ <h3 class="fd-layout-panel__title">
                   .navigate('/overview')
               "
               data-testid="navigate-withOptions-no-history-context"
-              >Go to /overview using withOptions() which makes no browser history be kept and no context updated.
+              >Go to /overview using withOptions() which makes no browser history be kept
+              and no context updated.
             </a>
             <app-code-snippet
               data="linkManager().withOptions({preventHistoryEntry: true, preventContextUpdate:true}).navigate('/overview')"