cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Phineas
Community Champion
Community Champion

Add Space to Compose Action HTML Code

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>

Phineas_1-1669483516489.png

 

 

1 ACCEPTED SOLUTION

Accepted Solutions

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.

grantjenkins_0-1669690123659.png

 

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

grantjenkins_1-1669690214400.png

<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.

grantjenkins_2-1669690289861.png

 

<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.

grantjenkins_3-1669690407049.png

 

The email would look something like the screenshot below:

grantjenkins_4-1669690461978.png

 


----------------------------------------------------------------------
If I've answered your question, please mark the post as Solved.
If you like my response, please consider giving it a Thumbs Up.

View solution in original post

24 REPLIES 24
grantjenkins
Super User
Super User

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>

 

 


----------------------------------------------------------------------
If I've answered your question, please mark the post as Solved.
If you like my response, please consider giving it a Thumbs Up.

Edited Reply: See bottom for update

That did impact the content.
Phineas_1-1669567128818.png

 

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.

Phineas_2-1669567251972.png



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?

Phineas_0-1669571618626.png

 

Phineas_1-1669571718853.png

 

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

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>

----------------------------------------------------------------------
If I've answered your question, please mark the post as Solved.
If you like my response, please consider giving it a Thumbs Up.

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?

I tried the following. No change in the spacing.

Phineas_0-1669649622415.png

Phineas_1-1669649654625.png

 

Hi @Phineas ,

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

Here is a test for your reference:

vchengfenmsft_1-1669685951047.png

Here is result:

vchengfenmsft_2-1669685994984.png

 

 

html - CSS not showing in outlook - Stack Overflow

Outlook Email Rendering Issues and How to Solve Them - Litmus

 

Best Regards

Cheng Feng

 

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?

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.


----------------------------------------------------------------------
If I've answered your question, please mark the post as Solved.
If you like my response, please consider giving it a Thumbs Up.

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.

grantjenkins_0-1669690123659.png

 

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

grantjenkins_1-1669690214400.png

<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.

grantjenkins_2-1669690289861.png

 

<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.

grantjenkins_3-1669690407049.png

 

The email would look something like the screenshot below:

grantjenkins_4-1669690461978.png

 


----------------------------------------------------------------------
If I've answered your question, please mark the post as Solved.
If you like my response, please consider giving it a Thumbs Up.

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?

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?

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


----------------------------------------------------------------------
If I've answered your question, please mark the post as Solved.
If you like my response, please consider giving it a Thumbs Up.

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.

Phineas_9-1669748292470.png

 

 

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

Phineas_6-1669747889091.png

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

 

grantjenkins_0-1670075476565.png

 

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)


----------------------------------------------------------------------
If I've answered your question, please mark the post as Solved.
If you like my response, please consider giving it a Thumbs Up.

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.

Phineas_0-1670098637479.png

 

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


----------------------------------------------------------------------
If I've answered your question, please mark the post as Solved.
If you like my response, please consider giving it a Thumbs Up.

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">

grantjenkins_0-1670111202888.png

 


----------------------------------------------------------------------
If I've answered your question, please mark the post as Solved.
If you like my response, please consider giving it a Thumbs Up.

Here is what I have.

Output is the same.

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

Phineas_0-1670111899406.png

 

Helpful resources

Announcements

Tuesday Tip | How to Report Spam in Our Community

It's time for another TUESDAY TIPS, your weekly connection with the most insightful tips and tricks that empower both newcomers and veterans in the Power Platform Community! Every Tuesday, we bring you a curated selection of the finest advice, distilled from the resources and tools in the Community. Whether you’re a seasoned member or just getting started, Tuesday Tips are the perfect compass guiding you across the dynamic landscape of the Power Platform Community.   As our community family expands each week, we revisit our essential tools, tips, and tricks to ensure you’re well-versed in the community’s pulse. Keep an eye on the News & Announcements for your weekly Tuesday Tips—you never know what you may learn!   Today's Tip: How to Report Spam in Our Community We strive to maintain a professional and helpful community, and part of that effort involves keeping our platform free of spam. If you encounter a post that you believe is spam, please follow these steps to report it: Locate the Post: Find the post in question within the community.Kebab Menu: Click on the "Kebab" menu | 3 Dots, on the top right of the post.Report Inappropriate Content: Select "Report Inappropriate Content" from the menu.Submit Report: Fill out any necessary details on the form and submit your report.   Our community team will review the report and take appropriate action to ensure our community remains a valuable resource for everyone.   Thank you for helping us keep the community clean and useful!

Tuesday Tip | How to Get Community Support

