HTML form selected drop down value not showing the same value in another task form

SuhaibSultan · January 15, 2018, 7:09am

Hi Team,

I have two user tasks. In one user task form the user will select the drop down value and complete.

The same value not reflecting in another task form. But while checking in rest api the data is showing correct.

Could you please suggest any thing need to be change in the form.

Regards,
Suhaib

kristin · January 15, 2018, 1:27pm

Hi @SuhaibSultan,

could you please share more details like BPMN process file, user task forms?

Cheers
kristin

SuhaibSultan · January 16, 2018, 7:35am

Hi Kristin,

Thanks for reply.

I am attaching bpmn and all htmls.

test.bpmn (3.9 KB)

Start.html

<html>
<head></head>
	<body>
		<form>
<div class="row headRowOne">
					<div class="col-md-3 form-group">

						<b class="nor_heading" for="CRMOrderNumber"> CRMOrderNumber</b> <br>
						<input type="text" class="form-control" cam-variable-type="String"
							cam-variable-name="CRMOrderNumber" name="CRMOrderNumber">

					</div>

					<div class="col-md-3">
						<b class="nor_heading" for="OrderType">OrderType</b> <br> <input
							type="text" class="form-control" cam-variable-type="String"
							cam-variable-name="OrderType" name="OrderType">
					</div>
			</div>
			</form>
		</body>
</html>

Index.html

<html>
<head></head>
	<style>
		option{
			color: black;
		}
	
	</style>
	<body>
		<form>
			<div class="row headRowOne">
					<div class="col-md-3 form-group">

						<b class="nor_heading" for="CRMOrderNumber"> CRMOrderNumber</b> <br>
						<input class="form-control" type="text" class="form-control"
							cam-variable-type="String" cam-variable-name="CRMOrderNumber"
							name="CRMOrderNumber" readonly="true">
					</div>
					<div class="col-md-3">
						<b class="nor_heading" for="OrderType">OrderType</b> <br> <input
							type="text" class="form-control" cam-variable-type="String"
							cam-variable-name="OrderType" name="OrderType" readonly="true">
					</div>
			</div>  
<div class="col-md-3 form-group">
						<b class="nor_heading">MW Tachnology</b><br> <select
							class="selectpicker" data-size="3"
							data-style="btn btn-primary text_heading" title="Single Select"
							style="color: white" cam-variable-name="ptmplos"
       						 cam-variable-type="String">
							<option class="text_sheading" disabled selected>Select
								one</option>
							<option class="text_heading" value="A">P2P</option>
							<option class="text_heading" value="B">P2MP</option>
							<option class="text_heading" value="B">All</option>
						</select>
					</div>
			</form>
		</body>
</html>

–

index2.html

<html>
<head></head>
	<body>
		<form>
<body>
		<form>
			<div class="row headRowOne">
					<div class="col-md-3 form-group">
						<b class="nor_heading" for="CRMOrderNumber"> CRMOrderNumber</b> <br>
						<input class="form-control" type="text" class="form-control"
							cam-variable-type="String" cam-variable-name="CRMOrderNumber"
							name="CRMOrderNumber" readonly="true">	</div>
	<div class="col-md-3">
	<b class="nor_heading" for="OrderType">OrderType</b> <br> <input
							type="text" class="form-control" cam-variable-type="String"
							cam-variable-name="OrderType" name="OrderType" readonly="true">
					</div>
			</div>  
<div class="col-md-3 form-group">
						<b class="nor_heading">MW Tachnology</b><br> <select
							class="selectpicker" data-size="3"
							data-style="btn btn-primary text_heading" title="Single Select"
							style="color: white" cam-variable-name="ptmplos"
       						 cam-variable-type="String">
							<option class="text_sheading" disabled selected>Select
								one</option>
							<option class="text_heading" value="A">P2P</option>
							<option class="text_heading" value="B">P2MP</option>
							<option class="text_heading" value="B">All</option>
						</select>
					</div>
			<div class="col-md-3">
						<b class="nor_heading" for="OrderType">Type</b> <br> <input
							type="text" class="form-control" cam-variable-type="String"
							cam-variable-name="Type" name="Type" >
					</div>
			</form>
		</body>
			</form>
		</body>
