Confluence AUI Tabs moved from AUI core to com.atlassian.auiplugin:tabs resource key

Hi Team,

Good Morning.

We are currently tying to add AUI in our confluence server (7.10.2) version following the link Tabs - AUI Documentation.

So what we did,

We added the following to page layout

$webResourceManager.requireResourcesForContext("com.atlassian.auiplugin:tabs")

Then we we did a test,

*** Refer Screenshot Attached***

  1. Test 1 - View (PASS)
    should see Tab 1 | Tab 2 along top and be able to click between them.

  2. Test 1 - Preview while Editing (FAIL)
    Click Edit the page
    At bottom of page, click the … → Preview
    => Should see tabs like in Test 1

Refer the Screenshot.

Test HTML code:

<div class="aui-tabs horizontal-tabs"> <ul class="tabs-menu"> <li class="menu-item active-tab"> <a href="#tabs-example-first">Tab 1</a> </li> <li class="menu-item"> <a href="#tabs-example-second">Tab 2</a> </li> </ul> <div class="tabs-pane active-pane" id="tabs-example-first"> <h2>This is tab 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="tabs-pane" id="tabs-example-second"> <h2>This is tab 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </div>

Quetion:
Which layout renders “preview” in Confluence page?

Hi @AravindViswanathan,

Are you creating a Confluence Macro, a Confluence Plugin, or are you directly editing Confluence’s source files?

The contexts in Confluence you’ll want to affect are preview, then probably both page and blogpost. The most common way to cause your code (including the AUI tabs code) to load in those contexts would be to define your own web-resource in your plugin:

<web-resource key="my-feature">
  <dependency>com.atlassian.auiplugin:tabs</dependency>
  <context>page</context>
  <context>blogpost</context>
  <context>preview</context>
</web-resource>

Here’s a reference for web-resources in Confluence, including a list of all available contexts: https://developer.atlassian.com/server/confluence/web-resource-module/

Here’s a jumping-off point for writing general Confluence plugins: https://developer.atlassian.com/server/confluence/writing-confluence-plugins/

Here are tutorials for writing Confluence macros, but I think the were written several years ago so the context names they mention have since changed: https://developer.atlassian.com/server/confluence/macro-tutorials-for-confluence/

Hope that helps. Let me know if you have follow-up questions!

Cheers,
Daz

2 Likes

Hi Daz,

Thanks for the guidance. Not sure if this is related but i also found the following from one of the support from Atlassian.

According to AUI 8 upgrade guides and Preparing for Confluence 7.0, from Confluence 7.0, changes were made on AUI 8.3.5 and aui-tabs won’t be loaded by default (super batch). These dependencies were used too much and remove from the super batch will increase performance, but AUI is still providing the resources and could be load by required.

Workaround
There are two possible workarounds:
Install the free 3rd-party plugin HTML Elements since their source code request the necessaire web-resources.

Add a Custom HTML, as follows:

  1. Go to > General Configuration
  2. Find Custom HTML on the sidebar under the Look and Feel section
  3. Add these content to HEAD:

This will load this web-resource always, except now it will be asynchronous (WRM.require is) so there will be a flash of unstyled content (FOUC) before the CSS and JS for aui-tabs are loaded.4. Reload the page with the problem