How to remove the phone number field from a profile in portal page?

snow_beginner · ‎04-24-2024

Hi,

So I have a requirement that I need to remove the business phone number from the profile page on our service portal (we use employee center). How would I do that?

I have pressed CTRL and rightclick and have been able to get the name of the widget - User Profile - but not sure where the changes would need to be made. Below are the server script and client controller code from that widget. I am unable to copy and paste the html/css in these records.

server script

(function() {
		if (input && input.action === "update_session_tracking_info") {
		gs.getSession().putProperty("usage_tracking_allowed_for_session", input.user_tracking);
		return;
		
	}

	// populate the 'data' object
	// e.g., data.table = $sp.getValue('table');
	data.sysUserID = $sp.getParameter("sys_id");
	if (!data.sysUserID)
			data.sysUserID = gs.getUser().getID();
	var sysUserGR = new GlideRecord("sys_user");
	data.userExists = sysUserGR.get(data.sysUserID) && sysUserGR.canRead();

	if (data.userExists) {
		sysUserGR = GlideScriptRecordUtil.get(sysUserGR).getRealRecord();
		data.table = sysUserGR.getRecordClassName();
		data.name = sysUserGR.getValue("name");
		var loggedInSysUserID = gs.getUser().getID();
		data.connectEnabled = GlidePluginManager().isActive('com.glide.connect');
		data.liveProfileID = "";
		data.dateTimeFormat = gs.getDateTimeFormat();

		//get live profile id for sending connect messages
		if (GlidePluginManager().isActive('com.glideapp.live_common')) {
			var liveProfileGR = new GlideRecord("live_profile");
			liveProfileGR.addQuery("document", data.sysUserID);
			liveProfileGR.query();
			if (liveProfileGR.next()) {
				data.liveProfileID = liveProfileGR.getValue("sys_id");
				data.liveProfileModel = $sp.getForm("live_profile", data.liveProfileID)._fields;
				// live_profile short_description is shown here as "Bio", so popup label/hint must reflect that
				if (data.liveProfileModel.short_description) {
					data.liveProfileModel.short_description.label = gs.getMessage("Bio");
					data.liveProfileModel.short_description.hint = gs.getMessage("Biography");
				}
			} else
				data.connectEnabled = false; //can't find a live profile for this user, so lets not integrate Connect
		}

		data.isLoggedInUsersProfile = loggedInSysUserID.equals(data.sysUserID);
		var sysUserForm = $sp.getForm(data.table, data.sysUserID);
		data.sysUserView = sysUserForm._view;
		data.sysUserModel = sysUserForm._fields;
		data.sysUserModelList = [];

		for (var i = 0; i < data.sysUserView.length; i++) {
			data.sysUserModelList.push(data.sysUserModel[data.sysUserView[i].name]);
		}

		data.directReports = [];
		data.teamData = {};
		data.teamData.direct_reports = [];
		data.teamData.members = [];

		if (!data.isLoggedInUsersProfile) {
			data.teamData.user = {
				sys_id: data.sysUserID
			}
		}

		//Calculate manager
		var managerGR = new GlideRecord("sys_user");
		if (managerGR.get(sysUserGR.getValue("manager"))) {
			data.teamData.manager = buildUser(managerGR);
		}

		//Calculate team
		if (data.teamData.manager) {
			var teamGR = new GlideRecord("sys_user");
			teamGR.addActiveQuery();
			teamGR.orderBy("name");
			teamGR.addQuery("manager", data.teamData.manager.sys_id);
			teamGR.addQuery("sys_id", "!=", data.sysUserID);
			teamGR.query();
			while(teamGR.next())
				data.teamData.members.push(buildUser(teamGR));
		}

		//Calculate direct reports
		var directReportGR = new GlideRecord("sys_user");
		directReportGR.addActiveQuery();
		directReportGR.orderBy("name");
		directReportGR.addQuery("manager", data.sysUserID);
		directReportGR.query();

		while(directReportGR.next())
			data.teamData.direct_reports.push(buildUser(directReportGR));

		data.teamWidget = $sp.getWidget('sp-my-team', {glyph: 'user', color: 'primary'});
		if(!input)
			data.userPreferencesWidget = $sp.getWidget('user-preferences', {glyph: 'user', color: 'primary'});

		}

	function buildUser(userGR) {
		return {
			email: userGR.getValue("email") || "",
			first_name: userGR.getValue("first_name"),
			last_name: userGR.getValue("last_name"),
			name: userGR.getValue("name"),
			phone: userGR.getValue("phone") || "",
			sys_id: userGR.getValue("sys_id")
		}
	}


	})();

client controller

