make modifications in UI page

DevYadav · ‎07-09-2025

Hi Community, I’m working on a custom UI page in ServiceNow that displays a list of attached documents, each with an “Upload to Current” button. The requirement is that when I click this button on any attachment, it should mark or assign that specific document as the “current document.” Right now, clicking the button just reloads the page and doesn’t perform any action. There are no client scripts or processing scripts currently linked to the button, and I’m new to UI Pages in general. All attachments are loading properly, and I only need help fixing the button’s functionality so that it performs the expected operation of assigning the clicked document as the current one. Any guidance or example implementation would be highly appreciated.
Here is my code:

<thead>

<tr>

</a>

</th>

<strong>Record</strong>

</a>

</th>

<strong>Content Type</strong>

</a>

</th>

<strong>Size Bytes</strong>

</a>

</th>

<strong>Created</strong>

</a>

</th>

</tr>

</thead>

<tbody>

<tr ng-show="numberOfPrevDocuments>0" ng-repeat="document in previousDocuments | filter:search | orderBy:propertyName:reverse | offset:currentPage*itemsPerPage | limitTo:itemsPerPage ">

<td>

<a ng-attr-title="{{'DownloadPreviousDocument'+document.file_name}}" href="{{ downloadUrl }}/sys_attachment.do?sys_id={{ document.sys_id }}&sysparm_view=&sysparm_record_target=&sysparm_record_row=1&sysparm_record_list=sys_idCONTAINS{{ document.sys_id }}%5EORDERBYsys_created_on&sysparm_record_rows=1" class="btn btn-xs btn-primary btn-xs tabable">Download</a>

<button ng-attr-title="{{'UploadToCurrent'+document.file_name}}" style="display:block;" ng-click="uploadToCurrentDocument(document.sys_id)" class="btn btn-xs btn-primary btn-xs tabable">Upload to Current</button>

</td>

<td> {{ document.file_name }}</td>

<td> {{ document.u_record }} </td>

<td> {{ document.content_type }} </td>

<td> {{ document.size_bytes }} </td>

<td> {{ document.sys_created_on }} </td>

</tr>

<h4>{{noRecordsMessage}}</h4>

</td>

</tr>

</tbody>

<tfoot>

<li>

<button ng-attr-title="Previous Document Previous Page" type="button" class="btn btn-primary tabable"

ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"><

</li>

<li>

<span>

Page

{{currentPage+1}}/{{numberOfPages9()==0 ? 1 : numberOfPages9()}}

</span>

</li>

<li>

<button ng-attr-title="Previous Document Next Page" type="button" class="btn btn-primary tabable"

ng-disabled="currentPage >= getPrevDocument().length/itemsPerPage - 1"

ng-click="currentPage=currentPage+1">

NEXT></button>

</li>

</ul>

</div>

</td>

</tfoot>

</table>

</div>

The Current Document code is also similar, but I'm not able to paste it.

Siddhesh Jadhav · ‎08-04-2025

Hi @DevYadav ,

here is a workaround you can try to make the “Upload to Current” button functional in your custom UI Page.

Step 1: Add the AngularJS Function to the UI Page Script Section

In your UI Page, add the following inside the <script> section or below your table HTML:

<script>
function($scope) {
  $scope.uploadToCurrentDocument = function(sysId) {
    var ga = new GlideAjax('MarkCurrentDocumentAjax');
    ga.addParam('sysparm_name', 'markCurrent');
    ga.addParam('sysparm_sys_id', sysId);
    ga.getXMLAnswer(function(response) {
      var result = response.responseXML.documentElement.getAttribute("answer");
      if (result === 'success') {
        alert("Marked as current document.");
        location.reload(); // Optional: refresh to reflect change
      } else {
        alert("Failed to mark as current.");
      }
    });
  };
}
</script>

Step 2: Create the Script Include

Create a Script Include with name: MarkCurrentDocumentAjax and make sure it's set to "Client Callable".

var MarkCurrentDocumentAjax = Class.create();
MarkCurrentDocumentAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
  markCurrent: function() {
    var sysId = this.getParameter('sysparm_sys_id');
    if (!sysId) return 'error';

    var att = new GlideRecord('sys_attachment');
    if (att.get(sysId)) {
      var resetGR = new GlideRecord('sys_attachment');
      resetGR.addQuery('table_sys_id', att.table_sys_id);
      resetGR.addQuery('table_name', att.table_name);
      resetGR.query();
      while (resetGR.next()) {
        resetGR.u_is_current = false; // replace with your field
        resetGR.update();
      }

      att.u_is_current = true; // replace with your field
      att.update();
      return 'success';
    }
    return 'error';
  }
});

Make sure you have a custom field u_is_current on the sys_attachment table or modify it to use your own tracking logic.

Step 3: Button Already in Place

Your existing button:

<button ng-attr-title="{{'UploadToCurrent'+document.file_name}}" 
        style="display:block;" 
        ng-click="uploadToCurrentDocument(document.sys_id)" 
        class="btn btn-xs btn-primary btn-xs tabable">
  Upload to Current
</button>

...will now call the client function and make the update.

Optional

If you want to visually indicate which document is marked as current, you can add this inside your row:

<td ng-if="document.u_is_current">✔️ Current</td>

Thanks and regards,
Siddhesh Jadhav

Mark as helpful and accept if your query is resolved!