Error:Not Found while trying to use Custom Scripts

Hello!

I have tried running the example which is mentioned here: https://docs.camunda.org/manual/7.3/guides/user-guide/#tasklist-customizing-custom-scripts

I’ve modified the ui/tasklist/client/scripts/config/config.js file to include the custom angular module:

...
customScripts: {
      // names of angular modules defined in your custom script files.
      // will be added to the 'cam.tasklist.custom' as dependencies
    ngDeps: ['my.custom.module'],

    // RequireJS modules to load.
    deps: ['custom-ng-module'],
    // RequreJS path definitions
    paths: {
      'custom-ng-module': 'custom-ng-module/script'
    }
  },
...

Then I’ve created the custom-ng-module folder under ui/tasklist/client/scripts and placed the script.js file there:

/* eslint-disable no-undef */
(function() {
  '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;
  });
}());

* I had to adjust the file due to ESLINT warnings (but that doesn’t matter, since the original file in the instructions also gives the same error.

Then I ran mvn clean install -> mvn jetty:run -Pdevelope and grunt.
When I try to access the tasklist I get this error:

GET http://localhost:8080/camunda/app/tasklist/custom-ng-module/script.js?bust=7.7.0-SNAPSHOT-1494173452294 404 (Not Found)
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
19:12:17.162 require.js:1 Uncaught Error: Script error for "custom-ng-module"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:1)
    at HTMLScriptElement.onScriptError (require.js:1)
makeError @ require.js:1
onScriptError @ require.js:1

and …

Uncaught Error: Script error for "custom-ng-module"
http://requirejs.org/docs/errors.html#scripterror
    at makeError (require.js:1)
    at HTMLScriptElement.onScriptError (require.js:1)
makeError @ require.js:1
onScriptError @ require.js:1

I’ve searched for the script.js file and it isn’t there… Any ideas what I am doing wrong?

Thanks in advance!!

Hi,

custom scripts are normally used to extend the functionality of the distributed webapp. So instead of cloning the git repository and running mvn clean install and grunt, you can just download the distribution here and follow the steps from the documentation. No need to compile anything :slight_smile:

Does that help you?

Cheers
Sebastian

1 Like

Hello @sebastian.stamm ,

Thanks for your quick reply. I don’t think I quite follow what you mean. I’m trying to modify the Camunda Bpm Webapp distribution located here: https://github.com/camunda/camunda-bpm-webapp

I’ve performed everything that is mentioned in the link you provided, and then I want to test out the changes, but I get the errors I specified above. Maybe I can explain a bit better, if you ask some questions…

Thanks and kind regards,
Deniss

Hi Deniss,

the Github repository contains the source code of the Camunda Webapp. In general, you can of course check that out and make changes to the source code there. But that can lead to problems if you ever want to upgrade Camunda to a newer version.

Imagine you check out the current version and implement what you want to add directly in this source code. At the same time, we also make changes. You would then have to merge your version with the new version, which can cause some trouble.

So instead, you can download a pre-packed distribution, which contains the already compiled source code as well as the documented extension points like plugins and custom scripts. You can extend the webapp by using these extension points. Then, when a new version is released, just replace the pre-packed distribution and continue using your extensions. As the interface - plugins and custom scripts - stays the same, you don’t run into merge conflicts.

What can you do now? I would recommend just downloading the Tomcat distribution from the download link I posted earlier, extract it, putting your scripts.js file in server/apache-tomcat-SOME_VERSION/webapps/camunda/app/tasklist/scripts/custom-ng-module and updating the config.js file you will find in server/apache-tomcat-SOME_VERSION/webapps/camunda/app/tasklist/scripts/config.js. There is a script in the root of the distribution, which you can use to start camunda.

Let me know if anything is unclear or does not work :slight_smile:

Cheers
Sebastian

1 Like

@sebastian.stamm

Hi Sebastian,

Thanks for your thorough explanation! I will try it out and let you know of the outcome. Thanks for spending time to explain :slight_smile:

Kind regards,
Deniss

@sebastian.stamm everything worked like a charm!!! Thank you :slight_smile:

1 Like