How to set custom variable value from widget

[avid]

Hello.

In order to simplify my question I've created a new ui macro variable that contain only a single input field:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<input type="text" id="test" name="test"></input>
</j:jelly>

In order to view the variable the catalog form I've connected a new widget to the macro variable that contain the same field:

Body HTML template:

<div>
<input type="text" id="test" name="test" />
</div>

And indeed the new variable is shown on the catalog form as input field in the new service portal, but when i submit the catalog with some string inside the input field the variable value stay empty:

I tried several methods in order to set the value in the variable but unfortunately i didn't succeed.   my only concern is how to set the value in the widget, not in the macro.

Thank you/

[ericgilmore]

Ok, having the same issue here. But the prescribed fixes seem to be missing my setup. I have a simple test form. It has basic variables with a couple macro vars. I just want to pass the values I create from the widgets on to the request item after submit.

widget

HTML Template

<div id="selectStartTime">
<!-- just a simple time select box -->
<!-- 	<legend>Hour/Minute</legend> -->
	<label for="startHour">Hour: </label>
	<select name="startHour" id="startHour">
		<option>08</option>
		<option>09</option>
		<option>10</option>
		<option>11</option>
		<option>12</option>
		<option>13</option>
	</select>
	<label for="startMinute"> Minute: </label>
    	<select name="startMinute" id="startMinute">
		<option>00</option>
		<option>05</option>
		<option>10</option>
		<option>15</option>
		<option>20</option>
		<option>25</option>
		<option>30</option>
		<option>35</option>
		<option>40</option>
		<option>45</option>
		<option>50</option>
		<option>55</option>
	</select>
	<span id="peopleStartTime"></span>
</div>

Client Script

function($scope) {
  /* widget controller */
  var c = this;
	var h = document.getElementById("startHour");
	var m = document.getElementById("startMinute");
	var pplTime = document.getElementById("peopleStartTime");
	var mer;
	var ph;
	var timeOutput;
	
	pplTime.onLoad = getPplTime();
	
	h.oninput = getPplTime;
	m.oninput = getPplTime;
		
	function getPplTime() {
		
		if (h.value >= 12) {
			mer = "pm";
		} else { mer = "am"; }
	
		if (h.value > 12) {
			ph = h.value - 12;
		} else { ph = h.value; }

		timeOutput = ph + ":" + m.value + " " + mer;
		
		pplTime.innerHTML = timeOutput;
		
	}
	
	$scope.change = function(){
		var hours = h.value;
		var minutes = m.value;
		var someTime = hours + " " + minutes;
		$scope.page.g_form.setValue('military_start',someTime);
	}

}

I've tried adding a simple onChange script attached to the macro field,  but I think I'm doing that totally wrong and that it may not be needed.  Any help would be appreciated.

[Lisa Silvaroli]

I am trying to do the same thing described Embedding widgets in Service Catalog - ServicePortal.io - Service Portal, CMS, and Custom Apps  post... I cannot get my widget to fill properly though. Here is the code I am using... am I missing something?

function($scope,$rootScope) {
	var c = this;
	
	$rootScope.$on("field.change", function(evt, parms) {
		if (parms.field.name == 'number') {
			c.data.number = parseFloat(parms.newValue);
		}
		if (parms.field.name == 'cost_per') {
			c.data.cost_per = parseFloat(parms.newValue);
		}
		c.data.results = (c.data.number * c.data.cost_per);
				
		$scope.page.g_form.setValue('total_cost',results);
	});
}

Using: $scope.page.g_form.setValue('total_cost',results); I get nothing. 

Using $scope.page.g_form.setValue('total_cost',c.data.results); - My catalog item crashes

Using $scope.page.g_form.setValue('total_cost','test'); - Variable DOES get populated with 'test' 

So I am just having trouble pulling the results properly. Any suggestions? 

[jamal_williams]

I am having the same issue. I have tried the above functions a well and I get nothing.

[Rubin]

I had the same issue, but this is how I resolved it.

you have to set your output value to the C.VARIABLE_DATA, and then pass that value to the scope and it will write the data  to the temp variable on the catalog.

step 1:

I created a temp variable(printer in this case): Single Line Text and set the visibility to false from a client script

2. create Macro with Label -> and from the widget Client controller function:

c.variable_data = "YES";
$scope.page.g_form.setValue('printer', c.variable_data);

NOTE: setValue is case carmel case, all lowercase will not work.

here is a sample widget:

Widge html:

<div class="row">
<div class="col-6 col-sm-3">Printer</div>
<div class="col-6 col-sm-3">
<input class="form-check-input" type="radio" name="PrinterRadios" id="PrinterRadios1" value="option1" ng-click="c.PrinterOn()">
<label class="form-check-label" for="PrinterRadios1">YES</label>
<input class="form-check-input" type="radio" name="PrinterRadios" id="PrinterRadios2" value="option2" ng-click="c.PrinterOff()">
<label class="form-check-label" for="PrinterRadios2">NO</label>
</div>
</div>

client function:

function($rootScope, $scope) {
var c = this;

c.PrinterOn = function() {
alert("Im PrinterOn");//just to make sure the right button is fire for radio button widget
$scope.page.g_form.setDisplay('printer', true);
c.variable_data = "YES";
$scope.page.g_form.setValue('printer', c.variable_data);

};
c.PrinterOff = function() {
alert("Im PrinterOff");//just to make sure the right button is fire for radio button widget
$scope.page.g_form.setDisplay('printer', true);
c.variable_data = "NO";
$scope.page.g_form.setValue('printer', c.variable_data);
};

}

Mark correct, this help