How Can I add a new tab on the navigation bar in cockpit?

Camunda 7 Topics Discussion & Questions
,
1

Hi,

How can I add a new tab on the navigation bar in cockpit and then by clicking on it will route me the new page so that I can see that on a different page.

I already saw the documentation but it didn’t help me.
https://docs.camunda.org/how-tos/cockpit/develop-a-plugin/

Could you please help with some suggestions?

2

Hello @GauravSinha ,

please use this documentation: Cockpit Plugins | docs.camunda.org

Hope this helps
Jonathan

3

Hi @jonathan.lukas ,

Thanks.
I already used this document I am able to add a new tab in the navigation bar but my requirement is like how should I use cockpit. navigation and cockpit.route together so that when I click on the tab which I created should redirect me to a new page?

Could you please help me with it ?

4

Hi @GauravSinha ,

please refer to this example: GitHub - jonathanlukas/camunda-platform-cockpit-plugin: Navigation to external page Plugin Example for Camunda Platform Cockpit Application

I hope this helps.

Jonathan

5

Hi @jonathan.lukas ,

Thank you :slight_smile: .It works to some extent.

Now I am facing another problem how should I add a HTML file in the path tag from the workspace so that when clicking on the tab it will refer to that html page and opens up.
I have kept my html file in app folder.
I have tried to use bleow path but it is not working.
properties: {
path: “plugin://plugin/plugin-webapp/cockpit-navigation-plugin/app/abc.html”
},
render: container => {
container.innerHTML = ‘My link’
}

6

Hello @GauravSinha ,

thanks to the help of @martin.stamm I have extended my example. Now the provided link will redirect you to a custom page.

Hope this helps

Jonathan

7

These links are not working now. Can you please share some example?

GitHub - jonathanlukas/camunda-platform-cockpit-plugin: Navigation to external page Plugin Example for Camunda Platform Cockpit Application