A little side work: QR Codes in XPages

Hi there,

it has been a while since I had to create my last xpages project. A customer asked me yesterday after seeing our QRCode integration in our IMPRISIS Web Desktop, if it would be possible to create QRCodes in Xpages as well - and of course it is.

As this might be usefull for others as well, here's what we did:

First of all, we used the NPM Package 'QRCode' to create the QRCodes using JavaScript. The repo can be found here:

https://github.com/soldair/node-qrcode

We then created an XPage, that allows us to type some text into an input field, click a button and receive the result as QRCode. Here's the demo:

To build this,

we followed the description in the repo above on how to use the pre-compiled modules for qrcode.js from the node-module directory after installing the library locally using yarn or npm.

There's a folder called 'build' in the qrcode subdirectory in node-modules:

That's what we imported into our Notes App using Designer in the package explorer like so:

Then, we created an XPage:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
      xmlns:xp="http://www.ibm.com/xsp/core">
      <xp:this.resources>
              <xp:headTag tagName="script">
                      <xp:this.attributes>
                              <xp:parameter
                                      name="type"
                                      value="text/javascript" />
                              <xp:parameter
                                      name="src"
                                      value="qrcode/qrcode.js" />
                      </xp:this.attributes>
              </xp:headTag>
             
             
      </xp:this.resources>
      <xp:div styleClass="container">
              <xp:div styleClass="row">
                      <canvas id="canvas"></canvas>
                      <xp:inputText id="inputText1"
                              value="#{sessionScope.MyQrCode}"
                              defaultValue="https://www.sit.de">

                      </xp:inputText>
                      <xp:button value="Label" id="button1">
                              <xp:eventHandler event="onclick" submit="true"
                                      refreshMode="complete">
                              </xp:eventHandler></xp:button>
                      <xp:scriptBlock id="scriptBlock1" type="text/javascript">
                              <xp:this.value><![CDATA[var sampleText = document.getElementById("#{id:inputText1}").value;
QRCode.toCanvas(document.getElementById('canvas'), sampleText, function (error) {
  if (error) console.error(error, sampleText)
  console.log('success!', sampleText);
})]]></xp:this.value>
                      </xp:scriptBlock>
              </xp:div>
              </xp:div>
             
</xp:view>

The Xpage imports the JavaScript Library before importing dojo. Then, we created a <CANVAS> element to draw our QRCode. We added a input field and a button and bound the input field to a session scope variable. Finally, we added a script block that reads the value of the input field using CSJS and passes it on to the qrcode function to create the image. Et voila - QR Codes in XPages.

Hope this helps if someone needs it - happy coding !