User Profile Widget

[Mr Bow]

Good Morning,

I have currently working on the user profile widget. I have cloned it......I would like that when the user select accessibility ON or OFF to show a little message  below showing if the state ON/OFF.

I would appreciate any help. thanks

[VigneshMC · Accepted solution]

This works for me

HTML : (Change made on line 88-90)

<div class="default-focus-outline">
  <div ng-if="data.userExists">
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="row">
          <div class="col-xs-12 col-sm-4 text-center">
            <div class="row">
              <div class="avatar-extra-large avatar-container" style="cursor:default;">
                <div class="avatar soloAvatar bottom">
                  <div class="sub-avatar mia" ng-style="avatarPicture"><i class="fa fa-user"></i></div>
                </div>
              </div>
            </div>
            <div class="row">
              <button ng-if="::connectEnabled()" ng-click="openConnectConversation()" type="button"
                      class="btn btn-primary send-message"><span class="glyphicon glyphicon-comment pad-right"></span>${Message}</button>
              <!-- file upload -->
              <span ng-if="::data.isLoggedInUsersProfile">
                <input ng-show="false" type="file" accept="image/jpeg,image/png,image/bmp,image/x-windows-bmp,image/gif,image/x-icon,image/svg+xml" ng-file-select="attachFiles({files: $files})" />
                <button ng-click="uploadNewProfilePicture($event)"
                        ng-keypress="uploadNewProfilePicture($event)" type="button"
                        class="btn btn-default send-message">${Upload Picture}</button>
              </span>
            </div>
          </div>
          <div class="col-xs-12 col-sm-8">
            <h2>{{data.name}}</h2>
            <h4 ng-if="::(displayField('sys_user', 'title', true) || displayField('sys_user', 'company', true))">
              <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>
            <p ng-if="::displayField('sys_user', 'department', true)"><strong class="pad-right">${Department}</strong><sp-editable-field editable-by-user="data.isLoggedInUsersProfile" table="sys_user" table-id="data.sysUserID" field-model="data.sysUserModel.department"></sp-editable-field></p>
            <p ng-if="::displayField('sys_user', 'location', true)"><strong class="pad-right">${Location}</strong><sp-editable-field editable-by-user="data.isLoggedInUsersProfile" table="sys_user" table-id="data.sysUserID" field-model="data.sysUserModel.location"></sp-editable-field></p>
            <p ng-if="::(data.liveProfileID && displayField('live_profile', 'short_description', true))"><strong class="pad-right">${Bio}</strong><sp-editable-field editable-by-user="data.isLoggedInUsersProfile" table="live_profile" table-id="data.liveProfileID" field-model="data.liveProfileModel.short_description"></sp-editable-field></p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div ng-class="{'col-md-6': teamExists(), 'col-md-12': !teamExists()}" class="col-sm-12 col-xs-12">
        <div class="panel panel-default b" ng-if="getSysUserModelFields().length > 0">
          <div class="panel-heading">
            <h4 class="panel-title">
              <i class="fa fa-info-circle m-r-sm"></i>${About}
            </h4>
          </div>
          <div class="body padder-xs">
            <div class="list-group">
              <div ng-repeat="fieldModel in sysUserModelFields">
                <div class="list-group-item">
                  <div>
                    <sp-editable-field block="true" table="sys_user" editable-by-user="data.isLoggedInUsersProfile" table-id="data.sysUserID" field-model="fieldModel"></sp-editable-field>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div ng-if="teamExists()" class="col-md-6 col-sm-12 col-xs-12">
        <sp-widget widget="data.teamWidget"></sp-widget>
      </div>
    </div>
    <div class="row" ng-if="data.preferencesEnabled.preferencesPanelEnabled">
      <div class="col-sm-12 col-xs-12">
        <div class="panel panel-default b">
          <div class="panel-heading">
            <h4 class="panel-title">
              <i class="fa fa-cog m-r-sm"></i>${User preferences}
            </h4>
          </div>
          <div class="body padder-xs">
            <div class="list-group">
              <div class="list-group-item">
                <label>${Accessibility enabled} </label>
                <div class="input-switch">
                  <input type="checkbox"
                         ng-change="setUserPreferenceValue(data.userPreferences.accessibility)"
                         ng-model="data.userPreferences.accessibility.value"
                         name="accessibility-enabled" id="accessibility-enabled"/>
                  <label class="switch" for="accessibility-enabled" ng-click="toggle($event, data.userPreferences.accessibility)"> 
                    <span class="sr-only">${Accessibility enabled}</span>
                  </label>
                </div>
              </div>
              <div>
                  <p class="alert alert-info" role="alert" id="text" style="display:none">Test Message</p>
              </div>
             
              <div class="list-group-item" ng-if="data.preferencesEnabled.timezoneEnabled">
                <label for="time_zone_picker_select">${Time zone}</label>
                <select id="time_zone_picker_select" class="form-control "
                        name="time_zone_picker_select" ng-model="data.listProperties.timezone.current"
                        ng-change="setPreferenceValue('timezone', data.listProperties.timezone.current.value)"
                        ng-options="item as item.label for item in data.listProperties.timezone.list"/>
              </div>
              <div class="list-group-item" ng-if="data.preferencesEnabled.languageEnabled">
                <label for="language_picker_select">${Language}</label>
                <select id="language_picker_select" class="form-control"
                        name="language_picker_select" ng-model="data.listProperties.language.current"
                        ng-change="setPreferenceValue('language', data.listProperties.language.current.value)"
                        ng-options="item as item.label for item in data.listProperties.language.list "/>
              </div>
              <div class="list-group-item" ng-if="data.preferencesEnabled.mfaEnabled">
                <button class="btn btn-link" ng-click="triggerMFAConfigurationModal()" aria-haspopup="dialog">${Configure Multi-Factor Authentication}</button>
              </div>
            </div>
          </div>
          <div class="panel-footer clearfix" ng-if="data.userPreferencesChanged">
            <a id="refresh-to-see-changes" href="javascript:void(0)"
               ng-click="reloadPage()" class="pull-right btn btn-primary"><i class="fa fa-refresh m-r-sm" aria-hidden="true"></i>${Refresh to see changes}</a>
          </div>
        </div>
      </div>
      <div ng-if="!data.userExists" >
        <div class="panel panel-default">
          <div class="panel-heading"><h4 class="panel-title">${User not found}</h4></div>
          <div class="panel-body wrapper">
            <p>${This user does not exist}</p>
            <p>${Suggestions}:</p>
            <ul>
              <li>${Contact your portal administrator}</li>
            </ul>
          </div>
        </div>
      </div>
      <script type="text/ng-template" id="mfaModalTemplate">
        <div>
          <div class="modal-header">
            <h1 class="h4 modal-title" style="display: inline-block">${Complete the steps below to enable multi-factor authentication}</h1>
            <i class="fa fa-close pull-right text-base" autofocus="true" tabindex="0" ng-click="dismissMFAConfigurationModal()" aria-label="${Close dialog}" role="button"></i>
          </div>
          <div class="modal-body">
          	<iframe id="mfa-config-window" src="/google_auth_setup_dialog" width="100%" height="500px" frameBorder="0"></iframe>
          </div>
        </div>
      </script>
    </div>

