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

Steps:

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">
      <thead>
        <tr>
          <th>No.</th>
          <th>Incident Number</th>
          <th>Short Description</th>
          <th>Assigned to</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="incident in data.incidents">
          <td>{{incident.no}}</td>
          <td>{{incident.number}}</td>
          <td>{{incident.short_description}}</td>
          <td>{{incident.user}}</td>
        </tr>
      </tbody>
      </table>
    • 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');
          inc_rec.query();
          data.incidents = [];
          var count=1;
          while (inc_rec.next()){
            var incident = {};
            incident.no = 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');
            data.incidents.push(incident);
          }
      })();

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 -> https://devxxxxx.service-now.com/sp?id=incident_list

 

Output: