Quick Link Service Portal

[Deepika Mishra]

Sure! Below is a well-structured version of your query, formatted for posting in the ServiceNow Community:

---

Hi All,

I have a requirement to show Quick Links on my ServiceNow portal. To implement this, I created records in Employee Center > Quick Links.

I need assistance with the following:

1. Quick Links Display Issue:
   I’ve added 6 quick link records, but only 4 are showing. As per the project requirements, I need to display a maximum of 8 quick links (in this case, all 6 should be shown). Could anyone guide me on where I can configure the display limit for the number of links?

2. Icon Alignment:
   In the attached image, you can see icons beside each link. The requirement is to right-align these icons. Could someone please help me with the CSS or settings to achieve this?

3. Different Icons for External vs. Non-External Links:
   I have two types of links – External and Non-External. For this, I need to show different icons depending on whether the link is external or internal. How can I configure this in the widget or the records to display the correct icon for each link type?

Any guidance would be greatly appreciated!

[Omkar Mone]

Hello,

For point 1:

I don’t see any specific limit for the number of quick links. If there are active records in the Quick Links table, all of them should display. You might want to try zooming in or out on your browser to check if the missing links appear.

For point 2:

Could you please share your code for the alignment part? This will help us better understand your setup and provide a suitable solution.

For point 3:

You can use a flag to differentiate between link types and apply ng-class to dynamically style the icons based on that flag. For example:

<span class="icon" ng-class="{'fa fa-external-link': link.isExternal, 'fa fa-arrow-right': !link.isExternal}"></span>

[Deepika Mishra]

As of now I am using my OOB widget and have not customised it yet.

1. All my quick links are active but still it shows only 4.

2. In case I clone the OOB widget, where to add this alignment thing.

[Deepika Mishra · Accepted solution]

I was able to resolve all the 3 points:

Point 1.  I made the quick links related record active
Point 2 & 3.
Added below piece of HTML Code:

<div>
 <i class="fa fa-external-link external-link--icon" ng-if="(item.target == '_blank')" style="position: absolute; right: 0; margin-left: 5px;"></i>
<i class="fa fa-chevron-right catalog-item-icon" ng-if="item.target != '_blank'" style="position: absolute; right: 0; margin-left: 5px;"></i>
</div>