Open in new tab (SPA)?

Morning all,

I have a single page app and use the “Go to page” function to navigate between groups but I can’t figure out how to open a link in a new tab?

1 Like

window.open("https://www.url.com");

2 Likes

Thank you - I think I have misunderstood where to place that code. Here’s what I have tried;

sdfdsf

sorry, I should have explained… that’s JavaScript… so you need to use a ‘run JavaScript’ action (from the toolbox plugin)

Window open() Method (w3schools.com)

The ideal to open an external link in a new tab is to use the link element, it has that option.

If you want to redirect to an external link via the workflow, you should use “Navigation → Open an External website”. It doesn’t have the option to open in new tab because browsers usually block this as a popup.

Ah I see, thank you!

Thank you for the images … unfortunately I need to add a workflow so I can’t use the link element.

Darren.James7518,

I have gone through this problem . Here is the solution for that:

The first step is select the link element from the visual element then insert it on the place where you want to use it.

After that select the open in new tab option as shown in the screenshot. Now, you will be able to open the link in new tab whenever it is clicked.

I hope this will work for you…

:point_up: :fire:

I’ve become a big fan of using links in my SPA after watching users frustrated that they couldn’t Ctrl+click on an button to open it in a new tab.

If the user opens normally in the same browser tab, Bubble handles it the same way a go to page and is just as quick.

2 Likes

Thanks but this solution won’t work for single page apps (SPA) because with an SPA we don’t go to another page, we show/hide groups only - there are no ‘pages’.

1 Like

Also, as stated above, this won’t work for single page apps (SPA).

How are you using the link option to show a group in a SPA? As far as I can see, the link option ONLY opens a new page and can not show a group on the existing page that you are on. I need to show a group on the index page when a link is clicked.

My bad! I made the mistake of assuming my case suits everyone. Indeed, links cannot show hide a group.

I normally build SPAs where each reusable is a panel. So a link can navigate to the same page, but with different params. Depending on the value it shows / hides a different panel.

I’ve shared it on this post.

1 Like

Why couldn’t something that looks like a link trigger a workflow? Here’s one way:

1 Like

Interesting, thank you for sharing mate.

Thank you for sharing. I also wondered why a text link can’t trigger a workflow, it seems like something Bubble could implement fairly easily.

Toolbox

Run Javascript
image

window.open(“url”)
image

3 Likes

Thank you @marocolojr for the step by step. This is very helpful.

1 Like

I can’t figure out why this goes to a dead page? It successfully open in a new tab but it should display the page…

linkerror

Because you’re trying to open a page called ‘version-test’, which presumably doesn’t exist in your app.

Website Home URL includes the ‘version’… (it also includes the trailing slash…)

So, in your above example you’re trying to open the URL: www.my-app.com/version-test//version-test

… which is not only a page that (presumably) doesn’t exist (unless you do have a page on your app called ‘version-test’), but it also contains a double forward slash in the path which, while it should still work, is not needed and might confuse people…

So, you just want to use window.open("Website home URL?debug_mode=true&selected=user-settings&tab=company")

1 Like