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

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.

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

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