cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Jakson
Resolver I
Resolver I

Create HTML document w/ Two Column design

I'm building a Flow that takes Forms response data and spits it back out as a formatted PDF document. To accomplish this goal, I am converting my Forms' responses into an HTML document then converting that into a PDF when ready.

 

I need to put my data into a two column fashion like this:

 

HEADER 1     HEADER 2

Q1.: A1          Q3.: A3

Q2.: A2          Q4.: A4

...

 

I went and investigated how to cause this with CSS (sticking inline with the HTML format I'm using) and I found some code that should split my Forms' response data into two equal size columns and (to-boot) smush (or append to the next line) my response data where necessary to make it fit inside the columns.

 

Only issue is that the conversion process from HTML document to PDF seems to throw out the CSS styling. I can get all of my data into a .html document and plop it into my browser, where it displays the doc with the CSS styling like I want.

 

What am I doing wrong?

 

Guidance is deeply appreciated

1 ACCEPTED SOLUTION

Accepted Solutions
Pstork1
Dual Super User
Dual Super User

The styling you are using will work fine as a web page, but a lot of the formatting you are applying to div's is going to be lost when you convert to a PDF.  I would suggest rewriting the HTML to use HTML <Table> and related tags.  Most styles applied to those tags will work.

 

Build the HTML table then in several steps.  There is the static HTML that comes before the table, a loop to build the table rows, and the static HTML that comes after the table.



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

View solution in original post

5 REPLIES 5
Pstork1
Dual Super User
Dual Super User

Are you sure you are using inline CSS, ie. Style="" or are you using inline HTML attributes?  I've had better luck with CSS inline in the actual tag, but there are still some CSS styles that are ignored by the conversion. For example, page breaks are totally ignored.  I also find that things like child selectors that are used for more advanced CSS don't work.  

 

Can you show us how and what CSS styling you are implementing?  The only other option I can suggest is to build your output as an array and then use a DoUntil loop to retrieve the array items by index to manually separate them into two columns



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

<!DOCTYPE html>
<html>
<head>
<title>Note Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--version 2.2.1 11/19/2021-->


<style>
* {
	box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<div class="row">
  <div class="column">

<h2>Demographic information</h2>
<p><b>Client's Name: </b></p>
<p><b>Note Type: </b></p>
<p><b>Visit Date: </b></p>
<p><b>Is this visit billable? </b></p>
<p><b>CC Email address: </b></p>
<p><b>Waiver Type: </b></p>


<h2>Visit Information</h2>

<p><b>Persons Present:</b></p>
<h3>Subjects discussed:</h3><p></p>


<h3>Care Coordinator Impression, based on discussion or direct questions</h3>

<p><b>Home / Placement: </b></p>
<p><b>Feeling good: </b></p>
<p><b>Sleeping good: </b></p>
<p><b>Diet healthy?: </b></p>
<p><b>Safe in environment?: </b></p>
<p><b>Treated with dignity?: </b></p>
<p><b>Are services timely and per service plan?: </b></p>

</div>

<div class="row">
  <div class="column">
  
<h3>Care Coordinator Impression, based on discussion or direct questions - continued</h3>

<p><b>Emplyoment: </b></p>
<p><b>Guardian / POA: </b></p>
<p><b>Appearance (if seen): </b></p>
<p><b>Grooming (if seen): </b></p>
<p><b>Behavioral Impressions: </b></p>
<p><b>Legal Issues: </b></p>
<p><b>Staff: </b></p>


<h3>Comments / Information / Impressions / Concerns</h3>
<p></p>


<h2>Any Health things going on?</h2>
<h3>Have you been to the Emergency Room since we spoke last?</h3>
<p></p>
<h3>Have you been to the doctor for anything since we last talked?</h3>
<p></p>


<h3>Any changes in:</h3>
<p><b>Diagnosis: </b></p>
<p><b>Medication: </b></p>
<p><b>Therapies: </b></p>
<p><b>Medical Providers: </b></p>
<p><b>General Health: </b></p>

</div>
</div>

</body>
</html>

My Forms response data goes between the <p> tags. I found this incredibly helpful website that showcases some CSS stylings and HTML basics to help build a basic website w/ interface.

 

I've been using information primarily from that website to build the HTML code above.

 

What should I do differently?

Pstork1
Dual Super User
Dual Super User

The styling you are using will work fine as a web page, but a lot of the formatting you are applying to div's is going to be lost when you convert to a PDF.  I would suggest rewriting the HTML to use HTML <Table> and related tags.  Most styles applied to those tags will work.

 

Build the HTML table then in several steps.  There is the static HTML that comes before the table, a loop to build the table rows, and the static HTML that comes after the table.



-------------------------------------------------------------------------
If I have answered your question, please mark your post as Solved.
If you like my response, please give it a Thumbs Up.

I'll give it a whirl and see what I can come up with. Thank you very much for your guidance Pstork1! Much appreciated!

It worked to the degree I need it to. I'm finding that I can't exactly format this poor thing down to the pixel like I wanted to going in. I'm thankful my requirements are so ridiculous as to the specific spacing of each character. (That'd be a headache!)

 

Thank you very much for your help, Pstork1! You're awesome, fam!

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

New Ideas Forum MPA.jpg

A new place to submit your Ideas for Power Automate

Announcing a new way to share your feedback with the Power Automate Team.

MPA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

Learn to digitize and optimize business processes and connect all your applications to share data in real time.

MPA Licensing.jpg

Ask your licensing questions at the Power Automate AMA!

Join Priya Kodukula and the licensing team, super users and MVPs to find answers to your questions on Power Automate licensing.

Users online (2,624)