Populate Incident list in the portal.

[Akanksha Gupta2]

Hello All ,

Here I wanted to share about Service Portal .

A portal is a ServiceNow user interface (UI), built using the Service Portal framework, which provides an alternative user experience to the standard UI. It is an intuitive way for users to interact with the underlying Now Platform using a minimum number of clicks from any device: desktop, tablet, or smartphone. Portals allow users to access any platform component including:

• Selected records from important tables, such as all tasks assigned to the user
• Metrics, reports, and analytics
• Service Catalog
• Knowledge Base
• Surveys
• User profile
• Approvals

Service Portal allows you to build a mobile-friendly self-service experience for your users. It interacts with parts of the Now Platform, so users can access specific platform features using Service Portal. It is an alternative to the Content Management System (CMS) based on more modern technologies.

• Web portal which gives better user experience.
• Front face for end users.
• Easily configurable.
• Automatic layout adjustment on any device.

Note :-

• Service Portal is a separate application from CMS
• Service Portal does not support Jelly Scripting.
• Service Portal does not support Standard ServiceNow forms and lists
• CMS can not be migrated to Service Portal.
• Service Portal does not use Iframes .

Why we need Service Portal?

• Easily accessible to users.
• Easy to customize with administration.
• Better UI experience.
• Single Page driven for all the features and services of platform for end users.
• Support modern technologies – HTML , CSS , Bootstrap , ANGULAR JS , JS.

Steps of execution of page :-

Server Side Code loads first -> Client side -> HTML , CSS

USE CASE :- Print  incident data in your portal.

First create one widget in your portal ,  then open it from Widget Editor .

Step 1 :- 

paste this code in HTML section 

<div >
  <table style="width:100%"  id="myTable">
    <caption>Incident Data </caption>
    <tr class="header">
    <th >Number</th>
    <th >Caller Name</th>
      <th >Priority</th>
       <th>Action</th>
  </tr>
    <tr  ng-repeat="row in c.data.table.list">
      <td>
      	{{row.number}}
      </td>
       <td>
        {{row.caller_id}}
      </td>
      <td>
        {{row.priority}}
      </td>
       <td>
         <button class="btn btn-info" name="checkButton" ng-click="showCheck(row.number)">
        Check
        </button>
      </td>
    </tr>
   
  </table>
</div>

Step 2 :- CSS 

* {
  box-sizing: border-box;
}

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;
}

#myTable th, #myTable td {
  text-align: left;
  padding: 12px;
}

#myTable tr {
  border-bottom: 1px solid #ddd;
}

#myTable tr.header, #myTable tr:hover {
  background-color: #f1f1f1;
}

Step 3:- Server Script

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	
	//running from a server.update()//
	if(input){
		console.log(input.ans);
	}
	
	data.uName =gs.getUserDisplayName();
	data.table = {
		"list":[]
	};
	data.ans="";
	var incidentGR = new GlideRecord('incident');
	incidentGR.addQuery('active',true);
	incidentGR.addQuery('priority','1');
	incidentGR.query();
	
	while(incidentGR.next()){
		var obj = {};
		obj.number=incidentGR.getValue('number');
		obj.caller_id = incidentGR.getDisplayValue('caller_id');
		obj.priority = incidentGR.getValue('priority');
		data.table.list.push(obj);
	}
	
})();

Step 4 :- Client Script

api.controller=function($rootScope,$scope,$timeout) {
  /* widget controller */
  var c = this;
	$scope.showCheck = function(num){
		c.data.ans=num;
		alert('showCheck() : num = ' +num);
		c.server.update();
	}
};

At the end , You will get Output like this 

Please Mark helpful or BookMark it for your refernce.

Regards,

Akanksha Gupta