SN Record Picker - cannot change display value from server side

Pastupe
Mega Guru

Hello,

I figth with following problem.

Have sn picker in widget, input text field, button.

 

Process is following:

1, user select value in record picker (user record)

2, user type into input text field any string

3, user click button

 

Expectation 1 --> user record display value will be changed in sys_user table with value from input text field after clicking button--> all is working untill here, data are saved in sys_user table properly

Expecation 2 --> ngpicker field will be updated with new display value --> this is not working, ng-picker have still old display value (even if in sys_user already exist new display value) dont know why and how to continue.

 

See my codes below.

Any help appreciated as I have been searching hours on the community and no result found.

Images and scripts attached

/Petr

 

Pastupe_0-1667805294680.png

 

2a.png

 

3a.png

 

 


/********************
HTML
*********************/
<div>
<sn-record-picker
placeholder="Type list name and confirm"
field="selectedList"
table="'sys_user'"
display-field="'first_name'"
display-fields="'number'"
value-field="'sys_id'"
search-fields="'name'"
page-size="100"
placeholder="Select existing list"
default-query="c.data.forListManagement.defaultFilter">

</sn-record-picker>
<input type="text" ng-model="c.newName">
<button ng-click="c.changeDisplayValue(c.newName)">
Test
</button>
</div>

<pre> {{selectedList}} </pre>

/********************
Client controller
*********************/

api.controller=function($scope,spUtil) {
/* widget controller */
var c = this;
c.newName = "";
var newName = c.newName;

 


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

c.changeDisplayValue = function(newName){
c.server.get(
{
action:"nameChange",
userSysId:$scope.selectedList.value,
userDisplayValue:$scope.selectedList.displayValue,
targetNewName: newName
}
).then(function(r) {

$scope.selectedList = {
displayValue: r.data.name,
value:r.data.value,
name:'listReferenceField'
};

});
};

};

/********************
Service script
*********************/

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */

if(input && input.action){


//gs.addInfoMessage(input.action + " " + input.userDisplayValue + " " + input.targetNewName);
var grUser = new GlideRecord('sys_user');
grUser.get(input.userSysId);
grUser.setValue('first_name', input.targetNewName)
var id = grUser.update();
data.value = id;
data.name = grUser.getDisplayValue();
}

})();

1 ACCEPTED SOLUTION

So I was able to solve this now and its working as expected.

What I needed to do is to make a change in client controller, pasted below part of and bolded change added.

If there is better way to solve this, please share so I can learn, have a good day.

/Petr

userDisplayValue:$scope.selectedList.displayValue,
targetNewName: newName
}
).then(function(r) {

$scope.selectedList = {
displayValue: r.data.name,
value:r.data.value,
name:'listReferenceField'
};

});

// Adding below after ).then(function(r) {}); make my requirement working

// I believe that server can populate ng picker with r.object only and then below bolded allow to store not object but sys_id in there so it make it working. If that is posisble with less code, please share ideas, I can test them on diferent scenarios. Remember also that one scenario is that you dont refresh URL and make changes in page few times one after another --> this is where it was failing for my use case

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

View solution in original post

2 REPLIES 2

Pastupe
Mega Guru

Figured out one more wrong behavior if changing server script to below (server script pasted below where I changed one row, bolded one).

Repeat the process few times in this way after saving server script below.

1, select value in ng picker

2, write string into input text field

3, click button

4, repeat step 2 and 3 (dont repeat step 1, do not touch sn record picker field/do not reload page)

end result --> new user record will be created with strange sys_id, see img below (I dont want to create new record, I want update one selected in ng-picker)

 

4a.png

 

 

Server script change:

(function() {
/* populate the 'data' object */
/* e.g., data.table = $sp.getValue('table'); */

if(input && input.action){


//gs.addInfoMessage(input.action + " " + input.userDisplayValue + " " + input.targetNewName);
var grUser = new GlideRecord('sys_user');
grUser.get(input.userSysId);
grUser.setValue('first_name', input.targetNewName)
var id = grUser.update();

data.value = grUser;
data.name = grUser.getDisplayValue();
}

})();

So I was able to solve this now and its working as expected.

What I needed to do is to make a change in client controller, pasted below part of and bolded change added.

If there is better way to solve this, please share so I can learn, have a good day.

/Petr

userDisplayValue:$scope.selectedList.displayValue,
targetNewName: newName
}
).then(function(r) {

$scope.selectedList = {
displayValue: r.data.name,
value:r.data.value,
name:'listReferenceField'
};

});

// Adding below after ).then(function(r) {}); make my requirement working

// I believe that server can populate ng picker with r.object only and then below bolded allow to store not object but sys_id in there so it make it working. If that is posisble with less code, please share ideas, I can test them on diferent scenarios. Remember also that one scenario is that you dont refresh URL and make changes in page few times one after another --> this is where it was failing for my use case

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