Atlassian has announced the timeline for Connect's phased end-of-support.
From Sep 17, 2025, only Forge apps can be submitted to the Atlassian Marketplace. All new extensibility features will be delivered only on Forge.
Have an existing Connect app? Find out how to incrementally adopt Forge from Connect.
The Dialog module provides a mechanism for launching an add-on's modules as modal dialogs from within an add-on's iframe. A modal dialog displays information without requiring the user to leave the current page. The dialog is opened over the entire window, rather than within the iframe itself.
By default the dialog iframe is undecorated. It's up to you to style the dialog.
In order to maintain a consistent look and feel between the host application and the add-on, we encourage you to style your dialogs to match Atlassian's Design Guidelines for modal dialogs. To do that, you'll need to add the AUI styles to your dialog. For more information, read about the Atlassian User Interface dialog component.
Creates a dialog for a common dialog, page or web-item module key.
Name | Type | Description |
---|---|---|
options | Dialog~DialogOptions | configuration object of dialog options. |
Dialog object allowing for callback registrations
1 2AP.dialog.create({ key: 'my-module-key', width: '500px', height: '200px', chrome: true, buttons: [ { text: 'my button', identifier: 'my_unique_identifier' } ] }).on("close", callbackFunc);
Closes the currently open dialog. Optionally pass data to listeners of the dialog.close event. This will only close a dialog that has been opened by your add-on. You can register for close events using the dialog.close event and the events module.
Name | Type | Description |
---|---|---|
data | Object | An object to be emitted on dialog close. |
1 2AP.dialog.close({foo: 'bar'});
Passes the custom data Object to the specified callback function.
Name | Type | Description |
---|---|---|
callback | function | Callback method to be executed with the custom data. |
1 2AP.dialog.getCustomData(function (customData) { console.log(customData); });
Returns the button that was requested (either cancel or submit). If the requested button does not exist, an empty Object will be returned instead.
1 2AP.dialog.getButton('submit');
Stop the dialog from closing when the submit button is clicked
1 2AP.dialog.disableCloseOnSubmit(); AP.events.on('dialog.button.click', function(data){ if(data.button.name === 'submit') { console.log('submit button pressed'); } }
Creates a dialog button that can be controlled with javascript
1 2AP.dialog.createButton({ text: 'button text', identifier: 'button.1' }).bind(function mycallback(){});
Queries the value of the 'closeOnEscape' property.
Name | Type | Description |
---|---|---|
callback | function | function to receive the 'closeOnEscape' value. |
1 2AP.dialog.isCloseOnEscape(function(enabled){ if(enabled){ // close on escape is true } });
Rate this page: