Is it possible to externalize cam-script?

Hi there,

I’m using embedded task forms which contain some cam-script to load variables. Like this:

<script cam-script type="text/form-script">

   camForm.on('form-loaded', function() {
      camForm.variableManager.fetchVariable('name');
      ...
   });

</script>

Since I mainly load the same variabes in each form, this code is duplicated in each form.

So my question is if there is any possibility to externalize these script like I would do with “usual” javascrip.

I tried

<script cam-script type="text/form-script" src="cam-script.js" />

but this did not work.

Cheers,
Frank

I have not found a good way to re-use boiler-plate code like that myself.
The forms I had to create where all very complex so just like you I had no use for the provided cam-directives.

The result is that in some forms I have up to 700 lines of cam-script code of which roughly a third boiler-plate code. (fetching, assigning, submitting variables myself.)

It would be nice to hear from the guys or girls from Camunda how they tackle this. Or just roll with the punches as I do.

1 Like

Hi @Frank_Bitzer, @nvanbelle,

forms in general will be executed in browser as any other web page. Which means that you can just load your scripts asynchronously from whatever storage. That does not mean though that they will be loaded and executed in a proper point of time as expected by the cockpit.

If you do write vast amounts of JS code, which should also be reusable, I would assume that you could just extend camunda-bpm-sdk-js with your custom functions/objects in order to ease maintenance. You can fork that project from here https://github.com/camunda/camunda-bpm-sdk-js.

Does that help you?
Askar.

Hi @aakhmerov,

The fetching, storing and submitting of specific variables for one specific process are not something I believe should be added to the camunda-sdk as it is too specific. If I need to fetch, assign and submit the same 10 variables over and over again in all of my complex forms of 1 specific process, would there be any alternative approach?

My guess is there isn’t any due to the whole Camunda form lifecycle. Dealing with this can be done as you say in a fork, but it is a personal choice not to do so as I don’t want to get attached too much to specific release versions.

1 Like

@nvanbelle could you deploy the boiler plate code as part of a external JS file in the deployment, and then load the js file by calling it as a REST call to get the binary file from the camunda deployment? So you would still have some boiler plate, but it would be the loading our your external files content from the js files in the deployment.

Thoughts?

Hi has there been any development on this?

I think its a fundamental issue if you’re developing forms for the cockpit as there is no real way to unit test your form scripts. As the OP has complex forms (as do I) the only way I can test them is either manually through the cockpit or via something like selenium. This is very time consuming particularly if you are trying to test a form at the end of your process!

Is there no way of modularising the forms and be able to test them in isolation as there is a lot of code duplication.

Anybody found a workaround for the topic starter’s problem? I also have a lot of duplicate code because of inability to externalise the cam-script…

Any updates on this topic. I face the same issue .

1 Like

You can directly import your script ?

I tried like this and it worked example :

I put my external script cam-script.js inside this folder

/META-INF/resources/js/cam-script.js

i can access it http://localhost:8080/js/cam-script.js

inside Html/Form you have to mention

<head> <script src="/js/cam-script.js"></script> </head>

If this doesn’t work and more of cam-script related work is there then i don’t think so we can do it , we have to write inline

May be this can help

myForm.html

<script cam-script type="text/form-script">
	alert("parent-cam-script");
	includeFunction(camForm);
</script>

and the include: header-include.html

<script>
	includeFunction = function(camForm) {
  camForm.on('form-loaded', function() { 
          // mention your logic here
    } );
}	</script>