cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
amanverma
Frequent Visitor

HTMLText field - Line Break isn't working when sending email

Hello, 

 

I am trying to send the email using powerApps, everything is working fine except the formatting which is getting removed when receiving in outlook.

 

How i am doing it.

1- Getting input in Text Input Field
2- Then passing the value to HTMLText field, applied css white-space:pre-wrap which keeps the formatting i.e breaking the line of Text Input field
3- Then sending the HTMLText field in email as you can see in the screenshot

actualform.jpg

 

Problem
You can see how my input look like which is fine

MultiLineTextIssue.jpg

But then when i receive the email it looks like below which isn't the requirement

Email.jpg

Note - When i use Richtext box the formatting get retained however i have multiple fields, if i use richtext for all of them then it won't fit into the screen.

 

Is there anyway i can retain the HTMLText formatting?

 

Thank you in advance 

 

Aman

1 ACCEPTED SOLUTION

Accepted Solutions
RandyHayes
Super User
Super User

@amanverma 

So what I am not understanding from your formulas - in your original post you showed Screen3 with a TextInput control and what seemed like what you wanted to email.  Where is that coming from and how it is used?  In your last response, you mention CollClientUPN...but how is that defined?

I am just not seeing the connection of your TextInput that you mention to any of the other pictures or formulas.

 

If it is that you are testing with Screen3 and you have entered values into a TextInput control and then are sending that (not seeing that relationship in your formulas, but assuming), then you can always split apart the textinput and insert <br>'s for the HTML.

Like this:

    Concat(Split(yourTextInput.Text, Char(10)), Result & "<br>")

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

View solution in original post

9 REPLIES 9
RandyHayes
Super User
Super User

@amanverma 

Not really seeing in your pictures where you are actually doing any HTML, so not sure what specifically to suggest in your case.  Your Screen3 seems to show a TextInput control, which would just be text.  If you want to see some resultant HTML, then I suggest you use a HtmlText control instead to view your results in PowerApps.

 

That said, again not seeing your formulas, you need to add a "<br>" at the very least to the end of each row for it to have line breaks.

 

I hope this is helpful for you.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

@RandyHayes Thanks for the prompt response.

 

Here is the code which i am using for HTMLText field 

 

"<!DOCTYPE html>
<html>
   <body>
      <div style='background-color:#0c1c3c;'>
      <div style='width:100%; height:100%;'>
         <img src='appres://resources/Incident.png'  style='width:100%; height:100%;'>
         </div'>
         <div style='font-size:30px; padding-left:20px; background-color:#0c1c3c; color:white; width:100%; height:100%;'>
            "&IncidentTitle.Text&"
         </div>
         <table style='border:1px solid black; border-collapse:collapse; width:100%; height:100%; background-color:#73c3fb;' >
            <tr>
               <td style='border:1px solid black; width:150px;' >
                  <h4>
                  What's happening?</h4>
               </td>
               <td style='border:1px solid black; white-space: pre-wrap !important;'>"& WhatsHappening.Text &"</td>
            </tr>
            <tr>
               <td style='border:1px solid black; width:150px;'>
                  <h4>
                  When is it happening?</h4>
               </td>
               <td style='border:1px solid black; white-space: pre-wrap !important;'><p>"& WhenHappening.Text &"</p></td>
            </tr>
            <tr>
               <td style='border:1px solid black; width:150px;'>
                  <h4>
                  What's the impact?</h4>
               </td>
               <td style='border:1px solid black; white-space: pre-wrap !important;'>"& WhatImpact.Text &"</td>
            </tr>
            <tr>
               <td style='border:1px solid black; width:150px;'>
                  <h4>
                  Who's affected?</h4>
               </td>
               <td style='border:1px solid black; white-space: pre-wrap !important;'>"& WhosAffected.Text &"</td>
            </tr>
            <tr>
               <td style='border:1px solid black; width:150px;'>
                  <h4>
                  Action required</h4>
               </td>
               <td style='border:1px solid black; white-space: pre-wrap !important;'>"& ActionRequired.Text &"</td>
            </tr>
            <tr>
               <td style='border:1px solid black; width:150px;'>
                  <h4>
                  More information</h4>
               </td>
               <td style='border:1px solid black; white-space: pre-wrap !important;'>"& MoreInfo.Text &"</td>
            </tr>
            <tr>
               <td style='border:1px solid black; width:150px;'>
                  <h4>
                  Contact point</h4>
               </td>
               <td style='border:1px solid black; white-space: pre-wrap !important;'>"& TxtContactPoint.Text &"</td>
            </tr>
         </table>
         <div>
            <img src='"& Concatenate(imageUrl, imageName) &"' width=100%>
         </div>
      </div>
   </body>
</html>
"


and this is what i am using to send the email

If(
    Checkbox1.Value = true && !IsBlank(CollClientUPN),
    Office365Outlook.SharedMailboxSendEmailV2(
        "services@onmicrosoft.com",
        Concat(
            CollClientUPN,
            Value,
            ";"
        ),
        IncidentTitle.Text,
        HtmlText1.HtmlText
    )
);

 

just curious how can <br> gonna break each line of textInput?
Where can i put in the code?

Thank you!

Aman

RandyHayes
Super User
Super User

@amanverma 

So what I am not understanding from your formulas - in your original post you showed Screen3 with a TextInput control and what seemed like what you wanted to email.  Where is that coming from and how it is used?  In your last response, you mention CollClientUPN...but how is that defined?

I am just not seeing the connection of your TextInput that you mention to any of the other pictures or formulas.

 

If it is that you are testing with Screen3 and you have entered values into a TextInput control and then are sending that (not seeing that relationship in your formulas, but assuming), then you can always split apart the textinput and insert <br>'s for the HTML.

Like this:

    Concat(Split(yourTextInput.Text, Char(10)), Result & "<br>")

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

View solution in original post

@RandyHayes 

I am sorry for not specifying in my post, you are right, in my original post the textinput you see is just for testing purpose.

 

Please note that the data isn't same every time. sometimes it is one line and other times it could be 100 lines. Do you think using this formula  Concat(Split(yourTextInput.Text, Char(10)), Result & "<br>") going to fix the problem?

 

RandyHayes
Super User
Super User

@amanverma 

No problems.  So, I am still not completely clear on the scenario you have, but if it is a matter of putting HTML line breaks in regular text from a text input control, then yes, the formula I provided will give you that.  You could also consider the Substitute function, but I find the Concat to be a little more "readable".

Go ahead and try the suggestion and see where that gets you.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

Yes, that fixed my problem, thanks a lot for the suggestion.

@RandyHayesis there any way to have a option to embed (not attach) images based on user input in my form?

RandyHayes
Super User
Super User

@amanverma 

When you say embed, are you saying that you want an image in your email as an inline image and not as an attachment?

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

@RandyHayesyes as an inline message.

RandyHayes
Super User
Super User

@amanverma 

To do that, you will need to Base64 encode your image and then add it into the text you are sending.

So, something along these lines:

In your HTML...

With({_inlineImage: JSON(yourImage, IncludeBinaryData)},

    ...all the rest of your HTML as you have it...
    ...where you need the image...
    <img src=" & _inlineImage & " alt='img'>

)

 

That works well.

 

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!

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.

Users online (1,258)