Link Button Target New Window

App Development
1

Greetings all-

Does anyone have some JS that will allow a specific Link Button to open up in a new window? I haven’t been able to find anything on the Community when I searched.

Any help would be appreciated!

Adam

2

Edit: Wait, did you mean new tab or popup window?

if you want a link to open in a new tab, all you have to do is add target="_blank" to the link

<a href="https://www.example.com" target="_blank">Example</a>

Example

3

Hi James-

Thank you for the information. Unfortunately, this is not what I am in need of. I’d like to have a Link Button component open up in a new window (_blank) and I believe some JS is needed since there is no native option to choose how the link will open the page.

Again, thank you for the help.

Adam

4

just replace ID_GOES_HERE with your element ID

window.onload = function(){
  var newTab= document.getElementById('ID_GOES_HERE').getElementsByTagName('a');
  for (var i=0; i<newTab.length; i++){
    newTab[i].setAttribute('target', '_blank');
  }
}
5

Hi @james -

scratches head …doesn’t seem to work. When the Link Button is clicked the page loads in the same window.

window.onload = function(){
  var newTab= document.getElementById('x_element_page_38_45').getElementsByTagName('a');
  for (var i=0; i<newTab.length; i++){
    newTab[i].setAttribute('target', '_blank');
  }
}

Shucks…

Are there any updates to this type of JS that targets a component (since the Link Button is a component in and of itself) rather than an element ID? NOTE: without having to hardcode the URL…

TB.render('component_20',function(data){
  data.ele.on('click',function(){
      window.location.href = '#!/incidents-sa/ics-213rr-sa/'+recordID;
  });
});
6

Here is the code for the new tab link. Make sure to replace the component number, and also replace .myClass with whatever class you decide to use for each button, and /sample/page with the relative link of the page you are opening.

Unfortunately you have to copy and paste for each button. Since you are creating a second link for the button, you’ll also have to disable the button link by setting it to link to itself in the dropdown window.

TB.render('component_XX',function(data){
        $(".myClass").click(function() {  
      window.open('/sample/page', '_blank');
    });
});

The attribute target="_blank" can only be applied to <a href links, not button links. So the only way to use a single script to target all of the buttons on a page would be to create custom HTML buttons in an HTML module and give them the same class. Then you could use:

$(document).ready(function() {
    
  $('a.myClass').click(function(){
    window.open(this.href);
    return false;
  });
});
1 Like
7

Does anyone know if this should work in the HTML component, where {targetURL} is the the full URL field in the table?

html
html716×67 3.24 KB

Customer Record

Customer Record

8

@GREDDIE -

I wouldn’t do the “a” link coding since it’s already done natively by TB. What about using a DIV call?

<div class=“myClass”>{targetURL}</div>

I haven’t tried it but might be worth exploring