Hello,
There is an OOTB widget "My Requests" URL - https://instance.service-now.com/sp_config?id=widget_editor&sys_id=8cc0df25875023000f220cf888cb0bb5 in this the data is being row wise and few field values displayed one below other as in the screenshot.
i want to convert the data displayed in this row to column. Please help me achieve this.
HTML Code:
<div class="panel panel-default b" ng-init="c.trackPage()">
<div class="panel-heading" >
<h2 class="panel-title">{{c.options.title}}</h2>
</div>
<div class="panels-container list-group">
<div class="list-group-item row" style="margin:0px;border-top:0px;" >
<div class="col-md-5" style="">
<div class="input-group">
</div>
</div>
<div class="col-md-3 col-xs-5 " style="">
<div class="form-inline control-view" ng-if="c.options.show_view == 'true'">
<label class="control-label hidden-xs wrapper-xs " for="view">${View}</label>
<select ng-model="c.viewFilter" id="view" class="sc-basic-select" ng-change="c.changeView()" style="width:80%">
<option value="open" selected="true">${Open}</option>
<option value="close">${Closed}</option>
</select>
</div>
</div>
<div class="col-md-4 col-xs-7" style="">
<div class="input-group" style="width:100%">
<input ng-model="c.filterText" ng-keypress="c.checkEnter($event)"class="form-control" style="width:100%" placeholder="{{data.filterMsg}}" aria-label="{{data.filterMsg}}">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="c.search()" title="${Search}" aria-label="${Search}">
<i class="fa fa-search"></i>
</button>
</span>
</div><!-- /input-group -->
</div>
</div>
<div ng-if="c.data.request.req_list.length == 0 && !c.filterText" class="panel-body panels-container">
${You do not have any requests}
</div>
<div ng-if="c.data.request.req_list.length == 0 && c.filterText" class="panel-body panels-container">
${Search didn't match any requests}
</div>
<div role="table" class="table table-responsive m-b-none">
<div role="rowgroup" class="sr-only">
<div role="row">
<span role="columnheader">${Request}</span>
<span role="columnheader">${State}</span>
<span role="columnheader">${Updated}</span>
</div>
</div>
<div role="row" class="list-group-item table-responsive" ng-repeat="item in c.data.request.req_list | limitTo: c.data.lastLimit track by item.sys_id" style="margin:0px" >
<div role="cell" class="col-xs-6 padder-l-none padder-r-none main-column">
<div class="primary-display">
<a href="?id={{::item.url.id}}&table={{::item.url.table}}&sys_id={{::item.url.sys_id}}" sn-focus="{{::item.highlight}}"> {{::item.display_field}} </a>
</div>
<small class="text-muted">
<div ng-repeat="f in item.secondary_displays" class="secondary-display">
<span >{{::f.display_value}}</span>
</div>
</small>
</div>
<div role="cell" class="col-xs-3 padder-l-none padder-r-none state-column">
<div class="state">
<span> {{::item.state}}</span>
</div>
</div>
<div role="cell" class="col-xs-3 padder-l-none padder-r-none updated-column">
<div class="updated">
<i class="fa fa-clock-o" aria-hidden="true" title="${Updated}"></i>
<sn-time-ago timestamp="::item.updated_on"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 pull-none" ng-if="c.data.hasMore" style="padding-bottom:15px">
<div class="text-a-c" ng-if="c.fetching">
<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
<span class="sr-only">${Loading...}</span>
</div>
<button class="btn btn-default btn-show-more" ng-click="c.loadMore()"> ${Show More} </button>
</div>
Hi Kartik,
As per the requirements from clients. We want this page to be like below:
We tried to clone the below widget. However, our requirements for HR Cases to be displayed as provided in the screenshot was not achieved.
Kindly assist.
Regards,
Arpitha G
