Very Simple Method to Show Incident List on Portal Page

Using Widget we are going to show the list of Incident’s on Portal Page. Follow the below simple steps to develop the logic.


Step 1 – Create new Widget

  •  Navigate to Service PortalWidgets.
  • Click New to create New Widgets.
    • Name: Incident List
    • ID: inc_list
    • HTML: 
    • <h2><center>INCIDENT LIST</center></h2>
      <table class="table-task">
          <th>Incident Number</th>
          <th>Short Description</th>
          <th>Assigned to</th>
        <tr ng-repeat="incident in data.incidents">
    • CSS:
    • .table-task  {border-collapse:collapse;border-spacing:0;width: 100%;}
      .table-task td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
        overflow:hidden;padding:10px 5px;word-break:normal;}
      .table-task th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
        font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
      table.table-task thead tr {background-color: #1438f1;color: white;}
      table.table-task thead tr th {text-align: center;}
    • Server script:
    • (function() {
          var inc_rec = new GlideRecord('incident');
          data.incidents = [];
          var count=1;
          while ({
            var incident = {};
   = count++;
            incident.sys_id = inc_rec.getUniqueValue('sys_id');
            incident.number = inc_rec.getDisplayValue('number');
            incident.short_description = inc_rec.getDisplayValue('short_description');
            incident.user = inc_rec.getDisplayValue('assigned_to');

Step 2 – Create new Page

  •  Navigate to Service PortalPages.
  • Click New to create New Page.
    • Name: Incident List
    • ID: incident_list
  • Save the Page
  • In Related List click Open in Designer ➚ (this will open in NewWindow)
  • First drag and Drop the Layout (mentioned in the screenshot)
  • Search the Widget by name Incident List and drag and drop into the page.
  • In Portal Page Designer right corner click to Preview the page (Refer Screenshot below) or follow the link by replace your instance ->



0 0 vote
Article Rating
Inline Feedbacks
View all comments