When using PowerApps multi-line text inputs, behavior on line breaks is not always consistent. You may have also noticed that your Microsoft Flow approval comments will not (always) return line breaks.
In this blog, I will explain you the how-and-what about line breaks in PowerApps and Flow.

PowerApps multi-line text inputs

In PowerApps, you can add a Text input control and set its Mode property to Multiline.

Let’s say you want to use the input somewhere else. I will show you what happens with this input within different controls/actions and how to process line breaks correctly

Label

When you add a Label control and set its Text property to TextInput1.Text, your control will show the input including the line breaks. Nothing wrong here!

HTML text

When you add an HTML text control and set its HTMLText property to TextInput1.Text, your control will show the input without the line breaks. How is this possible?

This is because the control expects its text to be in HTML format. The basic Text input control does not transform the input into an HTML format. A line break in a Text input control is formatted as Char(10) which isn’t recognized as HTML.

So how can we show a line break in our HTML text control? The answer is simple: replace the Char(10) character with a HTML line break, which is <br/> by using the Substitute() function:

Substitute(
    TextInput1.Text,
    Char(10),
    "<br/>"
)

Email

When you add a Button control and set its OnSelect property to send an email (using the Office 365 Outlook connector) and set the body attribute to TextInput1.Text, the input inside the email body will be showed including the line breaks. Nothing wrong here!

But we want our email message to have some dynamic content and it to be formatted and styled according to our company branding right? So we add a bit of HTML and add the {IsHTML:true} attribute to our Office365.SendEmail() function. But now, the input will be showed without the line breaks. Argh!

Well, same rules as the HTML text apply here: you just have to replace the Char(10) character with an HTML line break and then it will work:

Flow Approval comments

Now, over to Microsoft Flow. When you use an Approval action inside your Flow and you want something to do with the comments that are filled in by the Approver, you use the comments from the Dynamic content of your Approval action.

When you run the Flow, Approve the request and enter some multiline comments, the comments will be showed including the line breaks. Nothing wrong here!

But when you want to add some HTML to your email and set the Is HTML property of your Send an email action to Yes, the comment will be showed without the line breaks again:

Again, you have to replace the newline character with an HTML line break, but in this case the character is the URL encoded variant of Char(10), which is %0A. To transform this into an HTML line break, we have to do a bit more work than just replacing the %0A value with <br/>.

First we need to get the URI Component, which contains the URL encoded variant of Char(10): %0A. This is the comments Dynamic content from the Approval action. We use the uriComponent() expression for this:

uriComponent(body('Start_an_approval')?['comments'])

We then need to replace %0A within this URI Component with the <br/> HTML line break by using the replace() expression:

replace(uriComponent(body('Start_an_approval')?['comments']),'%0A','<br/>'

Finally we need to pass the result of this replace action (which is still in URI format) into a string by using the uriComponentToString() expression. Our final expression will look like this:

uriComponentToString(
	replace(
		uriComponent(body('Start_an_approval')?['comments']),
		'%0A',
		'<br/>'
	)
)

After approval, the final email will be send and comments will be showed including the line breaks: