Show More/Show Less on Service Portal widget

[dianemiro]

Hi Everyone,

How to achieve to have a "Show More" and "Show Less" button/link in Service Portal? Currently, we are displaying the list of Customers Affected but if there are more than 5, we want to have a Show More/Show Less option. See screenshot below:

Currently, the widget displays all customers affected. How can I limit it to display 5 with ".... Show More" and if the user clicked on it, it will show all the affected customers? This is the current html:

I am pulling the list of Customers affected via Server Script. Thank you so much for your help!

Regards,
Diane

[sachin_namjoshi]

You can use solution from below blog

https://community.servicenow.com/community?id=community_article&sys_id=3f68335adb82a050f21f5583ca961975

Regards,

Sachin

[dianemiro]

Thank you, Sachin. Although I have already read the blog. I still can't move forward with doing this feature.

[dianemiro · Accepted solution]

If anyone is interested, I was able to do this by using:

HTML:

<h5 ng-if="outage.customers.length > 200"  ng-app="showMore" ng-controller="showMorectrl" class="title">
   <div class="content" ng-class="{ less: !hidden }"> <b >${Customers Affected: }</b><i>{{outage.customers}} </i></div>
   <span ng-click="hidden = !hidden" class="showMorebtn">{{hidden ? 'Show Less' : 'Show More'}}</span>
</h5>

CSS:

.content {
	overflow: hidden;
	line-height: 20px;
}

.less {
	max-height: 20px;
}

.title {
	float: left;
}

Client Script:

var app = angular.module('showMore', []);
    app.controller('showMorectrl', function($scope) {
        $scope.hidden = true;
});