function ($scope, $element, $window, $location, $rootScope, $timeout, snAttachmentHandler, $http, spUtil, userPreferences, $filter, i18n, $uibModal, spAriaUtil) {

	// Many of these fields are more configuration-type fields than profile fields. We still want to display
	// these to a user who is configuring their 'settings', but we shouldn't show them on a user profile page.
	// We need to handle this better.
	var fieldExcludes = {
		sys_user: ['name', 'introduction', 'title', 'department', 'location', 'photo',
							 'manager', 'company'],
		live_profile: ['short_description', 'photo']
	}

	$scope.openConnectConversation = function() {
		$window.open('/$c.do#?user=' + $scope.data.liveProfileID, '_blank');
	}

	$scope.$watch('data.dateTimeFormat', function() {
		if ($scope.data.dateTimeFormat != g_user_date_time_format)
			$scope.data.dateTimeFormatChanged = true;
	});

	$scope.uploadNewProfilePicture = function($event) {
		$event.stopPropagation();
		var $el = $element.find('input[type=file]');
		$el.click();
	}

	$scope.attachFiles = function(files) {
		if (!files.files.length)
			return;

		var file = files.files[0];

		var validImage = false;

		switch(file.type) {
			case 'image/jpeg':
			case 'image/png':
			case 'image/bmp':
			case 'image/x-windows-bmp':
			case 'image/gif':
			case 'image/x-icon':
			case 'image/svg+xml':
				validImage = true;
				break;
			default:
				break;
		}

		if(!validImage) {
			alert(file.name + " " + i18n.getMessage("isn't a recognized image file format"));
			return;
		}

		snAttachmentHandler.create("live_profile", $scope.data.liveProfileID).uploadAttachment(file, {
			sysparm_fieldname: "photo"
		}).then(function(response) {
			var obj = {};
			obj.newAvatarId = response.sys_id;
			$scope.avatarPicture = {
				'background-image': "url('" + response.sys_id + ".iix')",
				'color': 'transparent'
			};
			$rootScope.$broadcast("sp.avatar_changed", obj);
			// timeout is required for screen reader to pick up the message once file upload prompt is dismissed
			$timeout(function() {
			   spAriaUtil.sendLiveMessage(i18n.getMessage('Profile picture updated successfully'));
			}, 500);
		});
	}

	$scope.avatarPicture = "";

	$http.get('/api/now/live/profiles/sys_user.' + $scope.data.sysUserID).then(function (response) {
		if (response.data.result && response.data.result.avatar){
			var avatarPicture = response.data.result.avatar.replace("?t=small", "");
			$scope.avatarPicture = {
				'background-image': "url('" + avatarPicture + "')",
				'color': 'transparent'
			};
		}
	});

	spUtil.recordWatch($scope, "sys_user", "sys_id=" + $scope.data.sysUserID);
	spUtil.recordWatch($scope, "live_profile", "sys_id=" + $scope.data.liveProfileID);

	$scope.connectEnabled = function() {
		return $scope.data.connectEnabled && !$scope.data.isLoggedInUsersProfile;
	}

	$scope.openUserProfile = function($event, userID) {
		$event.stopPropagation();
		$event.preventDefault();
		$location.search("id=user_profile&sys_id=" + userID);
	}

	$scope.getSysUserModelFields = function() {
		if ($scope.data.userExists) {
			return $scope.data.sysUserModelList
							.filter(function(field) {
								return $scope.displayField("sys_user", field.name);
							});
		}
		return [];
	}
	

	$scope.reloadPage = function() {
			$window.location.reload(true);
	};

	$scope.teamExists = function() {
		return $scope.data.teamData.direct_reports.length > 0 ||
			$scope.data.teamData.members.length > 0 ||
			$scope.data.teamData.manager;
	}

	var models = {
		sys_user: $scope.data.sysUserModel,
		live_profile: $scope.data.liveProfileModel
	}

	$scope.displayField = function(tableName, field, isHeader) {
		if (!isHeader && fieldExcludes[tableName].indexOf(field) > -1) return false;

		if (models[tableName][field] && models[tableName][field].type === "boolean") return false;

		if ($scope.data.isLoggedInUsersProfile) {
			if (models[tableName][field] && models[tableName][field].readonly)
				return models[tableName][field].displayValue;
			else
				return models[tableName][field];
		} else {
			return models[tableName][field] && models[tableName][field].displayValue;
		}
	}

	$timeout(function(){
		$rootScope.$broadcast('finishedChanged', {profile: $scope.data.teamData});
	});

	$scope.sysUserModelFields = $scope.getSysUserModelFields();

}

I also ctrl+rightclicked on the field business phone and navigated to instance page navigator and found a chart which shows user profile coming from hri_user_profile and below are its server script and client controller

server script 

data.sysUserID = $sp.getParameter("sys_id");
if (!data.sysUserID)
         data.sysUserID = gs.getUser().getID();

