How to use external libraries in embedded forms (Tasklist)

[Marvin_Kehr]

Hi,

I would like to add a Markdown Editor to the start form of my BPMN process, therefore I want to use SimpleMDE) as external library.

These are the relevant lines of my embedded form:

<form role="form" class="form-horizontal" enctype="multipart/form-data">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

    <script cam-script type="text/form-script>
        var mde = new SimpleMDE({
            element: textarea
        });
        ...
    </script>
    ...
</form>

Now if I open Camunda Tasklist on a browser and start the process which uses the form above I get the error message:

Form failure: SimpleMDE is not defined

After going back to the process list and clicking again on the same process the Markdown Editor is now available.

It seems like this error comes from asynchronously fetching the library. But how can I make the MDE available in the first time opening the form?

Regards
Marvin

[hassang]

Hi @Marvin_Kehr,

Please have a look at below docs
https://docs.camunda.org/manual/7.10/webapps/tasklist/configuration/#custom-scripts

[Marvin_Kehr]

Hi @hassang,

thanks for your quick answer

I followed the instructions from the link, but grunt throws an error compiling my script.

‘define’ is not defined no-undef

This is my script:

'use strict';

define('MarkdownEditor', [
  'angular'
], function(angular) {

  var ngModule = angular.module('MDE', []);
  
  ngModule.controller('markdownEditorCtrl', [
'$scope',
'simplemde',
function(
      $scope,
      SimpleMDE
    ) {
      $scope.createMDE = function(textarea) {
        return new SimpleMDE({
          element: textarea
        });
      };
    }
  ]);
  
  return ngModule;
});

[hassang]

Hi @Marvin_Kehr,

You are writing angularjs controller which is something else.

Please see below old post…

How to define a custom script in config.js so I can use Google Maps

Hi @eugene, As google apis script is non-AMD script then use shim with exports config to specify the global ‘google.maps’ as module value deps: ['gmaps'], paths: { 'gmaps': 'https://maps.googleapis.com/maps/api/js?' }, shim: { 'gmaps' : {exports: 'google.maps'} } http://requirejs.org/docs/api.html#config-shim

[Marvin_Kehr]

Hi @hassang,

Unfortunately, I still get the same error message: SimpleMDE is not defined

My config.js:

window.camTasklistConf = {
  customScripts: {
    ngDeps: [],
    deps: ['simplemde'],
    paths: {
      'simplemde': 'https://cdn.jsdelivr.net/simplemde/latest/simplemde.min'
    },
    shim: {
      'simplemde': {
        exports: 'SimpleMDE'
      }
    }
  },
  code for some default shortcuts...
};

My embedded form:

<form role="form" class="form-horizontal" enctype="multipart/form-data">
  <script cam-script type="text/form-script">
    var mde = new SimpleMDE({
      element: textarea
    });
    ...
  </script>
  ...
</form>

Best regards
Marvin

[hassang]

Hi @Marvin_Kehr,

• Download simplemde.min.js file and put it in below path
  camunda\app\tasklist\scripts

• Create a new js file with below content, name it “loadSimpleMDE.js”

require( [‘simplemde’],
function(SimpleMDE) {
window.SimpleMDE = SimpleMDE;
}
);

• Change config.js as below

window.camTasklistConf = {
customScripts: {
ngDeps: ,
deps: [‘loadSimpleMDE’, ‘simplemde’],
paths: {
‘loadSimpleMDE’: ‘scripts/loadSimpleMDE’,
‘simplemde’: ‘scripts/simplemde.min’
}
},
code for some default shortcuts…
};

• Content of https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css should be added to user-styles.css in camunda\app\tasklist\styles

[Marvin_Kehr]

Hi @hassang,

thanks for your reply

I created both files and manually inject them into the camunda/app/tasklist/scripts folder during the runtime of the web application, because placing them under ui/tasklist/client/scripts/ in my project structure didn’t work.
I managed that the web application can detect the two script files, but I get almost the same error as before, now it is:

Form failure: simplemde is not defined instead of Form failure: SimpleMDE is not defined

Could it be that this error comes from the require statement of the loadSimpleMDE.js? Is the shim section in customScripts not necessary, because it is missing in your code snippet?

Regards
Marvin

Edit: I saw that the request of the loadSimpleMDE.js “failed” with a 304 “Not modifed” response, but don’t now what this means

[hassang]

Hi @Marvin_Kehr,
Js files should be placed in the deployed camunda web app under the specified path.
I tried the steps above… And the solution worked for me.

May we know the full path, where you are trying to place the js files?

[Marvin_Kehr]

Hi @hassang,

the full paths are:
/camunda/webapps/camunda/app/tasklist/scripts/simplemde.min.js and
/camunda/webapps/camunda/app/tasklist/scripts/loadSimpleMDE.js

Edit: Regarding the 304 response, I think I get this response because there is already an instance of the loadSimpleMDE.js file inside the cache.

[hassang]

May we see the config.js file?

[Marvin_Kehr]

The config.js file is exactly the same as the one you send.

[Marvin_Kehr]

@hassang

You created an embedded form and inside of it a SimpleMDE object? If yes, may I know the path to the embedded form file?

[hassang]

Did you remove the following 2 lines from your html form?

<link rel=“stylesheet” href=“https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css”> <script src=“https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js”></script>

[Marvin_Kehr]

Not removed but inside a comment

[hassang]

Sorry
Change the content of loadSimpleMDE.js to

require( [‘simplemde.min’],
function(SimpleMDE) {
window.SimpleMDE = SimpleMDE;
}
);

[Marvin_Kehr]

Hi @hassang,

it is still not working

Is your embedded form located in the camunda-bpm-webapp project? Because mine is located in an external process application project, maybe that’s the reason why it’s working on your side.

[hassang]

My embedded form is inside a process application…
What is the error now?

[Marvin_Kehr]

Still simplemde is not defined

I checked the network traffic in the developer console (F12) and saw that Camunda sends two request to get the simplemde.min.js

First request goes to: http://localhost:8080/camunda/app/tasklist/scripts/simplemde.min.js?bust=7.9.0
Second request goes to: http://localhost:8080/camunda/app/tasklist/simplemde.min.js?bust=7.9.0

First response: 200
Second response: 404, which make sense, because I only copied the simplemde.min.js to the scripts folder.

[hassang]

Hi @Marvin_Kehr
Sorry again
Try below content for loadSimpleMDE.js

require( [‘scripts/simplemde.min’],
function(SimpleMDE) {
window.SimpleMDE = SimpleMDE;
}
);

By the way, the content

require( [‘ simplemde ’],
function(SimpleMDE) {
window.SimpleMDE = SimpleMDE;
}
);

Should works “as simplemde has been defined as dependency in config.js” unless it has been executed before the content of config.js which I guess shouldn’t be the case since the config.js is the loader of loadSimpleMDE.js unless loadSimpleMDE.js is referenced somewhere else other than config.js

[Marvin_Kehr]

Hi @hassang,

I tried your code above, but still get the same error.
I don’t think loadSimpleMDE.js is referenced somewhere else, because I inject it during the runtime. If I remove the loadSimpleMDE from the scripts folder, I get an script error that Camunda cannot find the script “loadSimpleMDE” and therefore cannot instantiate the Tasklist. So it looks like config.js is working as it should.

I would like to send you all the files I have created or modified during our conversation, maybe you can have a look on them. In the end it was a typo from my side why it’s not working