Hi,
I have a database table with a description Text field which has data with line breaks.
How can I preserve these line breaks when dynamically displaying the field on the App structure.
The field data has no html, its plane text with line breaks.
I’ve tried a dynamic attribute Innet HTML by obviously that doesn’t work.
Just wondering if there is a quick way of achieving this?
Using inner HTML will properly render any HTML content from your database.
I see you are not properly using it, if you are using the inner HTML option your code should look like:
<p dmx-html="your_value"></p>
not
<p dmx-html="your_value">{{your_value}}</p>
it’s either the inner html or the direct binding in {{ }}, never both.
@Teodor I not using any HTML in the DB field, its plain text with line breaks. How do I go about preserving these line breaks?
Not sure what do you mean by that. What is the exact value stored in your database?
What is the value returned by your server action when you load the page? Please post a screenshot of what you see for it from the Network > XHR tab of your browser dev tools.
* 100x Spoons (disposable)\n* 12x 1L long life Milk\n* 24x Noodles \n* 2x Coffee Jars\n* 4x Bag Chocolates \n* 24x 600ml Water Bottles
The easiest way to display these will be using css. You can add a class to your paragraph, like class="formatted-text"
<p class="formatted-text">{{pck_description}}</p>
and then add this to your css:
.formatted-text {
white-space: pre-line;
}
Thanks @Teodor worked perfectly!
Another option would be to create a custom App Connect formatter.
Add this to the page:
<script>
dmx.Formatters('string', {
nl2br: function(string) {
return string.replace(/\n/g, '<br>');
}
});
</script>
then use it as:
<p dmx-html="pck_description.nl2br()"></p>
How can I this custom formatter to the wappler UI??