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,

I have similar case and I am using your solution above,
However, I got a bug when I have edit company, then I change value, but I click cancel button after that.
the onChangeCompany function will be executed,
could you advice how to handle the cancel action ?

[Eddy_Tjandra]

Hi Oleg,

I have similar case and I am using your solution above,
However, I got a bug when I have edit company, then I change value, but I click cancel button after that.
the onChangeCompany function will be executed,
could you advice how to handle the cancel action ?

[Oleg]

There are exist no onCancel or onClose callback, but you can "subclass" internal closePopover method, which will be called on closing the small dialog, which allows to change the value (the method will be called after onSubmit too). The modified code could look the following:

var gformDepartment, gformLocation, scopeDepartment, scopeLocation, scopeCompany, gformCompany,
	oldClosePopover,
	newClosePopover = function () {
		console.log("Popover of company is closed!!!");
		oldClosePopover();
	};
$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;
	} else if (shadowModel.name === "company") {
		gformCompany = gFormInstance;
		scopeCompany = e.targetScope;
		setTimeout(function () {
			debugger;
			if (scopeCompany.closePopover && scopeCompany.closePopover !== newClosePopover) {
				oldClosePopover = scopeCompany.closePopover;
				scopeCompany.closePopover = newClosePopover;
			}
		}, 200);
	}
});

The original closePopover method will be overwritten inside of event handler of "spEditableField.gForm.initialized" event previously saving the reference to the original method in oldClosePopover variable.  The new method newClosePopover can do some actions then call oldClosePopover();.

[Eddy_Tjandra]

Hi Oleg,

Thank you for your reply.

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 determine in the function if the Popover is closed by cancel or save button, is there any property that I can check?

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);	
}}

[Oleg]

Hi Eddy,

I don't see an important part in your code, which initialize oldClosePopover and changes closePopover of spEditableField to newClosePopover inside of event handler spEditableField.gForm.initialized (see the code of my previous post). If your code miss that then it should be the reason, why your code don't work. Could you post more full code which you use?