Convert New line to html break in PowerApps Portals/ Dynamics 365 Portals using Liquid

Recently we had a requirement where we needed to show the text stored in multiline textbox in Dynamics 365, inside a div element in PowerApps portal.

The problem was when we have a text inside a multi-line textbox and the user press the enter key, the value is stored as new line character. However when the same new line character is rendered in HTML, it is not recognized. How to solve it? The first thought that come to mind is to convert the new line to Html break (<br/>) elements. And to do that, you think of javascript as the obvious choice.

Not so fast. You are in PowerApps portals and you have liquid to play with. Such a simple yet so powerful language. And guess what, it has an option to accomplish our requirement as well. As you can see in the below code, there is a special filter which converts a new line character to HTML breaks. That filter is newline_to_br

{% capture string_with_newlines %}
Hello
Debajit
{% endcapture %}

{{ string_with_newlines | newline_to_br }}

And guess what, the output is something like this –

<br />
Hello<br />
Debajit<br />

And this when render inside <div> element, it renders with line break.

Hope it helps!

Debajit Dutta

Dynamics MVP