In this article we will look at how we can create favorites in the service portal.

To do this we need to build the following:

• Widget to mark pages as a favorite
• Widget to list the favorites
• Portal page to display the list of favorites
• Header menu to list the favorites

Favorite Marker Widget

This is the widget that will be added to the pages you want people to be able to mark as a favorite.

Note: This will create a favorite in the navigation menu in the platform UI outside of the Service Portal as well.

Name: Favorite Marker

ID: favorite_marker

HTML Template:

<button ng-click="c.update()" 
          type="button" 
          class="btn btn-outline-secondary btn-sm" 
          style="font-size:1.5em">
    <i ng-class="c.data.favIcon"
       uib-tooltip="{{c.data.tooltip}}"
       tooltip-placement="left"
       tooltip-append-to-body="true">
    </i>
</button>

CSS:

button {
    background-color: #fff;
}

Client Controller:

function($scope, $window, $document) {
  /* widget controller */
  var c = this;

    var pathUrl = $window.location.pathname;
    var queryUrl = $window.location.search;

    c.data.name = c.options.title;
    c.data.icon = c.options.glyph;
    c.data.url = pathUrl + queryUrl;

    c.server.get({checkUrl: true,url: c.data.url}).then(function(r) {
        c.data.bookmark = r.data.bookmark;
        c.data.favIcon = r.data.favIcon;
        c.data.bookmarkId = r.data.bookmarkId;
        c.data.tooltip = r.data.tooltip;
    });

    c.update = function() {

        if(c.data.bookmark == true) {
            c.server.get({bookmark: true,bookmarkId: c.data.bookmarkId}).then(function(r) {
                c.data.bookmark = r.data.bookmark;
                c.data.favIcon = r.data.favIcon;
                c.data.bookmarkId = r.data.bookmarkId;
                c.data.tooltip = r.data.tooltip;
            });

        } else {
            c.server.get({bookmark: false,url: c.data.url, title: c.data.name,icon: c.data.icon}).then(function(r) {            
                c.data.bookmark = r.data.bookmark;
                c.data.favIcon = r.data.favIcon;
                c.data.bookmarkId = r.data.bookmarkId;
                c.data.tooltip = r.data.tooltip;
            });
        }
    }
}

Server Script:

(function() {

    data.favIcon = 'fa fa-star-o';

})();

