User LDAP attributes & profile picture in portal widget

[Gerrity]

Hello Community,

I've been working on a widget that presents the currently logged in user's LDAP attributes and profile picture (more specifically, the thumbnail.iix).

However, I'm having a couple of challenges and would appreciate anyone's insight.

1) This is a known issue, but when the LDAP attributes are imported, thumbnails are not automatically being created.  They are only created if a user uploads a profile image or does something "Live Profile" related like initiate a chat, etc..

Since this is a known issue and there are posted scripts to create thumbnails after LDAP imports, I'm wondering if anyone can help me use the user's profile image NOT live profile thumbnail?

2) I can get all of the user's LDAP attributes I need, except for department.   I'm able to retrieve the department sys_ID but not the name.  from my code samples and commented sections you can see I've tried using things liket .getDisplayValue('department') and .toString() without success.

Here's my widget code:

HTML:

<div class="default-focus-outline">
    <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="avatar-small-medium"> 
                <img class="imgclass" src="{{c.agent_image}}" hieght=500px/><!--new code line -->
                  <!--<div class="sub-avatar mia" ng-style="avatarPicture"><i class="fa fa-user"></i></div> -->
                </div>
              </div>
            </div>
</div>
          <div class="col-xs-12 col-sm-8">
            <h2>{{c.fullName}}</h2>
            <H4>
            <p ><strong class="pad-right">${First Name} :</strong>{{c.firstName}}</p>
            <p ><strong class="pad-right">${Last Name} :</strong>{{c.lastName}}</p>
            <p ><strong class="pad-right">${Department} :</strong>{{c.edept}}</p>
            <p ><strong class="pad-right">${Title} :</strong>{{c.title}}</p>
            <p ><strong class="pad-right">${Email} :</strong>{{c.email}}</p>
            <p ><strong class="pad-right">${Mobile Phone Number} :</strong>{{c.mobilephone}}</p>
            <p ><strong class="pad-right">${Home Phone Number} :</strong>{{c.homephone}}</p>
            <p ><strong class="pad-right">${Pager Number} :</strong>{{c.pager}}</p>
            </H4>
             
         
        </div>
            </div>
          </div>
      </div>
</div>

Client Script:

function(glideUserSession, $scope) {
/* widget controller */
	var c = this;
	c.edept= $scope.user.department;
	c.mobilephone = $scope.user.mobile_phone;
	c.homephone = $scope.user.home_phone;
	c.pager = $scope.user.u_mobile_phone;
        console.log(c.edept);
	console.log(c.mobilephone);
	//glideUserSession provided OOTB used to like g_user
	glideUserSession.loadCurrentUser().then(function(currentUser) {
		c.firstName = currentUser.firstName;
		c.lastName = currentUser.lastName;
		c.fullName = currentUser.getFullName();
                console.log(currentUser.title);
		c.title =currentUser.title;
                console.log(currentUser.email);
		c.email = currentUser.email
        //To get link to user avatar
                console.log(currentUser.avatar);
		c.agent_image = currentUser.avatar; //new code;
     });
}

Server Script:

(function() {
	var user = new GlideRecord('sys_user');
        //  var department = g_form.getDisplayBox('department').value;
        //  user.department=user.getValue('department');
      
    user.department=user.getUser().getRecord().getDisplayValue('department').toString();
               //user.edepartment=user.department.sys_id.toString();	
		user.mobile_phone=user.getValue('mobile_phone');
		user.home_phone=user.getValue('home_phone');
		user.pager=user.getValue('u_mobile_phone');
})();

