Support for opening link in a new tab

Forge Forge UI Kit and Custom UI
1

We have a use-case where we need to open a link from a Custom UI component using <a target="_blank"

However get the below error.

image-20210416-060310

Note that I am deploying Forge App to Confluence

2 Likes
2

You can use the router object from the bridge:

import { router } from '@forge/bridge';

// Call this on the event onClick of a tag
router.open('https://google.com');

Read the documentation for more information: https://developer.atlassian.com/platform/forge/runtime-reference/custom-ui-bridge/#router

8 Likes
3

I get the below error when using the router.open method . However the invoke function in resolver works fine for me

Uncaught TypeError: Cannot read property 'open' of undefined

versions used -
“@forge/api”: “^1.1.0”,
“@forge/resolver”: “^1.1.2”

4

Please verify that you are using the latest version of @forge/bridge, it’s on version 1.4.0 now.

"dependencies": {
  "@forge/bridge": "^1.4.0"
},

Then make sure you have imported the router:

import { router } from '@forge/bridge';
1 Like
5

Thanks @nhac.tat.nguyen … Updating the bridge package resolved the issue . Thanks a lot!

1 Like
7

In addition to the solution mentioned above, please find below some more detailed code how to do it for other people like me new to React and Forge.

import { router } from '@forge/bridge';

//...

function App() {

    //...

    return (
        <a style={{cursor: 'pointer'}}
           onClick={() => {router.open('https://google.com')}}>
           Google
        </a>
    )
}
1 Like
8

In addition to solutions provided above I also created a typed React component

import { router } from "@forge/bridge";
import { FC, PropsWithChildren } from "react";

type Props = {
  href: string;
};

const Link: FC<PropsWithChildren<Props>> = ({ children, href }) => {
  const handleNavigate = () => {
    router.navigate(href);
  };

  return <a style={{ cursor: "pointer" }} onClick={handleNavigate}>{children}</a>;
};

export default Link;
1 Like