Custom Widget: populate widget fields when drop down choice is made?

[ServiceLater1]

I have a custom widget with a sn-record-picker and some fields:

<div class="panel panel-default">
	<div class="panel-body">
		<form>
			<div class="form-group">
				<div>
				<lable for=vendor>Search Existing Vendor</lable>
				<sn-record-picker id="vendorselection" field="u_account" table="'u_vendor_manual'" display-field="'u_name'" value-field="'sys_id'" default-query="'u_accountISNOTEMPTY^u_nameISNOTEMPTY'" search-fields="'u_name'" page-size="100" ></sn-record-picker>
				</div>

				<lable for=name>Name</lable>
				<input type="text" class="form-control" 
				id="name" 
				placeholder="Please enter vendor name"
				ng-model="data.newVendor.name"/>
			</div>
			<div class="form-group">
				<lable for=street>Street</lable>
				<input type="text" class="form-control" 
				id="street" 
				placeholder="Please enter street "
				ng-model="data.newVendor.street"/>
			</div>    
			<div class="form-group">
				<lable for=city>City</lable>
				<input type="text" class="form-control" 
				id="city" 
				placeholder="Please enter city"
				ng-model="data.newVendor.city"/>
			</div>
			<div class="form-group">
				<lable for=zip>ZIP</lable>
				<input type="text" class="form-control" 
				id="zip" 
				placeholder="Please enter ZIP "
				ng-model="data.newVendor.zip"/>
			</div> 
			<div>
				<lable for=country>Country</lable>
				<sn-record-picker id="country" field="country" table="'core_country'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ng-change="cchanged(val)" ></sn-record-picker>
			</div>
		</form>
	</div>

	<div class="panel-footer">     
		<button class="btn btn-success" ng-click="c.submit()">Submit</button>
	</div>
</div>

I would like to trigger the getVendor() function in the server script when a selection as been made in the #vendorselection sn-record-picker.

Client Script:

$('#vendorselection').change(function(){
		console.log("existing vendor: " + $('#vendorselection').val())
		getVendor();
	});

Server Script

		function getVendor(vnd) {
			var gr = new GlideRecord('u_vendor_manual');
			gr.addQuery('sys_id', vnd);
			gr.query();
				if (gr.next()) {
					data.name = gr.getValue('u_name');
					data.street = gr.getValue('u_street');
					data.city = gr.getValue('u_city');
					data.zip = gr.getValue('u_zip');
				}
		}

Obviously not working and I am sure I have done several things incorrectly. What's the proper way to do this?

[Shubham Tipnis · Accepted solution]

Hi,

You can add a onChange function in the sn-record picker to capture the vendor selected.

HTML:

<sn-record-picker id="ohrid" on-change="vendorselection()" >

Then at the client side, you can send an update to the server to trigger any server changes which you want to do.

Client Script:

$scope.vendorselection= function()
{
c.data.action="submit";
c.server.update().then(function(){
c.data.action = undefined;
})

And finally, the server script actions:

if(input)
{

if(input.action=="submit")
{
var gr = new GlideRecord('u_vendor_manual');

gr.addQuery('sys_id', input.u_account.displayValue); 

gr.query();

if (gr.next()) {

data.name = gr.getValue('u_name');

data.street = gr.getValue('u_street');

data.city = gr.getValue('u_city');

data.zip = gr.getValue('u_zip');

}


}

Please mark correct/helpful if applicable

Regards,

Shubham

[ServiceLater1]

Thank you very much. In your example the form in the custom widget is being submitted right?

But how about if I want to allow the user to:

1. Select an existing vendor and if one exists, and then:

2. Fill the form fields with existing data so that they can make changes if needed, and then:

3. Finally let them submit it all

That's kind of what I am trying to do.

[Shubham Tipnis]

You can just add these conditions in the function defined in client script. Also, you can have a separate function on Submit which will be executed if the conditions suffice.

Regards,

Shubham

[Ravi9]

you can try something like below ! in client controller

$scope.$on("field.change", function(evt, parms) {
if(parms && parms.field && parms.field.value && (parms.field.value != parms.oldValue)){
			// call server
		}
}