How to build a PowerApp that generates product labels. Part 1: Create an app

Have you ever had a requirement to preprint a label for the product beforehand? Warehouse management module has a lot of powerful features. However, out of the box you can only print labels as a part of mobile device flow, for example, when you receive a purchase order, report as finish a production order or perform inventory movement.

The scenario I had as follows: manufacturing company produces bags of seeds. In the production, on the bagging line, every bag is filled with the seed and the label is attached to the bag when its closed. Once the bag gets off the bagging line it is placed on the pallet. When the pallet is full, it is wrapped and labelled with the pallet label. Here how it looks like:

Therefore, we need to produce two different labels: bag label and pallet label. The pallet label can be printed when we RAF on the mobile device, but bag label should be ready when we start production.

On our project we did a modification that prints a label from MSDyn365FO, but when PU14 was released and we got the ability to embed PowerApps to MSDyn365FO I wondered, if we could create a PowerApp that generates product label. In this series of posts, I will try to show you what could be done when we use Microsoft Flow, PowerApps and MSDyn365FO together.

If you want to see end result, here you go:

If you are interested to know how it was done keep reading!

Design a label

Firstly, you need to design your label layout. You can use any software that does this, I’ve installed 30 days trial version of NiceLabel Designer Pro. Next step would be to get our label in ZPL language as a text format.

I’ve decided to create a simple label with size 50 mm x 25 mm, that has Item number as a text and QR code, Product name and Country of origin on it:

As you see, in the label I used placeholders like $[Name]$, I did it as it was easier for me to identify what information I should replace with the actual data later on. So, the label in ZPL language looks as follows:

CT~~CD,~CC^~CT~
^XA~TA000~JSN^LT0^MNW^MTD^PON^PMN^LH0,0^JMA^PR4,4~SD15^JUS^LRN^CI0^XZ
^XA
^MMT
^PW400
^LL0200
^LS0
^FT14,38^A0N,28,28^FH\^FDProduct number:^FS
^FT14,126^A0N,28,28^FH\^FDName: ^FS
^FT14,176^A0N,28,28^FH\^FDOrigin:^FS
^FT302,106^BQN,2,4
^FDLA,$ItemId$^FS
^FT111,84^A0N,28,28^FH\^FD$ItemId$^FS
^FT114,126^A0N,28,28^FH\^FD$ProductName$^FS
^FT114,176^A0N,28,28^FH\^FD$CountryOfOrigin$^FS
^PQ1,0,1,Y^XZ

Create a PowerApp

After the label is designed we can start building our PowerApp. Login to https://powerapps.microsoft.com and create new blank PowerApp with Phone layout:

Our PowerApp will have one main screen with tree fields on it, where we can enter product information (manually for now) and preview label as an image:

To be able to display a label in the PowerApp we will use Labelary API that returns label image in png format. I’m using this service because it is free. Also, it has some limitations regarding to the label size and number of requests per second, so you may consider to licence this API for private use or use another API. The format of the request as follows:

http://api.labelary.com/v1/printers/dpmm/labels/widthxheight/index/zpl

The parameters we replace in this request are:

• dpmm: the value is picked based on the printer characteristics, we will set it to 8dpmm.
• width, height: label dimensions. Since our label is 50mmx25mm we will set it to 1,9685 and 0,984252 inches respectively.
• Index: set to 0 by default.
• ZPL: set it to ZPL label that we designed above.

However, as you remember in the beginning we have used placeholders in the label design, therefore, before using it we should replace those placeholders in the request with the values from respective Text inputs values, for example:

$ItemId$ =  " & EncodeUrl(ItemId.Text) & "

Our final request will look like:

http://api.labelary.com/v1/printers/8dpmm/labels/1.9685x0.984252/0/%10CT~~CD,~CC%5E~CT~%20%5EXA~TA000~JSN%5ELT0%5EMNW%5EMTD%5EPON%5EPMN%5ELH0,0%5EJMA%5EPR4,4~SD15%5EJUS%5ELRN%5ECI0%5EXZ%20%5EXA%20%5EMMT%20%5EPW400%20%5ELL0200%20%5ELS0%20%5EFT14,38%5EA0N,28,28%5EFH/%5EFDProduct%20number:%5EFS%20%5EFT14,126%5EA0N,28,28%5EFH/%5EFDName:%20%5EFS%20%5EFT14,176%5EA0N,28,28%5EFH/%5EFDOrigin:%5EFS%20%5EFT302,106%5EBQN,2,4%20%5EFDLA," & EncodeUrl(ItemId.Text) & "%5EFS%20%5EFT111,84%5EA0N,28,28%5EFH/%5EFD" & EncodeUrl(ItemId.Text) & "%5EFS%20%5EFT114,126%5EA0N,28,28%5EFH/%5EFD" & EncodeUrl(ProductSearchName.Text) & "%5EFS%20%5EFT114,176%5EA0N,28,28%5EFH/%5EFD" & EncodeUrl(COO.Text) & "%5EFS%20%5EPQ1,0,1,Y%5EXZ

Once we built our request we can set it as Image property for the Image control:

Now, if we enter the data in the input boxes of PowerApp screen we would see below result:

One more thing, that we can do, is to add a “Get label” button to the app that opens label in the separate tab of the browser. To do this we should set “On select” action for the button to Launch(Image_ZPLLabel.Image). More info on what Launch function does is here.

Rather than opening label in a new tab you can sent it to a network printer, but that is a topic for a different blog post.

To summarize, in this post we have designed ZPL label and have built a PowerApp that accepts product information entered manually, draws the label and generates image file in png format in the separate tab in the browser.

In the next post we will enhance our app to extract Product name and Origin information from the MSDyn365FO by using Microsoft Flow. Stay tuned.