How to open a new tab with specified URL and how to open a modal pop up, on click left side navigation in cumulocity IoT UI

[Asma (Asma Shaikh)]

I have implemented left side navigation in cumulocity ioT project using NavigatorNodeFactory from @c8y/ngx-components . click on “contact us” menu I have to open a specified link in a new tab and click on “support” menu i have to open modal pop up. I couldn’t find a place to provide URL address in navigation.

[Tristan_Bastian]

Hi Asma,

regarding opening a URL, you could have a look at this implementation:

import { Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ClickOptions, NavigatorNode, NavigatorNodeData, NavigatorNodeFactory } from '@c8y/ngx-components';

export class CustomNavigatorNode extends NavigatorNode {
  url: string;

  constructor(data?: NavigatorNodeData & { url?: string }) {
    super(data);
  }

  click(options: ClickOptions = {}): void {
    if (this.url) {
      window.open(this.url);
    }
  }
}

@Injectable()
export class SearchNavigatorNodeFactory implements NavigatorNodeFactory {
  private node: NavigatorNode;
  constructor() {
    this.node = new CustomNavigatorNode({
      label: 'Google',
      icon: 'search',
      url: 'https://google.de'
    });
  }

  get(activatedRoute?: ActivatedRoute): NavigatorNode {
    return this.node;
  }
}

For the support modal dialog you would have to write a separate class which would then open the dialog in the click() function.

Kind Regards,
Tristan