21 January 2021 Thursday
A little side-work: QRCodes 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>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
Hope this helps if someone needs it - happy coding !
Heiko.