cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
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
Super User III
Super User III

@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. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

View solution in original post

9 REPLIES 9
Super User III
Super User III

@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. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

@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

Super User III
Super User III

@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. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

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?

 

Super User III
Super User III

@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. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

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?

Super User III
Super User III

@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. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

@RandyHayesyes as an inline message.

Super User III
Super User III

@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. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.
Check out my PowerApps Videos too!

Helpful resources

Announcements
New Badges

New Solution Badges!

Check out our new profile badges recognizing authored solutions!

New Power Super Users

Congratulations!

We are excited to announce the Power Apps Super Users!

Power Apps Community Call

Power Apps Community Call: February

Did you miss the call? Check out the Power Apps Community Call here.

Microsoft Ignite

Microsoft Ignite

Join digitally, March 2–4, 2021 to explore new tech that's ready to implement. Experience the keynote in mixed reality through AltspaceVR!

Top Solution Authors
Top Kudoed Authors
Users online (34,072)