Having issue while working with multi-line HTML/ text content snippets in Dynamics 365/ PowerApps portals? No worries, liquid has got your back

Well this one is really interesting. And sometimes the strangest of issues comes from the most unexpected scenarios.

We have content snippet for English language. Snippet type is HTML. Customer is using this snippet in JavaScript on load of the webpage.

Snippet screenshot below

And below is the JavaScript written on load of the web page where the snippet is being utilized.

Nothing much with the script. The snippet is being utilized to show some custom content in the page header. Very simple isn’t it? Well not so fast.

When the web page is displayed in the portal, things don’t work out as expected. The custom content in the page header is not displayed at all.

In desperation  I view the page source to understand how the script part is being rendered. And below is what I see.

Interesting isn’t it. Never thought it would work out like this. So what basically happened? When we inserted the snippet, we create it pressing enter which basically inserted new line characters in the snippet. When the snippet was read inside the script, it rendered with all the new line characters which obviously made it as invalid string.

So if you are thinking that you now need to use jscript to work your way out, may be that’s not the correct way. Because you are in the world of portals and liquid is there to help you out. It has a wonderful filter called strip_newlines which will strip all the new line characters. Let’s try that out.

A simple change in the javascript code below using the new filter

$(window).on(“load”, function(){

var str = ‘{{ snippets[“Html Snippet”] | strip_newlines }}’;

$(“.page-header”).append(str);

});

And now when I refresh my portal cache and see it in the browser, my page header is rendered just fine.

Quick peek into the code now.

Piece of cake.

Hope this helps!

Debajit Dutta

(Business Solutions MVP)