This is a self-contained app that incorporates the ability to generate one or more Barcodes/QR Codes and directly to local storage (a local drive, Mobile Device storage), OneDrive or email them as attachments to a selected email address in a single easy to use interface.
For this app you will need to link to an Api that will generate the code for you. I am using the bwip-js online API found here: Online Barcode API. All the documentation for formatting the request as well as a listing of all the different barcode & QR code types are accessible from this link.
What you will need:
The Office365Outlook connector
A dropdown, radio control or icons for the user to select either barcode or QR code.
Optional: A dropdown to select a barcode type if you will be generating different barcode types
A text input for the barcode text or QR Code link.
A reset icon for the text input
A button or icon to encode the QR code link
A set of controls to select background and foreground colors (Optional)
A gallery to select a color (Optional)
A gallery with image and title to store images that are to be sent to an email address. Subtitle is not needed.
A text input for the Barcode/QR code file name
A button or icon to save the image to the gallery
A text input for the email address
A button and/or icon to send the gallery images to a specified email address
A button and/or icon to Upload the images to OneDrive
Optional: Upload sample images to be used in the image control
Step 1: Setup your image type selector. If you are using icons, you will need to set a variable on select to “Barcode” or “QR Code” to match the selection.
Dropdown or Radio controls Items Property: [“Barcode”, “QR Code”]
Step 2 (Optional): Setup the barcode type dropdown. This is best as a collection and looks like this (you will need the information from the above link to get the values for each barcode type)
Step 3: Setup the image control
I have a sample image for both QR Code and for Barcode that I am using. You will structure your Switch statement accordingly.
In the Barcode Api link, ‘bcid’ is the type of barcode. This can be hardcoded if you are only working with a single barcode type, e.g. Ean-14, GS-128 etc. ‘includetext’ displays the text string underneath the barcode itself. It does not have to be included.
For the QR code, the bcid is hard-coded and the color is set to black. Note: you can set the color to any 6 character hex value (minus the # symbol) you wish to use. The text for the QR code is the Rich Text Editor text.
In the example above the string is created using the ‘$-Strings’ syntax rather than the normal concatenate syntax. The ‘&’ characters are a required part of the string. If you are not familiar with the $-Strings syntax, this article by Matthew Devaney is an excellent write-up about it and how to use it. $-Strings: A Better Way To Concatenate Text Strings in Power Apps .
IMPORTANT NOTE: You must encode your QR Code URL when using the bwjp-js api so it will properly render spaces in the URL for SharePoint and similar links.
Step 4: In the icon OnSelect set your encoding for the QR code link. You can set the filename and email address text inputs to disabled using the DisplayMode property:
Step 5: Create your gallery collection either in app OnStart or OnVisible of the screen. You can name the collection whatever you wish but it is critical that you keep the column names exactly as you see here. If you change the column names the images will not send correctly (you can see the explanation for this here. Power Apps Email Attachments :
Step 9 (Optional): Give users of the app the ability to set the color for the barcode/QR Code. Using 2 check boxes, a text input and 2 icons, users can use to set the 6 digit hex code for the background and/or foreground color they want. A gallery of color selections can also be provided so they can choose a color they would like. See the attached text file for the Gallery color collection.
To create the color selection part, I used a standard container with a fill color and added the check boxes, the text input control and the 2 icons. In the OnSelect property of the check icon
The check icon makes the gallery visible/not visible. The cancel icon sets the variables blank, makes the containers not visible and resets the color collection so background and foreground are not checked.