Hello there!
I am trying to add a custom script according to this example: Configuration | docs.camunda.org
I just downloaded the latest Tomcat distribution, created custom-ng-module/script.js file and modified app/tasklist/scripts/config.js file strigtly following the manual, using the same code.
After deployement I tried to open Tasklist in browser but I encountered the following error in browser console:
'use strict';
define('custom-ng-module', [
'angular'
], function (angular) {
// define a new angular module named my.custom.module
// it will be added as angular module dependency to builtin 'cam.tasklist.custom' module
// see the config.js entry above
var customModule = angular.module('my.custom.module', []);
// …so now, you can safely add your controllers…
customModule.controller('customController', ['$scope', function ($scope) {
$scope.var1 = 'First variable';
$scope.var2 = 'Second variable';
}]);
// …directives or else.
customModule.directive('customDirective', function () {
return {
template: 'Directive example: "{{ var1 }}", "{{ var2 }}"'
};
});
// it is not necessary to 'return' the customModule but it might come handy
return customModule;
});
config.js:
window.camTasklistConf = {
// change the app name and vendor
app: {
name: 'Список задач',
vendor: ' '
},
//configure the date format
// "dateFormat": {
// "monthName": "MMM",
// "long": "LLLL"
// },
"locales": {
"availableLocales": ["ru"],
"fallbackLocale": "ru"
},
// // custom libraries and scripts loading and initialization,
// see: http://docs.camunda.org/guides/user-guide/#tasklist-customzing-custom-scripts
customScripts: {
// AngularJS module names
ngDeps: ['my.custom.module'],
// RequireJS configuration for a complete configuration documentation see:
// http://requirejs.org/docs/api.html#config
deps: ['bootstrapmin', 'popper', 'jquery','custom-ng-module'],
paths: {
// if you have a folder called `custom-ui` (in the `scripts` folder)
// with a file called `scripts.js` in it and defining the `custom-ui` AMD module
// 'bootstrap': 'scripts/bootstrap'
'bootstrapmin': 'scripts/bootstrap',
'popper': 'scripts/popper',
'jquery': 'scripts/jquery',
'custom-ng-module': '../custom-ng-module/script'
},
shim: {
'popper': { exports: 'popper' }
}
},
'shortcuts': {
'claimTask': {
'key': 'ctrl+alt+c',
'description': 'claims the currently selected task'
},
'focusFilter': {
'key': 'ctrl+shift+f',
'description': 'set the focus to the first filter in the list'
},
'focusList': {
'key': 'ctrl+alt+l',
'description': 'sets the focus to the first task in the list'
},
'focusForm': {
'key': 'ctrl+alt+f',
'description': 'sets the focus to the first input field in a task form'
},
'startProcess': {
'key': 'ctrl+alt+p',
'description': 'opens the start process modal dialog'
}
}
};
Be informed that jquery 3.5.0 and bootstrap 3.4.1 are loaded and used by camunda tasklist app.
Using different versions of jquery and/or bootstrap could cause conflicts.
Hello @hassang, I checked the versions of bootstrap and jquery in my project and changed them according to your recommendations. Moreover, I just downloaded clean Tomcat distribution from Camunda and tried to do the same things changing config.js and adding script.js file. Nothing changed there. The error mentioned above occured again. It seems like there is nothing to do with the versions.
Do you have more solutions for the matter?
Try with below settings for config.js file. I assumed that your script.js file is located underneath the path /scripts/custom-ng-module
jquery and bootstrap are removed since they are loaded by camunda web apps and no need to reload them. I haven’t used popper.js before and I have no idea whether it requires dependencies or not so I removed it too.
customScripts: {
// AngularJS module names
ngDeps: ['my.custom.module'],
// RequireJS configuration for a complete configuration documentation see:
// http://requirejs.org/docs/api.html#config
deps: ['custom-ng-module'],
paths: {
// if you have a folder called `custom-ui` (in the `scripts` folder)
// with a file called `scripts.js` in it and defining the `custom-ui` AMD module
'custom-ng-module': 'scripts/custom-ng-module/script'
}
},
'shortcuts': {
'claimTask': {
'key': 'ctrl+alt+c',
'description': 'claims the currently selected task'
},
'focusFilter': {
'key': 'ctrl+shift+f',
'description': 'set the focus to the first filter in the list'
},
'focusList': {
'key': 'ctrl+alt+l',
'description': 'sets the focus to the first task in the list'
},
'focusForm': {
'key': 'ctrl+alt+f',
'description': 'sets the focus to the first input field in a task form'
},
'startProcess': {
'key': 'ctrl+alt+p',
'description': 'opens the start process modal dialog'
}
}
};
@hassang Many thanks for the advice, it works!
Now I’ve got an additional question:
Is there any chance to use camForm variable with camForm.on(‘variables-fetched’) - like events within custom controllers and directives? Or can we trigger functions described in controller with the help of camForm events (kind of event subscription)?