How to Add a Custom Option to the Dropdown Menu in Camunda Cockpit with an Embedded Spring Boot Setup?

Hi everyone!

I am using Camunda embedded in a Spring Boot application, and I need to add a custom option to the dropdown menu in the Cockpit UI, where options like “Admin” and “Tasklist” currently appear. The new option could “test”, for example.

image

My frontend configuration is in the folder META-INF/resources/webjars/camunda/app/ I am testing for the Cockpit application, where I have in config.js added the custom-menu:

export default {
  customScripts: [
    'custom/logout',
    'custom/custom-menu'
  ],
  app: {
    name: 'cockpit',
    vendor: 'Panel de'
  },
  "locales": {
    "availableLocales": ["es", "en"],
    "fallbackLocale": "es"
  },
  'angular': {
    modules: ['cockpit.customMenu']
  }
};

This is my code in custom-menu.js:

angular.module('cockpit.customMenu', []).run([
    '$rootScope',
    '$timeout',
    function ($rootScope, $timeout) {
        $timeout(function () {
            const dropdownMenu = document.querySelector('.dropdown-menu.dropdown-menu-right');

            if (dropdownMenu) {
                const newMenuItem = document.createElement('li');
                newMenuItem.className = 'ng-scope custom-option';
                
                const newMenuLink = document.createElement('a');
                newMenuLink.href = '../../custom-app/default/';
                newMenuLink.textContent = 'Mi Opción Personalizada';
                newMenuLink.className = 'ng-binding';
                
                newMenuItem.appendChild(newMenuLink);
                
                dropdownMenu.appendChild(newMenuItem);
            }
        }, 0);
    },
]);

The idea is for the new option to link to an external link on a web page.