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

,
1

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?

newButtonFeature
newButtonFeature241Ă—542 10.5 KB

2

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

1 Like
3

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
4

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”.

navigatorContent
navigatorContent1061Ă—396 42.2 KB

.\node_modules\@c8y\ngx-components\fesm2015\c8y-ngx-components.js

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="https://mywebsite.com/">mywebsite.com</a>

I add this but nothing happens.

5

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
6

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