Dynamic Form generation

Camunda 7 Topics Discussion & Questions
1

Hello everybody,
I’m new with camunda and i’m facing some problems.

This is my question : How can i generate checkbox dynamically from a list of String.

Use Case :
Example 1 : I have 5 options so i have to get 5 checkox in my form
Example 2 : I have 2 options so i have to get 2 checkbox in my form

Thank yoy very much

2

Hi, thanks for the question.
It is not clear what the Camunda is doing here. If you need to generate new interface elements, then using JS it is done like this:
< script >
var articleDiv = document.querySelector("div.article");
var elem = document.createElement("h2");
var elemText = document.createTextNode("Hello, world!!!");
elem.appendChild(elemText);
articleDiv.appendChild(elem);
</ script >

If you want to read some variables from the backend to the front-end, then this code will do it (adapt it to your own conditions):

<script cam-script type="text/form-script">
var variableManager = camForm.variableManager;

    camForm.on('form-loaded', function() {
      variableManager.fetchVariable('variable_from_cam');
      window.request = variableManager.variables.request;
    });

    camForm.on('variables-fetched', function() {
      var your_variable = variableManager.variableValue('variable_from_cam');
      operation_with_your_variable(your_variable);
    });
</script>
3

Thank you Arthur for your answer.

Can you give me more details please ( i’m not good with html js), if you can give me html form with more details.

Thank you

4

I did speak somewhat superficially at first. Here is a simple example of dynamic widget generation that is fully compatible with the Camunda. The forum does not allow you to upload a file *.html separately, so copy this code to “test.html” and test it.

<script type="text/javascript">
	var countInput = 1;
    function addser()
    {
	//Defining the element where we will place widgets
      var form = document.getElementById('dinamic'); 

	//Generating (so far programmatically) widgets that will be added to the form
      var checkB = document.createElement("input");
      var br = document.createElement("br");
      
	//We set the parameters we need for each widget
      checkB.id = "checkbox_" + countInput;
      checkB.type = "checkbox";
   //I recommend this format for recording parameters, because it will add absolutely any tag
      checkB.setAttribute("any_tag", "any_value");

	//Adding widgets to the form
      form.appendChild(checkB);
      form.appendChild(br);

      countInput++;
      
    }
</script>
<form role="form" name="form">
    <div class="control-group">
    	<input type="button" id = "usadd" onclick="addser()" value = "Add widget">
    	<div id = "dinamic"></div>
  	</div>
</form>

Good luck!

5