My results are a "shrunk" avatar profile image (I'd like to use the users profile image, not the avatar or profile "thumbnail")

Also my "department" value is being returned as a sys_id like "95d17a49db9e98908de0cf5e139619f9" instead of the name of the department.

Any assistance would be appreciated.

Cheers,

[Tom23]

Hi,

Interesting question!

So the first thing I noticed was that the height on your html had a typo, so fixing that seemed to resolve your issue with the picture size.

In regards to the users profile image, are you referring to the photo section on the sys_user page? I've assumed you are, and adjusted the code accordingly.

As a general rule, I don't like to have the client side script do much if possible and prefer to handle things server side. With that in mind, with portal widgets you can run server side scripts and pass it into the data object, which you can reference directly in the html and that's what I've done here. If you prefer to utilise the client controller, you'll still probably want to lookup the user and set department and photo from the server script, but set the values within the client controller.

As a further note, I'm not really sure why (someone smarter than me will probably know!) but everything I set on the server side had to be explicitly set with toString() otherwise it was coming across as an object. Anyway, enough waffle.

Here's my html code:

<div class="default-focus-outline">
    <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="avatar-small-medium"> 
                <img class="imgclass" src="{{data.photo}}" height=150px/><!--new code line -->
                  <!--<div class="sub-avatar mia" ng-style="avatarPicture"><i class="fa fa-user"></i></div> -->
                </div>
              </div>
            </div>
</div>
          <div class="col-xs-12 col-sm-8">
            <h2>{{data.fullName}}</h2>
            <H4>
            <p ><strong class="pad-right">${First Name} :</strong>{{data.firstName}}</p>
            <p ><strong class="pad-right">${Last Name} :</strong>{{data.lastName}}</p>
            <p ><strong class="pad-right">${Department} :</strong>{{data.department}}</p>
            <p ><strong class="pad-right">${Title} :</strong>{{data.title}}</p>
            <p ><strong class="pad-right">${Email} :</strong>{{data.email}}</p>
            <p ><strong class="pad-right">${Mobile Phone Number} :</strong>{{data.mobilephone}}</p>
            <p ><strong class="pad-right">${Home Phone Number} :</strong>{{data.homephone}}</p>
            <p ><strong class="pad-right">${Pager Number} :</strong>{{data.pager}}</p>
            </H4>
             
         
        </div>
            </div>
          </div>
      </div>
</div>

and the Server Script:

(function() {
	var userRecord = new GlideRecord('sys_user');
	userRecord.get(gs.getUserID());
	if(userRecord){
		data.firstName = userRecord.first_name.toString();
		data.lastName = userRecord.last_name.toString();
		data.fullName = gs.getUserDisplayName();
		data.title = userRecord.title.toString();
		data.email = userRecord.email.toString();
		data.mobilephone =userRecord.mobile_phone.toString();
		data.homephone = userRecord.phone.toString();
		data.pager = userRecord.u_mobile_phone.toString();
		data.department = userRecord.department.name.toString();
		data.photo = userRecord.photo.toString() + ".iix";
	}
	
	else{
		console.log('Failed to get the user information!')
	}
	
	
})();

Hope this helps!

[Gerrity]

Thank you very much for taking the time to write a reply and explain.

I'm going to give this a try also.

Much appreciated!!

[shloke04 · Accepted solution]

Hi,

Couple of things to note here.

1) For your first query, user image is stored in form of Attachment in ServiceNow in sys_attachment table so you need query the same to get the Image of the User profile.

2) You do not need a Client Controller Script here, you can simply achieve this using a combination of HTML and Server Script itself.

I have modified the code for you :

HTML:

<div class="default-focus-outline">
    <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 ng-repeat="image in data.agent_image"> 
      	<img class="img-responsive catalog-item-image" alt="" style="display: inline" ng-src="/sys_attachment.do?sys_id={{::image.sys_id}}&view=true" />  		
      
</div>	
          </div>
</div>
          <div class="col-xs-12 col-sm-8">
            <h2>{{data.fullName}}</h2>
            <H4>
            <p ><strong class="pad-right">${First Name} :</strong>{{data.firstName}}</p>
            <p ><strong class="pad-right">${Last Name} :</strong>{{data.lastName}}</p>
            <p ><strong class="pad-right">${Department} :</strong>{{data.department}}</p>
          	<p ><strong class="pad-right">${Title} :</strong>{{data.title}}</p>
            <p ><strong class="pad-right">${Email} :</strong>{{data.email}}</p>
            <p ><strong class="pad-right">${Mobile Phone Number} :</strong>{{data.mobilephone}}</p>
            <p ><strong class="pad-right">${Home Phone Number} :</strong>{{data.homephone}}</p>
            <p ><strong class="pad-right">${Pager Number} :</strong>{{data.pager}}</p>
            </H4>
             
         
        </div>
            </div>
          </div>
      </div>
</div>

Server Script:

(function() {
	
	var gr = new GlideRecord('sys_user');
	gr.addQuery('sys_id',gs.getUserID());
	gr.query();
	if(gr.next()){
		data.fullName = gr.getDisplayValue('name');
		data.agent_image = getProfileImage(gr.sys_id);
		data.department = gr.getDisplayValue('department');
			data.firstName = gr.getDisplayValue('first_name');
			data.lastName = gr.getDisplayValue('last_name');
			data.title = gr.getDisplayValue('title');
			data.email = gr.getDisplayValue('email');
			data.mobilephone = gr.getDisplayValue('mobile_phone');
			data.homephone = gr.getDisplayValue('phone');
			data.pager = gr.getDisplayValue('department');
	}
	
	function getProfileImage(userID){
		var propertyImages = [];
		var gr1 = new GlideRecord('sys_attachment');
		gr1.addQuery('table_sys_id',userID);
		gr1.query();
		if(gr1.next()){
			var thisPropertyImage = {};
			thisPropertyImage.sys_id = gr1.sys_id.toString();
   thisPropertyImage.name = gr1.file_name.toString();			
   propertyImages.push(thisPropertyImage);			
			
		}
		return propertyImages
	}

})();

Output:

Note this is the image which I have for System Admin in my User Profile Record, you can upload any other image and it will display correctly

Hope this helps. Please mark the answer as correct/helpful based on impact.

Regards,
Shloke

[Gerrity]

@shloke04  This is brilliant!  

Thank you it's works very well.  I'm going to have to read up a lot more to better understand server side vs client side.   

Much appreciated and marking as correct answer.

Thank you!