I have completed my 1st user task form in Tasklist but for some reason, I see nothing in the next one.
I uploaded 2 screenshots (one for each task form) and the whole code of my 2nd one (where I see nothing when page loads) in case anyone could help me of course.
The code snippet (with some comments) for my 2nd task form
<form role="form" name="selectionForm">
<script cam-script type="text/form-script">
camForm.on('form-loaded', function() { // The variable 'item' has not been loaded (fetched) from the server yet.
camForm.variableManager.fetchVariable('item'); // We tell the "Form SDK" to fetch the 'json' variable named 'item'.
});
camForm.on('variables-fetched', function() { // The variable 'item' has been loaded (fetched) from the server
$scope.item = camForm.variableManager.variableValue('item'); // and is bound to the current AngularJS $scope of the form.
});
$scope.isVisible = false; // We use the Boolean variable "isVisible" and set it initially to "false" so as to hide the "numeric" field element when page loads.
$scope.ShowHide = function () { // We make an expression (function) named "ShowHide" which gets called when a checkbox is clicked.
$scope.isVisible = $scope.ShowQuantity; // The value of the "isVisible" variable is reversed inside the function.
}
</script>
<h2>My List of Choices</h2> <!-- We set the heading of the HTML Table. -->
<div>
<table style="width:100%;">
<thead>
<tr>
<th style="width:140px;">Category</th>
<th style="width:305px;">Brief Description</th>
<th style="width:250px;">Detailed Description</th>
<th style="width:75px;" >Price</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="x in item track by $index">
<tr>
<td><input style="width:140px;" type="text" value="{{x.Category}}" readonly /></td>
<td><input style="width:305px;" type="text" value="{{x.BriefDescription}}" readonly /></td>
<td><input style="width:250px;" type="file" value="{{x.DetailedDescription}}" readonly /></td>
<td><input style="width:75px;" type="text" value="{{x.Price}}" readonly /></td>
<td><input type="checkbox" ng-model="ShowQuantity" ng-change="ShowHide()"
cam-variable-name="isItemSelected"
cam-variable-type="Boolean" /></td> <!-- The "ng-change" directive is assigned to the checkbox which is bound to the variable named "isItemSelected" of type "Boolean". -->
</tr>
</tbody>
</table>
<div ng-show="isVisible"> <!-- The value of the "ng-show" directive is set using the variable "isVisible". -->
Quantity:<input style="width:60px;" type="number"
cam-variable-name="quantity" min="1"
cam-variable-type="Integer" />
</div>
</div>
</form>
To be more clear, I want to display all the added values of the Table of the 1st task form in the 2nd one, but nothing appears.
I would be grateful if anyone could help me on this.
I uploaded again 2 screnshots of what I see when I log in the cockpit with the credentials of my users who are assignees for the 1st and the 2nd task respectively because I can’t understand exactly what you mean here.
your screenshots display the tab Variables which I mean.
In this tab, you see all variables of your running process instance. When you submit your user task form Configure specifications and items, you create a new process variable item with the below code in the user task form
But, I can’t find this variable in the screenshots. This means, there is a problem in your code during submitting the user task form.
Do you already create the process variable item in your task form?
I understood what you mean.
To tell you the truth, with my previous code for my 1st task form, I could fetch the values of my variable “item”. This problem occured with my new code for the 1st task form. I suppose that the problem has to do with the creation of my json variable “item” but I took this piece of code from your uploaded file in my other topic (Some malfunctions in my user task form) if you remember
For this reason, I also uploaded the code for my 1st task form to help you.
<form role="form" name="itemForm">
<script cam-script type="text/form-script">
var item = $scope.item = []; // Custom JavaScript creates a JavaScript Object and binds it to the current AngularJS $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;
if (!!$scope.camForm.fields[0].element[0].files[0]) {
item.DetailedDescription = $scope.camForm.fields[0].element[0].files[0].name; // We check whether a file is uploaded.
} else {
return; // If no file is uploaded, it returns "undefined".
}
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.
}
$scope.isAddFormValid = function () { // We make an expression (function) named "isAddFormValid".
return ($scope.Category &&
$scope.BriefDescription &&
$scope.camForm.fields[0].element[0].files[0] &&
$scope.Price) ? true : false; // If the variable "item" is added, the value will be "true", otherwise the value will be "false".
}
camForm.on('submit', function(evt) { // We hook into the lifecycle of Camunda SDK JS Form. The "submit" request of the form has not been sent to the server yet.
if (item.length<1) { // If no "item" is added.
camForm.variableManager.createVariable({ // We create (declare) a 'json' variable in the "variableManager"
name:'item', // named 'item'.
type:'json',
value:item
});
evt.submitPrevented = true; // We set the property value to "true" to prevent the "submit" from being executed.
}
});
</script>
<h2>My List of Items</h2> <!-- We set the heading of the HTML Table. -->
<div>
<table style="width:100%;"> <!-- The HTML Table is populated from the JSON Array "item" using a "ng-repeat" directive. -->
<thead> <!-- We group the header content in the HTML Table. -->
<tr> <!-- Each row of the Table consists of 4 HTML Input Form fields and a button. -->
<th style="width:140px;">Category</th>
<th style="width:305px;">Brief Description</th>
<th style="width:250px;">Detailed Description</th>
<th style="width:75px;" >Price</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="x in item track by $index"> <!-- A "ng-repeat" directive is assigned to each row of the HTML Table in order to repeat all the objects of the JSON Array "item". -->
<tr>
<td><input style="width:140px;" type="text" value="{{x.Category}}" readonly /></td>
<td><input style="width:305px;" type="text" value="{{x.BriefDescription}}" readonly /></td>
<td><input style="width:250px;" type="text" value="{{x.DetailedDescription}}" readonly /></td>
<td><input style="width:75px;" type="text" value="{{x.Price}}" readonly /></td>
<td><input type="button" ng-click="removeItem($index)" value="Remove" /></td> <!-- The "ng-click" directive is assigned to the button and calls the function named "removeItem" with the current "$index" when button is clicked. -->
</tr>
</tbody>
</table>
</div>
<hr> <!-- We separate the HTML content. -->
<div>
<h2>Add a new Item</h2> <!-- We set the heading of the HTML Form. -->
<div class="row"> <!-- We set the "1st row" of the HTML Form. -->
<div class="col-md-6"> <!-- We use "md" for "medium" screen devices of width equal to or greater than 992px and "6" for adding 6 columns. -->
<div class="form-group"> <!-- We use "form-group" for optimum spacing. -->
<label class="control-label" for="category">Category</label>
<div class="controls">
<input style="width:140px;" id="category" type="text" ng-model="Category" /> <!-- The "ng-model" directive binds the value of the "Category" input field to the created variable "Category" in AngularJS. -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="briefDescription">Brief Description</label>
<div class="controls">
<input style="width:305px;" id="briefDescription" type="text" ng-model="BriefDescription" /> <!-- The "ng-model" directive binds the value of the "Brief Description" input field to the created variable "BriefDescription" in AngularJS. -->
</div>
</div>
</div>
</div>
<div class="row"> <!-- We set the "2nd row" of the HTML Form. -->
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="detailedDescription">Detailed Description</label>
<div class="controls">
<input style="width:250px;"
id="detailedDescription"
type="file"
cam-variable-name="DetailedDescription"
cam-variable-type="File"
cam-max-filesize="10000000" ng-model="DetailedDescription" /> <!-- The "ng-model" directive binds the value of the "Detailed Description" input field to the created variable "DetailedDescription" in AngularJS. -->
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label" for="price">Price</label>
<div class="controls">
<input style="width:75px;" id="price" type="text" ng-model="Price" /> <!-- The "ng-model" directive binds the value of the "Price" input field to the created variable "Price" in AngularJS. -->
</div>
</div>
</div>
</div>
<div class="row"> <!-- We set the "3rd row" of the HTML Form. -->
<div class="col-md-4"> <!-- We use "md" for medium screen devices of width equal to or greater than 992px and "4" for adding 4 columns. -->
<div class="controls">
<input type="button" ng-click="addItem()" ng-show="isAddFormValid()" value="Add" /> <!-- The "ng-show" directive shows the "input" element only if the "isAddFormValid()" expression (function) returns "true". The "ng-click" directive is assigned to the button and calls the function named "addItem" when button is clicked. -->
</div>
</div>
</div>
</div>
</form>
The issue with the fetching of the values of my created ‘json’ variable “item” is now over
The problem (as I had correctly supposed) was the piece of code for the creation of the variable.
But, I would like to show/hide (toggle) an extra input field every time the user clicks on the corresponding checkbox of the table. For some reason, I can’t display this input field next to every row of my table.
I also uploaded my relative code based on this tutorial example https://www.aspsnippets.com/Articles/AngularJS-CheckBox-Show-Hide-Toggle-HTML-DIV-on-CheckBox-click-using-ng-show-and-ng-change.aspx
<form role="form" name="selectionForm">
<script cam-script type="text/form-script">
camForm.on('form-loaded', function() { // The variable 'item' has not been loaded (fetched) from the server yet.
camForm.variableManager.fetchVariable('item'); // We tell the "Form SDK" to fetch the 'json' variable named 'item'.
});
camForm.on('variables-fetched', function() { // The variable 'item' has been loaded (fetched) from the server
$scope.item = camForm.variableManager.variableValue('item'); // and is bound to the current AngularJS $scope of the form.
});
$scope.isVisible = false; // We use the Boolean variable "isVisible" and set it initially to "false" and hence the "numeric" input field element is hidden when page loads.
$scope.ShowHide = function () { // We make a function named "ShowHide" which gets called when a checkbox is clicked.
$scope.isVisible = $scope.ShowQuantity; // The value of the "isVisible" variable is reversed inside the function.
}
</script>
<h2>My List of Choices</h2> <!-- We set the heading of the HTML Table. -->
<div>
<table style="width:100%;">
<thead>
<tr>
<th style="width:140px;">Category</th>
<th style="width:305px;">Brief Description</th>
<th style="width:250px;">Detailed Description</th>
<th style="width:75px;" >Price</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="x in item track by $index">
<tr>
<td><input style="width:140px;" type="text" value="{{x.Category}}" readonly /></td>
<td><input style="width:305px;" type="text" value="{{x.BriefDescription}}" readonly /></td>
<td><input style="width:250px;" type="file" value="{{x.DetailedDescription}}" readonly /></td>
<td><input style="width:75px;" type="text" value="{{x.Price}}" readonly /></td>
<td><input type="checkbox" ng-model="ShowQuantity" ng-change="ShowHide()"
cam-variable-name="isItemSelected"
cam-variable-type="Boolean" /></td> <!-- The "ng-change" directive is assigned to checkbox which is bound to the variable named "isItemSelected" of type "Boolean". -->
<td ng-show="isVisible">Quantity:<input style="width:60px;" type="number"
cam-variable-name="quantity" min="1"
cam-variable-type="Integer" /></td> <!-- The value of "ng-show" directive is set using the variable "isVisible". -->
</tr>
</tbody>
</table>
</div>
</form>