Custom UI Page for Approvals

[Utkarsha]

Hi all,

I have been working on a custom ui page to display list of approvals pending from sysapproval_approver table this is basically to substitute an approver and update it...however the list which i've created is not displaying anything

could anyone pls suggest me what could be the reason here?

Any sort of assistance here is highly appreciated!

Thank you,

UI Page: HTML Content-
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:g2="glide:ui">
<!-- Capture sys_id of the current record -->
<j:set var="jvar_sys_id" value="${sysparm_sys_id}" />

<h2>Select Approver</h2>

<!-- Table to display the list of pending approvals -->
<table border="1" style="width:100%; text-align:left;">
  <thead>
    <tr>
      <th>Approver Name</th>
      <th>State</th>
    </tr>
  </thead>
  <tbody>
    <!-- Fetch pending approvals for the current record in 'requested' state -->
    <g2:forEach var="approval" items="${gs.getGlideRecord('sysapproval_approver')}">
      <j:if test="${approval.getEncodedQuery('state=requested^document_id=' + jvar_sys_id)}">
        <tr>
          <td>${approval.approver.getDisplayValue()}</td>
          <td>${approval.state.getDisplayValue()}</td>
        </tr>
      </j:if>
    </g2:forEach>
  </tbody>
</table>

<br/>

<!-- Select a user from sys_user table (referencing only the name field) -->
<table>
  <tr>
    <td>Select an approver:</td>
    <td>
      <g:ui_reference
        name="approver_id"
        table="sys_user"
        display_field="name" />
    </td>
  </tr>
</table>

<br/>

<!-- Submit and Cancel buttons -->
<button type="button" onclick="submitApprover()">Submit</button>
<button type="button" onclick="cancelDialog()">Cancel</button>

</j:jelly>
Client Script-
// Function to close the dialog window
function cancelDialog() {
    GlideDialogWindow.get().destroy();
}

// Function to submit the selected approver
function submitApprover() {
    // Get the current GlideDialogWindow
    var gdw = GlideDialogWindow.get();

    // Get the value of the selected approver from the UI reference field
    var user = gel('approver_id').value; // 'approver_id' refers to the correct name attribute from the UI reference field

    // Check if a user was selected
    if (!user) {
        alert('Please select an approver before submitting.');
        return;
    }

    // Create a GlideAjax call to a Script Include to update the approver
    var ga = new GlideAjax('UpdateApprover'); // 'UpdateApprover' should be the name of the Script Include you create
    ga.addParam('sys_id', g_form.getUniqueValue()); // Send the current record sys_id
    ga.addParam('new_approver', user); // Send the selected approver sys_id
    ga.getXMLAnswer(function(response) {
        var result = response.responseXML.documentElement.getAttribute('answer');

        // Provide feedback based on the result
        if (result === 'success') {
            alert('Approver updated successfully.');
            gdw.destroy(); // Close the dialog
            g_form.refresh(); // Refresh the form to show the updates
        } else {
            alert('Error updating approver. Please try again.');
        }
    });
}
Script include:
var UpdateApprover = Class.create();
UpdateApprover.prototype = Object.extendsObject(AbstractAjaxProcessor, {

    updateApprover: function() {
        var sysId = this.getParameter('sys_id'); // Get the record sys_id
        var newApprover = this.getParameter('new_approver'); // Get the new approver sys_id
        
        // Perform logic to update the approver for the approval record
        var gr = new GlideRecord('sysapproval_approver');
        if (gr.get(sysId)) {
            gr.setValue('approver', newApprover);
            gr.update();
            return 'success';
        } else {
            return 'error';
        }
    }
});