Generating QR Codes on the Client-side Using Javascript

Description

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'.

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

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

    images/qrc2.png
  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.

    images/qrc4.png
  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'.

    images/qrc5.png
  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.

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

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

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

    {dialog.object}.setValueFrom('qrcode','code');
    images/qrc9.png
  10. Run the component in Live Preview. Enter any URL into the Code textbox, like this one.

    https://documentation.alphasoftware.com/documentation/pages/Guides/Web%20Components/UX%20Components/UX%20Controls/Containers/Container/PanelHeader.xml
    images/qrc10.png
  11. click the 'Set QR Code' button. you should see the QR Code change to incorporate the new data.

    images/qrc11.png
  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.