How to use Liferay AUI Dialog

Liferay AUI provides the inbuilt support of dialogbox. It is highly flexible and many things we can control with the help of properties of the AUI dialog.

Here is an example how to use AUI dialog.

function registerStudent() {
AUI().use('aui-dialog',
function(A) {
studentRegisterationDialog = new A.Dialog({
bodyContent : 'Please click on the Register button to proceed',
title: 'Student Registration',
buttons: [
 {
handler: function() {
 alert('You just clicked register');
 studentRegisterationDialog.close();
},
label: 'Register'
 },
 {
handler: function() {
 alert('You just clicked Register Later');
 studentRegisterationDialog.close();
},
label: 'Later'
 }
],
centered: true,
modal: false,
width: 500,
height: 400
}).render();
}
);
}

In this example once user calls the function "registerStudent()" at that time a dialog will appear with two options

1) Register
2) Later

Once user clicks on the "Register" or "Later" corresponding "handler" will be called and user's action will be registered.

Here are few more properties which you may controlled for AUI Dialog.

resizable: true/false
draggable: true/false
destroyOnClose: true/false

Here is the snapshot for our example "registerStudent"

Cheers!
Henal Saraiya
(Lead Consultant)
CIGNEX Datamatics