Custom module path in Cockpit plugin

Camunda 7 Topics Discussion & Questions
,
1

I have a question regarding the Cockpit Plugin client-side setup. From the doc here: https://docs.camunda.org/manual/7.4/examples/tutorials/develop-cockpit-plugin/
I understand, that I can put some custom modules into a random folder – (’./someOtherModule.js’) – in my Cockpit Plugin project I have a file called ‘controllers.js’ which is located in the web-app folder so my path to the file is ‘./controller.js’. When I build my Plugin and try to test it, I get the JavaScript log message:

Fail.png1919×80 21.6 KB

It seems that I have a problem with the right folder or folder path and the plugin cannot load the controller.js file. What can I do here or did I missed something? I’m using Camunda version 7.6.

2

Hi @GPS,

Since you are using 7.6 I would recommend to use also the 7.6 documentation 1 just for case the differences between 7.4 and 7.6 in how to develop a cockpit plugin.

However, could you please share some code?

Cheers,
Roman

3

Hi @roman.smirnov,

Thanks for the hint, but I think the client-side setup hasn’t changed in Version 7.6

Here’s my code:

plugin.js

define(['jquery', 'angular', './controllers'], function($, angular) {

var Configuration = ['ViewsProvider', function(ViewsProvider) {

    ViewsProvider.registerDefaultView('cockpit.processDefinition.runtime.tab', {
      id: 'process-definitions',
      label: 'Social Interactions',
      url: 'plugin://social/static/app/processdefinition/processdefinition.html',
      controller: ProcessdefinitionController,
      priority: 12
    });
    ViewsProvider.registerDefaultView('cockpit.dashboard', {
      id: 'process-definitions',
      label: 'Social Interactions',
      url: 'plugin://social/static/app/dashboard/dashboard.html',
      controller: DashboardController,
      priority: 12
    })
}];
var ngModule = angular.module('cockpit.plugin.social', ['ui.bootstrap', 'controllers'])
    .filter('split', function() {
        return function (input, splitChar, splitIndex) {
            return input.split(splitChar)[splitIndex];
        };
});
  ngModule.config(Configuration);
  return ngModule;
});

controllers.js

define('cockpit.plugin.social.controllers', [
'./components/processdefinition/processdefinitionController',
'./components/dashboard/dashboardController',
'./components/modal/postModalController',
'./components/modal/userModalController',
'./components/modal/tagModalController'
], function(module) {
});

processdefinitioncontroller.js

  define('cockpit.plugin.social.controllers', [], function(module) {

  module.controller('ProcessdefinitionController', ["$scope", "$http", "Uri", "Notifications", "$modal", function($scope, $http, Uri, Notifications, $modal) { 
...
4

Hi @GPS,

I am not sure what you want achieve with define('cockpit.plugin.social.controllers'...), but this will not work. You have define your own angular module, this could look like this:

define([
  'angular',
  './components/processdefinition/processdefinitionController',
  ...
], function(
  angular,
  processdefinitionController,
  ...) {

  var ngModule = angular.module('cockpit.plugin.social.controllers', []);

  ngModule.controller('MyProcessDefinitionController', processdefinitionController);

  return ngModule;
});

And the processdefinitioncontroller.js must look like this:

define('angular', function(angular) {

  return ['$scope', '$http', 'Uri', 'Notifications', '$modal',
    function($scope,   $http,   Uri,   Notifications,   $modal) {

    // TODO...

  }];
});

Does this help you?

Cheers,
Roman

5

That helped me a lot! My construction with the controller.js file was not useful at all …

Thanks for your support :slight_smile:

6