Insert .png file in MSFT Word template breaking at Create File step

Like (0) Share

Report

Posted on 1 Feb 2023 20:45:38 by tagustin2020

@WarrenBelz

Hello Warren,

I hope you are doing well. I'm tagging you on this post since I'm attempting to use a technique you outlined in your helpful blog on how to work with images. PowerApps SharePoint Images – Storing and viewing – Practical Power Apps

Looks like this post has had 60+ views, but no one has responded yet so I'd be very grateful if you could take a look. You've helped me many times before in the Power Apps forum. I'm so close to getting the QR Code image embedded into my Word doc. Just need a little help getting over this hurdle. I'll be working all day tomorrow (Saturday PST) trying to wrap up my app and flows so if you respond I'll see your message. Thank you!

I am generating a QR Code that provides a deep link to the record in Power Apps. I have been able to accomplish that. The next step is to embed the image in a Microsoft Word doc template that can be converted to a PDF, printed on a sticker label that contains other record data and adhered to a box. I'm stuck at the Create File in SharePoint (for the .png file) in my flow. Haven't done it before...I've tried both using base64ToBinary and dataUriToBinary expressions, but I keep getting the error that I need to have a string rather than an object in order for this to work.

This is an automated cloud flow. I am not calling the flow from Power Apps as I am using a premium connector (MS Word) and don't want to turn my app into a premium app (currently a Standard license). The trigger for the flow is 'When an item or a file is modified'. I have a condition that checks if the 'Generate PDF Label' flow is supposed to run. If it does, the flow does a 'Get item'. The flow steps that pertain to the image steps can be seen below. If someone could let me know what I need to do at the SharePoint 'Create file' step (and/or right before it), I would be grateful. If you see any obvious errors in the steps that fall below the 'Create file' step, I would appreciate if you could let me know that as well. Thanks!

Step 1 - Compose

The QR code is stored as multiline text in my SharePoint list so I added a Compose step to replace the quotation marks with an empty string.

1 Compose Replace.png

Step 2 - Upload file from URL

This is how I hope to convert the multiline text to a png file. I can upload to SharePoint.

2 Upload file from url.png

Step 3 - Get the file content from OneDrive.

The outputs are detailed below.

3 Get file content-OneDrive.png

Step 4 - Create a QR code file in SharePoint.

Do I have to end the File Name with a file extension of .png? I've tried it both with and without the .png and the flow breaks as this step.

4 Create QR Code file in SP.png

Step 5 - Update file properties

Is DisplayName okay to use for the Title? I wasn't sure what to put there...

5 Update file properties.png

Step 6 - Get file content using path

If you could verify whether or not this looks correct, I would appreciate it.

6 Get SP content using path.png

Step 7 - Populate a MS Word template

If you could confirm that I have the correct dynamic content plugged in, I would appreciate it. If you can help me get this far in the flow, I should be able to get the rest as I have written flows to convert Word doc templates into PDFs before, attached them to the SharePoint list, etc. I just haven't had to insert a dynamic image yet. Thanks again for the time you are taking to help me. I really appreciate it! Teresa

7 Populate a MS Word tempate.png

I have the same question (0)

All responses (14)

Answers (2)

WarrenBelz 149,427 Most Valuable Professional on 16 Feb 2023 at 20:22:51

Like (0)

Report

Re: Insert .png file in MSFT Word template breaking at Create File step

Hi @tagustin2020 ,

Glad you got it sorted

Was this reply helpful? Yes No
Verified answer

tagustin2020 on 16 Feb 2023 at 18:01:50

Like (0)

Report

Re: Insert .png file in MSFT Word template breaking at Create File step

@WarrenBelz

Hello Warren,

Apologies for the delay in getting back to you. First off, I thank you so much for all the time you spent trying to help me figure out how to get deep link QR codes working in either OneDrive or MSFT Word. Per my last update, I spent more cycles trying to create a PDF based on CSS/HTML to generate labels for just the color-coded year requirement and QR code. I tried leveraging the CSS/HTML contained in this blog post on how to print barcodes on Avery 5160 Address labels, but was unable to get it to work for my use case. The CSS/HTML worked fine as viewed in the W3 Schools interface, but did not work once pasted into a Compose statement and run through OneDrive steps in Power Automate. Because the deadline for this project is fast approaching, I ended up inserting the QR codes into the email step and I printed up a bunch of Avery 5160 address labels with the color-coded year labels. It is a disappointing, embarrassing work-around, but I'm not a developer and have already spent so many weeks trying to figure out how to do it "right" that I finally had to tap out since the project is due shortly. I'm hoping that at the very least, Microsoft will enable rich text html in the premium Microsoft Word steps so I can pass the hex codes for the colored label backgrounds so it is no longer necessary to print Avery labels for the years.

