Solved: Re: Get multiple images from SP library to html an...

drawser · ‎11-20-2020

Hi, I have this powerapp that uses powerapps and flow to answer a set of questions and aloows users to take pictures and save to a sharepointlibrary.

But I'm struggling with getting multiple images into a pdf document.

Note, one image is not a problem.

So what happens

A user selects a group of questions

Per question in group users provides an answer and has the ability to take and upload an image to sharepoint

With the help of flow the images are stored as .jpg in a document library and with the Group of questions ID and the question ID in their own columns.

As for the pdf being generated from PowerApps, with ask in powerapps

I can filter the library based on the group of questions ID

I then use

Get files property with a filter query based on the ID

Initialize a String variable (PicTest)

Apply to each

Get file content using path

Append to string variable (dataUri(body('Get_file_content_using_path')))

Create file (OneDrive)

File Name: Testing.HTML

File Content: concat('<!DOCTYPE html><html><h1>Report</h1><img src="',Variables('PicTest') ,'"/></body></html>')

This works, as long as there is no more than one image tied to the group ID

However, it of course fails when there are more than one image, (well not fail, but dont genreate any images in the HTML file)

Is there a way to get all images in the library that are related to the group ID and get them into the HTML file without using any third party connector?

There is around 80 questions to answer with the possibility to add images to every question.

I can probably apply various filters and steps for every question to get each image that way but I'm not fond of the idea of repeating steps around 80 times.

So is there any way to loop through the images in the library and get them into a HTML file that can be converted into a PDF?

The images can be added after eachother at the end of the report.

This is the test I'm doing at the moment that succesfully generates a single image from filtering the library

drawser · ‎11-20-2020

I took another stab at it and found a solution that produces my intended result

I add the html for the img src in the append to string variable

and remove the img src in the create file html

This allows me to filter the images by a dynamically updated ID

and add all the related images to the PDF at the end of the report

View solution in original post

drawser · ‎11-20-2020

I took another stab at it and found a solution that produces my intended result

I add the html for the img src in the append to string variable

and remove the img src in the create file html

This allows me to filter the images by a dynamically updated ID

and add all the related images to the PDF at the end of the report

Brendan_Val · ‎03-29-2022

Hi @drawser ,

Can you share the flow on Github or something similar to be downloaded.
I have tried to follow your thread but still can't seem to get it to work..

drwaz · ‎03-30-2022

Hi, let me see if I can break it down a bit more here. The flow does alot of other things than just get the images into the final PDF-convertion, there is some Logo going in there and an HTML-table as well.

First of, the images are stored in a Sharepoint library (not a list).
They are in .jpg form (Not sure if that is relevant or not)
The Sharepoint library has additional columns added to it, one of those being an ID that matches a corresponding ID (MainID) in a Sharepoint list. (So you can link the image to a specific list item in PowerApps)
Sharepointlists are set up like this. There is one lists for surveys. There is another list for survey answers. The list for surveyanswers has a column with the ID for the Main Survey so you can link the answers to the Main survey. (Like a relational database, i know its not a real database but the approach is similar)
The MainID column in imagelibrary is the ID of the Main Survey. So one survey can have many images related to it.

The flow is triggered when an item is added to a Sharepoint list, ReportRequest, (User presses a button in powerapps and an item is added that adds all info like the MainID for the survey they are viewing in powerapps.) When they do this it triggers the flow that when finished sends out the email with the pdf to them.

So with that as a background

When an Item is created in the Sharepoint ReportRequest list you first need to get that Item

When you have that item, you can use the MainID that was added to the list to filter the Imagelibrary to get the images you need.

Add an action to get the images from the library with a filter

So Get files, in the filter query you set the MainID to equal the Corresponding ID field in the ReportRequest list

Next, initialize a string variable (PicTest)

Next

Now, you also need to get the full path to each Image

So whitin an apply to each (the value is body/value - item from the previous Get files action)

File Path = Full Path

Infer Content Type = Yes

To finish this of you now need to run an append to string variable

So select the PicTest variable you initialized earlier

As for the value

I have added some HTML in there that will become HTML in a later step.

Aside from the image it also adds text info from the survey like Category and question and witdh and height for the image. The key takeaway here is the src=dataUri

The expression is where you need to specify the path for the images that you got in the previous step

So set the expression to

dataUri(body('Get_file_content_using_path_2'))

And now for the actual creation of the HTML-file

First you need the action, Create File in One Drive

In the File content is where all the fun stuff happens

The concat:

concat('<!DOCTYPE html><html><img src="',Variables('LogoVariable') ,'"/><p><h1>', Variables('varvarTyp'),'</h1><h1>', Variables('varvarAdress'),'</h1><p><img src="',Variables('SpeedoChart') ,'"/><p></body><h2>
', triggerBody()['htmldata'] ,'<hr>',variables('PicTest') ,'</html>')

This creates an HTML file that contains the logo, a chart, Adress and an HTML-table, however the images are all in there as well. The final piece to add in there is all the "fake" html created earlier in the StringVariable.

So in the concat the images are all whitin the , '<hr>' ,variables('PicTest') ,'</html>'

And after this you can run all the stuff you need to convert it to a PDF.

Also recommend running a get File metadata and then check the filze size for the created HTML-file since it can't be converted to a PDF if it's bigger than 2 MB.

So if it's bigger than 2 MB I just send out the HTML-file and users can store it as a PDF on their own if they need to.

Brendan_Val · ‎09-17-2022

Hi @drwaz & @drawser ,

That work around worked for me now thanks.

Is there no other option though to have multiple images that make the HTML > 2mb and the convert to PDF file still work? In some cases I have a checklist of machinery that contains over 30 images.

Brendan_Val · ‎09-17-2022

Hi all,
I have ended up using Encodian and paying for that software as it worked for me and saved having a few more actions like create, convert, then delete file once done.
Thanks,

Get multiple images from SP library to html and convert to PDF

Helpful resources

Community will be READ ONLY July 16th, 5p PDT -July 22nd

Summer of Solutions | Week 4 Results | Winners will be posted on July 24th

Check Out | 2024 Release Wave 2 Plans for Microsoft Dynamics 365 and Microsoft Power Platform

Updates to Transitions in the Power Platform Communities