The Now Platform® Washington DC release is live. Watch now!

Help
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

HOW TO ADD FAVORITES STAR ON A SERVICE PORTAL?

Mark_Bailey
Mega Guru

See image below. 

I love what Hi did with allowing stars for favorites. I'd like to do this on my Service Catalog so  my end users can save favorite catalog items. How find_real_file.pngwas this accomplished?

1 ACCEPTED SOLUTION

Wybren1
Giga Guru

Hi There,

 

This is custom addition (I think), and not available from out of the box.
I've created a similar functionality by using the 'bookmark' table to save the favorites.

Example:
find_real_file.png
I've also created one widget that represents a list with your given favorites.

Good luck,

Widget (Star)

Server Script:

(function() {
	
	data.favIcon = 'fa fa-star-o';
	data.tooltip = 'Favorite add or remove';
	
})();

//Remove or add to favorite
if(input) {
	if(input.checkUrl) {
		
		var bookmarkGR = new GlideRecord('sys_ui_bookmark');
		bookmarkGR.addQuery('user', gs.getUserID());
		bookmarkGR.addQuery('u_service_portal_bookmark', true);
		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';
		} else {
			//No bookmark found
			data.bookmark = false;
			data.favIcon = 'fa fa-star-o';
		}

	}

	if(input.bookmark == false) {
		//Create a new bookmark
		var bookmarkGR = new GlideRecord('sys_ui_bookmark');
		bookmarkGR.initialize();
		
		bookmarkGR.user = gs.getUserID();
		bookmarkGR.u_service_portal_bookmark = true;
		bookmarkGR.url = input.url;
		bookmarkGR.title = input.title;
		if(input.icon) {
			bookmarkGR.icon = input.icon;
		} else {
			bookmarkGR.icon = 'th-list';
		}
		
		var bookmarkId = bookmarkGR.insert();
		if(bookmarkId) {
			data.bookmark = true;
			data.bookmarkId = bookmarkId;
			data.favIcon = 'fa fa-star';
		}

	}
	
	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 page to your favorites';
		data.bookmarkId = '';
	}
	 
}

Client script:

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.update = function() {
		//If bookmark is true do something
		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;
			});

		//If the bookmark is false do something
		} 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;
			});
		}
	}
}

HTML

  <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="bottom">
    </i>
  </button>

View solution in original post

4 REPLIES 4

Nirosha Uddandi
Kilo Guru

navigate to service catalog-->under catalog item we have view details option there you can find favorites option to add item to your favorites list

 

find_real_file.png

Wybren1
Giga Guru

Hi There,

 

This is custom addition (I think), and not available from out of the box.
I've created a similar functionality by using the 'bookmark' table to save the favorites.

Example:
find_real_file.png
I've also created one widget that represents a list with your given favorites.

Good luck,

Widget (Star)

Server Script:

(function() {
	
	data.favIcon = 'fa fa-star-o';
	data.tooltip = 'Favorite add or remove';
	
})();

//Remove or add to favorite
if(input) {
	if(input.checkUrl) {
		
		var bookmarkGR = new GlideRecord('sys_ui_bookmark');
		bookmarkGR.addQuery('user', gs.getUserID());
		bookmarkGR.addQuery('u_service_portal_bookmark', true);
		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';
		} else {
			//No bookmark found
			data.bookmark = false;
			data.favIcon = 'fa fa-star-o';
		}

	}

	if(input.bookmark == false) {
		//Create a new bookmark
		var bookmarkGR = new GlideRecord('sys_ui_bookmark');
		bookmarkGR.initialize();
		
		bookmarkGR.user = gs.getUserID();
		bookmarkGR.u_service_portal_bookmark = true;
		bookmarkGR.url = input.url;
		bookmarkGR.title = input.title;
		if(input.icon) {
			bookmarkGR.icon = input.icon;
		} else {
			bookmarkGR.icon = 'th-list';
		}
		
		var bookmarkId = bookmarkGR.insert();
		if(bookmarkId) {
			data.bookmark = true;
			data.bookmarkId = bookmarkId;
			data.favIcon = 'fa fa-star';
		}

	}
	
	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 page to your favorites';
		data.bookmarkId = '';
	}
	 
}

Client script:

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.update = function() {
		//If bookmark is true do something
		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;
			});

		//If the bookmark is false do something
		} 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;
			});
		}
	}
}

HTML

  <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="bottom">
    </i>
  </button>

renaud3
Giga Contributor

 Thank you very much wybren ! It's working fine !

We can see the star and all, created a new widget to list the favorite items.

 

But it's only working as admin, not other roles. Do you have an idea of where this could come from ?

We checked the widgets roles, (we added snc_internal and snc_external)

We checked the ACLs on the sys_ui_bookmark table

 

And it's still invisible for people with at least the snc_internal and snc_external roles.

 

Any tips on this?

 

Thank you

Renaud

Can you share the code you used in your widget to show the Favorites?