- Post History
- Subscribe to RSS Feed
- Mark as New
- Mark as Read
- Bookmark
- Subscribe
- Printer Friendly Page
- Report Inappropriate Content
on 03-14-2022 06:34 AM
Recently, I came across a requirement from one of the customers which was an interesting one. I thought it would be wise to share my experience with respect to developing that.
There are sometimes scenarios where the customer is searching something on Service Portal and tons of results appear in the search page . And he wonders across many of them and then give up , sometimes while searching again for the samething he opens the same article expecting different result but that one he has already looked before . So, there is no way in Servicenow or Servicenow portal at the moment just to showcase that the article has been visited just like GOOGLE where we see at the bottom of each search when you are logged in that “Page has been visited on ….”
So, the idea was to keep a differentiator just to help out , that this article has been visited . So, considering that usecase in mind we did some tweaks in css of search which helped in differentiating between already READ articles and UNREAD articles.
Now lets say your search results appear on Faceted search widget when you search something from homescreen then making below changes in widget will help you in achieving our objective.
Css changes to be made for link in CSS template of widget
a:visited {
color: pink; //color of your choice
}
Screenshot:
HTML could be some link like below (do not need to change just for reference)
<a href="https://www.gmail.com">Email </a><br>
So now whenever user visits this link with text Email it will change it’s color to PINK( means READ) .
NOTE : whenever you apply the above css it will start changing color for all the links that are on that page if you have VISITED those even though you wanted to keep only for article.
So inorder to make this change only to specific link you need to use a new class in html just to differentiate that in css so that only the article link changes the color.
HTML changes
<a href=" https://www.gmail.com " class='abc'>W3Schools Home</a><br>
CSS changes
a.abc :visited {
color: pink;
}
This will give you the desired results i.e now the changes will be visible only on article links.
More Information :usually the concept of visited links works based on the idea that some page has been visited so that gets registered in browser as VISITED , so inorder to reset or change the color back to normal one you need to clear the history of that particular page you visited .
Incase of faceted search the code part is in the search source so play around that if required with respect to article link.
If you like the content I have shared don’t forget to mark it as helpful and BOOKMARK it for your future references..
- 530 Views
