Is there a feature where I can add an extra button to the left menu?

Is there a feature where I can add an extra button to the left menu?

or can I create extra buttons on the left side by editing the code?

This plugin might give you some pointers. It added a “Bookmarks” entry to the Navigator.

1 Like

There are several ways how you can tackle that:

  • create a cockpit clone (using c8ycli new cockpit)
  • create a plugin (using c8ycli and select plugin) to extend an existing application

Independent of the way you go, you will need to use the HOOK_NAVIGATOR_NODES in order to add elements to the side menu. You can even dynamically decide if these should be shown, e.g. if a user has a specific role (by using the canActivate attribute)!

A general description can be found in the Cumulocity IoT Web Development Tutorial - Part 2: Create your first component

Hendrik Naether

1 Like

Thanks for your solution suggestions.

Actually, what I want to do is to edit the html code.

I created a new application with c8ycli new cockpit.

In the screenshot, the class property of the menu appears as “navigatorContent”.


in this file path i find the part in c8y-ngx-components.js file with “navigatorContent”

Code part:

(function () { (typeof ngDevMode === "undefined" || ngDevMode) && ɵngcc0.ɵsetClassMetadata(NavigatorOutletComponent, [{
        type: Component,
        args: [{
                selector: 'c8y-navigator-outlet, c8y-ui-navigator',
                template: "<nav class=\"navigator\" *ngIf=\"isShown$ | async\" [ngClass]=\"{ open: open }\">\n  <ng-content select=\".navigator-slot-top\"></ng-content>\n  <ul class=\"navigatorContent\">\n    <c8y-navigator-node (nodeClick)=\"collapseNavigator($event)\" [node]=\"node\" *ngFor=\"let node of nodes trackBy trackByPathOrLabel\" [isRoot]=\"true\"></c8y-navigator-node>\n  </ul>\n  <ng-content select=\".navigator-slot-bottom\"></ng-content>\n</nav>\n"
    }], function () { return [{ type: HeaderService }]; }, { open: [{
            type: Input
        }], nodes: [{
            type: Input
        }] }); })();

Between the < ul>< /ul> tags

<a href=""></a> 

I add this but nothing happens.

Editing the JS files of the Web SDKs packages is not the intended usecase of the Web SDK and will not be supported here.

Please have a look at Tutorials - Cumulocity IoT Guides for an introduction on how to extend applications using the Web SDK.

1 Like

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.