Still having problem opening in a new tab

Okay, I've looked at the various posts about how to open a URL in a new tab in a web app.  But here's a very simple example that just isn't working.  It opens Google in the same app, not a new app.

As shown, I'm using Method=Navigate and target="_blank".  Can anyone please tell me why this isn't working and what to do to make it work?  Thanks!

  -- Joel

Hello Joel!

You need to use a Link if you want target to work like that.  You can still add the Button class to the link to make it look like a button though.

Hope that helps!

Hi Joel,


Setting the target to "_blank" only works with links, if you want that behaviour in a button you need to do the following:

  • Set onClick method to Submit
  • Set formtarget = "_blank" in the Extended Properties


Hope it helps,


Regards,

Miguel Chaparra

Jean and Miguel,

Wow!  Thank you for the prompt and clear replies.  I have tested both of your suggestions, and they work great.  I will use them for some places in our apps.

Now, what I'm trying to do next is hide the button or link and activate it from within a screen action using Widget_Click, as suggested in some other posts.  However, Widget_Click doesn't work for links with Method Navigate or Submit.  

What I'm really trying to accomplish is, from within a screen action, open a destination in a new tab instead of the current tab.  Do you have additional suggestions as to how I can do that?

Thanks again!

  -- Joel

Oops, I should have said "Craig", not "Jean".  My apologies.

JM Ackerman wrote:

Jean and Miguel,

Wow!  Thank you for the prompt and clear replies.  I have tested both of your suggestions, and they work great.  I will use them for some places in our apps.

Now, what I'm trying to do next is hide the button or link and activate it from within a screen action using Widget_Click, as suggested in some other posts.  However, Widget_Click doesn't work for links with Method Navigate or Submit.  

What I'm really trying to accomplish is, from within a screen action, open a destination in a new tab instead of the current tab.  Do you have additional suggestions as to how I can do that?

Thanks again!

  -- Joel

 Hi Joel,


For what you want, I think you can directly use JS instead of hiding buttons/links and trigger them later.


You just need to use RunJavaScript action:

 And then, inside it, set your script. You can use the following:

"window.open('yourUrl', '_blank');"


Tell me if it works for your case,


Regards,

Miguel Chaparra

Thank you, Miguel. 

I tried your suggestion.  It didn't appear to be working.  

But then I tried it again and I noticed that the browser, in the address line, was briefly displaying a message that popups were blocked.  I clicked the icon and indicated that icons should not be blocked for this application.  When I tried running again, then your approach worked!

That's great, except it will cause problems for non-technical users of our app who will not know to click the icon, or they may be afraid of "unblocking" something they don't understand.  Is there any way to overcome that so the blocking doesn't occur?  We're getting close to what I need, so I really appreciate your help!!!

  -- Joel

I meant to say "popups should not be blocked", rather than "icons should not be blocked".  I need to slow down my typing and sync it with my brain!

JM Ackerman wrote:

I meant to say "popups should not be blocked", rather than "icons should not be blocked".  I need to slow down my typing and sync it with my brain!

No problem Joel, 

But if you want you can edit your reply in the bottom of your reply:

 

Regards,

Miguel Chaparra

Miguel,

Any thoughts about how to detect or avoid the popup blocking issue?  Thanks!

  -- Joel

JM Ackerman wrote:

Miguel,

Any thoughts about how to detect or avoid the popup blocking issue?  Thanks!

  -- Joel

 

 Hi Joel,


Looks like a browser will only open a new tab without the popup blocker warning if the command to open comes from a trusted event (in resume, only when the user actively click somewhere to open it).

I've been trying some tricks to avoid that, but couldn't make it work. So maybe the best to do is check if the browser blocked it, and if so, ask user to allow it. For that you need to make some changes to your script:

"var newWin = window.open('https://www.google.pt/', '_blank');           

if(!newWin || newWin.closed || typeof newWin.closed=='undefined') 
{ 
    //Broswer has blocked it
    alert('Please allow popups for this site');
} else {
    //Browser has allowed it to be opened
    newWin.focus();
}"

Other option is set something like for example a expression or a modal in your site asking the user: "If a new page has not been opened click here". That way the user clicks directly avoiding the pop-up blocker.

It's up to you to decide wich is better.


Hope it helps,


Regards,

Miguel Chaparra

Miguel, you've been very helpful.  

I implemented the JS you suggested to check for blocking, and it works well.  

As I'm not fluent in JS, I have one more request -- instead of having it display an alert, could you show me how I can adjust the code to have it return a Success/Failure indicator that I can check within my OutSystems action?  

Thank you!

Solution

JM Ackerman wrote:

Miguel, you've been very helpful.  

I implemented the JS you suggested to check for blocking, and it works well.  

As I'm not fluent in JS, I have one more request -- instead of having it display an alert, could you show me how I can adjust the code to have it return a Success/Failure indicator that I can check within my OutSystems action?  

Thank you!

 

Hi Joel,


If you were using Reactive or a Mobile app you could easily access the Outsystems variables in your JS code like this $parameters.MyVariable. But that's not the case, so you need to assign a value to, for example, a checkbox or an input on your screen and in your action check the value that it holds.

In your case a Checkbox will work fine. Do the follow:

  • Create a local variable: isWindowBlocked of type Boolean.
  • Create a CheckBox, give it a name, and hide it from the end user using a CSS class.
  • Update JavaScript to assign true or false to the Checkbox you created:
"var newWin = window.open('https://www.google.pt/', '_blank');           

if(!newWin || newWin.closed || typeof newWin.closed=='undefined') 
{ 
    //Broswer has blocked it
    document.getElementById('"+CheckBoxJS.Id+"').checked = true;
} else {
    //Browser has allowed it to be opened
    document.getElementById('"+CheckBoxJS.Id+"').checked = false;
    newWin.focus();
}"


And that's it, you can check your local variable in your actions.


Regards,

Miguel Chaparra

Solution

Miguel,

I implemented the changes, but now I'm getting "An exception has occurred in the client script. Error: Cannot set property 'checked' of null.

I ran in debug mode and noticed that the JS is showing as:

Ideas?  Thanks!

JM Ackerman wrote:

Miguel,

I implemented the changes, but now I'm getting "An exception has occurred in the client script. Error: Cannot set property 'checked' of null.

I ran in debug mode and noticed that the JS is showing as:

Ideas?  Thanks!

 Joel,

Can you show me your JS and the checkbox widget, probably the names differ?


Cheers

 

Miguel, it was user error on my part.  I didn't follow your directions exactly.  Once I did, it then worked correctly.  Thank you again for your assistance and your patience - you are a gentleman and a scholar!

  -- Joel