QR code code generator - ServiceNow

[Nayan Mahato]

Create a unique QR code for the asset or any record of a ServiceNow table;-

1. Create a UI script and import the js package (jquery.qrcode.min)- UI Script name- jquery.qrcode.min 

2. Create a UI page and use the UI script jquery.qrcode.min as the source.- UI page name- QRLink Page

3. Call the UI page QRLink Page from any UI action. UI Action name- Generate QR Link

XML export of UI script, UI page, and UI action have been attached. Thanks,

 

Regards,

Nayan

[SaschaWildgrube]

The proposed solution is great if its ok to create the qrcode in the browser for ad-hoc display only. If you need to create and store the qrcode on the server side, check this out: 

The following solution is to create the QRCode on the server side, integrate it as a static part of the document you want to print.

One option to do it is to create the QRCode raw data on the server and then convert it directly into html and then create a PDF based on html.

Check this out:

https://github.com/saschawildgrube/servicenow-devtools/blob/master/update/sys_script_include_ee4a4c0...

The DevTools app contains a truckload of reusable scripts and
features to support your app development:
https://www.wildgrube.com/servicenow-devtools

Fork at will!

[Nayan Mahato]

Excellent!! Thanks for sharing.

[Yanal]

Hello !

I have imported the App, but I am not sure how to use it in a BR,

I want to generate a QR code on insertion of a record and attach it there, any idea how I can utilize what you have shared ? 

[SaschaWildgrube]

Check this out to see how a QR code is generated as html and then embedded into an PDF which is then stored as an attachment:

https://github.com/saschawildgrube/servicenow-parcel/blob/master/bd2d377cdb92cd10b652edb305961975/update/sys_script_include_c0d9099adb524150bcced03cd39619c5.xml

From there, seek out the HtmlRenderParcelLabelA4 function:

The function HtmlRenderParcelLabelA4 uses the DevTools function HtmlRenderQRCode.

https://github.com/saschawildgrube/servicenow-parcel/blob/master/bd2d377cdb92cd10b652edb305961975/update/sys_script_include_846ac247db5a8950b652edb3059619cb.xml

[Nitin Duggal2]

I have installed the dev tools application on my PDI and imported these 3 files but still, when I try to execute "CreateParcelLabel" it gives an error. Also is there a need to write separate code to save this PDF or the existing code will attach this to the record sysid we are passing.

[SaschaWildgrube]

hey there.

1. What excat error do you see?

2. What do you mean by "imported these 3 files"? You need to install all referenced apps properly. For the parcel app - as it is not yet "released" yet - I didn't put up a website with installation instructions yet. Please import the app from source control and follow the instructions in the manual ui page.

3. And yes, the Parcel app also stores the generated PDF to the record.

Hope that helps! Let me know 😉

[Madhurya]

Hi @Nayan Mahato , 

If I use the above code, it is perfectly creating the QR code, but there is one issue. 

After generating QR code for this link 

 gdw.setPreference("sysparm_url", "https://<instancename>.service-now.com/hp?id=walkup_online_checkin"+"&"+"location_id="+g_form.getUniqueValue());

so basically this is the URL 

https://<instancename>.service-now.com/hp?id=walkup_online_checkin&location_id=b345a3071bccb388eb404000cd4bcb61

Here if I scan the QR code , it is taking the below URL

https://<instancename>.service-now.com/hp?id=walkup_online_checkin&amp;location_id=b345a3071bccb388eb404000cd4bcb61

& is being taken as &amp; after scanning the QR code, hence it is not redirecting me to the correct URL, please help me out here. 

[SaschaWildgrube]

hey there!

The issue is NOT in the creation of the QR Code.

When you set a preference, use encodeURIComponent to escape characters that have a sematic meaning in a URL (like the ampersant):

gdw.setPreference(
   "sysparm_url",
   encodeURIComponent(
      "https://<instancename>.service-now.com/hp?id=walkup_online_checkin"+"&"+"location_id="+g_form.getUniqueValue()));

When using the preference use decodeURIComponent:

decodeURIComponent("${sysparm_url}");

Good luck!

[Madhurya]

I have got solution for my above problem with &. 

Whoever faces similar problem, follow the below link. 

https://community.servicenow.com/community?id=community_question&sys_id=88111b84db4cab40200f0b55ca961976

[Madhurya]

Hi @Nayan Mahato , 

Is there any way we can generate a QR code with a company logo on it with some modification in your script? Please advice. 

[SaschaWildgrube]

Just checked the documentation of jquery.qrcode.

The lib doesn't seem to support that.

Refer to

