How to leverage the "Open all external links in a new tab" setting in site customizations

Dev
1

A site I frequent has a customization on the user card that includes a link to an external site specific to each user (a user profile basically). However, clicking this link opens the page in the current tab, despite me having the “Open all external links in a new tab” setting enabled. Is there a way for the admin to reference a user’s “Open all external links in a new tab” setting so that this is honored?

1 Like
2

Do you know which theme/component it is? I think that would be the place to bring it up, maybe it can be updated to take the site setting into account. :slight_smile:

3

I assumed It was just custom built, but I can check with the admin.

4

It sounds like the admin has a custom user field for the user’s external profile link and then built a custom theme. They followed the instructions from Use an ID in a custom user field to link to a user's external profile. Should I just ask there how to utilize the user setting about opening in a new tab?

5

I think it depends on if you want it to use the setting; the customization does not take it into account, though it looks like it adds the target appropriately:

Including target='_blank' will open in a new tab/window regardless of the site setting, since they don’t interact.

On the site where the links are not opening in new tabs, when you check the source do the links contain that target value?

2 Likes
6

If they wanted to check the site setting, they could do something like this within that existing customization

// set up the siteSettings and target variable:
const siteSettings = api.container.lookup('site-settings:main');
const target = siteSettings.default_other_external_links_in_new_tab ? "_blank" : ""


// modify the if statement where the link is created to use the target variable: 
if (userFields && userFields[userFieldId]) {
  const url = "http://myawesomewebsite.com/user/" + userFields[userFieldId];
  const link = `<a href="${url}" target="${target}">${url}</a>`;
  return Ember.Object.create({ link, name: externalUserIdField.get('name') });
} else {
  return null;
}
1 Like
7

Is there a way to check the user setting though? My understanding is that the site setting is just the default for new users, but ideally this link would honor changes users have made to their own settings. One user might want it to open in the same tab while another user might want it to open in a new tab.

1 Like
8

Ah right, I overlooked the “user” part :sweat_smile: sorry

It’s not much different to use the user setting, you’d just have to change the first two constants to reference the user:

// set up the user and target variable:
const user = api.getCurrentUser()
const target = user?.user_option?.external_links_in_new_tab ? "_blank" : ""

and then everything else would be the same.

If this were to work more like core, we’d check if the user exists, and if they don’t, fall back to the site setting:

// set up the user, siteSettings, and target variable:
const user = api.getCurrentUser()
const siteSettings = api.container.lookup('site-settings:main');
let target = siteSettings.default_other_external_links_in_new_tab ? "_blank" : ""; 

if (user) { // if the user exists, set the target based on the user option
 target = user.user_option?.external_links_in_new_tab ? "_blank" : ""
} 

// modify the if statement where the link is created to use the target variable: 
if (userFields && userFields[userFieldId]) {
  const url = "http://myawesomewebsite.com/user/" + userFields[userFieldId];
  const link = `<a href="${url}" target="${target}">${url}</a>`;
  return Ember.Object.create({ link, name: externalUserIdField.get('name') });
} else {
  return null;
}
2 Likes
9

Worked perfectly, thanks!

2 Likes
10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.