Ok, I see your most recent message about formatting line breaks in tables for item Ids. That will be potentially possible, but first I want to get the major formatting done. If you can get the things done below, it will make dealing with individual tables easier. So I’m not addressing that issue in this response.
Introduction Note:
For Starters, I want to say that dealing with HTML format of emails in Power Automate can be tedious and you can spend hours trying to test and format perfect emails.
What is happening in the email step is that you put what you want in the email body, then when it is sent, all of that is converted to HTML. So if you were a wizard or wanted to try, you could manually code in all of the information. What we are trying to do is cheat and plug things in and let the step handle the conversion to HTML.
The more you try to format and get things in place, the more you will start asking if this information is even necessary. You may even decide to change the questions you are asking to make the email easier.
(A possible example would be to have a branch question in the form about Urgent Shipment. If they click Yes, then it goes to next question that is “Deliver By Date” and select the date. If they click No, then it skips over the date question. Now you can logically say, “if there is a date, then it must have been selected Urgent” so I actually only need the Delivery By Date in my email and don’t really need to say if it was Yes or No in a table format.)
Example Flow Intro:
The flow I am showing below looks like a lot of things to do, but really it is just steps that are getting things in a format to be plugged into the email.
Note: I have renamed my steps. The first part of each step name is what it would be in power automate like “Initialize variable” “Compose” or “Append to array variable” and the rest is my name details. I also added letter numbers to show those things go together. So A1, A2, & A3 are all dealing with the Asset Inventory Number information.
Below is an image showing the flow steps overview:
Flow Steps Overview
Example Flow Steps Details:
When a new response is submitted – (obvious)
Get response details – (obvious)
Compose – CSS Code to Format the Color and Border of Tables
This step is a Compose that has had CSS table format code copy and pasted into it. I got the code from an example website https://www.tachytelic.net/2020/11/power-automate-style-html-table/ where they talk about formatting tables. I simply copy and pasted it into the Compose step. (I did delete the line of the code Width: 100%; because it was making the table the size of the email.)
This Compose output will be placed directly in front of each of the HTML tables in the email body. So when the flow runs, the format code will appear and apply to the table.
The code that is in the compose example is below:
<style>
Table {
font-family: Arial, Helvetica, sans-serif;
background-color: #EEEEEE;
border-collapse: collapse;
}
Table td, Table th {
border: 1px solid #ddd;
padding: 3px 3px;
}
Table th {
font-size: 12px;
font-weight: bold;
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #1C6EA4;
color: white;
}
</style>
A1 Initialize variable – Array to hold AssetInventoryNumbers
This step is an Initialize Variable that is an Array. This array will be a container to hold the responses you want in the table. It should be empty in this step with only [] open and close square brackets. It will be filled in the next step.
A2 Append to array variable – Put in Asset Inventory Number Responses
This is an Append to array variable step. In this you are basically naming the column headers and values that will populate the HTML table. You have to be aware of the format in this container. It is an open curly bracket { then press enter for line break. Then double space and put the items in quotes. There is a comma between the first and second line, but not after the last line. Then a line break with close curly brackets.
Example Format of the Array Info Below:
{
"Any Asset Inventory Numbers?": {FormResponseValue},
"Asset Inventory Numbers": {FormResponseValue}
}
A3 Create HTML table – Asset Inventory Numbers
This is a Create HTML table step. You will put the variable array AssetInventoryArray in the From section and then use Automatic columns. It is just using your previous entries as column headers and values.
B1 Initialize variable – Array to hold UrgentShipmentInfo
Basically the same as previous step A1 with a different name to hold different info.
B2 Append to array variable – Put in Urgent Shipment Info
Basically the same as previous step A2 with different row names and values.
B3 Create HTML table – Urgent Shipment
Basically the same as previous step A3 except is uses the array variable UrgentShipmentArray as the From.
C1 Initialize variable – String Items to Ship Format Line Breaks
This is an Initialize variable step as a String. This step is used to format the Items received from the response. Since the response form allows for multiple line, this expects for the person to fill out the form and press enter/line break after each item they put in the response. (If they don’t put on separate lines, this will not work.)
There is an expression around the response value, and it is basically finding the line breaks in the response and replacing it with the correct line break code that can be read in the email as HTML format. So in the response value from the form, line breaks are coded as %0A. In the email format line breaks need to be coded as <br/>.
The expression is looking for every %0A and replacing it with <br/>
This variable will be used in the email body in place of the items response.
Expression below:
uriComponentToString(replace(uricomponent({FormResponse}),'%0A','<br/>'))
D1 Initialize variable – String that will be used as Horizontal Line
This is an Initialize variable step as a String. This step contains the CSS code that generates a horizontal line in an email.
You will put this variable in the email body whenever you want a horizontal line divider.
<hr style="border-width: 0; background: #000; color: #000">
Send an email (V2)
This is the send an email step. You basically plug in all of the items or responses that you want. You will need to test and see how it appears in the final email.
When it comes to the format of the tables. Just put the output of the Compose that had the CSS style directly in front of the HTML table output. This will apply the style to the table when it is sent.
FYI: Do not press the </> button above the body. That will convert it to HTML code and you won’t be able to get it back to normal. You’ll have to delete the step and start over. You can use the </> option, but it can be difficult if you haven’t done it before. You could save the flow and press </> just to see what it looks like. It will probably give you a better idea of what is going on.
Below I'm Inserting the Images of the example form I used:
Form Section 1
Form Section 2
Form Section 3
Below are images of each flow step:
Flow Detail Steps 1
Flow Detail Steps 2
Flow Detail Steps 3
Flow Detail Steps 4
Flow Detail Steps 5
Below is an image of what the email looks like when it is recieived:
Email Result View
I hope this outline gets you going in the right direction. It can be difficult to format beautiful emails in Power Automate, but once you get the hang of it or look up examples it will get easier.
Let me know how it works for you,
