i need working example of <sp-editable-field>

[manish64]

Hi,

      Need working example of 

html//
<sp-editable-field editable-by-user="data.isLoggedInUsersProfile" table="sys_user" table-id="data.sysUserID" field-model="data.sysUserModel.department"
on-change="onChangeCompany" on-submit="onSubmitCompany"></sp-editable-field>

//cleint controller

var c = this;
var gformDepartment, gformLocation, scopeDepartment, scopeLocation;
$scope.$on("spEditableField.gForm.initialized", function (e, gFormInstance, shadowModel) {
if (shadowModel.name === "department") {
gformDepartment = gFormInstance;
scopeDepartment = e.targetScope;
}
});

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

scopeDepartment.shadowModel.value = "";
scopeLocation.shadowModel.value = "";
}
};

$scope.onSubmitCompany = function (gform, shadowModel, oldValue, newValue) {
scopeDepartment.saveForm();
scopeLocation.saveForm();
};

it didnt work ,Could anyone share working code for this ootb tag

[Community Alums]

Hi,

The User Profile widget in OOB instances can help as an example.

https://YOUR_INSTANCE.service-now.com/sp_widget.do?sys_id=6e6ac664d710120023c84f80de610318&sysparm_r...

 <sp-editable-field ng-if="::displayField('sys_user', 'title', true)" editable-by-user="data.isLoggedInUsersProfile" table="sys_user" table-id="data.sysUserID" field-model="data.sysUserModel.title" on-change="titleOnChange" on-submit="titleOnSubmit"></sp-editable-field>
               <span ng-if="::(displayField('sys_user', 'company', true) && displayField('sys_user', 'title', true))">at</span>
               <span ng-if="::(displayField('sys_user', 'company', true) && !displayField('sys_user', 'title', true))">Works at</span>
               <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"></sp-editable-field>
            </h4>

You can refer to these community links for more examples and helpful links:

https://community.servicenow.com/community?id=community_question&sys_id=fe120fe9db98dbc01dcaf3231f96...

https://community.servicenow.com/community?id=community_question&sys_id=bb1cca06db8ba38011762183ca96...

Please mark as correct or helpful if this solves your query.

Thanks

DR

[Priyanka Vasant]

Hi Manish,

In addition to Debopriya also check the below link.

https://community.servicenow.com/community?id=community_question&sys_id=33297b04dbd44490feb1a851ca96...

Mark helpful or correct based on impact.

Regards,

Priyanka A.

[Omkar Mone · Accepted solution]

Hello,

I have changed your code, There is no need to write onChange and on submit methods for this, sp-editable-fields saves the form withouth those methods, just you need to add few lines of code in the server script, please find below code and copy it as it is in your widget and let me know if that works, 

HTML - 

<div>
<sp-editable-field editable-by-user="data.isLoggedInUsersProfile" table="sys_user" table-id="data.sysUserID" field-model="data.sysUserModel.company"></sp-editable-field>
</div>

Server Script - 

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	
	var loggedInSysUserID = gs.getUser().getID();
	data.sysUserID = $sp.getParameter("sys_id") || gs.getUserID();
	data.isLoggedInUsersProfile = loggedInSysUserID.equals(data.sysUserID);
	var sysUserForm = $sp.getForm("sys_user", data.sysUserID);
	data.sysUserView = sysUserForm._view;
	data.sysUserModel = sysUserForm._fields;

})();

Mark correct if it helps.

Regards

Omkar Mone

ServiceNow Community MVP 2020

ServiceNow Community Leader 2019