Dialog

Dialog is a small content pane that pops up over App’s main content. Dialogs are usualy used to ask something from a user, or to notify or warn a user. Dialog, as all other modals, is part of so called “Temporary Views”.

Dialog can only be opened by using JavaScript. So lets look at related App methods to work with dialogs.

Lets look at related App methods to work with Dialog:

app.dialog.create(parameters)- create Dialog instance

Method returns created Dialog’s instance

app.dialog.destroy(el)- destroy Dialog instance

• el - HTMLElement or string (with CSS Selector) or object. Dialog element or Dialog instance to destroy.

app.dialog.get(el)- get Dialog instance by HTML element

• el - HTMLElement or string (with CSS Selector). Dialog element.

Method returns Dialog’s instance

app.dialog.open(el, animate)- opens Dialog

• el - HTMLElement or string (with CSS Selector). Dialog element to open.
• animate - boolean. Open Dialog with animation.

Method returns Dialog’s instance

app.dialog.close(el, animate)- closes Dialog

• el - HTMLElement or string (with CSS Selector). Dialog element to close.
• animate - boolean. Close Dialog with animation.

Method returns Dialog’s instance

Dialog Parameters

Now lets look at list of available parameters we need to create Dialog:

Each Button in buttons array must be presented as object with button parameters:

So to create a Dialog we have to call:

Dialog Events

Dialog will fire the following DOM events on dialog element and events on app and dialog instance:

DOM Events

App and Dialog Instance Events

Dialog instance emits events on both self instance and app instance. App instance events has same names prefixed with dialog.

There are a few shortcut methods which that make creating dialogs much easier.

First lets check the global app parameters which help to configure such shortcuts and also used for localization purposes.

The following global dialog shortcut parameters can be passed on under dialog property:

Now lets look at available dialog shortcuts

Alert

To create Alert dialog we need to use the following app methods:

app.dialog.alert(text, title, callback)- create Alert Dialog and open it

• text - string. Alert dialog text
• title - string. Alert dialog title
• callback - function. Optional. Callback function that will be executed after user clicks on Alert button

Method returns created Dialog’s instance

app.dialog.alert(text, callback)- create Alert Dialog with default title and open it

Method returns created Dialog’s instance

Confirm

Confirm dialog is usualy used when it is required to confirm some action. To open the Confirm modal we should also call one of the following App methods:

app.dialog.confirm(text, title, callbackOk, callbackCancel)- create Confirm Dialog and open it

• text - string. Confirm dialog text
• title - string. Confirm dialog title
• callbackCancel - function. Optional. Callback function that will be executed when user click “Cancel” button on Confirm dialog (when user dismisses action)

Method returns created Dialog’s instance

app.dialog.confirm(text, callbackOk, callbackCancel)- create Confirm Dialog with default title and open it

Prompt dialog is used when it is required to get some data/answer from user. To open Prompt dialog we should also call one of the following App methods:

app.dialog.prompt(text, title, callbackOk, callbackCancel, defaultValue)- create Prompt Dialog and open it

• text - string. Prompt dialog text
• title - string. Prompt dialog title
• callbackOk - function(value). Optional. Callback function that will be executed when user click “Ok” button on Prompt dialog. As an argument function receives value of text input
• callbackCancel - function(value). Optional. Callback function that will be executed when user click “Cancel” button on Prompt dialog. As an argument function receives value of text input
• defaultValue - string. Optional. Prompt input default value

app.dialog.prompt(text, callbackOk, callbackCancel, defaultValue)- create Prompt Dialog with default title and open it

Method returns created Dialog’s instance

Login

app.dialog.login(text, title, callbackOk, callbackCancel)- create Login Dialog and open it

• text - string. Login dialog text
• title - string. Login dialog title
• callbackOk - function(username, password). Optional. Callback function that will be executed when user click “Ok” button on Login dialog. As an argument function receives username and password values
• callbackCancel - function(username, password). Optional. Callback function that will be executed when user click “Cancel” button on Login dialog. As an argument function receives username and password values

app.dialog.login(text, callbackOk, callbackCancel)- create Login Dialog with default title and open it

Method returns created Dialog’s instance

Password

Password dialog is useful in case you need to request only the password

app.dialog.password(text, title, callbackOk, callbackCancel)- create Password Dialog and open it

• text - string. Password dialog text
• title - string. Password dialog title
• callbackOk - function(password). Optional. Callback function that will be executed when user click “Ok” button on Password dialog. As an argument function receives password value
• callbackCancel - function(password). Optional. Callback function that will be executed when user click “Cancel” button on Password dialog. As an argument function receives password value

app.dialog.password(text, callbackOk, callbackCancel)- create Password Dialog with default title and open it

Method returns created Dialog’s instance

Preloader dialog is used to indicate some background activity (like Ajax request) and to block any user actions during this activity. To open Preloader dialog we should also call appropriate App method:

app.dialog.preloader(title, color)- create Preloader Dialog and open it

• title - string. Optional. Preloader dialog title
• color - string. Optional. Preloader color. One of the default colors

Method returns created Dialog’s instance

Progress

Same as Preloader dialog but with progressbar instead of preloader.

• title - string. Optional. Progress dialog title
• color - string. Optional. Progressbar color. One of

Method returns created Dialog’s instance

Examples