Greetings, in this post I will provide you with instructions on how to create a QR code generator using the Power FX low-code language.
As a starting point for the development of the canvas app, I will provide a list of the canvas apps controls that are required for this application.
These are:
- Text Input : It will contain the text used to generate the QR code.
- Button 1 : Here is the button where the QR code will be generated.
- Button 2 : This button will clean the text from the Text input control
- Image : The generated QR code will be displayed in the image control.
Now, let us take a closer look at the code behind these controls
This application stores the text from the Text Input control into a variable and then converts it to a QR code using a web API.
TxtInValues
In the Text Input control “TxtInValues“, update the Hint text property with the text “Type Values“.
BtnCleanUp
In the “OnSelect” functionality of the “BtnCleanUp” button insert the following code.
Reset(TxtInValues)
After copying the code into your app, it will depicts as the image below.
BtnGenerateQRCode
In the “OnSelect” functionality of the “BtnGenerateQRCode” button insert the following code.
Set(varQR, TxtInValues.Text)
After copying the code into your app, it will depicts as the image below.
ImgQRCode
In the “Image” functionality of the “ImgQRCode” image insert the following code.
"https://quickchart.io/qr?text="& varQR
After copying the code into your app, it will depicts as the image below.
How to test it
The video below shows how the code works.