QR Code Generator in ServiceNow Using API Call - Article

[rathan_now]

QR Code Generator in ServiceNow Using API Call

Prerequisites

1. A ServiceNow instance with appropriate permissions.
2. Basic understanding of REST APIs.
3. Knowledge of UI Actions and scripting in ServiceNow.
4. API Endpoint: Quick Chart.

Steps to Implement

Step 1: Create a UI Action

Purpose: To trigger the QR code generation.

Configuration:

• Form Button: True
• Table: Change Request
• Client: True
• Action Name: generate_qr

Script:

function generate() {

    gsftSubmit(null, g_form.getFormElement(), "generate_qr");

}



if (typeof window == "undefined")

    qrCode();



function qrCode() {

    var recordSysId = current.sys_id.toString();

    var fieldValuePairs =

        "NUMBER: " + current.number + "\n" +

        "REQUESTED BY: " + current.requested_by.getDisplayValue() + "\n" +

        "SHORT DESCRIPTION: " + current.short_description + "\n" +

        "PRIORITY: " + current.priority + "\n";



    var restMessage = new sn_ws.RESTMessageV2();

    restMessage.setHttpMethod("get");

    restMessage.setEndpoint("https://quickchart.io/qr");

    restMessage.setQueryParameter("text", fieldValuePairs);

    restMessage.setQueryParameter("centerImageUrl", "https://raw.githubusercontent.com/20481A0453/Kapimage/refs/heads/main/Blue%20Cap-feather.png");

    restMessage.setQueryParameter("dark", "000000");

    restMessage.setQueryParameter("light", "ffffff");

    restMessage.setQueryParameter("centerImageSizeRatio", "0.50");

    restMessage.saveResponseBodyAsAttachment("change_request", recordSysId, "QRCode.png");

    restMessage.execute();

    var response = restMessage.response.getBody();

    gs.log("QR Code Response: " + response);

    action.setRedirectURL(current);

}

Step 2: Test the Implementation

1. Open a record in the Change Request table.
2. Click the "Generate QR" button.
3. Verify that the QR code is attached to the record as a file.

API Details

Endpoint:

https://quickchart.io/qr

Query Parameters:

• text: Contains the field-value pairs.
• dark: Hex code for the dark color.
• light: Hex code for the light color.
• centerImageUrl: URL of the image to be placed on the QR (for branding purposes).
• centerImageSizeRatio: A value between 0 and 1 to determine the image size ratio.

Demo Video

Check here.

Mark this as help full if this helps you to understand. if you have any questions, please feel free to reach out to me.

Happy Learning

Regards

Rathan Guntuka
#API #Integration

[rathan_now]

Please do reply back, if you still face same 

[vak]

Hi @sawyan1,

Please add onClick: generate() in the UI Action. It should work.

Thanks

Vivek

[vak]

Hi @sawyan1,

Please add onClick: generate() in the UI Action. It should work.

Thanks

Vivek