Error while adding custom scripts into Tasklist

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:

require.js:1 GET http://localhost:8080/camunda/app/custom-ng-module/script.js?bust=7.14.0 net::ERR_ABORTED 404
req.load @ require.js:1
load @ require.js:1
load @ require.js:1
fetch @ require.js:1
check @ require.js:1
enable @ require.js:1
enable @ require.js:1
(anonymous) @ require.js:1
(anonymous) @ require.js:1
each @ require.js:1
enable @ require.js:1
init @ require.js:1
(anonymous) @ require.js:1
setTimeout (async)
req.nextTick @ require.js:1
s @ require.js:1
requirejs @ require.js:1
(anonymous) @ camunda-tasklist-bootstrap.js?bust=7.14.0:18
execCb @ require.js:1
check @ require.js:1
(anonymous) @ require.js:1
(anonymous) @ require.js:1
(anonymous) @ require.js:1
each @ require.js:1
emit @ require.js:1
check @ require.js:1
enable @ require.js:1
init @ require.js:1
a @ require.js:1
completeLoad @ require.js:1
onScriptLoad @ require.js:1
load (async)
req.load @ require.js:1
load @ require.js:1
load @ require.js:1
fetch @ require.js:1
check @ require.js:1
enable @ require.js:1
enable @ require.js:1
(anonymous) @ require.js:1
(anonymous) @ require.js:1
each @ require.js:1
enable @ require.js:1
init @ require.js:1
(anonymous) @ require.js:1
setTimeout (async)
req.nextTick @ require.js:1
s @ require.js:1
requirejs @ require.js:1
(anonymous) @ camunda-tasklist-bootstrap.js?bust=7.14.0:18
execCb @ require.js:1
check @ require.js:1
(anonymous) @ require.js:1
(anonymous) @ require.js:1
(anonymous) @ require.js:1
each @ require.js:1
emit @ require.js:1
check @ require.js:1
enable @ require.js:1
init @ require.js:1
a @ require.js:1
completeLoad @ require.js:1
onScriptLoad @ require.js:1
load (async)
req.load @ require.js:1
load @ require.js:1
load @ require.js:1
fetch @ require.js:1
check @ require.js:1
enable @ require.js:1
enable @ require.js:1
(anonymous) @ require.js:1
(anonymous) @ require.js:1
each @ require.js:1
enable @ require.js:1
init @ require.js:1
(anonymous) @ require.js:1
setTimeout (async)
req.nextTick @ require.js:1
s @ require.js:1
requirejs @ require.js:1
(anonymous) @ camunda-tasklist-bootstrap.js?bust=7.14.0:18
execCb @ require.js:1
check @ require.js:1
(anonymous) @ require.js:1
(anonymous) @ require.js:1
(anonymous) @ require.js:1
each @ require.js:1
emit @ require.js:1
check @ require.js:1
enable @ require.js:1
init @ require.js:1
a @ require.js:1
completeLoad @ require.js:1
onScriptLoad @ require.js:1
load (async)
req.load @ require.js:1
load @ require.js:1
load @ require.js:1
fetch @ require.js:1
check @ require.js:1
enable @ require.js:1
enable @ require.js:1
(anonymous) @ require.js:1
(anonymous) @ require.js:1
each @ require.js:1
enable @ require.js:1
enable @ require.js:1
(anonymous) @ require.js:1
(anonymous) @ require.js:1
each @ require.js:1
enable @ require.js:1
init @ require.js:1
(anonymous) @ require.js:1
setTimeout (async)
req.nextTick @ require.js:1
s @ require.js:1
requirejs @ require.js:1
(anonymous) @ camunda-tasklist-bootstrap.js?bust=7.14.0:18
require.js:1 Uncaught Error: Script error for “custom-ng-module”
Common Errors
at makeError (require.js:1)
at HTMLScriptElement.onScriptError (require.js:1)

So I want to find out what is going wrong there. Any help will be appreciated!

Hi @Georgy,

Could you please share both your script.js and config.js files

Here are the files:

script.js:

'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'
    }
  }
};

Hi @Georgy,

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?

Hi @Georgy,

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)?

1 Like