https://github.com/jeromeetienne/jquery-qrcode

[SaschaWildgrube]

But this library seems to support it. You may want to check it out:

https://github.com/cheprasov/js-qrcode

[Nayan Mahato]

Hi Madhurya,

I beleive yes, we can do that as well. Just add the below code in the UI page HTML section and it should work. Thanks.

<img src="yourimage.jpg" width="100" height="100"/>

You also need to customize the code where you are printing the image. Thanks.

Make sure to import the company logo image into the ServiceNow image table. Thanks.

Regards,

Nayan

[Nayan Mahato]

Hi Madhuriya,

There is a problem with your instance URL so you need to change & and = with UTF-8 encoding. Thanks.

Regards,

Nayan

[SaschaWildgrube]

I think the ask is to embed the logo INTO the QR Code.... 

[Biswajyoti Das]

Dear Sascha,

I am unable to import the App from Git Hub

We have a requirement to generate QR code  and generate pdf using the HTML can you please give me the link from where i can download and import

[SaschaWildgrube]

Hi Biswajyoti,

ping me at sascha.wildgrube@servicenow.com. I can send you the apps as update sets.

Curious to hear what prevents you from importing from Github though.... 😉

Cheers

Sascha

[TanmayBha]

Hi
@Nayan Mahato ,

Can I get the information from the ritm table variable set data into the QR code if I want to make a QR code for the ritm request when req is submit and sends an email. ?

It is Possible?

[Shriyansh Jugra]

Hi @Nayan Mahato,

Can we redirect the user to incident form with some prepopulated values like short description, CI  once QR code is scanned in Now Mobile application.

Regards,

Shriyansh

[Kachu]

I was able to get the Image embedded and download automatically to the user system by modifying the send print function. 

My requirement is 

- Either Update the record with flow/ business rule such that when Asset record is created/updated the QR code should auto generate and attach to the image field "u_qr_code"  that i created on the form

- or attach it as an attachment when record is created/updated.

Can any one help me with the above ?

@Nayan Mahato @SaschaWildgrube 

By the way here is the code i used on Ui page Print function which allowed me to add logo embedded in the middle

