add links below pallatte

[RakhiS]

Hi,

I want to provide links like in the same way below the connectors with the same section division, How can I add into this.

[Aravind Ravi]

Hi Rakhi, 

 

We have created a sample to add another section of links under connectors in a symbol palette. In the symbol palette, you can add a multi number of palettes in it. Please set individual Id for the nodes and connectors. Do not repeat the same Id to the nodes and connector because it leads to some errors.  Please find below code snippet for how to add connectors in the palette 

 

public palettes: PaletteModel[] = [ 

    { 

      id: 'flow', 

      expanded: true, 

      symbols: this.flowshapes, 

      iconCss: 'shapes', 

      title: 'Flow Shapes' 

    }, 

    { 

      id: 'connectors', 

      expanded: true, 

      symbols: this.connectorSymbols, 

      iconCss: 'shapes', 

      title: 'Connectors' 

    }, 

    { 

      id: 'connectors2', 

      expanded: true, 

      symbols: this.connectorSymbols2, 

      iconCss: 'shapes', 

      title: 'Connector 2' 

    } 

  ]; 

 

Sample: https://stackblitz.com/edit/angular-wihwwf?file=app.component.ts 

 

 

 

Regards 

Aravind Ravi 

[RakhiS]

Hi Arvind, 

thanks for the reply but this is the thing which I know, my question is I want to provide "links"( <a>link1</a>)  in pallate below that.

[Aravind Ravi]

Hi Rakhi, 

 

By default, In the diagram, we can able to add node, swimlane shapes and connectors in a symbol palette. Currently, we do not have support to add “Links” in a symbol palette. However, we can add a link as annotation content to node and while drag and drop the node in diagram link shows. So that while clicking on the link you can navigate to another page. Please find below the code snippet for how to add the hyperlink in the node. 

 

{ id: 'Terminator', shape: { type: 'Flow', shape: 'Terminator' }, annotations: [ {hyperlink: {  

                                content: 'syncfusion', link: 'https://hr.syncfusion.com' 

                            }}]} , 

 

Please find the sample in below link 

 

Sample:  https://stackblitz.com/edit/angular-wihwwf-vpfxxw?file=app.component.html 

 

If we misunderstood your requirement, please share us a image representation of how do you expect to add links in palette which would help us to proceed further. 

 

Regards 

Aravind Ravi