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,

[Gerrity]

Hi @shloke04 

So I understand most of it and it all works,  the section I'm not clear on is the getProfileImage function within the Server Script:

You're creating an array for propertyImages, then a new GlideRecord for the sys_attachment table and then querying that table with the userID.

Then I'm lost and more specifically, how you're translating the propertyimage.sys_id to the HTML side of the widget. 

What does propertyImages.push do and how does "Return propertyImage translate to the HTML side?

(I don't expect a full answer or definition, but if you could point me to where I could learn or research more of this myself I'd appreciate it!)

Thanks again!

HTML:

ng-src="/sys_attachment.do?sys_id={{::image.sys_id}}&view=true" 

Server Script function: 

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
	}

[shloke04]

Okay no worries. let me try to explain on why this is needed.

I am calling that function from the Line below in Server script:

data.agent_image = getProfileImage(gr.sys_id);

Now when you upload an Image as a User Profile in User(sys_user) table the field type for that field is as user_image and the way ServiceNow stores those pictures are as Attachment in Attachment table i.e. sys_attachment.

So in Order to retrieve them and display it in your Portal Page you will require the Attachment Sys Id SO that is the reason I have called the function as "getProfileImage " and have done a Glide Record to sys_attachment table.

Now to your second query, along with Sys Id , I have also tried to fetch the Name of the Image just was a example use case to show how in future if it is needed to retrieve multiple attributes from any Table you can do it like this way by declaring a JSON object as below

thisPropertyImage 

After declaring store it in different variables and then push everything into an Array and finally data.agent_image will have all the details required to display in HTML.

So you would need to have the Attachment URL to display the image, and using ng-src I have tried forming the URL as below for example:

ng-src="/sys_attachment.do?sys_id={{::image.sys_id}}&view=true" 

Starting with "/" ensure that you do not need to hard code your instance name here.

Hope this make sense to you. Please let me know if you have a query, happy to help further and Thanks for marking my response as correct.

Regards,

Shloke