function SendPrint() {
    var canvas = document.getElementsByTagName("canvas")[0];
    var logoImg = new Image();
    logoImg.src="instagram.png"; //Replace with you logo and copy the src from the image of the servicenow instance//
    logoImg.onload = function() {
        var canvasWidth = canvas.width;
        var canvasHeight = canvas.height;
        var logoWidth = logoImg.width;
        var logoHeight = logoImg.height;
        
        var context = canvas.getContext("2d");
        context.drawImage(logoImg, (canvasWidth - logoWidth) / 2, (canvasHeight - logoHeight) / 2);
        
        var a = canvas.toDataURL();
        var link = document.createElement('a');
        link.href = a;
        link.download = 'canvas_image.png';
        link.click();
    };

[SaschaWildgrube]

The challenge is that the QR code is generated in the browser when rendering the ui page.

The server side has no access to the image.

The solution that I proposed (which is implemented as part of the DevTools) generates a QR code on the server and allows to embedd the QR code into a PDF.

I was also experimenting with generating an image on the server side and wanted to store this image as an attachment. I finally failed doing so as the attachment api would ALWAYS interpret the contents of the attachment as UNICODE text and performed some sort of character conversion when storing the attachment - which of course damaged the provided image binary.

At the end we used the PDF solution and did not find a way to generate an image on the server to store it. Sad but true.

[Kachu]

@SaschaWildgrube  Thank you very much for your response. with the above script on the Ui page i was able to download the image directly to my system. Can we modify this and create record in db_image  and pull that image into the  record where we generated the QR code ?

Also, I would like to open QR code on the mobile app instead of browser. I did have QR scanner On mobile but i would like to scan directly from mobile camera and then get to mobile.

Thank you.

[SaschaWildgrube]

What you could do is to create the qr code data on the server side, load that data via ajax request and the render it on the client side.

But I don't really get the point what you are trying to achieve.

Can you explain the workflow that you would like to implement?

What are the different steps?

What is the user experience?

[Ashok Kachwaha]

HI Sascha, We  have req where our hardware equipment needs to be inspected every 6 months. so on our asset form when there is new asset added it should auto create the qr code the asset and attach it to the assest it self so that we can download it in mass and provide it to the designated team to attach it to the equipment. upon scanning that  they should be able to submit inspection directly.

[SaschaWildgrube]

ok got it. So the requirement is NOT to store the QR code image permanently, but to be able to selectively bulk-create a printable pdf with these qr codes so that labels can be produced that can then be attached to actual assets. The Parcel app does something very similar - including the mechanism to scan the code and open a specific url in the platform to process the fact the label was scanned.

Think of parcels like assets. In the end, its a physical something with a label with a qr code on it. 

https://www.wildgrube.com/servicenow-parcel

[MANO XAVIER1]

Hi Sascha,

We have implemented the QR code gerneration using UI page and UI script. Because of GlideDialogwindow, QR code s not rendring in the portal and mobile. SO now we to look for options to generate the QR code in Server side or portal.

Can you please guide me how you acheived it?

Thanks

Mano

[SaschaWildgrube]

Hi Mano,

there are two options for the server side QR generation with DevTools:
https://www.wildgrube.com/servicenow-devtools

1. Render the QR code as HTML and insert it into a PDF and store the PDF as an attachment.

2. Render the QR code as HTML and inject the HTML into a UI page.

For option 1 please check out the Parcel app, you will find the code when you follow the UI action that creates the parcel labels.

https://www.wildgrube.com/servicenow-parcel

For option 2 try this code on the server side code section of the UI page:

 <g2:no_escape>$[
var strUrl = RP.getParameterValue('url')
x_snc_devtools.HtmlRenderQRCode(strUrl,14,'cm');
]</g2:no_escape> 

This example will render a QR code that points to the url that is provided as the query parameter "url" but of course you can specify any other url.

Cheers

Sascha

[Guilherme Pinhe]

Hi, it is possible to apply the QR code in a custom widget?

[SaschaWildgrube]

Yes it is. When you look at the call stack behind the UI action that triggers the Parcel label generation you'll find the function that generates the actual "bitmap" of the qrcode. This data can be generated server-side and then handed over to the client and rendered as html. 

[Guilherme Pinhe]

But to works, i need to install the devtools? Or if i follow the Nayan's step i can configure normally?

[SaschaWildgrube]

Hi,

I don't see any comment from Nayan that would lead to a different solution.

Your options are:

1. Install DevTools and use the functions directly

2. Copy the code from the relevant functions from DevTools - however this might be tricky as the relevant functions use other functions within DevTools

Cheers

Sascha

[SaschaWildgrube]

my suggestion is:

for a POC use DevTools, show that it works.

Then have a discussion on whether the client wants/accepts DevTools to become part of their mix - including the caveat that there is no ServiceNow support for it.

Depending on their decision, either install your solution or refactor it to work without DevTools.

[Guilherme Pinhe]

Hi, Sascha 

I was checking the UI script docs and they show only how to do in client script.
Do you have any template or line of code to call on client controller in a widget? Can you guide me on this? 

[SaschaWildgrube]

I didn't implement the feature into a SP widget yet.

But here is what I'd try:

1. on the server side of the widget: call the function x_snc_devtools.CreateQRCodeRawData()

2. store the result into the c.data variable (to hand it off to the browser)

3. Create an equivalent function like x_snc_devtools.HtmlRenderQRCode() but not by returning HTML but through modifying the DOM.

4. Use this new HtmlRenderQRCode() function on the client side of the widget to draw the qrcode.

[siddharth26]

Hi,

Could you please provide me the script am unable to download the XML from the community.

thanks

[SaschaWildgrube]

what do you mean by "download the xml from the community"?

The scripts I am referring to are contained in two scoped apps which are documented here:

https://www.wildgrube.com/servicenow-devtools

and here

https://www.wildgrube.com/servicenow-parcel

You will find installation instructions on these pages.

[siddharth26]

Hi Sascha,

I have created the UI scripts and UI pages and QR code is getting generated.

but when i scan the QR code its taking me to another instance https://dev92635.servicenow.com

but my instance is https://dev190269.service-now.com/ i have changed this in the UI action

as shown below:

function openQRDialog1(){

    var gdw = new GlideDialogWindow('QRLink Page');

    gdw.setTitle('QR Code');

    gdw.setSize(265,270);

    gdw.adjustBodySize();

    gdw.setPreference("sysparm_url", "https://dev190269.service-now.com/alm_hardware.do?sys_id="+g_form.getUniqueValue()+"&"+"sysparm_record_target="+g_form.getTableName());

    //get the url//Change the URL as per your instance name.

    gdw.render();

but still when i scan the QR code its taking me to https://dev92635.servicenow.com not https://dev190269.service-now.com

could you please suggest

thanks

sid

[SaschaWildgrube]

1. your instance is hibernating

2. It's impossible that your generated QR code is accidentally leading to a different instance - the odds for that are one times ten to the power of a large large large number....

3. Can you post the code that actually produces the QR code?

[Dario_C]

Hi @SaschaWildgrube, i have a problem with script, when the description is much longer this one become trunked, how i can create a second page in pdf for avoid this problem ? Thanks in advance

[SaschaWildgrube]

I assume you mean the script that creates the parcel label?

In such case I suggest you rather decrease the font size. The parcel label is intended to be printed and attached to a parcel. How would you then handle a second page?

[Dario_C]

Hi @SaschaWildgrube ,

thank you for your answers, but i need to know how i can create more pages in PDF.  Can you help me ?

Thanks in advance

[SaschaWildgrube]

Hi @Dario_C 

internally my functions use this API function:

sn_pdfgeneratorutils.PDFGenerationAPI.convertToPDFWithHeaderFooter

I am not aware of an restriction to create multipage PDFs. However you may have to do your own calculations to split text across multiple pages (yes, that is not a trivial task).

Can you share the code that is not working for you as expected?

Cheers

Sascha

[Gustavo Sales]

Hi! Is there a way to generate a base64 string from a QR Code? I'm trying to adapt the solution to use in a Flow Action, and I'll need the base64 string of the QR Code.

Thanks!

[SaschaWildgrube]

@Gustavo Sales A QR code is "just" a sequence of zeros and ones (black and white dots) plus the information of the length of the edges.
So yes, that sequence can be turned into a base64 encoded string - but why???

Or do you mean whether you can encode a base64 encoded string INTO a QR code? Then yes, you can encode ANY string (up to a given length depending on the size of the QR code) into a QR code.
I am curious though why the use of a Flow Action requires that? Can you shed some light on this? What are you trying to achieve?

[SaschaWildgrube]

Since a QR code is always quadratic, there is no need to store the length of the edges of you have the full binary sequence of the dots - the length of the edges is the square root of the length of the binary data. 

[Gustavo Sales]

Hi, @SaschaWildgrube.

In short, I'm utilizing a custom portal and I call a Flow Action (subflow, actually) to perform the necessary steps (REST calls, etc.). As an output of this action, I need something to print the QR code on the screen (that's why I suggested base64). 

[SaschaWildgrube]

@Gustav 

Hi there,

I consider the QR code as a UI concern. It is a way to represent data. I would not necessarily store the QR code itself. Rather I'd render it ad-hoc when needed - i.e. when being displayed to a user.

This is what I would suggest:

1. Your flow acts in the background and must store its results somewhere. I'd rather store that result in its raw form - i.e. the string that you want to encode in the QR code later.

2. The user interface is a portal - a widget to be precise. The server sided code of the widget would then have to read the raw data, then use x_snc_devtools.CreateQRCodeRawData() (from the DevTools app) to generate the binary representation of the QR code - then transfer that raw qr code data to the client and then render the qr code as html (see function x_snc_devtools.HtmlRenderQRCode() on how this can be done). 

Let me know if that helps!

Cheers

Sascha

DevTools con be found here: https://www.wildgrube.com/servicenow-devtools

[SimoneMicangeli]

Hello everyone

I'm having some issues with the implementation of the original post's solution.

I am implementing the solution in a scoped application, so I have adapted some of the code to match it.
I have added the UI script, UI Page and UI action, and it works perfectly on my machine, displaying the QR code that returns the content of a single line text field.

That said, when I try it on another browser (works on Google Chrome, doesn't work on Microsoft Edge), the UI page loads correctly, but no QR code shows up. I've looked around for a while, and in the Network tab of Inspect Element I've found that the UI script returns a 404 error, while on the one that works correctly, the same UI script returns 200. I've tested the implementation on a colleague's PC, and it returns a 404 error on both Chrome and Edge.

I am honestly not sure at all what possible configuration could be causing this, have I missed anything? I'm worried about clearing my Chrome's cache because it might lead to the implementation not working on any machine at all. Any ideas?

Thank you in advance

Simone Micangeli

[SaschaWildgrube]

@SimoneMicangeli what do you mean by "the UI Script returns a 404 error"? A UI Script is embedded into the page when the page is loaded - so how and where does it return a 404?

[Luiz Lucena]

Hello everyone, 

Thanks for the good content, so much to read, lots of ideas popping up!
I'm evaluating Nayan's approach first, already imported the 3 XML files.
The generated link is working fine, printing the QR code also worked fine.

But the email button in the dialog box didn't work as expected. @Nayan Mahato , the XML for QRLink Page has a commented function and your personal email in there, I've changed to mine to test and nothing happened.



What am I missing?

Thanks,