Using JavaScript Libraries in Embedded Forms

[dominik@föhl-online.de]

Hi,

I just started to use camunda for a little project. In that project i dynamically call a web service with the help of its wsdl file. To make the BPMN-Modelers job easier, I want to use the UI-Control metawidget (http://metawidget.sourceforge.net/) which dynamically generates the UI.
So far my approach was, to include the JavaScript library of metawidget in an embedded form. But this doesn't work, my guess is, that the javascript file isn't loaded.

Is this approach currently possible? If not, what is the suggested way to include a JavaScript library?

Kind Regards,
Dominik

[Sebastian Stamm]

Hi Dominik,

you should not include a Javascript library in an embedded form. The reason for this is, that the library would be loaded whenever a user accesses such a form. If you complete multiple tasks in a session, you would have included the library multiple times.

Also, as you have noticed, you can not use the library in the initial rendering of the form as it is loaded asynchronously.

If you want to add a third party library to the tasklist, have a look at the customization section in the documentation[1]. This feature is introduced with one of the latest 7.3.0-alpha builds.

Cheers

Sebastian

[1]: http://docs.camunda.org/latest/guides/user-guide/#tasklist-customizing-custom-scripts

[dominik@föhl-online.de]

Hi Sebastian,

thanks for the advice. Finally I got it working.
But the user guide and the documentation in the config.js are inconsistent. The code snippet in the user guide includes a "modules.export" which isn't available.

Also I had some problems using the "S" function to deserialize a JSON string, I switched over to using JavaScripts "JSON.parse()", which worked fine.

If anyone else tries to use metawidget in an embedded form, here are the neccesary steps:

1. Moddify %CAMUNDA_HOME%/app/tasklist/scripts/config.js to include:
customScripts: {
ngDeps: [
"metawidget"
],
deps: [
"metawidgetcore",
"metawidgetajs"
],
paths: {
"metawidgetajs": "metawidget/metawidget-angular.min",
"metawidgetcore": "metawidget/metawidget-core.min"
}
}

2. Download "metawidget-core.min.js" and "metawidget-angular.min.js" and put them in "%CAMUNDA_HOME%/app/tasklist/scripts/metawidget"

3. Create your embedded form like this one, remember to change the forms name, aswell as the variable which contains the JSON data:
<form name="FORMNAME">
<script cam-script="" type="text/form-script">
camForm.on('form-loaded', function()
{
camForm.variableManager.fetchVariable('JSONVAR');
});

camForm.on('variables-fetched', function() {
$scope.mwdata= JSON.parse(camForm.variableManager.variable('JSONVAR').value);
});
</script>
<metawidget ng-model="mwdata"/>
</form>

( 4. Maybe some cleanup on the JSON is necessary, in my case, the Object was encapsulated in an array, so I've added an arrayindex e.g. "ng-model="mwdata[0]"")