Generate input fields dynamically in embedded forms

BPMN & Modeling Discussion & Questions
1

Hi everyone,

I’m working with camunda embedded forms (version 7.8) and I need to generate input fields based on a number selected from a combo box.
Let’s say I choose 5 in the combo-box (not more than that) and then the form generates 5 input fields.
I tried doing it working only with javascript code that I found but It didn’t work. I wouldn’t mind using angular js as well…

Any ideas ?

regards,
Christian.

3

So is the issue just the specific Js to write ? Or are you wondering if it is possible?

4

Thanks ! @StephenOTT,
would you have any example where I could see ?
It doesn’t need to be in JS, if angular works then that would be fine.

5

For angular I would be looking to do something like: https://angular.io/api/common/NgIf. Where you are doing a show /hide based on your form field values.

Edit: or actually likely more like: https://stackoverflow.com/questions/28489972/multiple-inputs-based-on-array

Based on your specific use case: if someone is selecting a count of fields they want, you are basically doing a ng-repeat based on the value in your first field

6

Thanks again @StephenOTT, I’ll have a look then. I’m still learning angular so I guess it’s going take me a bit in solving it, I’ll let it know once I got it…

7

Hi @StephenOTT,
so, based on your answer:
“Based on your specific use case: if someone is selecting a count of fields they want, you are basically doing a ng-repeat based on the value in your first field”

I used an input field (instead of a combo) and with an ng-repeat directive tried to generate this amount of other input fields.
So when It’s running, I enter a value but nothing happens…I know something is missing.

Here follows the code I used…

This is the code in the script:

var dataProduct= $scope.dataProduct ={

};

$scope.getNumber= function(num){
	return new Array(num);
}

camForm.on('form-loaded',function() {

	camForm.variableManager.createVariable({
		name: 'dataProduct',
		type: 'Object',
		value: dataProduct,
		valueInfo: {
		  serializationDataFormat: 'application/json',
		  objectTypeName: 'org.camunda.bpm.menini_nicola.mn_desarrollo_productoMN.model.Product'
		}
	});		

});

This is the code in the form:

<label for="PROVIDERS" class="control-label">Number of Providers *</label>
  <input id="idProvidersAmount"
  		 class="form-control" 
  		 type="text"
  		 required      		 
  		 ng-model="providersAmount"
  		 name="PROVIDERS" 
         maxlength=100>
 
<label for="PROVIDER" class="control-label">Provider *</label>
  <input ng-repeat="x in getNumber(providersAmount)"
  		 id="idProvider"
  		 class="form-control" 
  		 type="text"
  		 required      		 
  		 ng-model="dataProduct.provider"
  		 name="PROVIDER" 
         maxlength=100>

</div>

So I’m trying to generate as many input fields in “PROVIDER” as the value taken from the first input field “PROVIDERS” (I hope its clear)

Regards.

1 Like
8

thanks for sharing!!

9