Client script (change made on line 141-149)

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

	// 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.uploadNewProfilePicture = function($event) {
		$event.stopPropagation();
		if($event.keyCode === 9) {
			return;
		}
		var $el = $element.find('input[type=file]');
		$el.click();
	}

	$scope.attachFiles = function(files) {
		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) {
			$scope.avatarPicture = {
				'background-image': "url('" + response.sys_id + ".iix')",
				'color': 'transparent'
			};
			$rootScope.$broadcast("sp.avatar_changed");
		});
	}

	$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() {
		return $scope.data.sysUserModelList
						.filter(function(field) {
							return $scope.displayField("sys_user", field.name)
						});
	}

	$scope.data.userPreferencesChanged = false;

	// get the list of values for a property using the concourse picker api (timezone, language)
	var getListValuesForProperty = function(endpoint, listProperty) {
		$http.get('/api/now/ui/concoursepicker/' + endpoint).then(function(response) {
			if (response && response.data && response.data.result && response.data.result.list) {
				if (!listProperty.list)
					listProperty.list = [];

				listProperty.list = response.data.result.list;
				if (response.data.result.current) {
					if (!listProperty.current)
						listProperty.current = {};
					listProperty.current = $filter('filter')(listProperty.list, {value: response.data.result.current}, true)[0];
				}
			}
		});
	};

	// list of user properties that are not user preferences
	$scope.data.listProperties = {
		timezone: {},
		language: {}
	}

	// initialize dropbox data
	getListValuesForProperty('timezone', $scope.data.listProperties.timezone);
	getListValuesForProperty('language', $scope.data.listProperties.language);
	//set the user property
	$scope.setPreferenceValue = function(endpoint, value) {
		$http.put('/api/now/ui/concoursepicker/' + endpoint, {current : value}).then(function(response) {
			if (response && response.data && response.data.result) {
				$scope.data.userPreferencesChanged = true;
			}
		});
	}

	//set the user preference value
	$scope.setUserPreferenceValue = function(userProperty) {
		userPreferences.setPreference(userProperty.key, userProperty.value).then(function() {
				 $scope.data.userPreferencesChanged = true;
	 });
	};

	$scope.toggle = function(e, userProperty) {
		if (e.type === 'keypress' && e.keyCode === 32) {
			userProperty.value = !userProperty.value;
			$scope.setUserPreferenceValue(userProperty);
		}
				var checkBox = userProperty.value;
  // Get the output text
  var text = document.getElementById("text");
  // If the checkbox is checked, display the output text
  if (checkBox == false && userProperty.key == "glide.ui.accessibility"){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
	}

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

	$scope.triggerMFAConfigurationModal = function() {
		$scope.mfaModalInstance = $uibModal.open({
			templateUrl: 'mfaModalTemplate',
			scope: $scope,
			size: 'lg'
		});

		createCloseMFAModalHandler();
	}

	$scope.dismissMFAConfigurationModal = function() {
		$scope.mfaModalInstance.close();
	}

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

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

	function createCloseMFAModalHandler() {
		// This is a hack. Wait for the inner iframe to load, then mock
		// the GlideDialogWindow close function to do the right thing. If it's not ready
		// after a second, try again 9 more times. 
		var retryCount = 0;
		var maxRetries = 10;
		tryOverrideGlideDialogWindowClose();
		function tryOverrideGlideDialogWindowClose() {
			$timeout(function() {
				var frameGlideDialogWindow = document.getElementById('mfa-config-window').contentWindow['GlideDialogWindow'];
				if (!frameGlideDialogWindow) {
					retryCount++;
					if (retryCount >= maxRetries)
						return;

					tryOverrideGlideDialogWindowClose();
					return;
				}

				frameGlideDialogWindow.get = function() {
					return {
						destroy: function() {
							$scope.dismissMFAConfigurationModal();
						}
					}
				};
			}, 1000);	
		}
	}
}

Thanks

[Mr Bow]

Hi ther, almost there

this is what I am getting:

is it possible just to get the text and a bit smaller? or the block but smaller? also if it can be dynamic saying on and off?