</html>

Appreciate your help.

Regards
Suhaib

kristin · January 16, 2018, 9:18am

Hi @SuhaibSultan,

you can’t see the value of the drop down because you set the color of the select element to white.

style="color: white"

Delete this and everything is fine.

A small hint, you have in your drop down two times value ‘B’.

Cheers
kristin

SuhaibSultan · January 16, 2018, 11:20am

Hi Kristin ,

I Changed that but it’s styling same but the Problem here if i select value (“C”) for example it should be come in the another form Value (“C”) . is showing value (“A”).

Regards
Suhaib Sultan

kristin · January 16, 2018, 12:13pm

Hi @SuhaibSultan,

please check yout open and close tags in the index2.html file.
After that, change cam-variable-name="ptmplos" to ng-model="ptmplos" in the drop down. Then you should see the right value.
I have no explanation for the change from cam-variable-name to ng-model…

Cheers
kristin

SuhaibSultan · January 18, 2018, 2:15pm

Hi Kristin,

Thanks for reply.

I tried with ng-model in index2.html. But it is not working.
My problem is in firstuser task i have selected dropdown, in the second task same dropdown what selected value in first task not showing. Only showing default values.
Could you please give me some example code.

Regards,
Suhaib

kristin · January 19, 2018, 8:35am

Hi @SuhaibSultan,

I have no idea why it is not working with cam-variable-name. But you can define the cam-script in your second form and then you have access with ng-model to the variable ptmplos.

Below, you can find the code for it.

<script cam-script type="text/form-script">
  camForm.on('form-loaded', function() {
    // tell the form SDK to fetch the variable named 'xxx'
    camForm.variableManager.fetchVariable('ptmplos');
  });
  camForm.on('variables-fetched', function() {
    // work with the variable (bind it to the current AngularJS $scope)
    $scope.ptmplos = camForm.variableManager.variableValue('ptmplos');
  });
</script>

Cheers
kristin

some-camunda-user · August 23, 2018, 11:29am

@SuhaibSultan Did you manage to find the cause of this? Sitting with the same issue and will hate to go and write scripts for each drop down.

some-camunda-user · August 23, 2018, 12:33pm

I have looked further into this, it seems the value of the camunda variable gets overridden by the first option in the list. I have additionally tried making use of cam-options created in javascript in the form-loaded event via:

					camForm.variableManager.createVariable({
						name: 'CARS',
						type: 'Object',
						value:  {
						'001': 'BMW',
						'002': 'VW',
						'003': 'Ford',
						'004': 'Mazda'
						},
						valueInfo: {
							serializationDataFormat: 'application/json',
							objectTypeName: 'java.util.HashMap'
						}
					});

And then in the HTML

					<select id="carTypes"
									cam-variable-name="SELECTED_CAR"
									cam-variable-type="String"
									cam-options="CARS"
							></select>

This just produces an empty drop down with the following content:

<select id="carTypes"  cam-variable-name="SELECTED_CAR" cam-variable-type="String" cam-options="CARS" ng-model="SELECTED_CAR"><option value="? undefined:undefined ?"></option></select>

Anyone solved this?

some-camunda-user · August 23, 2018, 1:05pm

Anyone struggeling with this, a solution is to just add your options on the scope

$scope.carOptions = ['BMW', 'VW', 'Ford', 'Mazda']

And then in your HTML use:

	<select id="carTypes"
		cam-variable-name="SELECTED_CAR"
		cam-variable-type="String"
		ng-options="c for c in carOptions track by c"
	></select>

system · January 30, 2024, 11:05am