Put app version in navigator menu

[dacsystemsw (DAC Software)]

What product/components do you use and which version/fix level are you on?

Cumulocity IoT (backend 1014.0.172 frontend 1011.0.4)

Is your question related to the free trial, or to a production (customer) instance?

Customer license

Hi it’s Luca from DAC System.
I’m developing a custom application based on Cumulocity Cockpit. We would like add the version of our app in the position shown in the figure below

Is it possible?

Best regards
Luca

[Christian_Guether1 (Christian Guether)]

Hi Luca,

I don’t know how to display the app version at this particular position, which you are highlighting. You could also place the app version in the user menu:

This quite easy to achieve. Simply create a new module, which consists of one component. This component is added to the user menu:
app-version.module.ts

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { CoreModule, DynamicFormsModule, UserMenuService } from '@c8y/ngx-components';
import { AppVersionComponent } from './components/app-version.component';

@NgModule({
  imports: [CoreModule, DynamicFormsModule, CommonModule],
  declarations: [AppVersionComponent],
  entryComponents: [AppVersionComponent],
  providers: [AppVersionComponent],
})
export class AppVersionModule {
  constructor(private userMenu: UserMenuService) {
    this.userMenu.add({
      template: AppVersionComponent,
      priority: -1,
      click: undefined,
    });
  }
}

app-version.component.ts

import { Component } from '@angular/core';
import versionJson from '../../../../version.json';

@Component({
  selector: 'app-components',
  templateUrl: './app-version.component.html',
})
export class AppVersionComponent {
  public appVersion = '';
  public appBuild = '';

  constructor() {
    this.appVersion = versionJson.version;
    this.appBuild = versionJson.buildNumber;
  }
}

app-version.component.html

<li class="dropdown-header bg-gray-white text-pre-normal" style="margin-top: -1px">
  <div class="d-flex d-col j-c-start">
    <span class="text-muted text-truncate"> {{ 'My app name' | translate }}</span>

    <span class="text-primary"
      >Version: <strong>{{ appVersion }}</strong>
    </span>

    <span class="text-primary"
      >Build: <strong> {{ appBuild }}</strong>
    </span>
  </div>
</li>

Best regards
Christian