Generating QR Codes on the Client-side Using Javascript


QR Codes are simply data. As with other data controls, you can the setValueFrom() to set the value of a QR Code.

 Setting a URL in a QR Code

QR Codes are frequently used to provide an easy way for people to open a web page on their mobile device. To encode a URL as a QR Code, follow the steps below:

  1. In the UX Builder on the UX Controls page open the 'Data Controls' menu and click on the [TextBox] option to add a textbox control to the component. Set the textbox name and label to read 'code'.

  2. Highlight the textbox control. In the properties list under 'Field Properties' set the 'Width' property to be 4in.

  3. Open the Containers menu and click on the [Frame] option and click 'Insert After' to add a frame container to the component.

  4. Highlight the Frame. In the 'Frame Begin Properties' on the right set the 'Frame width' property to 4in and the 'Frame height' property to 4.5in.

  5. Highlight the Frame container and go back to the Data Controls menu. Click on the [QRCode] option to add a QR code inside the frame. Give it the name and label 'qrcode'.

  6. Highlight the QR Code control. Open the 'Other Controls' menu and click the [Button] option to add a button underneath the QR Code control.

  7. Highlight the button. In the properties list under 'Button Properties' change the Button text to read 'Set QR Code'.

  8. Scroll down the buttons properties list to the 'Javascript' section. Click the [...] button next to the onClick property.

  9. Click the 'Text mode' radio button and add the following javascript. Then click 'Save'.

  10. Run the component in Live Preview. Enter any URL into the Code textbox, like this one.
  11. click the 'Set QR Code' button. you should see the QR Code change to incorporate the new data.

  12. Scan the QR Code using QR Code on a phone using a QR code Reader. The device should open a browser and navigate to the URL encoded in the QRCode.