Hello and welcome to new our tutorial.
Today we'll see how can you use JavaScript to replicate the escaped content functionality in a
Re active web application.
Without any further delay let's give a look at this development workaround.
One of you might already have noticed is the
lack of option to escape the content from our expressions.
What we're going to do is a workaround of that situation by using javascript to inject our HTML into
the page, once it's ready.
The Webblock was created to ease our usability and the HTML is passed by input
Inside the Webblock is a div that will be our placeholder for our HTML.
On the Webblock event OnReady we have client action.
This is a moment that is suggested, if we wish to manipulate the Dom object in our page.
Inside the client action, we have a JavaScript node that received the widget ID and the HTML value.
What was done on the JavaScript is, we get the element by ID and then we set
its inner HTML with the value from the input.
One thing that we shall be concerned is to sanitize our HTML content
So that the JavaScript injection is not allowed in our application.
This is useful to create UI components
and it's good practice to centralize these generalist blocks with custom
javascript and HTML in libraries,
And also the less javascript that we have in our app,
The easier it is to maintain it.
Let's check our web block in action.
Let's just add some simple HTML to test it out.
Ok let's check out our HTML content on the page, should show "Hello World!" using header 1.
Great now we're HTML has been rendered now let's try something a bit
more complex and for that let's use this website to generate an HTML table.
Ok now that we have our code I can see generated a few style classes.
So we're going to copy those into the page CSS section.
And then we copy the HTML code into our Webblock input.
Ok, our code has beeb wrapped in double quotation marks.
Done. We publish.
And there we go, the HTML table was rendered has we desired.
And it is all for our quick video on using javascript to workaround the lack of the
escape content in a reactive our application.
We hope you have enjoyed it,
and please join us next time for more OutSystems tutorials by OutPower.