function getUrlVars(input) {
    var vars = {};
    var parts = input.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

//Remove or add to favorite
if(input) {
    if(input.checkUrl) {

        var bookmarkGR = new GlideRecord('sys_ui_bookmark');
        bookmarkGR.addQuery('user', gs.getUserID());
        bookmarkGR.addQuery('url', input.url);
        bookmarkGR.query();

        if(bookmarkGR.hasNext()) {
            //Found the bookmark, select it
            bookmarkGR.next();
            data.bookmark = true;
            data.bookmarkId = bookmarkGR.getUniqueValue();
            data.favIcon = 'fa fa-star';
            data.tooltip = 'Remove from favorites';
        } else {
            //No bookmark found
            data.bookmark = false;
            data.favIcon = 'fa fa-star-o';
            data.tooltip = 'Add as a favorite';
        }
    }

    if(input.bookmark == false) {
        //Create a new bookmark
        var bookmarkGR = new GlideRecord('sys_ui_bookmark');
        bookmarkGR.initialize();
        bookmarkGR.user = gs.getUserID();

        if (input.title == 'Catalog Item'){
            var nameSysID = getUrlVars(input.url)['sys_id'];

            var bookmarkGR2 = new GlideRecord('sc_cat_item');
            bookmarkGR2.initialize();
            bookmarkGR2.addQuery('sys_id',nameSysID);
            bookmarkGR2.query();
            while (bookmarkGR2.next()) {
                bookmarkGR.title = bookmarkGR2.getDisplayValue('name');
            }

        } else {

            if (input.title == 'Ticket'){
                var nameTable = getUrlVars(input.url)['table'];
                if (nameTable == null){
                    nameTable = 'kb_knowledge';
                }
                if (nameTable == 'kb_knowledge'){
                    var nameSysID = getUrlVars(input.url)['sys_kb_id'];
                }else{
                    var nameSysID = getUrlVars(input.url)['sys_id'];
                }


                var bookmarkGR2 = new GlideRecord(nameTable);
                bookmarkGR2.initialize();
                bookmarkGR2.addQuery('sys_id',nameSysID);
                bookmarkGR2.query();
                while (bookmarkGR2.next()) {
                    bookmarkGR.title = bookmarkGR2.getDisplayValue('short_description');

                }
            } else {    
                bookmarkGR.title = input.title;
            }
        }

        bookmarkGR.url = input.url;

        if(input.icon) {
            bookmarkGR.icon = input.icon;
        } else {
            bookmarkGR.icon = 'tack';
        }
        var bookmarkId = bookmarkGR.insert();
        if(bookmarkId) {
            data.bookmark = true;
            data.bookmarkId = bookmarkId;
            data.favIcon = 'fa fa-star';
            data.tooltip = 'Remove from favorites';
        }
    }

    if(input.bookmark == true ) {
        var bookmarkGR = new GlideRecord('sys_ui_bookmark');
        bookmarkGR.get(input.bookmarkId);

        bookmarkGR.deleteRecord();

        data.bookmark = false;
        data.favIcon = 'fa fa-star-o';
        data.tooltip = 'Add as a favorite';
        data.bookmarkId = '';
    }
}

We added this widget next to the breadcrumbs widget on our pages.

Update: After you have added this to the pages you want people to be able to bookmark, you will need to go to the widget in the platform and set the "Title" of the instances in the Instances related list. Make sure it matches what is listed in the server script "if" statements that check the input.title.

Example: The "if (input.title == 'Catalog Item')", the instance title for the widget should be called "Catalog Item".

Favorite List Widget

This widget is used to display the list of Service Portal favorites the user has marked.

Name: Favorite List

ID: favorite_list

HTML Template:

<div>

  <div class="panel-heading" >
    <label class="panel-title">
      <i class="fa fa-star m-r-sm"></i>
    </label>
  </div>


  <div class="list-group" >
    <div ng-if="c.data.fav.hasAny == false" class="list-group-item">
      ${ You do not have any favorites }
    </div>
    <div class="list-group-item" ng-repeat="item in c.data.fav" >
      <a ng-href="{{::item.url}}">{{item.short_description}}</a><i class="fa fa-times-circle fav-icon" 
                                                                   ng-click="c.removeFav(item.sys_id)"
                                                                   uib-tooltip="Remove from favorites" tooltip-placement="right" tooltip-append-to-body="true"></i>
    </div>
  </div>

</div>

CSS:

.fav-icon {
  float: right;
  font-size: 17px;
}
.fav-icon:hover {
  color: red;
}

.panel-heading {
  background-color: #b1b1b1;
  color: #ffffff;
}

Client Controller:

function($scope,spUtil) {

    var c = this;

    if (c.data.fav.length > 0) {
        c.data.fav.hasAny = true;
    }
    else {
        c.data.fav.hasAny = false;
    }

    c.removeFav = function(value) {
        c.data.remove = value;
        c.server.update()         
        spUtil.update($scope);
    }
}

Server Script:

(function() {

    var t = data;
    var z = new GlideRecord('sys_ui_bookmark');
    z.addQuery('user', gs.getUserID());
    z.addQuery('url', 'STARTSWITH', '/sp?');
    z.orderByDesc('sys_created_on');
    z.query();
    t.rowCount = z.getRowCount();
    t.fav = [];

    while (z.next()) {
        var a = {};
        a.short_description = z.getValue('title');
        a.sys_id = z.getValue('sys_id');
        a.url = z.getValue('url');
        t.fav.push(a);
    }

    // Delete favorite
    if (input && input.remove) {
        var bmGR = new GlideRecord('sys_ui_bookmark');
        bmGR.addQuery('user', gs.getUserID());
        bmGR.addQuery('sys_id', input.remove);
        bmGR.query();
        if (bmGR.next()) {
            bmGR.deleteRecord();
        }
    }
})();

Now you just need to create a page to add the Favorite List widget to.

Create Favorites Header Menu

Navigate to Service Portal > Menus and open the record that is tied to your Service Portal. In the Menu Items related list, click New.

Label: Favorites

Type: Scripted List

Condition: gs.isLoggedIn()

Server Script:

// maximum number of entries in this Menu
var max = 30;

var t = data; // shortcut
t.items = [];
var u = gs.getUser().getID();

// use record watchers to tell header when to update dropdown counts
t.record_watchers = [];
t.record_watchers.push({'table':'sys_ui_bookmark','filter':'urlSTARTSWITH/sp?^user=' + u});

var b = new GlideRecord('sys_ui_bookmark');
b.addQuery('user', gs.getUserID());
b.addQuery('url', 'STARTSWITH', '/sp?');
b.orderByDesc('sys_created_on');
b.setLimit(max);
b.query();
while (b.next()) {
  var a = {};

  a.type = 'link';
  a.title = b.getValue('title');
  a.href = b.getValue('url');
  t.items.push(a);
}

t.items = t.items.slice(0, max); // only want first 30
t.count = t.items.length;

var link = {title: gs.getMessage('View all favorites'), type: 'link', href: '?id=my_favorites', items: []};
t.items.unshift(link); // put 'View all favorites' first

Note: for the link to the View all favorites, make sure that you replace ?id=my_favorites with the page ID you created.