1 ACCEPTED SOLUTION
Hi Annie,
sorry, but I can try to help you only if you will post more details (HTML and JavaScript code fragments of your code) about your solution.
You can open User Profile in Service Portal, then open Developer Tools of Chrome for example. After that you can press Ctrl-Shift-F to open search field and search in page Sources for "spEditableField", click on the line
;/*! RESOURCE: /scripts/app.$sp/directive.spEditableField.js */in searching results and finally on "{}" to format the code:
you will see the source code of sp-editable-field directive:
;/*! RESOURCE: /scripts/app.$sp/directive.spEditableField.js */
angular.module('sn.$sp').directive('spEditableField', function(glideFormFactory, $http, spUtil, spModelUtil, $timeout) {
return {
restrict: 'E',
templateUrl: 'sp_editable_field.xml',
scope: {
fieldModel: "=",
table: "@",
tableId: "=",
block: "=?",
editableByUser: "=",
onChange: "=?",
onSubmit: "=?",
asyncSubmitValidation: "=?"
},
transclude: true,
replace: true,
controller: function($scope) {
var REST_API_PATH = "/api/now/v2/table/";
var g_form;
this.createShadowModel = function() {
spModelUtil.extendField($scope.fieldModel);
$scope.shadowModel = angular.copy($scope.fieldModel);
$scope.shadowModel.table = $scope.table;
$scope.shadowModel.sys_id = $scope.tableId;
$scope.blockDisplay = $scope.block ? {
display: 'block'
} : {};
$scope.editable = !$scope.shadowModel.readonly && $scope.editableByUser;
$scope.fieldID = $scope.table + "-" + $scope.shadowModel.name.replace('.', '_dot_') + "-" + $scope.tableId;
initGlideForm();
}
;
this.createShadowModel();
$scope.getGlideForm = function() {
return g_form;
}
;
$scope.saveForm = function() {
if (g_form)
g_form.submit();
if (angular.isDefined($scope.asyncSubmitValidation)) {
$scope.asyncSubmitValidation(g_form, $scope.shadowModel).then(function(result) {
if (result)
completeSave();
});
}
}
;
function completeSave() {
var url = REST_API_PATH + $scope.table + "/" + $scope.tableId + "?sysparm_display_value=all&sysparm_fields=" + $scope.shadowModel.name;
if ($scope.shadowModel.type === "password" || $scope.shadowModel.type === "password2")
url += "&sysparm_input_display_value=true";
var data = {};
data[$scope.shadowModel.name] = $scope.shadowModel.value;
$http.put(url, data).success(function(data) {
if (data.result)
updateFieldModel(data.result);
$scope.closePopover();
}).error(function(reason) {
console.log("Field update failure", reason);
spUtil.retrieveSessionMessages();
});
}
$scope.checkNullChoiceOverride = function() {
if ($scope.fieldModel.type != "choice")
return;
if ($scope.fieldModel.value || $scope.fieldModel.displayValue)
return;
var choices = $scope.fieldModel.choices || [];
for (var i = 0; i < choices.length; i++) {
if (choices[i].value == "") {
$scope.fieldModel.displayValue = choices[i].label;
return;
}
}
}
function updateFieldModel(record) {
if (record && $scope.fieldModel.name in record) {
var updated = record[$scope.fieldModel.name];
$scope.fieldModel.value = updated.value;
$scope.fieldModel.displayValue = updated.display_value;
$scope.checkNullChoiceOverride();
}
}
function initGlideForm() {
if (g_form)
g_form.$private.events.cleanup();
var uiMessageHandler = function(g_form, type, message) {
switch (type) {
case 'infoMessage':
spUtil.addInfoMessage(message);
break;
case 'errorMessage':
spUtil.addErrorMessage(message);
break;
case 'clearMessages':
spUtil.clearMessages();
break;
default:
return false;
}
};
g_form = glideFormFactory.create($scope, $scope.table, $scope.tableId, [$scope.shadowModel], null, {
uiMessageHandler: uiMessageHandler
});
$scope.$emit("spEditableField.gForm.initialized", g_form, $scope.shadowModel);
if (angular.isDefined($scope.onChange))
g_form.$private.events.on("change", function(fieldName, oldValue, newValue) {
return $scope.onChange.call($scope.onChange, g_form, $scope.shadowModel, oldValue, newValue);
});
if (angular.isDefined($scope.onSubmit))
g_form.$private.events.on("submit", function() {
return $scope.onSubmit.call($scope.onSubmit, g_form, $scope.shadowModel);
});
if (!angular.isDefined($scope.asyncSubmitValidation)) {
g_form.$private.events.on('submitted', function() {
completeSave();
});
}
}
},
link: function(scope, el, attrs, ctrl) {
var returnFocus = true;
scope.checkNullChoiceOverride();
scope.closePopover = function() {
if (scope.shadowModel.popoverIsOpen)
ctrl.createShadowModel();
scope.shadowModel.popoverIsOpen = false;
if (returnFocus) {
var trigger = el[0].querySelector('#field-' + scope.fieldID);
trigger.focus();
}
$('body').off('keydown', executeEventHandlers);
$('body').off('click', closePopoverOnOutsideClick);
}
scope.toggleClick = function($event) {
if ($event.type === "click") {
scope.togglePopover($event);
}
}
scope.toggleKeydown = function($event) {
if (($event.which === 13 || $event.which === 32)) {
scope.togglePopover($event);
}
}
scope.togglePopover = function(evt) {
scope.shadowModel.popoverIsOpen = !scope.shadowModel.popoverIsOpen;
scope.shadowModel.value = scope.shadowModel.stagedValue = scope.fieldModel.value;
scope.shadowModel.displayValue = scope.fieldModel.displayValue;
if (scope.shadowModel.popoverIsOpen) {
returnFocus = true;
$('body').on('keydown', executeEventHandlers);
$('body').on('click', closePopoverOnOutsideClick);
}
}
function executeEventHandlers(event) {
trapKeyboardFocus(event);
closePopoverOnEscape(event);
}
function trapKeyboardFocus(event) {
if (!scope.shadowModel.popoverIsOpen)
return;
if (event.which === 9 && !event.shiftKey) {
if (($(event.target).is("button[ng-click='saveForm()']"))) {
event.preventDefault();
event.stopPropagation();
}
}
if (event.which === 9 && event.shiftKey) {
if (!isTargetedElementSPFormField(event))
return;
if ($('button[ng-click="openReference(field, formModel.view)"]').length === 1) {
if ($(event.target).is("button")) {
event.preventDefault();
event.stopPropagation();
}
} else if ($("sp-email-element").length === 1) {
if ($("sp-email-element").length === 1) {
if ($(event.target).is("input")) {
event.preventDefault();
event.stopPropagation();
}
}
} else {
event.preventDefault();
event.stopPropagation();
}
}
}
function isTargetedElementSPFormField(event) {
return $(event.target).parents("#editableSaveForm").length === 1;
}
function isModalLaunchedFromPopOver() {
var modal = $('.modal.in');
return (modal.length && !modal.find('.sp-editable-field .popover').length);
}
function closePopoverOnEscape(event) {
if (event.which === 27 && !isModalLaunchedFromPopOver())
closePopover();
}
function closePopover() {
scope.$evalAsync('closePopover()');
}
function closePopoverOnOutsideClick(event) {
var $et = $(event.target);
var closeButton = $et.attr('ng-click') && $et.attr('ng-click') === 'closePopover()';
var saveButton = $et.attr('ng-click') && $et.attr('ng-click') === 'saveForm()';
if (closeButton || saveButton)
return;
if (!($et.closest(".popover-" + scope.fieldID).length || $et.closest(".popover-trigger-" + scope.fieldID).length) && !$et.closest("[uib-popover-template-popup]").length && $et.attr("uib-popover-template-popup") !== "" && !isModalLaunchedFromPopOver()) {
returnFocus = false;
scope.$evalAsync('closePopover()');
}
}
scope.$on("$destroy", function() {
$('body').off('keydown', executeEventHandlers);
$('body').off('click', closePopoverOnOutsideClick);
});
scope.$on('sp.spFormField.rendered', function(e, element, input) {
var parent = input.parent();
var select2Input = parent[0].querySelector('.select2-container input');
$timeout(function() {
if (select2Input)
select2Input.focus();
else
input.focus();
}, 0, false);
});
}
}
});Another directive sp-editable-field2, which is very close to sp-editable-field, will be used in the widget Portal config (id=widget-portal-config). The code contains the usage of on-change callback. You can debug it if you open /sp_config?id=branding_editor URL and modify Portal Title. If you set breakpoint on c.onTitleChange before changes and changing the focus on another field, you will see that c.onTitleChange will be called.
