17
Views
6
Comments
Solved
HTML Tags Reactive web
Application Type
Reactive

Hello everyone,

A minute of your time,


I have an expression with the result of an API service which is a text.

The text comes with the tags of html. I know that in Traditional web we have the property "Escape Content". How can I implement this in a reactive app?


Best Regards,

Bruno Meireles

Rank: #86
Solution

Hello there Bruno,

Hope you're doing well.


Do you pretend to inject that HTML code in the page, right?


You should be able to achieve that using this Forge component:
https://www.outsystems.com/forge/component-overview/7239/injecthtml


It works similarly to Non-escaped expressions from Traditional Web Apps, but it is designed for Reactive Web Apps.


Kind regards,

Rui Barradas

Rank: #258

I know this is marked as answered, but I would certainly prefer the builtin way of using the new html widget that Graça suggested over having to install a forge component.

I'm guessing in case of the question however, the input is variable, so that wouldn't really work. But if you prefer not installing a forge component, there is another, more dirty way. You could use javascript and set the .innerHTML property of an element. I didn't look into that forge component in detail, but it's probably what it does as well.

Rank: #21046

Hello,

At first I tried to use tags, but it didn't work because the text varies, it comes from a web service.
After that, I used the component and worked properly.

Thank you,

Bruno Meireles

Rank: #86

Hello there Tim,

Checking on the code of the component itself, you are right :)

It uses .innerHTML property of the element, as you can see:


About using JavaScript code, I guess it is better to use a component than having custom JavaScript directly in the apps.

Please check this thread about a similar discussion.


Kind regards,

Rui Barradas

Rank: #258

There are advantages and consequences of both solutions. It all depends on the environment you're working in and how your software factory is setup. But this is not the place to discuss this. The question has been answered, the problem solved.