Atlassian User Interface upgrade guide

On this page

Still need help?

The Atlassian Community is here for you.

Ask the community

Confluence 7.0 will include a major upgrade of the Atlassian User Interface (AUI) to AUI 8.3.x. In addition to the AUI 8 upgrade guide, we've created some best practices to make it easier for you to update your apps.

We update this page each week as our work progresses.



This method is no longer available.
How do I fix this?

Use native array methods like [].indexOf[].includes.


The Backbone library in the AUI plugin has been upgraded, however the Confluence codebase will continue using 1.0.0.

If you need to consume Backbone 1.0.0, declare this dependency: 

Backbone 1.0.0 from Confluence

You should also use the AMD module provided:

Using Backbone 1.0.0
define('my-module', [
], function(
) {
    // Your module code

If you want to use Backbone 1.3.3, you can get it as a factory AMD module from jslibs:

Backbone 1.3.3

And construct a Backbone instance:

Using Backbone 1.3.3
define('my-module', [
], function(
) {
    const Backbone = BackboneFactory(_, $);
    // Your module code

It's important that you do not request a version of Backbone directly from the AUI plugin, as this would conflict with the global Backbone provided by Confluence.

Backbone 1.3.0 from AUI plugin

jQuery upgrade from 1.7.2 to 2.2.4

Confluence now only provides jQuery 2.2.4. We recommend checking the relevant upgrade guides, in particular jQuery 1.9, where most of the breaking changes happened.

The delivery is same as in previous Confluence releases:

  • Declare dependency on the jQuery web-resource: 
  • In Javascript, require jquery AMD module:
const $ = require('jquery');
// or
define('my-module', ['jquery'], function($) {
  • Preserve context objects when multiple Deferred object are passed to $.when(). See jQuery ticket 11749 for more details.
  • $.fn.enable()and $.fn.disable() are now deprecated, and may not work correctly. We recommend using the new methods disableElement and enableElement from AMD module confluence/form-state-control. The web-resource has key com.atlassian.confluence.plugins.confluence-frontend:form-state-control

//declare dependency in atlassian-plugin.xml
//in JS file
define('moduleA', ['confluence/form-state-control'], function(FormStateControl) {

Note that use via a global variable $ is discouraged, and will be disabled in future like all the other global variables.

In Confluence 7.0, there is jquery-migrate plugin used to provide some of the older jQuery APIs, however it will also be removed in the future. Plugins shouldn't rely on any 1.x APIs provided by it beyond the first 7.0 version.

AUI jQuery form

$.ajaxForm() and $.ajaxSubmit() now require an explicit dependency.


AUI message update

The AUI message style has been updated. 

See what's changed

These screenshots show the visual appearance of the AUI messages before and after the upgrade to AUI 8.3.2

Before AUI upgrade

After AUI upgrade

AUI message classes

The legacy AUI message CSS class (such as success, warning, and error) will not exist in Confluence 7.0.

How do I fix this?

If your app needs to control the behaviour of the AUI message in Javascript, query the element with the new class (with the aui-message prefix).


The AUI message now renders an icon automatically, and doesn't hide the extra icon from the old template. This may cause an unwanted icon or blank line as shown below.

How do I fix this?

To fix this, remove the extra icon html markup.


<div class="aui-message warning">
	<span class="aui-icon icon-info"></span>
	Message Body.


<div class="aui-message warning">
	Message Body.

Confluence mobile 

Confluence Mobile web now uses jQuery 2.2.4 instead of Zepto.js 0.8. This means the Confluence Mobile Web Plugin can pull in any dependencies from Confluence or the AUI plugin without the risk of polluting the global $ variable.

The Mobile Web view uses Backbone 0.9.2. The Backbone view extend method doesn't support jQuery object as an element property.

    // ...
    el: $(".css-selector")[0] // native dom only for Backbone 0.9.2
    // ...

Removed Zepto-specific functions

As part of this work, we've removed the following Zepto-specific functions:

  • $.cookie has been replaced by AJS.cookie
  • $.visible() has been removed. Use $.filter(":visible").length instead.

Removed Mobile CSS helper classes

We've removed all platform-specific Mobile CSS helper classes, such as class="platform-android" and class="platform-ios".

Last modified on Aug 2, 2019

Was this helpful?

Provide feedback about this article
Powered by Confluence and Scroll Viewport.