After completing a user task, I see nothing in the next one

Hi @kristin and to everyone else.

I have completed my 1st user task form in Tasklist but for some reason, I see nothing in the next one. :confused:
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 screenshot of my 1st task form

The screenshot of my 2nd task form

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.

Thanks,
Steve

Is there any errors in the browser console?

if you print out the variable item are all your values there?

Hi @steftriant,

please check the process variables of your running process instance in cockpit. Do you see the item variable?

Cheers
kristin

Hi @StephenOTT.

What do you mean exactly when you say to check for errors in the browser console and how can I print the variable “item”?

Thanks,
Steve

Hi kristin.

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.

When I log in with the credentials of my 1st user

When I log in with the credentials of my 2nd user

How can I check and see my process variables here?

Thank you,
Steve

Hi @steftriant,

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

camForm.on('submit', function(evt) {
  if (item.length<1) {
    camForm.variableManager.createVariable({
      name:'item',
      type:'json',
      value:item
    });

    evt.submitPrevented = true;
  }

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?

Cheers
kristin

Hi again @kristin.

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 :confused:
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>

Can you see something wrong in this code?

Thank you,
Steve

Hi @kristin and to everyone else.

The issue with the fetching of the values of my created ‘json’ variable “item” is now over :slightly_smiling_face:
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. :confused:
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>

Can anyone help me on this?

Thank you and merry Christmas
Steve

Hi again.

This issue is also now over :slightly_smiling_face:

Steve