New Cockpit Plugin System: How to add tooltips in Camunda layout?

Camunda 7 Topics Discussion & Questions
,
1

With the camunda cockpit plugin system, I can add action buttons e.g. to cockpit.processInstance.runtime.action.

This is quite simple. We just have to use a plugin.js as follows:

export default {
    // id for plugin
    id: "my-plugin",
    // location where plugin goes
    pluginPoint: "cockpit.processInstance.runtime.action",
    // what to render, specific objects that you can pass into render function to use
    render: (node, {api, processInstanceId}) => {
        // create the actual button
        node.innerHTML = `<button class="btn btn-default btn-toolbar" uib-tooltip="My Tooltip" tooltip-placement="left"><span class="glyphicon glyphicon-xxxx"></span></button>`;
        // onclick function the button
        node.onclick = function () {
           // do something using api and processInstanceId
        }
    },
};

I love that, because this is way more efficient than the old plugin system. :slight_smile:

Now to my question:

Within the Cockpit Camunda itself has beautiful tooltips for it’s buttons, e.g.
grafik
Using the old plugin system I have been able to simply use uib-tooltip="My tooltip" tooltip-placement="left" on the button / anchor to achieve the same with exactly the same layout. But sadly this is not working anymore :disappointed_relieved:

  • has anyone an idea on how to get tooltips in plugin elements similiar to the original ones?
  • by the way: does anyone know what I have to do in order to make bootstrap functions like data-toggle etc. work again? … something which has been working out of the box in the old plugin system as well…
  • remember: I just want to add a button with some scripted functionality, I do not want to compile a whole UI application.

My speculation is that uib-xxx are directives from Angular directives for Bootstrap. What do I need to import into my plugin to make this work (again)?

Any help is welcome.

Thanks in advance
Gunnar

2

So I’m going to answer this question myself.

I just changed the above plugin.js and declared a dependency on the angular module ui.bootstrap. Just a few additional lines…:

export default {
    // id for plugin
    id: "my-plugin",
    // location where plugin goes
    pluginPoint: "cockpit.processInstance.runtime.action",
    // what to render, specific objects that you can pass into render function to use
    render: (node, {api, processInstanceId}) => {
        var ngModule = angular.module('my-plugin', ['ui.bootstrap']);
        // create the actual button
        node.innerHTML = `<button class="btn btn-default btn-toolbar" uib-tooltip="My Tooltip" tooltip-placement="left"><span class="glyphicon glyphicon-xxxx"></span></button>`;
        // onclick function the button
        node.onclick = function () {
           // do something using api and processInstanceId
        }
        angular.bootstrap(node, [ngModule.name]);
    },
};

Hope this helps others to seamlessly integrate their plugins in Camunda Cockpit as well.

Cheers
Gunnar

2 Likes