Ship custom extension points as camunda Cockpit plug-ins

camunda-cockpit-custom-extension-points.md

camunda Cockpit - custom extension points

This short tutorial shows how to ship your custom extension points with camunda Cockpit. Those extension points can be implemented by other plug-ins for extra fun.

In order to accomplish our goal we must ship a custom extension point provider as well as one or more implementors as camunda Cockpit plug-ins.

Create a extension point provider

Hook yourself into an existing extension point and query the Views service for extensions implementing a (your !) custom extension point. We simply call it CUSTOM and implementors should use that name to plug-in new functionality.

function CustomExtensionPointController($scope, Views) {

  // get providers, iterate through them, extract information, query them ...
  $scope.customProviders = Views.getProviders({ component: 'CUSTOM' });

  // provide custom variables to pass between this controllers
  // scope and the plug-in providers

  // in this example we expose the scope-bound variable <a> to extension
  // point implementors
  $scope.customProviderVars = { read: [ 'a' ] };
 
  // exposed to plug-ins
  $scope.a = { name: 'FOO BAR' };
}

Create a template if you would like custom plug-ins to expose HTML snippets and include them via the <view> directive. We use the list of providers customProviders as well as the variable bindings customProviderVars we set up previously and pass them into the directive.

<div ng-repeat="p in customProviders">
  <view provider="p" vars="customProviderVars" />
</div>

Finally you need to plug-in controller and template into a pre-defined extension point (e.g. EXISTING):

angular.module('ext.provider', []).config(function(ViewsProvider) {
  ViewsProvider.registerDefaultView('EXISTING', {
    id: 'CUSTOM.provider',
    controller: CustomExtensionPointController,
    templateUrl: '...'
  });
});

Implement the extension point

There isn't really anything special in implementing a custom extension point except for the fact that it may use special variables that have been set up in the providing scope.

function CustomExtensionImplementationController($scope) {

  // variable <a> got passed over from the providing scope
  $scope.a; // { name: 'FOO BAR' }
}

The implementing template may access passed over variables, too:

<h3>CUSTOM EVERYONE</h3>
<p>{{ a.name }}</p>

The glue code that puts everything together and registers the implementation for the CUSTOM extension point:

angular.module('ext.implementor', []).config(function(ViewsProvider) {
  ViewsProvider.registerDefaultView('CUSTOM', {
    id: 'CUSTOM.implementation',
    controller: CustomExtensionImplementationController,
    templateUrl: '...'
  });
});

Related topics

• camunda Cockpit plug-in development how-to