Solved: Re: HTML to PDF strange issue

Jakegolden · ‎11-24-2021

So I have no idea what's going on or why.

I am currently experiencing issues with spacing on my pdf. The issue is only when I "PLAY" the App and it is not an issue when I am inside editing the app.

Below is my header while I am inside editing the App and I trial test my converting to PDF

Now below is when I leave the edit screen. Go back to the main PowerApps screen and I click play on my APP and try converting to PDF.

Why am I experiencing a difference when theoretically nothing has changed? Shouldn't the play feature inside of editing be the same as playing the app from the main screen?

And yes I have checked it 1000 times that I am using the most current publication of my App.

jblomberg · ‎12-15-2021

Hi again, @Jakegolden,

I put together an app real fast, so I'm aware that it doesn't exactly match your scenario, but I think you might wanna import this zip file for inspiration.

Also, in turn, my inspiration for the PDF page breaks came from Shane Young. Check out this video:

Power Automate PDF Page Breaks

I think you should be a little closer to your goal, but you'll need to finetune the html a little more. The video is very useful to find out how and what you should finetune exactly. You'll find the html code in the Let's Export! button on the last screen, btw.

Good luck!

- JBlomberg

PS. The second zip file is just the flow, without the app. If the Demo-file imports everything correctly, you don't really need it, but I thought I'd add it anyway.

View solution in original post

jblomberg · ‎11-24-2021

Hi @Jakegolden !

I'm currently working on a huge HTML to PDF conversion project, so I've run into pretty much anything and think I can help you.

Please tell us some more details, like:

- What controls are we looking at?

- How are you converting HTML to PDF?

and most importantly... show the HTML-code. I'm sure it can be fixed, but using html in PowerApps comes with limitations that you have to learn to work-around.

- jblomberg

Jakegolden · ‎11-28-2021

Hello @jblomberg

Thank you for the reply,

I will start from the beginning so you understand what I am working with and the need for HTML to PDF.

I have around 10 screens of approximately 20ish data cards per screen. Each screen is made available to the User based on a prior selection board. So for example, on my "selection board" there is Screen 1-10 as choices. User selects - Screen1,Screen2,Screen7. Now the User will be prompted to fill out the data cards for screen 1,2,7.

Now my pdf will only show screens 1,2,7 BUT it cannot show the other 7 screens on the pdf. I also needed each screen on a separate pdf page. So for this example I would have 3 pages on my PDF - 1,2,7.

Below is my work around code for the html within PowerApps to only display certain screens/datacards

If(
!IsBlank(DataCardValue1.Selected.Value),
"1. This is my question for the datacard" & DataCardValue1.Selected.Value & "<br>"

As you can see my data cards on every screen have a question and a selection tied to them. So in my case one you make a selection on any data card, it will show on the html. If no selection is made, the question is skipped and not added on the html. I have wrote this code for every single data card on all 10 screens. Because the user can only access screens from the selections on the selection board, this negates all questions on non-selected screens to show on the HTML.

Now onto my HTML to PDF conversion.

I tried many different variations at the beginning, but this route was the easiest to get off the floor with the least amount of hassle. But with this current issue it may be time to revisit.

I am currently doing a very basic conversion where my Power Automate flow is inserting html code into a pre structured code.

concat('<!DOCTYPE html>

<html>

<head>

<style>

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

}

td, th {

border: 1px solid #dddddd;

text-align: left;

padding: 2px;

}

</style>

</head>

<table>

<tr>

<td>', triggerBody()['Createfile_FileName'] , '</td>

</tr>

</table>')

The red font is my insertion of data from PowerApps.

Quite a bit to take it, and I appreciate all the help. It is just bizarre to me that all of the above works perfectly to my need while I am editing the App and playing the App within edit mode. But as soon as I am outside of the editing mode it no longer works.

jblomberg · ‎12-14-2021

Hi @Jakegolden!

Perhaps it would've been easier to save the data users enter into a collection, but it sounds like the 'data collecting' part of your app works fine.

Some more questions that arise:

First of all: is this still a problem, because it's been a few weeks, lol
If so, I wonder how you're trying to get the content of each data card on a separate page in your PDF-document. The html code you provided doesn't do that. PDF page breaks are a pain in the ass, that's for sure. Doable, but whenever possible, it's best to avoid them.

I tried your html in Power Automate, entered "VALUE FROM DATACARD HERE" as Datacard1.Selected.Value and I got this:

And actually, it's supposed to do that, right? At least with the html you provided, it is.

In Power Automate it looks like this:

So, last question: what is it exactly you're trying to do? You've come pretty close in explaining, but I miss the information about the button in Power Apps that activate this flow + its parameters. Furthermore it'd be helpful to see what you got in Power Automate.

Jakegolden · ‎12-14-2021

Hey @jblomberg

So I have actually side lined the issue and have not worried much about it. But needed to circle back if I found any solutions. You are correct, the page break is a pain in the ass, haha.

My only work around I have found was creating "spacing" within the html text on PowerApps. For example after the set of questions and I need the page break, I will use <br><br><br>,etc. to create the spacing needing to push the next set of questions to a new page.

What I found was while in the App editing, the spacing works correctly and pushes the next set of data to the second page, with my questions at the top of the page (this is what I need). But when I would try doing the same thing playing the App, it would basically create the spacing before my questions and after. This is why in my pictures above, the second picture is spaced half way down the page, because its providing the spacing before and after. I am still not sure why its only doing this when playing vs editing.

Perhaps I need to create a whole new method and trash my current route. That is if you have any ideas.

To answer your question on the PowerApps button to activate the flow. I built it quite simple. I have a HTML text box that has all my questions with the code I previously listed (in the last reply), along with that <br> spacing. My button is then submitting the html text into the line triggerBody()['Createfile_FileName']

For what I am trying to do. I have multiple forms that are needing to be spit out into a pdf. Each form needs its own page. And yes the data storage works correctly. I have it stored to a SharePoint list so the User has the ability to Save and Load data.

jblomberg · ‎12-15-2021