I added placeholders to the box label so it is clear where the Year and QR Code labels need to be adhered. The QR codes do work when scanned with a handheld 2D barcode scanner. Taping over the QR codes with either scotch tape or packing tape does not adversely impact the scan. The QR Codes do launch the deep link to the record as intended.
In regards to Power App and flow steps, I did end up sticking with the multiline text SharePoint column approach for capturing/storing the QR code data and using the replace expression to replace the double quotes with empty strings. I then composed an image tag that could be inserted into the final email step.

Thanks again Warren for your dedication to the Community and for helping me gain a better understanding of what my options were. I hope you have a wonderful day.

Kind regards,
Teresa

Was this reply helpful? Yes No
tagustin2020 on 08 Feb 2023 at 22:31:31

Like (0)

Report

Re: Insert .png file in MSFT Word template breaking at Create File step

@WarrenBelz

Hello Warren,

Just a note to let you know that I haven't had a chance to work on this yet due to other work responsibilities. I will post an update as soon as I have a chance to work on it. Have a great day!

Teresa

Was this reply helpful? Yes No
tagustin2020 on 06 Feb 2023 at 17:52:30

Like (0)

Report

Re: Insert .png file in MSFT Word template breaking at Create File step

@WarrenBelz

Thank you for letting me know Warren. If Paul doesn't know a workaround for this, I was thinking I might be able to take a 2-step approach, creating a PDF using the Word Doc flow approach to achieve the look and margins that I need (a snapshot of my Word doc template is below) and then running a separate OneDrive flow utilizing CSS/HTML with 2 divs side-by-side for the year/color-coded rectangle to the left and QR Code to the right. The idea is that the color-coded year (the requestor has a 10 color coding system based on the last digit of the archive year) and QR Code would be printed on Avery labels and stuck onto the PDF which will also be printed onto Avery labels and adhered to each side of the Archive box. As you know, the MS Word premium connector does not yet support rich text controls so it wasn't going to be possible for me to pass a background color/year via Word, whereas I can do it using html. I'm hoping to give this approach a try tomorrow (Tuesday). I'll let you know how it goes. I'm still curious to see if Paul knows of a workaround for QR codes since I may get future requests that don't involve the double-challenge of adding background colors as well. Thanks again for all your help! Teresa

Was this reply helpful? Yes No
Verified answer

WarrenBelz 149,427 Most Valuable Professional on 05 Feb 2023 at 20:53:31

Like (1)

Report

Re: Insert .png file in MSFT Word template breaking at Create File step

Hi @tagustin2020 ,

Bad news I am afraid - I got what appeared to be valid Base64 code using the container and followed it all the way through to the Word Merge and it worked fine, except all I got was the outline of the container (no picture inside). It appears that Image Controls containing a URL-resolved images simply do not exist as image content in any Power Apps function trying to capture them. On reflection, this makes a bit of sense, but that does not really help you. I will tag one of the Flow gurus @Pstork1 to see if he has any idea here.

Was this reply helpful? Yes No
tagustin2020 on 05 Feb 2023 at 16:09:19

Like (0)

Report
Re: Insert .png file in MSFT Word template breaking at Create File step

@WarrenBelz

Hello Warren,

Maybe this is the difference between your test and mine. While my SharePoint field is a multi-line text field, I don't have a text field in my datacard, only an image control. I deleted the Container and image control from the Form control and inserted a new container on the screen outside of the form which I renamed "ContainerQR" and then I inserted an image control inside of it.

The Image formula is:
"https://quickchart.io/qr?text="& EncodeUrl("https://apps.powerapps.com/play/e/default-0f634ac3-b39f-41a6-83ba-8f107876c692/a/16df3cf4-5af7-4e1c-aa13-2e72f92d9680?tenantId=0f634ac3-b39f-41a6-83ba-8f107876c692&hidenavbar=true&DeepLink=AdminScreen&RefID=" & varRecord.ID & ".jpg")
The OnSelect of the button is:
With( { wBlob: With( { wJSON: JSON( PDF(ContainerQR), JSONFormat.IncludeBinaryData ) }, Mid( wJSON, Find( ",", wJSON ) + 1, Len(wJSON) - Find( ",", wJSON ) - 1 ) ) }, Patch( 'CSO Archive Requests', { ID: varRecord.ID, 'Generate PDF': true, 'PDF Version': Value(valPDFVersion.Text) + 1, 'PDF Email': varUser.Email, QRCodeML: wBlob } ) )
The text that is written back to the QRCodeML SharePoint column is massive. I copy/pasted it into a MS Word doc and it was 30 pages long with hundreds of ////////// so that can't be right.

