service portal sn-avatar

[dheeraaj]

Hi All,

Need help in using the <sn-avatar>. See the attached image. No matter which user I add, it is always displaying the current user image. Not sure where I am going wrong. 

I have used the below code: 

HTML: 

<span class="navbar-avatar">
<sn-avatar class="avatar-small-medium" primary="userID" show-presence="false" />
</span>

client controller:

$scope.userID = $scope.user.sys_id;

Help is appreciated.

Regards,

Dheeraj

[Harsh Vardhan]

can you add full html , server and client script of your widget. 

[Harsh Vardhan]

i tested with your code on personal instance. and its showing correct result. 

[dheeraaj]

Yes, It is showing the correct result in personal instance, but it is not showing thw same thing in Client Portal.

HTML : 

<div class="panel panel-{{options.color}} b">

<div class="panel-heading"> <h2 class="h4 panel-title" ng-bind="::options.title">
<fa ng-if="::options.glyph.length" name="::{{options.glyph}}" class="m-r-sm" /></h2>
</div>
<div id="share-dialog" class="inline-dialog " style="">
<div class="inline-dialog-content" style="width: 270px; max-height: 575px;">
<div class="field-group">
<label>Share link</label>
<input id="share-link-input" ng-click="c.select()" type="text" class="url-text" readonly />
<button type="button" class="copy-button" ng-click="c.copyURL()">Copy</button>
<div class="copied share-custom-message" style="margin-bottom: 17px; margin-top: 5px; display:none">
<div class="icon-success"/>
<div class="message-text">Copied to clipboard</div>
</div>
</div>
<hr style="margin-top: 12px; margin-bottom:7px; border:0; border-bottom: 1px solid #ccc;" />
<div class="field-group">
<label>Add user</label>
<sn-record-picker field="shareuser" table="'sys_user'"
display-field="'name'" value-field="'sys_id'"
search-fields="'name'" page-size="100" >
</sn-record-picker>
<ul class="recipients">
<li class="recipient-user" ng-repeat="user in data.userList">
<span class="navbar-avatar">
<sn-avatar class="avatar-small-medium" primary="userID" show-presence="false" />
</span>
<!-- <img src="{{user.photo}}" title="{{user.name}}"/> --->
<span class="title" title="{{user.name}}">{{user.name}}</span>
<span class="remove-recipient" ng-click="c.removeUser($index)"></span>
</li>
</ul>
</div>
<div class="field-group">
<label>Include a message</label>
<textarea class="textarea" id="share-note-input" placeholder="Take a look at this article"></textarea>
</div>
<div class="field-group" style="text-align: right;">
<select id="url-type" class="url-options">
<option value="Portal">Portal URL</option>
<option value="UI/Console">UI/Console URL</option>
</select>
<button class="dialog-button" ng-click="c.submit()" ng-disabled="isUserListEmpty()">Share</button>
</div>
</div>
</div>

</div>

cLIENT sCRIPT : 

function($scope, spUtil, $sce, $rootScope, $timeout) {
var c = this;

$("#share-link-input")[0].value = window.location;
c.data.userList = [];
c.data.action = "";

$scope.shareuser = {
displayValue: '',
value: '',
name: 'shareuser'
};
$scope.userID = $scope.user.sys_id;
$scope.isUserListEmpty = function() {
return c.data.userList.length < 1;
};

c.select = function() {
$("#share-link-input").select();
};

c.copyURL = function() {
c.select();
document.execCommand("copy");
$(".share-custom-message").fadeToggle();
setTimeout(function(){
$(".share-custom-message").fadeToggle();
},500);
};

c.removeUser = function(index) {
c.data.userList.splice(index,1);
};

c.submit = function() {
c.data.action = "submit";

var url = $("#share-link-input")[0].value;
c.data.document_id = url.slice(url.indexOf("sys_id=")+7);
c.data.message = $("#share-note-input")[0].value;
c.data.urlType = $("#url-type")[0].value;

c.server.update().then(function(response) {
spUtil.update($scope);
c.data.action = '';
$("#share-note-input")[0].value = '';
});
};

$scope.$on("field.change", function(evt, parms) {
if(parms.field.name == 'shareuser') {
c.data.userId = parms.newValue;
c.data.action = "addUser";
}
if(c.data.action == '') {
return;
}

c.server.update().then(function(response) {
spUtil.update($scope);
c.data.action = '';
$scope.shareuser = {
displayValue: '',
value: '',
name: 'shareuser'
};
});
});

}

Server Script :

if(input) {

if(input.action == "addUser" && input.userId && input.userId != '') {
data.userList = input.userList;
data.userList.push(getUser(input.userId));
}

if(input.action == "submit") {
var list = [];
for(var i=0; i<input.userList.length; i++) {
list.push(input.userList[i].id);
}

var share = new GlideRecord("u_share_article");
share.initialize();
share.u_table = "kb_knowledge";
share.u_document = input.document_id;
share.u_recipients = list.toString();
share.u_url_type = input.urlType;
share.u_message = input.message;
share.u_shared_by = gs.getUserID();
share.insert();

data.userList = [];
}
}

function getUser(id) {
var user = new GlideRecord("sys_user");
user.get(id);

return {
id: user.getValue("sys_id").toString(),
name: user.getValue("name").toString(),
photo: getUserPhoto(id)
};
}

function getUserPhoto(id) {
var gr = new GlideRecord("live_profile");
gr.get("document", id);

var att = new GlideRecord("sys_attachment");
att.addQuery("table_name", "ZZ_YYlive_profile");
att.addQuery("table_sys_id", gr.getValue("sys_id"));
att.query();

if(att.next()) {
return att.getValue("sys_id").toString() + ".iix?t=small";
}
return 'user64black.png';
}

[Harsh Vardhan · Accepted solution]

updated client controller code. 

function($scope, spUtil, $sce, $rootScope, $timeout) {
var c = this;

$("#share-link-input")[0].value = window.location;
c.data.userList = [];
c.data.action = "";

$scope.shareuser = {
displayValue: '',
value: '',
name: 'shareuser'
};

$scope.isUserListEmpty = function() {
return c.data.userList.length < 1;
};

c.select = function() {
$("#share-link-input").select();
};

c.copyURL = function() {
c.select();
document.execCommand("copy");
$(".share-custom-message").fadeToggle();
setTimeout(function(){
$(".share-custom-message").fadeToggle();
},500);
};

c.removeUser = function(index) {
c.data.userList.splice(index,1);
};

c.submit = function() {
c.data.action = "submit";

var url = $("#share-link-input")[0].value;
c.data.document_id = url.slice(url.indexOf("sys_id=")+7);
c.data.message = $("#share-note-input")[0].value;
c.data.urlType = $("#url-type")[0].value;

c.server.update().then(function(response) {
spUtil.update($scope);
c.data.action = '';
$("#share-note-input")[0].value = '';
});
};

$scope.$on("field.change", function(evt, parms) {
if(parms.field.name == 'shareuser') {
$scope.userID = parms.newValue;
c.data.userId = parms.newValue;
c.data.action = "addUser";
}
if(c.data.action == '') {
return;
}

c.server.update().then(function(response) {
spUtil.update($scope);
c.data.action = '';
$scope.shareuser = {
displayValue: '',
value: '',
name: 'shareuser'
};
});
});

}

If my answer helped you, mark it as correct and helpful.