Service Portal - Bookmark Widget

[sachin_namjoshi]

Hi All,

I intent to share series of widgets which are usually required for any SP portal projects.

This blog will cover bookmark widget which you can reuse to handle bookmarks on your SP pages.

Body HTML Template:

<div>
<button ng-click="c.toggleSubscribe($event)">
<span ng-class="{'icon icon-bookmark':c.data.subscription,'icon icon-bookmark-outline':!c.data.subscription}" style="font-size: 28px"></span>
<span class="tablet-and-up-only">Bookmark</span>
</button>
</div>

CSS:

span.icon-bookmark-outline {
font-size : 28px;
}

Server Script:

(function() {
/* populate the 'data' object */
data.userID = gs.getUserID();
data.title = options.title;
data.bookmark_type = options.bookmark_type || 'Page';
})();

Client Controller:

function($http, $scope, $rootScope,$location) {
/* widget controller */
var c = this;
//var location = window.location.href;
//c.data.path = $location.absUrl();
c.data.subscription = '';

$http({method: 'GET',url:"/api/now/table/sys_ui_bookmark?sysparm_query=user="+c.data.userID}).then(function (response) {
if (response.status === 200) {
for (i = 0;i < response.data.result.length; i++) {
if(response.data.result[i].url == $location.absUrl()){
c.data.subscription = response.data.result[i].sys_id;
c.isSubscribedStyle();
break;
}
}
}
});

c.isSubscribedStyle = function() {
return {color: (c.data.subscription !== "") ? '#fcc742' : '#cfcfcf'};
};

c.toggleSubscribe = function(){
if (c.data.subscription){
$scope.server.get({action : 'delete_bookmark', url : $location.absUrl()}).then(function(r){
c.data.subscription = r.data.subscription;
//$rootScope.helpfulContent = r.data.subscription;
c.isSubscribedStyle();
});
}
if (c.data.subscription) {
$http({ method: "DELETE",url: "/api/now/table/sys_ui_bookmark/"+c.data.subscription}).then(function(response) {
if (response.status === 204) {
c.data.subscription = "";
}
});
}else {
var payload = {};
payload.user = c.data.userID;
payload.title = c.data.title;
payload.u_bookmark_type = c.data.bookmark_type;
payload.window_name = "_blank";
payload.url = $location.absUrl();
$http.post("/api/now/table/sys_ui_bookmark",payload).then(function(response) {
if (response.status === 201) {
c.data.subscription = response.data.result.sys_id;
}
});
}
};
}

I hope this widget will help SP developers.

Regards,

Sachin