It's time for another Tuesday Tip, your weekly connection with the most insightful tips and tricks that empower both newcomers and veterans in the Power Platform Community! Every Tuesday, we bring you a curated selection of the finest advice, distilled from the resources and tools in the Community. Whether you’re a seasoned member or just getting started, Tuesday Tips are the perfect compass guiding you across the dynamic landscape of the Power Platform Community.       This Week: All About Community Support Whether you're a seasoned community veteran or just getting started, you may need a bit of help from time to time! If you need to share feedback with the Community Engagement team about the community or are looking for ways we can assist you with user groups, events, or something else, Community Support is the place to start.   Community Support is part of every one of our communities, accessible to all our community members.   Within each community's Community Support page, you'll find three distinct areas, each with a different focus to help you when you need support from us most. Power Apps: https://powerusers.microsoft.com/t5/Community-Support/ct-p/pa_community_support Power Automate: https://powerusers.microsoft.com/t5/Community-Support/ct-p/mpa_community_support Power Pages: https://powerusers.microsoft.com/t5/Community-Support/ct-p/mpp_community_support Copilot Studio: https://powerusers.microsoft.com/t5/Community-Support/ct-p/pva_community-support   Community Support Form If you need more assistance, you can reach out to the Community Team via the Community support form. Choose the type of support you require and fill in the form accordingly. We will respond to you promptly.    Thank you for being an active part of our community. Your contributions make a difference!   Best Regards, The Community Management Team

Community Roundup: A Look Back at Our Last 10 Tuesday Tips

As we continue to grow and learn together, it's important to reflect on the valuable insights we've shared. For today's #TuesdayTip, we're excited to take a moment to look back at the last 10 tips we've shared in case you missed any or want to revisit them. Thanks for your incredible support for this series--we're so glad it was able to help so many of you navigate your community experience!   Getting Started in the Community An overview of everything you need to know about navigating the community on one page!  Community Links: ○ Power Apps ○ Power Automate  ○ Power Pages  ○ Copilot Studio    Community Ranks and YOU Have you ever wondered how your fellow community members ascend the ranks within our community? We explain everything about ranks and how to achieve points so you can climb up in the rankings! Community Links: ○ Power Apps ○ Power Automate  ○ Power Pages  ○ Copilot Studio    Powering Up Your Community Profile Your Community User Profile is how the Community knows you--so it's essential that it works the way you need it to! From changing your username to updating contact information, this Knowledge Base Article is your best resource for powering up your profile. Community Links: ○ Power Apps ○ Power Automate  ○ Power Pages  ○ Copilot Studio    Community Blogs--A Great Place to Start There's so much you'll discover in the Community Blogs, and we hope you'll check them out today!  Community Links: ○ Power Apps ○ Power Automate  ○ Power Pages  ○ Copilot Studio    Unlocking Community Achievements and Earning Badges Across the Communities, you'll see badges on users profile that recognize and reward their engagement and contributions. Check out some details on Community badges--and find out more in the detailed link at the end of the article! Community Links: ○ Power Apps  ○ Power Automate  ○ Power Pages  ○ Copilot Studio    Blogging in the Community Interested in blogging? Everything you need to know on writing blogs in our four communities! Get started blogging across the Power Platform communities today! Community Links: ○ Power Apps  ○ Power Automate  ○ Power Pages  ○ Copilot Studio   Subscriptions & Notifications We don't want you to miss a thing in the community! Read all about how to subscribe to sections of our forums and how to setup your notifications! Community Links: ○ Power Apps  ○ Power Automate  ○ Power Pages  ○ Copilot Studio   Getting Started with Private Messages & Macros Do you want to enhance your communication in the Community and streamline your interactions? One of the best ways to do this is to ensure you are using Private Messaging--and the ever-handy macros that are available to you as a Community member! Community Links: ○ Power Apps  ○ Power Automate  ○ Power Pages  ○ Copilot Studio   Community User Groups Learn everything about being part of, starting, or leading a User Group in the Power Platform Community. Community Links: ○ Power Apps  ○ Power Automate  ○ Power Pages  ○ Copilot Studio   Update Your Community Profile Today! Keep your community profile up to date which is essential for staying connected and engaged with the community. Community Links: ○ Power Apps  ○ Power Automate  ○ Power Pages  ○ Copilot Studio   Thank you for being an integral part of our journey.   Here's to many more Tuesday Tips as we pave the way for a brighter, more connected future! As always, watch the News & Announcements for the next set of tips, coming soon!    

Hear what's next for the Power Up Program

Hear from Principal Program Manager, Dimpi Gandhi, to discover the latest enhancements to the Microsoft #PowerUpProgram, including a new accelerated video-based curriculum crafted with the expertise of Microsoft MVPs, Rory Neary and Charlie Phipps-Bennett. If you’d like to hear what’s coming next, click the link below to sign up today! https://aka.ms/PowerUp  

Tuesday Tip: Getting Started with Private Messages & Macros

Welcome to TUESDAY TIPS, your weekly connection with the most insightful tips and tricks that empower both newcomers and veterans in the Power Platform Community! Every Tuesday, we bring you a curated selection of the finest advice, distilled from the resources and tools in the Community. Whether you’re a seasoned member or just getting started, Tuesday Tips are the perfect compass guiding you across the dynamic landscape of the Power Platform Community.   As our community family expands each week, we revisit our essential tools, tips, and tricks to ensure you’re well-versed in the community’s pulse. Keep an eye on the News & Announcements for your weekly Tuesday Tips—you never know what you may learn!   This Week's Tip: Private Messaging & Macros in Power Apps Community   Do you want to enhance your communication in the Community and streamline your interactions? One of the best ways to do this is to ensure you are using Private Messaging--and the ever-handy macros that are available to you as a Community member!   Our Knowledge Base article about private messaging and macros is the best place to find out more. Check it out today and discover some key tips and tricks when it comes to messages and macros:   Private Messaging: Learn how to enable private messages in your community profile and ensure you’re connected with other community membersMacros Explained: Discover the convenience of macros—prewritten text snippets that save time when posting in forums or sending private messagesCreating Macros: Follow simple steps to create your own macros for efficient communication within the Power Apps CommunityUsage Guide: Understand how to apply macros in posts and private messages, enhancing your interaction with the Community For detailed instructions and more information, visit the full page in your community today:Power Apps: Enabling Private Messaging & How to Use Macros (Power Apps)Power Automate: Enabling Private Messaging & How to Use Macros (Power Automate)  Copilot Studio: Enabling Private Messaging &How to Use Macros (Copilot Studio) Power Pages: Enabling Private Messaging & How to Use Macros (Power Pages)

Tuesday Tip: Subscriptions & Notifications

TUESDAY TIPS are our way of communicating helpful things we've learned or shared that have helped members of the Community. Whether you're just getting started or you're a seasoned pro, Tuesday Tips will help you know where to go, what to look for, and navigate your way through the ever-growing--and ever-changing--world of the Power Platform Community! We cover basics about the Community, provide a few "insider tips" to make your experience even better, and share best practices gleaned from our most active community members and Super Users.   With so many new Community members joining us each week, we'll also review a few of our "best practices" so you know just "how" the Community works, so make sure to watch the News & Announcements each week for the latest and greatest Tuesday Tips!   This Week: All About Subscriptions & Notifications We don't want you to a miss a thing in the Community! The best way to make sure you know what's going on in the News & Announcements, to blogs you follow, or forums and galleries you're interested in is to subscribe! These subscriptions ensure you receive automated messages about the most recent posts and replies. Even better, there are multiple ways you can subscribe to content and boards in the community! (Please note: if you have created an AAD (Azure Active Directory) account you won't be able to receive e-mail notifications.)   Subscribing to a Category  When you're looking at the entire category, select from the Options drop down and choose Subscribe.     You can then choose to Subscribe to all of the boards or select only the boards you want to receive notifications. When you're satisfied with your choices, click Save.     Subscribing to a Topic You can also subscribe to a single topic by clicking Subscribe from the Options drop down menu, while you are viewing the topic or in the General board overview, respectively.     Subscribing to a Label Find the labels at the bottom left of a post.From a particular post with a label, click on the label to filter by that label. This opens a window containing a list of posts with the label you have selected. Click Subscribe.     Note: You can only subscribe to a label at the board level. If you subscribe to a label named 'Copilot' at board #1, it will not automatically subscribe you to an identically named label at board #2. You will have to subscribe twice, once at each board.   Bookmarks Just like you can subscribe to topics and categories, you can also bookmark topics and boards from the same menus! Simply go to the Topic Options drop down menu to bookmark a topic or the Options drop down to bookmark a board. The difference between subscribing and bookmarking is that subscriptions provide you with notifications, whereas bookmarks provide you a static way of easily accessing your favorite boards from the My subscriptions area.   Managing & Viewing Your Subscriptions & Bookmarks To manage your subscriptions, click on your avatar and select My subscriptions from the drop-down menu.     From the Subscriptions & Notifications tab, you can manage your subscriptions, including your e-mail subscription options, your bookmarks, your notification settings, and your email notification format.     You can see a list of all your subscriptions and bookmarks and choose which ones to delete, either individually or in bulk, by checking multiple boxes.     A Note on Following Friends on Mobile Adding someone as a friend or selecting Follow in the mobile view does not allow you to subscribe to their activity feed. You will merely be able to see your friends’ biography, other personal information, or online status, and send messages more quickly by choosing who to send the message to from a list, as opposed to having to search by username.

Users online (4,567)