cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
AdamW
Helper III
Helper III

Format HTML table with dynamic data when number of rows changes

I need to send 10,000 emails that contain dynamic data.  I have created a flow using the "Create HTML Table" action.  The problem is that the formatting looks terrible.  All of the options that I see out there require the number of rows to be static in order to apply the formatting properly.  These emails will have rows that range anywhere from 2 rows to 200 rows.  What are my options to do this?

1 ACCEPTED SOLUTION

Accepted Solutions
Mira_Ghaly
Dual Super User II
Dual Super User II

Hi @AdamW 

You can apply style to your HTML table 

1. You need to give your HTML Table an ID

Mira_Ghaly_0-1611534451353.png

replace(body('Create_HTML_table'),'<table>','<table id=contactsTable>')
2. Add your preferred style as a compose data operation like below: replace #contactsTable with your table id
 
Mira_Ghaly_3-1611534648214.png

 

 

3. Concatenate the style with the HTML table prior to sending in a compose data operation and use the  output of the compose data operation in your email

concat(outputs('Style'),outputs('Replace_Table_With_ID'))
 
Hope this works for you!

 

If this post helps you with your problem, please mark your as Accepted solution.If you like my response, please give it a Thumbs Up.

Blog: here

View solution in original post

4 REPLIES 4
Mira_Ghaly
Dual Super User II
Dual Super User II

Hi @AdamW 

You can apply style to your HTML table 

1. You need to give your HTML Table an ID

Mira_Ghaly_0-1611534451353.png

replace(body('Create_HTML_table'),'<table>','<table id=contactsTable>')
2. Add your preferred style as a compose data operation like below: replace #contactsTable with your table id
 
Mira_Ghaly_3-1611534648214.png

 

 

3. Concatenate the style with the HTML table prior to sending in a compose data operation and use the  output of the compose data operation in your email

concat(outputs('Style'),outputs('Replace_Table_With_ID'))
 
Hope this works for you!

 

If this post helps you with your problem, please mark your as Accepted solution.If you like my response, please give it a Thumbs Up.

Blog: here

View solution in original post

AdamW
Helper III
Helper III

This is certainly the easiest explanation I have seen so thank you!.  The only problem is that I don't understand how I give the table an ID.  I am using divtable.com to generate the style.

Mira_Ghaly
Dual Super User II
Dual Super User II

@AdamW 

 

To Give a table an ID you need to add a compose data operation with Replace Expression as below:

replace(body('Create_HTML_table'),'<table>','<table id=myTable>') ; This gives the output table of your Create HTML table an id called myTable
Lets say you have the below CSS style generated from divtable, In notepad or any word editor you can replace table.greenTable with #myTable .. I hope this is what you are looking for 🙂
 

table.greenTable {
font-family: Georgia, serif;
border: 6px solid #24943A;
background-color: #D4EED1;
width: 100%;
text-align: center;
}
table.greenTable td, table.greenTable th {
border: 1px solid #24943A;
padding: 3px 2px;
}
table.greenTable tbody td {
font-size: 13px;
}
table.greenTable thead {
background: #24943A;
background: -moz-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
background: -webkit-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
background: linear-gradient(to bottom, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
border-bottom: 0px solid #444444;
}
table.greenTable thead th {
font-size: 19px;
font-weight: bold;
color: #F0F0F0;
text-align: left;
border-left: 2px solid #24943A;
}
table.greenTable thead th:first-child {
border-left: none;
}

table.greenTable tfoot {
font-size: 13px;
font-weight: bold;
color: #F0F0F0;
background: #24943A;
background: -moz-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
background: -webkit-linear-gradient(top, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
background: linear-gradient(to bottom, #5baf6b 0%, #3a9e4d 66%, #24943A 100%);
border-top: 1px solid #24943A;
}
table.greenTable tfoot td {
font-size: 13px;
}
table.greenTable tfoot .links {
text-align: right;
}
table.greenTable tfoot .links a{
display: inline-block;
background: #FFFFFF;
color: #24943A;
padding: 2px 8px;
border-radius: 5px;
}

If this post helps you with your problem, please mark your as Accepted solution.If you like my response, please give it a Thumbs Up.

Blog: here
AdamW
Helper III
Helper III

Nevermind!  I figured it out!

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Welcome Super Users.jpg

Super User Season 2

Congratulations, the new Super User Season 2 for 2021 has started!

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

Top Solution Authors
Users online (996)