Solved: Re: HTMLText field - Line Break isn't working when...

amanverma · ‎11-26-2020

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

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

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

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

RandyHayes · ‎11-26-2020

@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 's for the HTML.

Like this:

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

_____________________________________________________________________________________
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.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
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 · ‎11-26-2020

@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 " " 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.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes
Really want to show your appreciation? Buy Me A Cup Of Coffee!

amanverma · ‎11-26-2020

@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 gonna break each line of textInput?
Where can i put in the code?

Thank you!

Aman

RandyHayes · ‎11-26-2020

@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 's for the HTML.

Like this:

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

_____________________________________________________________________________________
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.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes
Really want to show your appreciation? Buy Me A Cup Of Coffee!

amanverma · ‎11-26-2020

@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 & " ") going to fix the problem?

RandyHayes · ‎11-29-2020

@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.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes
Really want to show your appreciation? Buy Me A Cup Of Coffee!

amanverma · ‎11-29-2020

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 · ‎11-30-2020

@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.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes
Really want to show your appreciation? Buy Me A Cup Of Coffee!

amanverma · ‎11-30-2020

@RandyHayesyes as an inline message.

RandyHayes · ‎12-02-2020

@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.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes
Really want to show your appreciation? Buy Me A Cup Of Coffee!

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

Helpful resources

Power Apps News & Announcements

Introducing the Community Calls Conversations

Power Apps Community Blog