Atlassian User Interface upgrade guide
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.
Changes
AJS.indexOf
| AJS.indexOf |
|---|
| This method is no longer available. |
Backbone
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:
<dependency>confluence.web.resources:backbone</dependency>
You should also use the AMD module provided:
define('my-module', [
'backbone'
], function(
Backbone
) {
// Your module code
});If you want to use Backbone 1.3.3, you can get it as a factory AMD module from jslibs:
<dependency>confluence.web.resources:underscore</dependency>
<dependency>confluence.web.resources:jquery</dependency>
<dependency>com.atlassian.plugin.jslibs:backbone-1.3.3-factory</dependency>And construct a Backbone instance:
define('my-module', [
'confluence.web.resources:underscore',
'jquery',
'atlassian/libs/factories/backbone-1.3.3'
], function(
_,
$,
BackboneFactory
) {
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.
<dependency>com.atlassian.auiplugin:ajs-backbone</dependency>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:
<dependency>confluence.web.resources:jquery</dependency>- 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 methodsdisableElementandenableElementfrom AMD moduleconfluence/form-state-control. The web-resource has keycom.atlassian.confluence.plugins.confluence-frontend:form-state-control
//declare dependency in atlassian-plugin.xml
<dependency>com.atlassian.confluence.plugins.confluence-frontend:form-state-control</dependency>
//in JS file
define('moduleA', ['confluence/form-state-control'], function(FormStateControl) {
FormStateControl.disableElement(element);
FormStateControl.enableElement(element);
})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.
<dependency>com.atlassian.auiplugin:jquery-form</dependency>
AUI message update
The AUI message style has been updated.
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, 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).
Icons
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.
Before
<div class="aui-message warning">
<span class="aui-icon icon-info"></span>
Message Body.
</div>Now
<div class="aui-message warning">
Message Body.
</div>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.
Backbone.View.extend({
// ...
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:
$.cookiehas been replaced byAJS.cookie$.visible()has been removed. Use$.filter(":visible").lengthinstead.
Removed Mobile CSS helper classes
We've removed all platform-specific Mobile CSS helper classes, such as class="platform-android" and class="platform-ios".