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.

[Oleg]

You can add onChangeCompany method to $scope inside of Client controller, wich clear department and location properties of $scope.data.sysUserModel:

$scope.onChangeCompany = function (gform, shadowModel, oldValue, newValue) {
	if (oldValue !== newValue) {
		$scope.data.sysUserModel.department = "";
		$scope.data.sysUserModel.location = "";
	}
};

and to add on-change="onChangeCompany" attribute to sp-editable-field element, which corresponds to company field:

<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"></sp-editable-field>

[edmo1001]

Thanks so much for the reply. This is almost what I need. When I change the company on the Service Portal Profile form, it tries to clear out the department field like you said it would, but then it fills the blank field in again with the previous value. I made the department mandatory. Could this be why the filed won't stay blank?  Any idea's on how to work thru this? 

[Oleg · Accepted solution]

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.

[edmo1001]

Thanks so much, this worked for me.