Display only 5 records on ServicePortal widget

[robhaas]

I am looking at the simple list widget in SP and I have the maximum entries set to 5. Therefore, if I have 10 items, the widget shows the first 5 and at the bottom it shows 'First 5 of 10'. I built a separate widget from scratch and am running a query against a request table with a filter. I am able to look at the code for the simple list widget and add the footer and verbiage. However, I cannot figure out how to get my list to show only x amount of records and still show the total number of records at the bottom. It is one or the other.

Here is the html code:

<div class="panel panel-{{::options.color}} b">
<div class="panel-heading">
       <h4 class="panel-title"><fa ng-if="::options.glyph.length" name="{{::options.glyph}}" class="m-r-sm" /><b>${My Requests}</b></h4>
   </div>
<div>
<div>
       <table>
   <thead>
   <tr>
                   <th>Number</th>
                   <th>Short Description</th>
                   <th>State</th>
                   <th style="width: 88px;">Created</th>
               </tr>
           </thead>
   <tbody>
               <tr ng-repeat="req in data.request">
                       <td><a href = "https://xxx.service-now.com/arp?sys_id={{req.sys_id}}&view=eipam_splist&id=eipam_ticket&table=request"><bold>{{req.number}}</bold></a></td>
                       <td>{{req.shortdescription}}</td>
                       <td>{{req.state}}</td>
                       <td>{{req.created}}</td>
               </tr>
           </tbody>
       </table>
       </div>
</div>
</div>
         <div ng-if="!c.data.count" class="list-group-item">
         ${No records found}
         </div>
   <div class="panel-footer" ng-if="!c.options.hide_footer && c.maximum_entries && c.data.count > c.maximum_entries"> <!--ng-if="c.data.count">-->
       <h4 class="panel-title">{{c.getMaxShownLabel(c.maximum_entries, c.data.count)}}
           <a class="pull-right" href="javascript:void(0)" ng-click="c.seeAll()">${View all}</a></h4>
   </div>

I attempting a gr.setLimit(5) after my query, but then show 5 records, and my footer only shows 5 of 5 when there are actually 16 records in the specified filter.

Here is the html for the simple list. I understand it is completely different than my widget, I am just trying to replicate the count/appearance.

<div class="panel panel-{{::c.options.color}} b" ng-if="c.data.isValid && (c.options.always_show || c.data.filterText || c.data.list.length)">
   <div class="panel-heading" ng-if="::!c.options.hide_header">
       <h4 class="panel-title">           
           <span ng-if="c.options.glyph">
               <fa name="{{::c.options.glyph}}" />
           </span><b>{{::c.options.title}}</b></h4>
       <!-- <i class="fa fa-filter" ng-click="c.toggleFilter()" ng-class="{'disabled-filter': !c.showFilter}"></i> -->
       <div ng-show="c.showFilter">
           <input ng-model="c.data.filterText" ng-model-options="{debounce: 300}" sn-focus="c.showFilter" placeholder="{{::data.filterMsg}}" ng-change="c.update()" class="form-control input-sm filter-box">
       </div>
   </div>
   <div class="list-group hide-x-overflow" style="max-height: {{::c.options.panel_body_height || 'none'}}; overflow-y: auto;">
       <div ng-if="c.data.list.length > 0" ng-repeat="item in c.data.list track by item.sys_id" class="list-group-item">
           <a ng-click="c.onClick($event, item, item.url, {})" href="javascript:void(0)" >
               <span ng-repeat="action in c.data.actions" href="" ng-click="c.onClick($event, item, action.url, action)" ng-if="action.glyph"
                           class="list-action l-h-40 pull-right">
                   <fa name="{{action.glyph}}" ng-class="c.getActionColor(action)" />
               </span>
               <span ng-if="c.options.image_field" class="pull-left m-r"
                           ng-class="{'avatar': c.options.rounded_images, 'thumb-sm': c.options.rounded_images}">
                   <img ng-src="{{item.image_field}}" alt="..." class="img-sm" ng-class="{'img-circle': c.options.rounded_images}">
               </span>
               <div>
                   <div ng-switch on="item.display_field.type" ng-class="{'l-h-40': !item.secondary_fields.length}">
                       <span class="translated-html" ng-switch-when="translated_html" ng-bind-html="item.display_field.value"></span>
                       <div ng-switch-default>{{item.display_field.display_value}}</div>
                   </div>
                   <medium class="text-muted" ng-repeat="f in item.secondary_fields">
                       <span ng-if="!$first">&emsp;</span>
                       <span ng-switch="f.type" title="{{::f.label}}">
                           <span ng-switch-when="glide_date">{{::f.display_value}}</span>
                           <span ng-switch-when="glide_date_time">{{::f.label}}:{{::f.display_value}}</span>
                           <span ng-switch-default="">{{f.label}}: {{f.display_value}}</span>
                       </span>
                   </medium>
               </div>
           </a>
       </div>
         <div ng-if="!c.data.list.length" class="list-group-item">
         ${No records found}
         </div>
   </div>
   <div class="panel-footer" ng-if="!c.options.hide_footer && c.options.maximum_entries && c.data.count > c.options.maximum_entries">
       <h4 class="panel-title">{{c.getMaxShownLabel(c.options.maximum_entries, c.data.count)}}
           <a class="pull-right" href="javascript:void(0)" ng-click="c.seeAll()">${View all}</a></h4>
   </div>
</div>

[robhaas]

I found ng-repeat options of limit to. So using limitTo : 5 I was able to achieve this.

[Laukik Udpikar]

Hey, can you please elborate your sol.

[Vishal Khandve]

Hi,

 please go through the below link :

https://community.servicenow.com/community?id=community_question&sys_id=d3ef0ba5dbdcdbc01dcaf3231f96...

and refer ujjawals answer.

Thank you,

Vishal Khandve