Add Space to Compose Action HTML Code

[Phineas]

I'm still in my "always be learning" mode.🤓

I'm using the highlighted portion of the code below in a compose to artificially add space between text.

It works but isn't the right tool for the job.

I want to add space between the text where the red verticle lines are shown at the top of the PDF so that it 'looks' columnized; Is there a better way to accomplish this task, without actually adding a 'table'?

<b>Cert/Qual:</b> @{triggerOutputs()?['body/Certification/Value']}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<b>Expiration Date:</b>

[grantjenkins]

Can you try embedding your code inside <pre>YOUR HTML</pre> to see if that keeps the tabs you've added without collapsing the spacing. Not sure if this will work as you expect, but worth a shot.

For example:

<pre><b>Cert/Qual:</b> @{triggerOutputs()?['body/Certification/Value']}&nbsp; &nbsp; &nbsp;<b>Expiration Date:</b></pre>

[Phineas]

Edited Reply: See bottom for update

That did impact the content.

The line with full name is with the 'pre' you suggested.

The six spaces are there (between the last name 'Jack' and 'Member's', but the font no longer matches the rest.

Edit: I went back and removed all the &nbsp; language and the spaces now show as desired. It's of an awkward process but I did manage to get the look I want.

However, I have lost control of the original font size and type. The pre changed the font. How do I regain control of font size and type?

[v-chengfen-msft]

Hi @Phineas ,

If you want the content fonts in Pre to be the same,

Please try :

 <pre style="font-size: 20px; font-family: 'Times New Roman', Times, serif;">

If you want to set the font yourself.

Please try:

<font size="24">Your Text</font>

Here are some links for your reference:

Font family (HTML) - CodeDocs

How to change the font size in HTML? - GeeksforGeeks

Best Regards

Cheng Feng

[grantjenkins]

Or another option would be to add some CSS for the pre tag. You would add the CSS in your Compose - HTML Content just above the Output. This would apply the style across all of your pre tags.

<style>
pre {
  font-size: 20px;
  font-family: 'Times New Roman', Times, serif;
}
</style>

[Phineas]

Thank you, I'll try both just so I can confirm and know.

I was also trying to incorporate an employee specific image above or adjacent to the content impacted by the  'pre' command.

As these things kinda go together should such language be in the same compose for the 'pre' or should there be separate code, and what should that code be?

I DO have a separate question already in the system on this image issue. I've successfully hard-coded in the single image (the company logo in the header), however I can't figure out how to code for a dynamic image of each employee based on the 'Fullname'.

Each line in the SP List has a separate image in 'CompanyLogo', and each of those same images is loaded into a SP Library, as I'm unsure of best practices in this regard - though I believe placinf the images in a library is recommended.

Any thoughts?

[Phineas]

I tried the following. No change in the spacing.

[v-chengfen-msft]

Hi @Phineas ,

 Please inline your stylesheets. Most clients will either erase the stylesheet or rewrite it.

Here is a test for your reference:

Here is result:

html - CSS not showing in outlook - Stack Overflow

Outlook Email Rendering Issues and How to Solve Them - Litmus

Best Regards

Cheng Feng

[Phineas]

Thank you for the reply.

If I may ask, it seems that the spacing will still be content dependent.

For example, the length and spacing of each line will be dependent upon the content of the 'label' and the content of the 'field' from the data source, yes?

Meaning, using this dynamic method will not allow for uniformity in spacing, yes?

if the above is true, is there a way to ensure the second set of label/field line up vertically everytime - as if there were two columns and the second set of content on each line line starts at the same spot?

[grantjenkins]

The idea was to add the style/css in addition to still keeping your <pre> tags around your content. The style/css would style any pre tags it found with the styles you put (font-size, font-family, etc.)

I would actually suggest a better option would be to put everything into another table set to width of 100% and remove the borders. This would ensure everything looked uniform regardless of length of values, etc.

[grantjenkins · Accepted solution]

This is what I would suggest as the best outcome in this instance.

See flow below as a quick example. I'll go into each action.

CSS is a Compose that has some styling for your Table.

<style>
  table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  td, th {
    text-align: left;
    padding: 15px 15px 15px 0;
  }
</style>

HTML is another Compose that contains the actual HTML. Note that you would replace the values with your actual content from your dynamic fields. You would also need to change the image URL to your actual image.

<img src="https://www.w3schools.com/images/w3lynx_200.png" alt="" />
<h2><strong>TGG Logistics, LCC</strong></h2>
<h4><strong>New Employee Profile</strong></h4>
<hr>
<hr>

<table>
    <tbody>
        <tr>
            <td>
                <strong>Full Name:</strong> Joe Bloggs
            </td>
            <td>
                <strong>Member's Email:</strong> Joe.bloggs@email.com
            </td>
        </tr>
        <tr>
            <td>
                <strong>Shift Assigned:</strong> Day
            </td>
            <td>
                <strong>Security Level:</strong> High
            </td>
        </tr>
        <tr>
            <td>
                <strong>Supervisor's Name:</strong> Jane Doe
            </td>
            <td>
                <strong>Supervisor's Email:</strong> Jane.Doe@email.com
            </td>
        </tr>
        <tr>
            <td>
                <strong>Notification Email Sent:</strong> No
            </td>
            <td>
                
            </td>
        </tr>
    </tbody>
</table>

Then you would just need to include the CSS and HTML in your output. In this example I'm using Send an email.

The email would look something like the screenshot below:

[Phineas]

Perfect!

The last item is how to get the employee image in-line with the text - maybe above the fullname (first line of text).

I have a separate question here in the forum that is about adding a 'dynamic' image to the html.

I've been able to achieve this with a 'static' image. The header image, like yours, work fine; In case you want to see the 'compose' and 'get file content' for that image it is in my other question.

However, I have not been able to figure out how to get a 'dynamic' image, based on the 'fullname' to appear in the html output.

Do you have any suggestions?

[Phineas]

Perfect!

The last item is how to get the employee image in-line with the text - maybe above the fullname (first line of text).

I have a separate question here in the forum that is about adding a 'dynamic' image to the html.

I've been able to achieve this with a 'static' image. The header image, like yours, work fine; In case you want to see the 'compose' and 'get file content' for that image it is in my other question.

However, I have not been able to figure out how to get a 'dynamic' image, based on the 'fullname' to appear in the html output.

Do you have any suggestions?

[grantjenkins]

Are you able to show the list/library that contains the images? Also, what is the datatype of the column that has the images?

[Phineas]

Edited Reply: 

Getting close. I just need to figure out how to stop the two different 'styles' from impacting each other.

The 'Profile' section should have two left-justified columns with no borders.

1 = Header Image Compose
2 = The short CSS you provided for the columns in the profile section
3 = The CSS for the Table (this is where the orange boarder code is located)
4 = HTML table with certs and quals data

[grantjenkins]

Can you see if modifying the following for the first table solves the issue. You'll need to put #MembersTable where specified.

I'll reply to your other post with further updates, including the dynamic image.

Assistance with PDF HTML (Boarders and Dynamic Ima... - Power Platform Community (microsoft.com)

[Phineas]

I believe I figured out the 'dynamic' image.

I replaced the hardcoded employee name in the variable with the 'Fullname' column from the 'When an item...' trigger. It seems to be working.

Everything else is working with you updates added except the employee data at the top; There should NOT be any color to the borders. Orange boarders should only appear around the 'Certification' table at the bottom.

[grantjenkins]

Are you able to show the CSS styling you have for the second table?

[grantjenkins]

Can you update your CSS for the first table to this:

<style>
  #MembersTable {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  #MembersTable td, #MembersTable th {
    text-align: left;
    padding: 15px 15px 15px 0;
    border: none;
  }
</style>

Then just make sure your first Table has the following ID to match the CSS.

<table id="MembersTable">

[Phineas]

Here is what I have.

Output is the same.

1 - Compose - CSS (the other two are for the images)