Skip to main content

Notifications

Community site session details

Community site session details

Session Id : CmfL/7lWyskgfLi2cXsnb3
Power Automate - Building Flows
Answered

Create HTML document w/ Two Column design

Like (0) ShareShare
ReportReport
Posted on 21 Nov 2021 01:21:19 by

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

  • Community Power Platform Member Profile Picture
    on 23 Nov 2021 at 20:34:52
    Re: Create HTML document w/ Two Column design

    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!

  • Community Power Platform Member Profile Picture
    on 23 Nov 2021 at 18:34:51
    Re: Create HTML document w/ Two Column design

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

  • Verified answer
    Pstork1 Profile Picture
    66,091 Most Valuable Professional on 22 Nov 2021 at 19:38:58
    Re: Create HTML document w/ Two Column design

    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.

  • Community Power Platform Member Profile Picture
    on 22 Nov 2021 at 19:21:56
    Re: Create HTML document w/ Two Column design
    <!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 Profile Picture
    66,091 Most Valuable Professional on 21 Nov 2021 at 02:34:45
    Re: Create HTML document w/ Two Column design

    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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 146,769 Most Valuable Professional

#2
RandyHayes Profile Picture

RandyHayes 76,287 Super User 2024 Season 1

#3
Pstork1 Profile Picture

Pstork1 66,091 Most Valuable Professional

Leaderboard