Floating TOC with custom ui

Forge Forge UI Kit and Custom UI
, ,
1

Hi everyone,

I posted this question on the Atlassian community, they told me I’m better off asking this question here.

I’m making an app for confluence cloud with Custom UI. What I’m trying to make with Custom UI is a floating table of content. For now I’ve been able to create a table of content. I placed the TOC in a right side bar layout. Now I’m trying to let the TOC float. The problem with letting the TOC float is that it seems to be stuck within an iframe.
Is there a way to let a TOC float outside of the iframe so the TOC will stay on the top right while scrolling?

Kind regards,

Tim

2

Hi,

I’m unable to help as I’m facing the same issue.
Have you found a solution? Can I see your code?

In the end I would like to achieve something like the TOC on Atlassian Design system:
https://atlassian.design/components/tokens/all-tokens

Best regards,
Patrik

3

Hi everyone,

I hate to be the bearer of bad news, but unfortunately, custom UI is always served within a sandboxed iframe. This means that your awesome JavaScript code is confined to the iframe and cannot interact directly with the parent page.

However, there might be some workarounds depending on your needs. You could explore using the “Macro” module, or perhaps leverage the “Content Byline,” which is always positioned at the top of the page view.

Let me know if you have any other ideas or need further help!

1 Like
4

Hi everyone,

Thanks for the reaction. I’ve been trying different ways instead of an iframe without any success. I found this plugin: Easy Heading Macro - Floating Table of Contents | Atlassian Marketplace
Which seems to use an Content byline that creates a macro on the page and manages to create a table of content outside of the frame of the macro.

Do you have any idea how this is done?