How do you use the on-change on sp-editable-field

[edmo1001]

I'm updating the User Profile page in Service Portal. I'm using the sp-editable-field, so users can update additional fields on the sys_user table. When company is changed, I need to clear the department field and refresh the department list, based on what company was chosen. Currently the field stays populated with the old value the list doesn't update unless the page is refreshed. There is an on-change variable on the sp-editable-field but I can't find any documentation or examples about it.

[Eddy_Tjandra]

Hi Oleg,

Please ignore the code in my previous post.

I have implemented what you said in the previous post

here is my code in the HTML Template -> I cloned the out-of-the-box user_profile widget. I added Mobile phone field under the location field.

<p ng-if="::displayField('sys_user', 'mobile_phone', true)">
<strong class="pad-right">${Mobile Phone}</strong>
<sp-editable-field editable-by-user="data.isLoggedInUsersProfile" 
table="sys_user" 
table-id="data.sysUserID" 
field-model="data.sysUserModel.mobile_phone" 
on-change="onChangefield" >
</sp-editable-field></p>
            

in the client script :

var gformMobile, scopeMobile, oldClosePopover,	newClosePopover = function () {	
  console.log("Popover of Mobile is closed!!!");
  oldClosePopover();
};

$scope.$on("spEditableField.gForm.initialized", function (e, gFormInstance, shadowModel) {
  if (shadowModel.name === "mobile_phone") {
    gformMobile = gFormInstance;
    scopeMobile = e.targetScope;
    setTimeout(function () {
      debugger;
      if (scopeMobile.closePopover && scopeMobile.closePopover !== newClosePopover) {
	oldClosePopover = scopeMobile.closePopover;
	scopeMobile.closePopover = newClosePopover;
      }
    }, 200);
  }
});

$scope.onChangefield = function (gform, shadowModel, oldValue, newValue) {
  if (oldValue !== newValue) {
    var userID = $scope.data.name;
    var field = shadowModel.name;
    var s = 'Field ' + field +' has been updated from ' + oldValue + ' to '+ newValue + ' for '+ userID;
    debugger;
    updateDataAD(userID,field,newValue);
    spUtil.addInfoMessage(s);	
  }
};

So at the moment after I edit the field, It doesn't matter I click cancel or save button, this command will be executed updateDataAD(...) 

this function is to execute flow using GlideFlow API to update the attribute on the Active directory
Could you advise how to block this command if I click cancel?

[Oleg]

Hi Eddy,

it seems to me that your problem exist because you use onChange callback instead of usage onSubmit. I'd suggest you to replace on-change="onChangefield" in your code to on-submit="onSubmitMobilePhone" and define onSubmitMobilePhone as following:

$scope.onSubmitMobilePhone = function (gform, shadowModel) {
	spUtil.addInfoMessage("Field " + shadowModel.name + " is changed from \"" +
						 shadowModel.originalValue + "\" to \"" +
						 shadowModel.value + "\" for the user with sys_id=" +
						 shadowModel.sys_id);
	//updateDataAD (userID, shadowModel.name, shadowModel.value);
};

[Eddy_Tjandra]

Hi Oleg,

Thank you for your answer, so far it seems the solution working.

do I need this function anymore ?

var gformMobile, scopeMobile, oldClosePopover,	newClosePopover = function () {	
  console.log("Popover of Mobile is closed!!!");
  oldClosePopover();
};

$scope.$on("spEditableField.gForm.initialized", function (e, gFormInstance, shadowModel) {
  if (shadowModel.name === "mobile_phone") {
    gformMobile = gFormInstance;
    scopeMobile = e.targetScope;
    setTimeout(function () {
      debugger;
      if (scopeMobile.closePopover && scopeMobile.closePopover !== newClosePopover) {
	oldClosePopover = scopeMobile.closePopover;
	scopeMobile.closePopover = newClosePopover;
      }
    }, 200);
  }
});

[Oleg]

Hi Eddy,

for your current requirements you need only on-change callback function. All other events and callbacks can be removed.

[Anne21]

Hi Oleg,

I am trying to do something similar within the "My Team" widget but your code doesn't seem to work in the same way - are you able to assist me?

I'm updating the User Profile page in Service Portal. I'm using the sp-editable-field, so users can update additional fields on the sys_user table. When company is changed, I need to clear the department field and refresh the department list, based on what company was chosen. Currently the field stays populated with the old value the list doesn't update unless the page is refreshed. There is an on-change variable on the sp-editable-field but I can't find any documentation or examples about it.

Thanks in advance,

Annie