How to set selected value from "sn-record-picker" to catalog variable in widget ??

[AK79]

Hi experts,

@Ankur Bawiskar @Jaspal Singh @Maik Skoddow @Anil Lande @Sandeep Dutta 

I want to store the selected value in a catalog variable. how to do this??????????? means how to pass this value(it may be multiple value) in the client script. and then from there how to store in a variable which i have created already in the catalog item.

Below is the HTML code. 

 <div ng-if="selectedOption == 'add_application'" class="selectoptionalign">
         <div>
          <label class="boldtext">${Search for application(s) that you want to add (optional)}</label>
        </div>
        <div>
          <sn-record-picker field="add_application" 
                            table="'cmdb_ci'" 
                            display-field="name"
                            display-fields="'name,short_description'"
                            value-field="'name'" 
                            search-fields="'name,short_description'" 
                            page-size="100"
                            size="100"
                            multiple="true" 
                            default-query="'sys_class_name=u_cmdb_ci_spkg_application_package^ORsys_class_name=u_cmdb_ci_spkg_application_deploy'"
                            
                            />
        </div>

[Community Alums]

Hi @AK ,

The answers on these two threads might help:

Reference Fields with the snRecordPicker Directive

Dynamic sn-record-picker fields

Mark my answer correct & Helpful, if Applicable.

Thanks,

Sandeep

[AK79]

Hi Sandeep,

Thanks for replying. But on the above two link I am not getting how to achieve my requirement.

I am new to service [portal. could you help me in below queryies: 

Where to define on change/ng - change in HTML.

How to fetch the value from HTML to Client.  For example what we have selected we want in an  alert what we have selected. and then later we need to store that value in catalog variable/

[-O-]

Actually the blog entry beyond the 1st link shows an exact example of what you ask for. You are half there by setting the "field" attribute (to "add_application"). This will make the reference field store the selected reference in that object.

If you look at the example in the blog entry, it defines such an object in the Client Controller:

$scope.location = {
	displayValue: c.data.loc.name,
	value: c.data.loc.sys_id,
	name: 'location'
};

You just need to adjust it to suite your definition in the Body HTML template:

$scope.add_application = {
	displayValue: '',
	value: '',
	// Propery name is important later when "receiving" a selected value
	name: 'u_add_application',
};

The important part here is setting property name of object add_application to add_application - or any other unique name. This is needed to know when this and not other field has changed in the function that "receives" the value which in the example is defined as:

$scope.$on("field.change", function(evt, parms) {
	if (parms.field.name == 'location')
		c.data.setLocation = parms.newValue;

	c.server.update().then(function(response) {         
		spUtil.update($scope);
	});
});

You will need to adjust it to your situation:

$scope.$on("field.change", function(evt, parms) {
	// The name used here (u_add_application) must match the name defined earlier
	if (parms.field.name == 'u_add_application')
		// Do something with parms.newValue - which will hold the selected value
		;

	// ...
});

By setting up an event listener for an event named "field.change" allows you to get the value out from the HTML into the scope.

Another option is to define the Reference field so that it calls a function whenever a value is selected:

	<sn-record-picker
		...
		on-change="recordPickerChanged(val)" 
		...></sn-record-picker>

In that case the function has to be defined in the scope (in the Client controller):

$scope.recordPickerChanged = function recordPickerChanged (newValue) {
	// parameter newValue will contain the new value selected.
}; 

Of course you can name the function whatever you want (instead of recordPickerChanged), but use the same name both in the Client controller and in the Body HTML template.

That is how you can get to the selected value.

The other part, where you set a Catalog Item Variable to that value is a bit trickier depending on what is the scope of your widget. If the widget is a custom variable, you could just use:

$scope.page.g_form.setValue('<field name>', newValue);

If not a custom variable, you need to provide more information where this is used, so a proper solution can be suggested.

All-in-all your takeaway should be that the whole point of AngularJS is to make the transfer of data from HTML into scopes and from scopes into HTML declarative. That is through the use of directives like ngModel, or ngBind. But of course custom directives can defined custom methods, like the on-chage attribute of the snRecordPicker directive.