Hi @kristin and sorry for my delayed response.
First of all, thank you for the interest.
I saw what you wrote, I ran again my process and I have to point out the following:
1.) I deleted what you indicated and is ok now.
2.) I deleted also the “required” attribute from the file input field and is now also ok.
3.) I can’t understand exactly what you mean here. Each “item” is represented by 4 other variables in my task form (Category, Brief Description, Detailed Description, Price) and the user must insert values for all of these variables so as to add a new item in the table.
4.) I will check that when I submit the form in order to see or edit the submitted values in the next user task form of my process.
5.) I can’t understand what you mean by saying “add the ‘add row’ into an own form”. Have I to create another form?
6.) I will try to add a span element “x” for each of the file input field and to give it a ng-click directive (but later as you suggested).
7.) I have inserted an inline style sheet (by adding the “style” attribute in order to apply a unique width for these 2 input form fields (“Brief Description”, “Price”) in the HTML section of my code but as you can see in the following screenshot, the width of the cells didn’t change.
I also uploaded again my whole code (with very slight modifications in comparison to the above one) in case you want to check something and the BPMN file of my whole process diagram. This form corresponds to the first user task in my process.
<form role="form">
<script cam-script type="text/form-script">
var item = $scope.item = []; // Custom JavaScript creates a JavaScript Object and binds it to the angular $scope of the form as a variable named "item".
$scope.addItem = function () { // We make a function named "addItem".
var item = {}; // We add a new "item" to the Array.
item.Category = $scope.Category;
item.BriefDescription = $scope.BriefDescription;
item.DetailedDescription = $scope.DetailedDescription;
item.Price = $scope.Price;
$scope.item.push(item); // We use the value of the "item" input field to add a new "item" to the Array.
$scope.Category = ""; // We clear the TextBox "Category".
$scope.BriefDescription = ""; // We clear the TextBox "BriefDescription".
$scope.DetailedDescription = ""; // We clear the TextBox "DetailedDescription".
$scope.Price = ""; // We clear the TextBox "Price".
};
$scope.removeItem = function (index) { // We make a function named "removeItem".
var category = $scope.item[index].Category; // We find the record using "index" from the Array.
$scope.item.splice(index, 1); // We use an index to remove an "item" from the Array.
}
camForm.on('form-loaded', function() { // We hook into the lifecycle of Camunda SDK JS Form.
camForm.variableManager.createVariable({ // We create (declare) a 'json' variable named 'item' in the "variableManager".
name:'item',
type:'json',
value:item
});
});
camForm.on('submit', function(evt) { // We hook into the lifecycle of Camunda SDK JS Form.
if (item.length<1) { // If no item is added,
evt.submitPrevented = true; // an event handler prevents the submit from being executed by setting the property "submitPrevented" to "true".
}
});
</script>
<h2>My List of Items</h2>
<div>
<table> <!-- An HTML table is populated from the JSON Array "item" using the "ng-repeat" directive. -->
<tr> <!-- Each row of the table consists of 4 HTML Input Form fields and a button. -->
<th>Category</th>
<th style="width:350px;">Brief Description</th>
<th>Detailed Description</th>
<th style="width:150px;">Price</th>
<th></th>
</tr>
<tbody ng-repeat="x in item track by $index"> <!-- An "ng-repeat" directive is assigned to each row of the table in order to repeat all the "items" of the JSON Array. -->
<tr>
<td><input type="text" value="{{x.Category}}" /></td>
<td style="width:350px;"><input type="text" value="{{x.BriefDescription}}" /></td>
<td><input type="file"
cam-variable-name="DetailedDescription"
cam-variable-type="File"
cam-max-filesize="10000000" value="{{x.DetailedDescription}}" /></td>
<td style="width:150px;"><input type="text" value="{{x.Price}}" /></td>
<td><input type="button" ng-click="removeItem($index)" value="Remove" /></td> <!-- An "ng-click" directive is assigned to the button and calls the function named "removeItem" with the current "$index" when button is clicked. -->
</tr>
</tbody>
<tfoot>
<tr>
<td><input type="text" ng-model="Category" required /></td>
<td style="width:350px;"><input type="text" ng-model="BriefDescription" required /></td>
<td><input type="file"
cam-variable-name="DetailedDescription"
cam-variable-type="File"
cam-max-filesize="10000000" ng-model="DetailedDescription" /></td>
<td style="width:150px;"><input type="text" ng-model="Price" required /></td>
<td><input type="button" ng-click="addItem()" value="Add" /></td> <!-- An "ng-click" directive is assigned to the button and calls the function named "addItem" when button is clicked. -->
</tr>
</tfoot>
</table>
</div>
</form>
For some reason, my code snippet isn’t displayed but @thorben had edited my previous one to display it in this post.
Electronic Equipment Competitions.bpmn (20.5 KB)
Thanks a lot again.
Cheers,
Steve