2122
Views
18
Comments
Solved
Unescaped content on mobile app v10
Question

Hi,

 I have a html content (with strong and italic formatting) in database that I want to display. 

In Expression of mobile app in version 10 there is no "Escape content" property - is it possible to show unescaped contend in mobile app?


Thanks

Staff
Rank: #252
Solution

Hi Mykola,

It is possible using the Javascript node.

Create a container on your screen where you want to put the content and give it a name.

Then in the ready event hander of the screen (check the screen properties):
1) get the content that you want to display
2) create a JS Node
3) pass the content and the container id to the JS Node
4) write something like this is the JSNode
    document.getElementById($parameters.ContainerId).innerHTML = $parameters.Content
5) win!

Rank: #17955

João Neves wrote:

Hi Mykola,

It is possible using the Javascript node.

Create a container on your screen where you want to put the content and give it a name.

Then in the ready event hander of the screen (check the screen properties):
1) get the content that you want to display
2) create a JS Node
3) pass the content and the container id to the JS Node
4) write something like this is the JSNode
    document.getElementById($parameters.ContainerId).innerHTML = $parameters.Content
5) win!

for the parameter content and container, are they input parameter or output parameter?


Staff
Rank: #252

Erron Lolha wrote:

João Neves wrote:

Hi Mykola,

It is possible using the Javascript node.

Create a container on your screen where you want to put the content and give it a name.

Then in the ready event hander of the screen (check the screen properties):
1) get the content that you want to display
2) create a JS Node
3) pass the content and the container id to the JS Node
4) write something like this is the JSNode
    document.getElementById($parameters.ContainerId).innerHTML = $parameters.Content
5) win!

for the parameter content and container, are they input parameter or output parameter?


Inputs


Rank: #237

João Neves wrote:

Erron Lolha wrote:

João Neves wrote:

Hi Mykola,

It is possible using the Javascript node.

Create a container on your screen where you want to put the content and give it a name.

Then in the ready event hander of the screen (check the screen properties):
1) get the content that you want to display
2) create a JS Node
3) pass the content and the container id to the JS Node
4) write something like this is the JSNode
    document.getElementById($parameters.ContainerId).innerHTML = $parameters.Content
5) win!

for the parameter content and container, are they input parameter or output parameter?


Inputs


Hey Guys,

I am in the situation like this,

I am using an API call which returns a list of texts which contains Anchor link in between each paragraph,

while displaying the anchor tag is displayed as it is, not as an anchor link

I tried using the script but the container id is not taking list item container, I can't able to include the container Id.

Is there any other way to convert the Expression values to display the anchor link?


Thanks,

Keerthi

Champion
Rank: #149

Hi João,

Thanks - that will work. 

Champion
Rank: #149

Hi João,

However when I've tried this it actually puts proper html inside container, but styles are not applied - I have <strong> tag inside for example but text is still normal (nothing is overriding it). 

Any suggestions?

Thank you

Staff
Rank: #252

When inspecting the strong text (using dev tools) where does the font weight come from? The browser default is bold, so something might be overriding it.

Sérgio Silva
Rank: #0

Hey Mykola,

This was already answered in this post. In there you have a module that will cover the scenarios you describe.

Cheers,

Sérgio

Champion
Rank: #149


Hi


João, it is browser default and it is not ovverided by anything, I have more specific classes inside that dynamically added block too and they are not applied either. If I create a container with this class - it is displayed properly.


Sérgio, I can't see the post by your link - have "You don´t have permissions to read this forum." error.

Staff
Rank: #252

Have you got a <p> wrapping the content? That might be the problem. If you use <b> instead of strong you don't need a wrapping <p>

Sérgio Silva
Rank: #0

Hi Mykola,

You're right, wrong link. I'm attaching the OML to this post. Essentially, it's a module where you load HTML content from the database and render it using João's answer. All styles should be applied, unless you have some CSS rules or HTML that stop that from happening.

Cheers,

Sérgio

DynamicHTML.oml

Champion
Rank: #149

Hi Sérgio,

Thank you very much for oml - it worked perfectly.

However there is definitely something in my app that conflicts with this.. I've copied screen and entity to my app and it gives me same result as before - html is inserted but styles are flat... I will investigate deeper the problem (I think it might be related to jQuery library that is included in my app or P10SILK Base Theme... ) and will post here what was the problem. Or if you have any suggestions it might help also.

Thank you again

Sérgio Silva
Rank: #0

Hi Mykola,

Do you have a sample you can share that does not work as expected?

Sérgio 

Champion
Rank: #149

Hi Sérgio,

I've attached OML that was created as a new mobile app with phone only theme and I busted copied screen and entity from your app. 

The code I'm testing and that is working on your OML is this:

<strong>Bold text...</strong>
<br>
<ul>
<li>List item</li>
<li>Another list item</li>
</ul>
just text



testhtml.oml

Sérgio Silva
Rank: #0

Hi Mykola,

Indeed, looking at the app you produced, the HTML is rendered correctly. However, there are some built-in styles coming from the phone Theme that stop the ul element from rendering its items with bullets (just take a look with the inspector). In this case, you need to define styles that will override these ones.

Cheers,

Sérgio

Rank: #21697

Hi, when I use this method to load html data from an a excel file, I get a Bootstrap Timer Error : String or binary data would be truncated even though I have set the entity attribute length to 32000, which is more or less the maximum number of characters a excel cell can have. How do I fix this?

Rank: #8963

Hi,

I have checked the provided solution and was able to solve one of my issues but still not able to find a complete solution.

My problem is, I have a list of records having HTML content and that list is the source record list for displaying records on the mobile screen. If I pass the container Id to JS node, it just gives me last record as unescaped text.

Is there any way to unescaped HTML for a list of records?

Rank: #691

Gaurav - I am sure you have long since solved this, but for others' benefit. One solution to the issue you describe is to package this solution in a weblock and use that within each row you are displaying. 

I packaged a weblock like this, into a forge component to make it easier for developers to find and reuse from the forge: 

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=9854 

Thanks!