Need help with formatting output

(0) Share

Report

Posted on by Shaguar357

221

Would anyone have any advice on how to create the following formatted output? Thank you in advance!

I need to have the areas in the highlighted orange, added to the output:

This is what I currently have as output:

This is the current flow:

Categories:

Building flows

I have the same question (0)

All responses (7)

Answers (1)

Sort by

AdrianTorres 43 on at

Like (0)

Report
Copy link

Link copied!

Hi,

I see you’re creating a HTML Table based on the JSON in the Compose action before. However, you can create your table directly in the compose action so it will include the highlighted rows, example:
<table>
<tr>
<td colspan=“2”>First Planned Installation</td>
</tr>
<tr>
<td>Planned Install Date</td>
<td>YourDateExpressionHere</td>
</tr>
</table>

With this, you will no longer need the “Create HTML table” step. Instead, just place the Compose Output into the body of your email, after the <style> Compose output. I hope this helps! 🙂

Was this reply helpful? Yes No
Shaguar357 221 on at

Like (0)

Report
Copy link

Link copied!

Hi @AdrianTorres ,

I appreciate you helping me out! I've started rebuilding the Compose action as suggested.

Would you know how to get the "First Planned Installation" centered and highlighted in the table?

Thanks again!

Was this reply helpful? Yes No
AdrianTorres 43 on at

Like (0)

Report
Copy link

Link copied!

Hi @Shaguar357,
Yes, you can format these rows by giving them some CSS Styling, as you’ve already done in your <style> compose.
To achieve the style from your initial image, add this block to your style:
.highlight {
text-align: center !important;
background-color: #fabd43;
color: #000000;
}

You can then apply this style to any row in your table by assigning it the class as follows:
<table>
<tr>
<td colspan=“2” class=”highlight“>First Planned Installation</td>
</tr>
<tr>
<td>Planned Install Date</td>
<td>YourDateExpressionHere</td>
</tr>
</table>

Was this reply helpful? Yes No
Shaguar357 221 on at

Like (1)

Report
Copy link

Link copied!

Hi @AdrianTorres ,

We're getting closer! Can you tell me how I'd stretch the "First...Second Planned Installation" cells over the second column? Hope that makes sense!

Was this reply helpful? Yes No
Verified answer

AdrianTorres 43 on at

Like (0)

Report
Copy link

Link copied!
Hi @Shaguar357,
This should have worked with the colspan attribute we placed in the <td>, however just to be sure let’s do the following:

Remove the table th block from your <style> as it’s not being used
Remove the table td:first-child block as it’s also unused
Check that all your tr tags are properly closed, I noticed from your last image that the last ones are missing a slash. There is also an extra <tr> at the end of your </table> which may be causing this issue.
If you’re still having issues after applying these changes, try changing the highlighted rows from <td> to <th>. I hope this helps 🙂

Was this reply helpful? Yes No
Shaguar357 221 on at

Like (0)

Report
Copy link

Link copied!

Hi @AdrianTorres ,

Here's the current output. Very close. Somewhere I lost the border around the headers and I'd still like to have the headers highlighted. Any ideas? Thanks again! 😊

Was this reply helpful? Yes No
Shaguar357 221 on at

Like (0)

Report
Copy link

Link copied!

Hi @AdrianTorres ,

I believe I have it down. The only thing I'm missing now is the border around each header. I'll keep working at that. Thanks for all your help! I really appreciate it! 🙂

Was this reply helpful? Yes No