I then went into my flow and inserted an 'Upload file from URL' step per your earlier post. When I got an error at this step I tried entering a forward slash before QRCode.jpg
In either case I get the same error message, "The provided workflow action input is not valid."

Here are the other steps in the flow if we can get past the "Upload file" error. I added a 'Get file content using path' step per your earlier post.
I inserted the File content into the Word step.

Warren, thanks again so much for your patient help. I wanted to let you know that I'll be taking the rest of Sunday off to be with my husband. His mother had a small heart attack and mine fell and hurt herself. He was out-of-state last week taking care of his mom (she's back home from the hospital and doing well), while I stayed home to take care of mine (my mother lives with us). We've been apart for a week so this is our first chance to be together for a while. I'll keep an eye out for your responses, but let me know if you need to take a breather too. Take care and God bless you for all you do!

Kind regards,
Teresa

Was this reply helpful? Yes No
WarrenBelz 149,427 Most Valuable Professional on 05 Feb 2023 at 01:22:10

Like (1)

Report
Re: Insert .png file in MSFT Word template breaking at Create File step

Hi @tagustin2020 ,

You do not need an update as you are patching it, but you can simply make the Default of the Text Control

ThisItem.QRCodeML

and then the Update

TextControlName.Text

however, what has me puzzled it the error on the container name - below is the one I did with my test list, which has the same field types as yours and I also used the same Variable and control names

and this tested as expected and patched a valid Base64 string into my multi-line text field. I can see however that you have the Container inside a Data Card - you might try it outside.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

MVP (Business Applications) Visit my blog Practical Power Apps

Was this reply helpful? Yes No
tagustin2020 on 05 Feb 2023 at 00:13:49

Like (0)

Report
Re: Insert .png file in MSFT Word template breaking at Create File step

@WarrenBelz

Hello Warren,

Thank you for the time and effort you are putting into helping me. I'm getting an error message with the Container so I'm wondering if you can spot what I'm doing wrong.
Here is the error message:
Here is my tree view. I put the image control inside the container and did not change the name of the container.
I turned on the PDF experimental feature and pasted in the formula you gave me with no changes. I noticed you did away with varBlob which is what is in the Update property of my data card. What should I put there now?
With( { wBlob: With( { wJSON: JSON( PDF(Container1), JSONFormat.IncludeBinaryData ) }, Mid( wJSON, Find( ",", wJSON ) + 1, Len(wJSON) - Find( ",", wJSON ) - 1 ) ) }, Patch( 'CSO Archive Requests', { ID: varRecord.ID, 'Generate PDF': true, 'PDF Version': Value(valPDFVersion.Text) + 1, 'PDF Email': varUser.Email, QRCodeML: wBlob } ) )
Thanks,
Teresa

Was this reply helpful? Yes No
WarrenBelz 149,427 Most Valuable Professional on 04 Feb 2023 at 23:24:48

Like (1)

Report
Re: Insert .png file in MSFT Word template breaking at Create File step

Hi @tagustin2020 ,

Further testing of the OneDrive upload OneDrive thinks a URL with parameters is dangerous and it refuses to do it

So time to get creative . . . I have tested this and it works - put your image control inside a Container (I will call it Container1 here) and do this

With( { wBlob: With( { wJSON: JSON( PDF(Container1), JSONFormat.IncludeBinaryData ) }, Mid( wJSON, Find( ",", wJSON ) + 1, Len(wJSON) - Find( ",", wJSON ) - 1 ) ) }, Patch( 'CSO Archive Requests', { ID: varRecord.ID, 'Generate PDF': true, 'PDF Version': Value(valPDFVersion.Text) + 1, 'PDF Email': varUser.Email, QRCodeML: wBlob } ) );

Also ensure you turn on your PDF function if you have not already done that

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

MVP (Business Applications) Visit my blog Practical Power Apps

Was this reply helpful? Yes No
WarrenBelz 149,427 Most Valuable Professional on 04 Feb 2023 at 21:33:56

Like (1)

Report

Re: Insert .png file in MSFT Word template breaking at Create File step

HI @tagustin2020 ,

I assumed you had a captured image in there when you mentioned QR Code - if this is simply a rendered URL then all JSON is going to do (check out varBlob content) is capture the URL parameters, which is not the image you want. The only way I know of converting a URL image to an actual SharePoint usable image is using the Upload file from URL component of OneDrive for Business in Power Automate as below (with a test chart)

which means (hopefully) all you have to store in your SharePoint list is the URL that resolves the QR code.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

MVP (Business Applications) Visit my blog Practical Power Apps

Was this reply helpful? Yes No