Hello,

I need help with a mobile problem. We have a screen with html from ckeditor when we use the inner html to display the content correctly. However, when we have links, we want to open in default devices browsers, is it possible? At this point, the behavior we have is that it opens in the context of the app and not in the browser of the device.


Thank you!

Hi Diana,

You can use the in-app browser plugin from the forge.


https://www.outsystems.com/forge/component-overview/1558/inappbrowser-plugin


Regards,

Pankaj

Hi Diana,

You can do it by

Just follow these steps:

  • Add a Client Action to handle your link's On Click event.
  • Add a JavaScript element to the new Client Action.

JavaScript: window.open('<yourURL>', '_system');
 

Or you can use the above plugin mentioned by Pankaj pant (Thanks)

Hope this help,
Thanks


Hi,


I don’t have control on the html. I need to replace the link in the html to use that JavaScript. But don’t work. Can you give me an example? 


Thanks!

Diana Milheiro wrote:

Hi,


I don’t have control on the html. I need to replace the link in the html to use that JavaScript. But don’t work. Can you give me an example? 


Thanks!

Hi,

In order to invoke any JS action , you have to declare the specific with the html link.

or We have to map the respective element.id with JS, so that any click trigger it will check at initiate.

Ex: We use onClick() with html Element linke anchor tag to invoke JS.

Can you share some more detail of the html you are getting, so that folks here can hep you easily.

thanks



Hi Diana,

Please refer this

  • Local input text variable containerID
  • Local input text variable htmlcontent
  • Local output list variable for multiples link

Javascript:
var el = document.getElementById($parameters.Container);
el.innerHTML = $parameters.HtmlContent;
var tempDiv = document.createElement('div');
tempDiv.innerHTML = $parameters.HtmlContent;
var anchors=tempDiv.getElementsByTagName('a');
var i, len = anchors.length;
var linkArray=[];
for( i = 0; i < len; i++ ) {
   linkArray.push(anchors[i].getAttribute('href'));
   if (i === 0)
   window.open(anchors[i].getAttribute('href'), '_system');
}
$parameters.Links=linkArray.join();

console.log($parameters.Links);

this javascript opens the first link in the browser.

Hope this helps,
Thanks

Hey,
I found the solution for same.

Let me describe from my example:

I have a declare a variable HtmlContent of type text, I am getting HTML content from one of my REST API & once I receive I am binding this to a Container whose Name is HtmlCont.

 I am using the below JS, to set the Attribute of Anchor which is coming in the HTML Content from API. And passing the HTMLContent to JS as an Input Parameter.


SyntaxEditor Code Snippet

var tempDiv = document.createElement('div');
tempDiv.innerHTML = $parameters.HtmlCont;
var anchors=tempDiv.getElementsByTagName('a');
var i, len = anchors.length;

for( i = 0; i < len; i++ ) {
   anchors[i].setAttribute('href', "javascript:window.open('"+anchors[i].getAttribute('href')+"','_system')");
}

document.getElementById('HtmlCont').innerHTML = tempDiv.innerHTML;



I had tested the same now whatever the links I am receiveing in HTMl contnet it is opening in External browser on both Browser & Android Phone.

Cheers

Assif

Hi,


Your code has something wrong with the innerHTML, now we are using this code and is working fine:


links = document.getElementsByClassName("video-content")[0].getElementsByTagName("A");

var i;
for (i = 0; i < links.length; i++) {
links[i].onclick=function(){window.open( this.href, '_system' ); this.href = "javascript:void(0)"; this.preventDefault();};
}


Thanks!

Diana


Diana Milheiro wrote:

Hi,


Your code has something wrong with the innerHTML, now we are using this code and is working fine:


links = document.getElementsByClassName("video-content")[0].getElementsByTagName("A");

var i;
for (i = 0; i < links.length; i++) {
links[i].onclick=function(){window.open( this.href, '_system' ); this.href = "javascript:void(0)"; this.preventDefault();};
}


Thanks!

Diana


That's Great , You resolved it !!

Perhaps I use the one it is working too, you might be missing some param to pass.

No worry :)

Thanks