data.stateError = gs.getMessage('State cannot be a number');
data.emailError = gs.getMessage('Invalid Email');
data.phoneError = gs.getMessage('Invalid phone number');

var sysUserGR = new GlideRecord("sys_user");

var hrProfileGR = new GlideRecord("sn_hr_core_profile");
hrProfileGR.get("user", data.sysUserID);
data.hrProfileID =  hrProfileGR.getUniqueValue();

data.userExists = sysUserGR.get(data.sysUserID);
data.profileExists = hrProfileGR.get(data.hrProfileID);

if (data.profileExists) {
	data.name = sysUserGR.getValue("name");
	var loggedInSysUserID = gs.getUser().getID();

	data.isLoggedInUsersProfile = loggedInSysUserID.equals(data.sysUserID);
  
  var hrProfileForm = $sp.getForm("sn_hr_core_profile", data.hrProfileID);
	data.hrProfileView = hrProfileForm._view;
	data.hrProfileModel = hrProfileForm._fields;
	data.hrProfileModelList = [];
	
	for (var i = 0; i < data.hrProfileView.length; i++)
        data.hrProfileModelList.push(data.hrProfileModel[data.hrProfileView[i].name]);
}

//client controller

function spHRProfile($scope, $element, $location, $rootScope, $timeout, snAttachmentHandler, $http, $q) {

	//FormSection should be implemented
	var fields = {
			hr_profile: ['address','city','zip','state','country','home_phone','mobile_phone','personal_email']
	};
	
	$scope.getProfileModelFields = function() {
		return $scope.data.hrProfileModelList
		.filter(function(field) {
			return $scope.displayField("hr_profile", field.name);
		});
	};
	
	$scope.contactsExists = function() {
		return $scope.data.contactsExists;
	};
	
	var models = {
			hr_profile: $scope.data.hrProfileModel
	};
	
	$scope.validateField = function(g_form,field){	
		g_form.clearMessages();
		if (field.name == 'personal_email') 
			return validateEmail(g_form, field.name);
		if (field.name == 'state')
			return validateState(g_form);
		else return true;
	};
	
	$scope.asyncValidation = function(g_form, field) {
		g_form.clearMessages();
		var number = g_form.getValue(field.name);
		var valid = true;
		return $q(function(resolve, reject) {
			if (field.name != 'home_phone' && field.name != 'mobile_phone')
				resolve($scope.validateField(g_form, field));
			else if (number.trim().length <= 0) 
			    resolve(valid);
			number = encodeURIComponent(number);
			$.get("/api/sn_hr_core/hr_rest_api/validatPhoneNumber?phoneNumber=" + number,
					function(answer) {
				if (answer) {
					var result = answer['result'];
					var val = JSON.parse(result);
					if (field.name == 'home_phone' || field.name == 'mobile_phone') {
						if (!val['valid']) {
							g_form.addErrorMessage($scope.data.phoneError);
							valid = false;
						} else {
							g_form.setValue(field.name, val['number']);
							valid = true;
						}
					}
					resolve(valid);
				}
			});
		});
	};
	
	
	validateEmail = function(g_form, field) { 
		var email = g_form.getValue(field);
		if (!email || email.trim().length <= 0)
			return true;
		var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		if (!re.test(email)) {
			g_form.addErrorMessage($scope.data.emailError);
			return false;
		}
		return true;
	}; 
	
	validateState = function(g_form) {
		var value = g_form.getValue('state');
		if (!value || value.trim().length <=0)
			return true;
		if (!isNaN(parseInt(value, 10))) {
			g_form.addErrorMessage($scope.data.stateError);
			return false;
		}
		return true;
	};
	
	$scope.displayField = function(tableName, field, isHeader) {
		if (!isHeader && fields[tableName].indexOf(field) == -1 ) return false;
	
		if (models[tableName][field] && models[tableName][field].type === "boolean") return false;
	
		if ($scope.data.isLoggedInUsersProfile) {
			if (models[tableName][field] && models[tableName][field].readonly)
				return models[tableName][field].displayValue;
			else
				return models[tableName][field];
		} else {
			return models[tableName][field] && models[tableName][field].displayValue;
		}
	};
}

Also navigated to employee profiles > overview UI configuration > contact details (this table - sn_employee_overview_section) there I found a list of overview section details and set the mobile phone to active=false but that did not do anything.

Apologies I am unable to attach photos on this today for some reason, but please help. I am very lost on how to do this.

Mark Manders · ‎04-24-2024

Did you try commenting out the 'phone' line in the script?

lipan · ‎04-28-2024

@snow_beginner
you can try add the field in excluded fields in client script.

snow_beginner · ‎05-02-2024

Hi @lipan and @Mark Manders

Thanks for your ideas. The solution was actually very simple and I just had to change the view of the record to serviceportal and hide the fields using form layout 😕