Buttons on your page are an important part of your UI, and allow the user to clearly understand the intent – clicking me does something! But sometimes you want that button to open up a new tab or page. So what’s one way to do that in OutSystems?
What doesn't work?
One strategy you might like to try is to set the target of button to “_blank” – but this doesn’t work! As you can see below, I’ve dragged a Button widget onto the page, changed the text and set the On Click event to RedirectURL. In the Attributes, I set the target to “_blank” which should force the target to open in a new tab.
But unfortunately, the browser ignores this and loads the page in the same tab. So how can we get around this?
Let JavaScript do some magic!
Part of the secret sauce to this is that we use JavaScript to click a link that opens the new window. But the implementation from here diverges, depending on whether you’re using Traditional Web or Reactive Web. Just make sure you know which type of application you’re using before you begin!
Traditional Web
The first step is we want to add the hidden link to our page.
- Drag a Link widget onto the page
- Enter some text
- In the URL properties, enter a Name – this is important as it will be the ID we look for using JavaScript
- Set the Destination to Common\EternalURL (or an internal page)
- Set the URL to the destination you’re after
- In the Extended Properties, set the Property to style, and the Value to “display: none”
- Finally, in the Extended Properties, set the Property to target, and the Value to “_blank” (including the quotation marks)
We’ve now setup the link that we want our button to “click”, so now it’s on to creating the button.
- Drag a Button widget to the screen
- Set the Button text
- Set the Destination to a Screen Action (new or existing – can be an empty action)
- In the Extended Properties, this is where we perform some magic! Set the Property to onclick, and then the Value to “document.getElementById(‘” + buttonLink.Id + “‘).click();”
NB: Replace buttonLink with the Name you gave to the hidden link. OutSystems gives unique Id’s to elements, so you can’t just refer to buttonLink – OutSystems will replace the buttonLink.Id with the Element Id allowing the JavaScript to run.
Reactive Web
Like in Traditional Web, the first step is we want to add the hidden link to our page.
- Drag a Link widget onto the page
- Enter some text
- In the Link properties, enter a Name – this is important as it will be the ID we look for using JavaScript
- Set the On Click to RedirectToURL (or an internal page)
- Set the URL to the destination you’re after
- In the Attributes, set the Property to style, and the Value to “display: none”
- Finally, in the Attributes, set the Property to target, and the Value to “_blank” (including the quotation marks)
- Drag a Button widget to the screen
- Set the Button text
- Set the On Click to a Screen Action
- Drag a JavaScript node into flow and make sure it’s connected between the Start and End nodes
- Double click the JS node and enter the JavaScript
The Final Steps
Publish and Test! When you click the button it should open up the hidden link in a new window.
Within OutSystems, you have the option to set Visible to False on elements however this actually removes it from the rendered HTML. This is why we set the “display: none” on the link so it doesn’t render in the UI, but is still available to JavaScript.
