QR Code in PEGA Project
Hi,
I have some questions regarding the QR Code feature of PEGA.
Following this tutorial: https://pdn.pega.com/how-use-mobile-barcode-and-q... , how does one actually "build" such a property to actually be a QR Code, readable by mobile devices?
I would like to know what is to be done when I scan a code with my mobile device to actually "redirect" on a project landing page. An example would be very much appreciated!
Thank you in advance!
Daniel
Message was edited by: Marissa Rogers - Added Category; Moved from Mesh Help
**Moderation Team has archived post**
This post has been archived for educational purposes. Contents and links will no longer be updated. If you have the same/similar question, please write a new post.
Accepted Solution
Updated: 20 Apr 2016 13:04 EDT
Pegasystems Inc.
GB
OK - actually it was fairly easy to bash that existing code around a bit and get a URL QR code:
You need the JSP tags to load the Javascript library and an empty DIV element like this:
<pega:onlyonce name="QRCodeAPI"> <pega:static type="script" app="webwb"> <pega:file name="pzJsqr.js" /> </pega:static> </pega:onlyonce> <div id="url_qr"></div>
Then a script block like this:
OK - actually it was fairly easy to bash that existing code around a bit and get a URL QR code:
You need the JSP tags to load the Javascript library and an empty DIV element like this:
<pega:onlyonce name="QRCodeAPI"> <pega:static type="script" app="webwb"> <pega:file name="pzJsqr.js" /> </pega:static> </pega:onlyonce> <div id="url_qr"></div>
Then a script block like this:
var qr = new JSQR();
var code = new qr.Code();
code.encodeMode = code.ENCODE_MODE.UTF8_SIGNATURE;
code.version = code.DEFAULT;
code.errorCorrection = code.ERROR_CORRECTION.M;
var input = new qr.Input();
input.dataType = input.DATA_TYPE.URL;
input.data = { "url" : "www.pega.com" };
var matrix = new qr.Matrix(input, code);
var canvas = document.createElement('canvas');
canvas.setAttribute('width', matrix.pixelWidth);
canvas.setAttribute('height', matrix.pixelWidth);
canvas.getContext('2d').fillStyle = 'rgb(0,0,0)';
matrix.draw(canvas, 0, 0);
document.getElementById("url_qr").appendChild(canvas);
This just generates a QR like this: (you can scan it: the URL is totally safe I promise [and anyway - you can see the source above ;-) ] )
So this test was done by just creating an 'HTML' rule like this:
And then stealing taking inspiration from the original control; just paste the bits we need in there.
Then use 'preview' to generate the QR code on screen.
So this how to get a quick test running - and show how the JS library can be used ; but you probably want to look at using Sections (or building a PRPC 'control' in fact?) if you want to make this a bit more stuctured/re-usable.
Hope this helps a bit anyway,
Cheers
John
I'm using PRPC72 here for testing.
Pegasystems Inc.
US
Stephanie Louis. When you get a chance, can you provide insights or point to the right person?
Pegasystems Inc.
US
We don't have a control to display a QR code.
We currently do display a QR code for mobile app download but it is a non-autogen control. see pzMobileAppDownloadLink for how we do this.
Pegasystems Inc.
GB
Hi Daniel,
To second Stephanie's reply:
1. If you do an 'about' on a Pega 7 system : you'll notice that a QR code is displayed along with the human-readable stuff.
2. If you run a TRACER whilst you click the ABOUT - you should see the Rule being loaded.
It's a Javascript-based QR code - so it cannot be used (say) for generating PDFs - it is 'painted' directly into the browser.
Cheers
John
Updated: 20 Apr 2016 12:53 EDT
Pegasystems Inc.
GB
So actually: you don't need to TRACE (although that works as well) - you can use 'LIVE UI' and click on the ABOUT screen like this:
Which shows that the QR Code shown on the About Screen is generated by a (non auto-gen) control called pzURLQR [Pega-EndUserUI:07-10-19]
So it's using a Javascript library to do its stuff - so you could create a new Rule-File-HTML and literally start copying over bits from this (which is what I'm trying) : or *possibly* you might get away with placing this Control on a PRPC 'Section' - but I'm not sure how general-purpose this control is.....
I'll post updates if I get any further on this....
Here's the entire source of the control for reference:
So actually: you don't need to TRACE (although that works as well) - you can use 'LIVE UI' and click on the ABOUT screen like this:
Which shows that the QR Code shown on the About Screen is generated by a (non auto-gen) control called pzURLQR [Pega-EndUserUI:07-10-19]
So it's using a Javascript library to do its stuff - so you could create a new Rule-File-HTML and literally start copying over bits from this (which is what I'm trying) : or *possibly* you might get away with placing this Control on a PRPC 'Section' - but I'm not sure how general-purpose this control is.....
I'll post updates if I get any further on this....
Here's the entire source of the control for reference:
<pega:onlyonce name="QRCodeAPI">
<pega:static type="script" app="webwb">
<pega:file name="pzJsqr.js" />
</pega:static>
</pega:onlyonce>
<%
String strUserAgent;
String threadName = tools.getParamValue("threadName");
String reqURI = "";
String downURI = "";
String servletName = tools.getProperty("pxRequestor.pxReqServletNameReal").getStringValue();
String baseReqURI = tools.getProperty("pxRequestor.pxReqContextURI").getStringValue()+ (servletName != "" ? "/" : "") + servletName;
reqURI = baseReqURI;
StringMap keys = new HashStringMap();
keys.putString("pxObjClass","Rule-Obj-When");
keys.putString("pyClassName","@baseclass");
keys.putString("pyBlockName","pyIsMultiTenant");
boolean isMT =tools.evaluateWhen(keys);
if(isMT){
String[] tempArray = tools.getProperty("pxRequestor.pxReqPathInfoReal").getStringValue().split("/");
if(tempArray.length > 1){
reqURI += tempArray[0]+"/"+java.net.URLEncoder.encode(tempArray[1], "UTF-8");
}
if (!"".equals(threadName)) {
reqURI += "/!" + threadName;
} else if(tempArray.length > 2) {
reqURI += "/"+tempArray[2];
}
}
%>
<div id="url_qr"></div>
<script language="javascript">
var qr = new JSQR();
var code = new qr.Code();
code.encodeMode = code.ENCODE_MODE.UTF8_SIGNATURE;
code.version = code.DEFAULT;
code.errorCorrection = code.ERROR_CORRECTION.M;
var input = new qr.Input();
input.dataType = input.DATA_TYPE.URL;
input.data = {
"url": "<%=reqURI%>"
};
var matrix = new qr.Matrix(input, code);
var canvas = document.createElement('canvas');
canvas.setAttribute('width', matrix.pixelWidth);
canvas.setAttribute('height', matrix.pixelWidth);
canvas.getContext('2d').fillStyle = 'rgb(0,0,0)';
matrix.draw(canvas, 0, 0);
document.getElementById("url_qr").appendChild(canvas);
</script>
Accepted Solution
Updated: 20 Apr 2016 13:04 EDT
Pegasystems Inc.
GB
OK - actually it was fairly easy to bash that existing code around a bit and get a URL QR code:
You need the JSP tags to load the Javascript library and an empty DIV element like this:
<pega:onlyonce name="QRCodeAPI"> <pega:static type="script" app="webwb"> <pega:file name="pzJsqr.js" /> </pega:static> </pega:onlyonce> <div id="url_qr"></div>
Then a script block like this:
OK - actually it was fairly easy to bash that existing code around a bit and get a URL QR code:
You need the JSP tags to load the Javascript library and an empty DIV element like this:
<pega:onlyonce name="QRCodeAPI"> <pega:static type="script" app="webwb"> <pega:file name="pzJsqr.js" /> </pega:static> </pega:onlyonce> <div id="url_qr"></div>
Then a script block like this:
var qr = new JSQR();
var code = new qr.Code();
code.encodeMode = code.ENCODE_MODE.UTF8_SIGNATURE;
code.version = code.DEFAULT;
code.errorCorrection = code.ERROR_CORRECTION.M;
var input = new qr.Input();
input.dataType = input.DATA_TYPE.URL;
input.data = { "url" : "www.pega.com" };
var matrix = new qr.Matrix(input, code);
var canvas = document.createElement('canvas');
canvas.setAttribute('width', matrix.pixelWidth);
canvas.setAttribute('height', matrix.pixelWidth);
canvas.getContext('2d').fillStyle = 'rgb(0,0,0)';
matrix.draw(canvas, 0, 0);
document.getElementById("url_qr").appendChild(canvas);
This just generates a QR like this: (you can scan it: the URL is totally safe I promise [and anyway - you can see the source above ;-) ] )
So this test was done by just creating an 'HTML' rule like this:
And then stealing taking inspiration from the original control; just paste the bits we need in there.
Then use 'preview' to generate the QR code on screen.
So this how to get a quick test running - and show how the JS library can be used ; but you probably want to look at using Sections (or building a PRPC 'control' in fact?) if you want to make this a bit more stuctured/re-usable.
Hope this helps a bit anyway,
Cheers
John
I'm using PRPC72 here for testing.
Pegasystems Inc.
IN