How to remove or alter content from the top and navigation panels

[luclib (Lucas Liberman)]

I have created a C8Y application with c8ycli 1016.0.320 that uses the following dependencies:

"@c8y/client": "1017.0.385",
"@c8y/ngx-components": "1017.0.385",
"@c8y/style": "1017.0.385"

The application comes preconfigured with content on the top and left navigation panels that I want to customize (highlighted in yellow).

To do this, I have tried following the official guide, but I have not been successful so far.

I created a branding.less file within a folder of the same name at the root application with the following code to empty the top container.

@import '~@c8y/style/extend.less';

.apt-widget-top-container {
    display: none;
}

.c8y-app-icon {
    display: none;
}

header.title {
    > span {
        font-weight: bold;
        font-size:20px;
    }   
}

Next, I added brandingEntry as a property of my c8y object in package.json.

{
  "name": "karl-storz-demo",
  "version": "1017.0.385",
  "description": "",
  "scripts": {
    "start": "c8ycli server -u https://novanta.us.cumulocity.com",
    "build": "c8ycli build",
    "deploy": "c8ycli deploy",
    "locale-extract": "c8ycli locale-extract",
    "postinstall": "ngcc",
    "test": "jest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@angular/animations": "14.0.6",
    "@angular/cdk": "14.1.2",
    "@angular/common": "14.0.6",
    "@angular/compiler": "14.0.6",
    "@angular/core": "14.0.6",
    "@angular/forms": "14.0.6",
    "@angular/platform-browser": "14.0.6",
    "@angular/platform-browser-dynamic": "14.0.6",
    "@angular/router": "14.0.6",
    "@angular/upgrade": "14.0.6",
    "@c8y/client": "1017.0.385",
    "@c8y/ngx-components": "1017.0.385",
    "@c8y/style": "1017.0.385",
    "@ngx-translate/core": "14.0.0",
    "ngx-bootstrap": "9.0.0",
    "pdfmake": "^0.2.8",
    "rxjs": "~6.6.3",
    "zone.js": "~0.11.7"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "14.0.6",
    "@angular/compiler-cli": "14.0.6",
    "@angular/language-service": "14.0.6",
    "@angular/localize": "14.0.6",
    "@angular/service-worker": "14.0.6",
    "@c8y/cli": "1017.0.385",
    "@types/jest": "^28.1.6",
    "jest": "^28.1.3",
    "jest-preset-angular": "^12.2.5",
    "typescript": "4.7.4"
  },
  "c8y": {
    "application": {
      "name": "karl-storz-demo",
      "contextPath": "karl-storz-demo",
      "key": "karl-storz-demo-application-key",
      "dynamicOptionsUrl": "/apps/public/public-options/options.json",
      "brandingEntry": "./branding/branding.less"
    },
    "cli": {}
  },
  "browserslist": [
    "last 2 major versions"
  ]
}

Regardless, when I try to run the application on my local host, I don’t see any changes to my UI.

[Tristan_Bastian]

Hi @luclib

The steps that you described are working flawless, I guess the only thing that you have missed was to restart your local development server as changes to the package.json are not directly picked up without starting the dev server again via c8ycli server.

Regards,
Tristan

[luclib (Lucas Liberman)]

Hi Tristan,

Yes, when I deployed the application with the branding changes I could see them in our tenant.

Regards,
Lucas