How to show a table list on service portal?

[jonnyyan]

Hi Team,

Could you please tell me how to show a table list on service portal?

I have table used to store all of requests which raised by me as below

I want to show this list on the service portal , how to complete it? which widget should i use?

i use 'data table' widget, but there is no link and filter function

Jonny

[Chuck Tomasi]

Here's an example of one I did this weekend. I choose the option to click anywhere on the entire row rather than a link in one of the column elements using an <a href> tag. I also chose to use bootstrap for the table styling with a touch in the CSS to force the background color (because it looked bad on a black background.)

Server Code

(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */

	var list = [];
	var gameGr = new GlideRecord('x_snc_jeopardy_game');
	gameGr.addQuery('state', 'pending');
	gameGr.query();

	while (gameGr.next()) {
		obj = {};
		obj.name = gameGr.getDisplayValue();
		obj.date = gameGr.date.getDisplayValue();
		obj.id   = gameGr.getUniqueValue();
		
		var ju = new Util(gameGr);
		var players = ju.getPlayers();
		
		obj.players = players;
		
		list.push(obj);
	}


	data.list = list;
})();

Client Script

function($scope, $window) {
  /* widget controller */
  var c = this;
	
	$scope.loadGame = function(gameID) {
		$window.open("?id=jeopardy_board&game_id=" + gameID, "_self");
	
	}
}

HTML

<div>
  <div class="title">
    ServiceNow Jeopardy
  </div>
  <table class="table table-hover jeopardy">
    <th>Name</th>
    <th>Date</th>
    <th>Players</th>
    <tr ng-repeat="game in data.list" ng-click="loadGame(game.id)">
      <td>{{game.name}}</td>
      <td>{{game.date}}</td>
      <td>
        <div ng-repeat="player in game.players">
          {{player.name}}
        </div>
      </td>
    </tr>
  </table>
</div>

CSS

.jeopardy {
  background-color : #fff;
}

.title {
  font-family : "Century Gothic",helvitica,arial;
  font-size : 64pt;
  color : #81B5A1;
  text-align : center;
}

[priyanka58]

Hello Chuck Tomasi,

I have same requirement so I use this code but it show the value for table data as {{game.name}} like that.

Could you please help me in that.

Regards,

Priyanka shukla

[FS1]

Hi Bhojraj,

Could you please share the code with me as we have the similar requirement?

Thanks.

[Chuck Tomasi]

If you are building your own table widget, the process is pretty simple (for a simple list). 

Server code - use GlideRecord to retrieve the records you need. Note, none of this code is tested, it is provided for example only and requires modifications for your needs.

data.list = [];

// Get a list of incidents and store it in data.list
var incGr = new GlideRecord('incident');
incGr.addQuery('priority', '1');
incGr.addActiveQuery();
incGr.query();

while (incGr.next()) {
  var obj = {
     "number" : incGr.getValue('number'),
     "short_description" : incGr.getValue('short_description')
  };
  data.list.push(obj);
}

HTML would be something simple like this: (note, the {{item.number}} and {{item.short_description}} are not shown in the <td> tags below due to some strange script filtering.

<table>
  <tr>
    <th>Number</th>
    <th>Short Description</th>
  </tr>
  <tr ng-repeat="item in c.data.list">
    <td>{{item.number}}</td>
    <td>{{item.short_description}}</td>
  </tr>
</table>

[rahul1359]

hi bhojraj,

can u share me the code, we have a requirement exactly as above in portal view