List - Bulk Approval - UI Action

List - Bulk Approval - UI Action:

User Story/Scenario:

1. For Approvers:

   • You have a module called 'Pending for My Approval' displaying a list of records from the "IT Support Orders" custom table.

   • This table "IT Support Orders" have a field called "Status" which holds two choices Approved and Rejected.

   • You can select multiple records from this list.

2. Approve Action:

   • Clicking the "Approve" button in the List banner changes the status of the selected records to "Approved."

3. Reject Action:

   • Clicking the "Reject" button in the List banner changes the status of the selected records to "Rejected."

In summary, as an approver, you can use the 'Pending for My Approval' module to select and approve or reject multiple records from the "IT Support Orders" table with corresponding buttons in the List banner.

Development Process:

Role required: admin 

Requirement in detail : We have to create two UI actions in "IT Support Orders" table list view.

1. Approve

2. Reject

Example 1: 

Follow the below steps. If below scripts is not suitable, then check the Example 2 steps and scripts.

UI Action: Approve 

Steps: 

1. Go to "IT Support Orders" table list view.

2. Open any record > Right click on form banner > go to Configure > UI Action

3. Click New, and provide the below details in new UI Action to create Approve UI action on List. 

   1. • 1. Name : Approve

        2. Table : IT Support Orders // Provide your table name here

        3. Order : 300

        4. Action Name : approve

        5. Active : True

        6. List banner button : True

        7. Condition : current.canWrite();

        8. Script: 

current.u_state = 'approved'; // In State field choices, Approved choice value should be approved.

current.update(); // Update the selected record.

action.setRedirectURL('/u_it_support_orders_list.do'); // Providing list name to display list after updating the records. 

4. Click Submit.

5. Now go to the table list view, which we used in above steps (ex: IT Support Orders), now we will be able to see the Approve UI action.

UI Action: Reject 

Steps: 

1. 1. Go to "IT Support Orders" table list view.

   2. Open any record > Right click on form banner > go to Configure > UI Action

   3. Click New, and provide the below details in new UI Action to create Reject UI action on List. 

      1. 1. 1. Name : Reject

            2. Table : IT Support Orders // Provide your table name here

            3. Order : 400

            4. Action Name : reject

            5. Active : True

            6. List banner button : True

            7. Condition : current.canWrite();

            8. Script: 

current.u_state = 'rejected'; // In State field choices, Rejected choice value should be rejected.

current.update(); // Update the selected record.

action.setRedirectURL('/u_it_support_orders_list.do'); // Providing list name to display list after updating the records. 

1. 4. Click Submit.

   5. Now go to the table list view, which we used in above steps (ex: IT Support Orders), now we will be able to see the Reject UI action. 

Refer the below step by step screenshots for more details of Example 1 steps:

Example 2: 

Follow the below steps and scripts, if above scripts not suitable and need to use script include scripts.

In this process, we are going to use Script include and UI Action with Glide Ajax and Glide Record. 

For this, first we need to create Script include and then we will use the Script Include in UI Action.

Script Include:

Script Includes are reusable JavaScript classes that encapsulate server-side scripting logic. Follow the below steps for how to create a Script Include in ServiceNow.

Steps:

1. In the application navigator, type "Script Includes" in the filter navigator and select "Script Includes" under System Definition or System UI.

2. Click on the "New" button to create a new Script Include.

3. Provide a unique name for the Script Include in the "Name" field. Optionally, add a description in the "Description" field to document the purpose of the Script Include. Choose a scope for the Script Include. If you're unsure, you can use the global scope. In the "Script" tab, write the JavaScript code for your Script Include. This code defines the functions and logic that you want to encapsulate.

Details to provide in Script include form:

• Name : BulkUpdateFromList

• Client callable : True

• Active : True

• Description : This is used for Bulk update UI Actions from List. // This is just a comment and Optional field.

• Script : Replace the below script carefully in script section.

var BulkUpdateFromList = Class.create(); // Here 'BulkUpdateFromList' is script include name, will be use in UI Action.

BulkUpdateFromList.prototype = Object.extendsObject(AbstractAjaxProcessor, {

    approveFromList: function() { // Here 'approveFromList' is function name, will be use in UI Action.

        var sysids = this.getParameter("sysparm_sysids");       // Here we are receiving the sysparm_sysids parameter from UI Action.

        var gr = new GlideRecord('u_it_support_orders'); // Here 'u_it_support_orders' is the table on which UI Action is creating.

        gr.addQuery('sys_id', 'IN', sysids); // Here adding filter query with sys ids list to 'u_it_support_orders' table.  

// Here gr.query(); is not required as we are using  gr.updateMultiple();

        gr.setValue('u_state', 'approved'); // Here, set state field value with new value ('approved') on filtered records. 

        gr.updateMultiple(); // Here updating all filtered records.

        return ;

    },

    type: 'BulkUpdateFromList'

});

4. Click on "Submit" button to save the Script Include.

5. Now, our Script Include is ready for use. We can use it in UI Action.

UI Action:  Approve

Steps: 

1. Go to "IT Support Orders" table list view.

2. Open any record > Right click on form banner > go to Configure > UI Action

3. Click New, and provide the below details in new UI Action to create Approve UI action on List. 

1. • • 1. 1. Name : Approve

          2. Table : IT Support Orders // Provide your table name here

          3. Order : 500

          4. Action Name : approvelist

          5. Active : True

          6. Show update : True

          7. Client : True

          8. List v2 Compatible : True

          9. List banner button : True

          10. Onclick : approvelist()

          11. Condition : 

          12. Script : Replace the below script on script section.

function approvelist() {

    var selected_sysids = g_list.getChecked(); // Here getting the selected records Sys IDs.

    if (!selected_sysids) { // Here checking that records selected or not.

        alert("No record selected"); // Here showing message if no records selected.

        return;

    }

    var ga = new GlideAjax('BulkUpdateFromList'); // Here creating object (ga) of Script Include class BulkUpdateFromList 

    ga.addParam('sysparm_name', 'approveFromList'); // Here adding Script Include function name approveFromList  to call.

    ga.addParam('sysparm_sysids', selected_sysids); // Here passing variable to Script Include function approveFromList 

    ga.getXML(approvefromlist_callback);

    function approvefromlist_callback() {

        g_list.refresh(); // Here Refresh the current list.

        alert('Selected records Approved Successfully'); // Here show alert message after completion.

    }

} 

4. Click Submit.

5. Now go to table list, which we used in above steps (ex: IT Support Orders), we will be able to see Approve UI action on List banner.

Refer the below step by step screenshots for more details of Example 2 steps:

Script Include:

UI Action: