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

Go to solution
edmo1001
Kilo Explorer

‎09-30-2019 08:22 AM

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.

Labels:
0 Helpfuls
  • 2,774 Views
1 ACCEPTED SOLUTION

Go to solution
Oleg
Mega Sage
In response to edmo1001

‎09-30-2019 03:12 PM

You are right, the main problem is not implementing on-change handler, but to force department and location fields to save modified (empty) data. I suggest to add both on-change and on-submit handler

<sp-editable-field ng-if="::displayField('sys_user', 'company', true)"
                   editable-by-user="data.isLoggedInUsersProfile"
                   table="sys_user"
                   table-id="data.sysUserID"
                   field-model="data.sysUserModel.company"
                   on-change="onChangeCompany"
                   on-submit="onSubmitCompany"></sp-editable-field>

and to add the following code in the client controller code:

var gformDepartment, gformLocation, scopeDepartment, scopeLocation;
$scope.$on("spEditableField.gForm.initialized", function (e, gFormInstance, shadowModel) {
	if (shadowModel.name === "department") {
		gformDepartment = gFormInstance;
		scopeDepartment = e.targetScope;
	} else if (shadowModel.name === "location") {
		gformLocation = gFormInstance;
		scopeLocation = e.targetScope;
	}
});
	
$scope.onChangeCompany = function (gform, shadowModel, oldValue, newValue) {
	if (oldValue !== newValue) {
		$scope.data.sysUserModel.department.value = "";
		$scope.data.sysUserModel.department.displayValue = "";
		$scope.data.sysUserModel.location.value = "";
		$scope.data.sysUserModel.location.displayValue = "";
		scopeDepartment.shadowModel.value = "";
		scopeLocation.shadowModel.value = "";
	}
};
	
$scope.onSubmitCompany = function (gform, shadowModel, oldValue, newValue) {
	scopeDepartment.saveForm();
	scopeLocation.saveForm();
};

Probably the above code is too complex and there are exist more easy way, but I didn't found it. The above code works in my tests.

View solution in original post

20 REPLIES 20

Go to solution
Eddy_Tjandra
Tera Contributor

‎03-19-2020 10:15 PM

Hi

 

Here is my code, I couldn't make it works as I want,

it seems either we click cancel or save button, both are calling the newClosePopover function

could you advise how to overwrite the function for cancel button only. (please see the screenshot below)

 

var isCancel;
var gformDepartment, gformLocation, scopeDepartment, scopeLocation, scopeCompany, gformCompany,	oldClosePopover,	newClosePopover = function () {
		console.log("Popover of company is cancel!!!");
		isCancel=true;
		oldClosePopover();
	};


$scope.onChangefield = function (gform, shadowModel, oldValue, newValue) {
if (oldValue !== newValue && !isCancel) {
    var userID = $scope.data.user_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);	
}}

 

0 Helpfuls