How can I (display/hide) an html input form field by clicking on a checkbox of a table?

Camunda 7 Topics Discussion & Questions
,
1

Hi to everyone.

I have an html table with some submitted values from a previous task form and I want to (display/hide) an extra input field each time I click (select/unselect) on the respective checkbox of each table row.
My problem here is that the desired extra input field can not be displayed by clicking on the body section (my first 2 rows) of my table. In addition, by clicking (select/unselect) on the foot section of my table (my last row), I display/hide all the extra input fields (the last and the 2 previous ones).
I have found something relative here: AngularJS CheckBox: Show Hide (Toggle) HTML DIV on CheckBox click using ng-show and ng-change

I also uploaded my code (with some comments) and 2 screenshots in case anyone can help me:

Thank you :slightly_smiling_face:

<form role="form">
	<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;											// The value of the variable "IsVisible" is initially set to "false" and hence the HTML DIV is hidden when page loads.
		$scope.ShowHide = function () {										// We make a function named "ShowHide".
			$scope.IsVisible = $scope.ShowQuantity;							// Inside the "ShowHide" function the value of the variable "IsVisible" is reversed. 	
		}
	</script>
	<h2>My List of Choices</h2>
	<div>
		<table>
			<tr>
				<th>Category</th>
				<th>Brief Description</th>
				<th>Detailed Description</th>
				<th>Price</th>
				<th></th>
				<th></th>
			</tr>
			<tbody ng-repeat="x in item track by $index">
				<tr>
					<td><input type="text" value="{{x.Category}}" readonly="true" /></td>
					<td><input type="text" value="{{x.BriefDescription}}" readonly="true" /></td>
					<td><input type="file" value="{{x.DetailedDescription}}" readonly="true"
							   cam-variable-name="DetailedDescription"
							   cam-variable-type="File"
							   cam-max-filesize="10000000" /></td>
					<td><input type="text" value="{{x.Price}}" readonly="true" /></td>
					<td><input type="checkbox" ng-model="ShowQuantity" ng-change="ShowHide()"
		                       cam-variable-name="is_item_selected"
		                       cam-variable-type="Boolean"	/></td>
		            <td ng-show="IsVisible">Quantity: <input type="number" 
		            		                                 cam-variable-name="quantity" min="1"
		            		                                 cam-variable-type="Integer" /></td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td><input type="text" ng-model="Category"	readonly="true" /></td>
					<td><input type="text" ng-model="BriefDescription" readonly="true" /></td>
					<td><input type="file" ng-model="DetailedDescription" readonly="true"
							   cam-variable-name="DetailedDescription"
							   cam-variable-type="File"
							   cam-max-filesize="10000000" /></td>
					<td><input type="text" ng-model="Price" readonly="true" /></td>
					<td><input type="checkbox" ng-model="ShowQuantity" ng-change="ShowHide()"
							   cam-variable-name="is_item_selected"
							   cam-variable-type="Boolean" /></td>
					<td ng-show="IsVisible">Quantity: <input type="number"
							                                  cam-variable-name="quantity" min="1"
							                                  cam-variable-type="Integer" /></td>
				</tr>
			</tfoot>	
		</table>
	</div>
</form>

image
image1366×728 76.7 KB

image
image1366×728 77.9 KB

2

hi @steftriant how did you got this item ? i have used JavaDelegate Class for getting server response and then implementing it in my embedded html form like this:

var documentData = $scope.documentData = {
};

    // hook into camunda SDK JS Form Lifecycle
    camForm.on('form-loaded', function() {

     
      camForm.variableManager.createVariable({
        name: 'jsonObject1',
        type: 'json',
        value: jsonObject1,
        valueInfo: {
          // indicate that object is serialized as json
          serializationDataFormat: 'application/json',
        }
      });

    });

but it doesn’t works,can you share your experionce , how did you get this ‘item’ data?

3

Hi @Sally.
Thanks for your question.

If I understood correctly, your problem has to do with the fetching of your created json variable “jsonObject1”, all right? I haven’t done something special for that, I followed exactly this example on GitHub repository: https://github.com/camunda/camunda-bpm-examples/tree/master/usertask/task-form-embedded-json

You have to read carefully the 2nd section of the example which refers to the access on an existing json variable in aTask form, it’s very clear.

Hope this helps. :slightly_smiling_face:

Cheers,
Steven

4

Hi @steftriant
thank you for your response.
the case is that i can get and place appropriate values in my table or form when i use json , but when i use json Array for example i can’t fetch and process this data . According to your your example ‘item’ variable is json array and i want to know, how did you manage to fetch this ‘item’ variable

  1. did you use javaDeleagate or similar way to get servicie response data and declare it as an output variable, or this item variable is simply camVariable from previous form?
5

Hi @Sally.

You’re welcome. Yes, in my case, variable ‘item’ is a JSON Array as you said.
I didn’t use Java Delegate interface because my task was a user (not a service) task.
So, I simply fetched the created variable ‘item’ from my previous task to the next one exactly like my attached example from GitHub repository.

Cheers,
Steven

6