Generate a Picture QR Code

This post will show you how to generate a QR code containing an image from a given URL using Encodian Flowr’s ‘QR Code—Create‘ action. Picture QR Codes are generally used to add branding but can also help you differentiate QR Codes at a glance.

For this solution, a simple PowerApp has been created to enable users to enter a URL they wish to use for the QR code. The app then invokes a Power Automate flow to generate the QR code image, which is then emailed to the user and displayed within the Power App.

Jump to…

• QR Code Generator PowerApp
• Power Automate Flow
• Results
• Video

QR Code Generator PowerApp

This is the PowerApp that has been created for the solution:

The OnSelect property of the ‘Generate’ button uses the following formulas:

Set(flowOutput, GenerateQRCode.Run(TextInput1.Text,User().Email)); 

Set(qrCode, flowOutput.qrcode)

The first formula invokes the Power Automate flow to generate the QR code. The given URL in the text input box and the current user’s email are given as input variables to the flow. By setting this as a variable, it allows us to wait for the flow to finish running before carrying out the following formula.

The second formula sets a variable called qrCode, which contains the base64 image of the generated QR code.

The image property of the image (the square where the QR code will go) uses the following formula:

"data:image/png;base64," & qrCode

qrCode is the variable we are setting with the returned response of the Power Automate. We must add “data:image/png;base64,” beforehand; otherwise, the image won’t load correctly. If your generated QR code is set to a different image file type (e.g. JPEG), then you need to change this in the formula accordingly, so it would then become:

"data:image/jpeg;base64," & qrCode

The formulas used for the OnSelect property of the reset icon are:

Reset(TextInput1);

Set(qrCode, "");

Power Automate Flow

The Power Automate flow is triggered by the Power App, using the ‘Power Apps (V2)’ trigger action.

The trigger expects two input variables from the Power App:

• url – the website address to be used for the QR code
• userEmail – the email address of the user who ran the flow

The first action is getting the file content of a Flowr logo image saved in OneDrive. This image is going to be placed in the centre of the generated QR code. When using Flowr’s ‘Create QR Code’ action, there are lots of different styling options available:

The URL input variable is the given ‘Barcode Data’. I am increasing the QR code image size to 400 x 400 so it fits well in the Power App. I am adding an image to the centre of the QR code; however, you could add it to the top if you prefer. You can also add captions to the QR code, but for this demo, I am leaving these blank.

For more details on all the inputs of this Flowr action, please have a look at the link below:

Once the QR code has been created, an email is sent to the app user who generated the code. This is why we collected the user’s email as one of the input variables. I am sending an email to the user because currently, you can’t copy and paste an image from Power Apps to grab the QR code. Sending the QR code back to the app will work as an alert to the user that the QR code has finished generating.

The ‘File Content’ output of the ‘Create QR Code’ action is already in Base 64 format, so we don’t need to do any conversions here. However, we need to wrap the dynamic content in a string expression to preserve the format when sending it back to the Power App. I am using a ‘Compose’ action to do this, then responding to the Power App with the outputs from the ‘Compose’.

The expression used in the ‘Compose’ action is:

string(outputs('Create_QR_Code')?['body/FileContent'])

Results

Here is the app before the generate button is clicked:

This is the app after the button has been clicked and the flow has run:

This is the email received with the QR code as an attachment:

As we can see from the images, a QR code was successfully created with an image in the centre.

Video

Check out Sophie’s companion video, along with loads of other tutorials on YouTube!

UPDATE: We’re excited to announce some significant updates to Flowr for Power Automate! As of October 2024, we’ve improved by updating action names and splitting Flowr’s central Power Automate connector into nine specialized connectors. These changes will make your workflow faster, smoother, and more efficient. The new action names are more precise and intuitive, saving you time, while the focused connectors enhance performance and flexibility. This update also helps future-proof the platform for even more powerful features. Check out our updated action names blog.