UI Page to show list of Records based on selected users

Using UI Page we are going to show the list of Incident’s based on selected users as Caller. Follow the below simple steps to develop the logic.

Steps:

1. -> Navigate to System UI> UI Pages.
   -> Click New to create New UI Page.
   -> Name: IncidentListBySelectedUserFILTEROne
   -> Script: HTML

   <?xml version="1.0" encoding="utf-8" ?>
   <j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
   <h1><center>List of Incidents of Selected User</center></h1>
       <!--techimonster.com -->
       <style>
           .table1{background-color: #f1f1f1;margin: 20px 0;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important; width:100%; text-align:center;}
           .button1{background-color: #066599b3 !important;color: white !important;border-color: white;border-radius: 6px;padding: 6px 20px 6px 20px;}
           .pad1{padding:15px !important;}
       </style>
   <table class="table1">
       <tr>
        <td class="pad1">
           <label style="font-size: 17px;">Select the User</label>
        </td>
        <td class="pad1">
          <g:ui_reference name="name" id="name" table="sys_user" />
        </td>
           
       <td class="pad1">
       <button class="button1" type="button" value= "Generate Report" onclick="showResult()">Generate Report</button>
       </td>
       </tr>
       
   </table>
       <iframe id="my_incident" frameborder="0" height="500px" scrolling="yes" name="my_incident" width="100%" allowtransparency="true" src="blank.do?" border="0" ></iframe>
   
   <!--techimonster.com -->	
   </j:jelly>
   

   Client Script:

   function showResult(){
       var user=document.getElementById("name").value;
       document.getElementById("my_incident").src="/IncidentListBySelectedUserFILTERTwo.do?sysparm_user="+user;
   }
   

    

2. -> Navigate to System UI> UI Pages.
   -> Click New to create New UI Page.
   -> Name: IncidentListBySelectedUserFILTERTwo
   -> Script: HTML

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<!--techimonster.com -->
<g:evaluate var="sysparm_id">
          var sysparm_user = RP.getParameterValue("sysparm_user"); 
</g:evaluate>
    <style>
    .table th{padding-left:10px;}
    .table td:hover{background-color: white;}
        .prio{margin-right: 6px; width: 15px;height: 15px;display: inline-block;vertical-align: middle;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 15px;}
        .col1{background-color:red;}
        .col2{background-color:orange;}
        .col3{background-color:yellow;}
        .col4{background-color:green;}
        .col5{background-color:grey;}
</style>
    <table  border="1" style="width:100%" class="table">
        
    <tr style="background-color: #455464b3;color: white;line-height: 30px;">
   <th>Number</th>
   <th>Name</th>
        <th>Priority</th>
 </tr>
        <g:evaluate var="jvar_gr" object="true">
    var gr= new GlideRecord('incident');
    gr.addQuery('caller_id',sysparm_user);
    gr.query();     
</g:evaluate>
        <j:while test="${gr.next()}">
<!-- If priority is 1 -->
<j:if test="${gr.priority==1}">		
<tr style="background-color: #4554641a;line-height: 30px;">
<td><a href="incident.do?sys_id=${gr.getValue('sys_id')}">${gr.number}</a></td>
<td>${gr.caller_id.name}</td>
    <th><span class="prio col1"></span> ${gr.priority.getDisplayValue()}</th>
</tr>
</j:if>
            <!-- If priority is 2 -->
<j:if test="${gr.priority==2}">		
<tr style="background-color: #4554641a;line-height: 30px;">
<td><a href="incident.do?sys_id=${gr.getValue('sys_id')}">${gr.number}</a></td>
<td>${gr.caller_id.name}</td>
    <th><span class="prio col2"></span> ${gr.priority.getDisplayValue()}</th>
</tr>
</j:if>
            
            <!-- If priority is 3 -->
            <j:if test="${gr.priority==3}">		
<tr style="background-color: #4554641a;line-height: 30px;">
<td><a href="incident.do?sys_id=${gr.getValue('sys_id')}">${gr.number}</a></td>
<td>${gr.caller_id.name}</td>
    <th><span class="prio col3"></span> ${gr.priority.getDisplayValue()}</th>
</tr>
</j:if>
            <!-- If priority is 4 -->
            <j:if test="${gr.priority==4}">		
<tr style="background-color: #4554641a;line-height: 30px;">
<td><a href="incident.do?sys_id=${gr.getValue('sys_id')}">${gr.number}</a></td>
<td>${gr.caller_id.name}</td>
    <th><span class="prio col4"></span> ${gr.priority.getDisplayValue()}</th>
</tr>
</j:if>
        
            <!-- If priority is 5 -->
            <j:if test="${gr.priority==5}">		
<tr style="background-color: #4554641a;line-height: 30px;">
<td><a href="incident.do?sys_id=${gr.getValue('sys_id')}">${gr.number}</a></td>
<td>${gr.caller_id.name}</td>
    <th><span class="prio col5"></span> ${gr.priority.getDisplayValue()}</th>
</tr>
</j:if>
            
    </j:while>
    </table>

    
</j:jelly>

3. Output:

Run the First UI Page ‘IncidentListBySelectedUserFILTEROne’ then select the user and click the Generate Report button.