Error while adding custom scripts into Tasklist

Georgy · January 12, 2021, 11:51am

Hello there!
I am trying to add a custom script according to this example: https://docs.camunda.org/manual/latest/webapps/tasklist/configuration/#custom-scripts
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”
https://requirejs.org/docs/errors.html#scripterror
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!

hassang · January 12, 2021, 2:46pm

Hi @Georgy,

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

Georgy · January 13, 2021, 7:14am

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

hassang · January 13, 2021, 3:34pm

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.

github.com

camunda/camunda-bpm-platform/blob/master/webapps/package.json

{
  "name": "camunda-bpm-webapp",
  "private": true,
  "version": "7.15.0-SNAPSHOT",
  "gruntConfig": {
    "connectPort": 8020,
    "livereloadPort": 8021,
    "welcomeBuildTarget": "target/webapp/app/welcome",
    "welcomeSourceDir": "ui/welcome/client",
    "adminBuildTarget": "target/webapp/app/admin",
    "adminSourceDir": "ui/admin/client",
    "cockpitBuildTarget": "target/webapp/app/cockpit",
    "cockpitSourceDir": "ui/cockpit/client",
    "tasklistBuildTarget": "target/webapp/app/tasklist",
    "tasklistSourceDir": "ui/tasklist/client",
    "pluginBuildTarget": "target/webapp/plugin",
    "pluginSourceDir": "ui",
    "libTargetDir": "target/webapp/lib",
    "commonsUiDir": "./camunda-commons-ui",
    "enTranslationDir": "node_modules/camunda-webapp-translations"

This file has been truncated. show original

Georgy · January 14, 2021, 9:17am

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?

hassang · January 14, 2021, 10:19am

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