$dialog
Updated on Aug 22, 2025 22 minutes to readThe Dialog Plugin provides a unified interface to show alerts, confirmations, questions, and other dialog types. It supports customizable messages, titles, spinners, and date range selection.
Prefer using the preset dialog methods without options to keep dialog behavior and appearance consistent throughout the application. Pass options only when a specific interaction requirement cannot be met by the preset. Do not customize dialogs by default.
Methods
| Method | Description |
|---|---|
| alert | Shows an alert dialog with optional title. |
| close | Closes the currently open dialog. |
| confirm | Shows a confirmation dialog with optional title. |
| danger | Shows a danger-style dialog with optional title. |
| fire | Opens a fully configurable dialog. |
| info | Shows an informational dialog with optional title. |
| question | Shows a question dialog with optional title. |
| selectDateRange | Opens a date range picker dialog. |
| spinner | Displays a spinner dialog. |
| success | Shows a success-style dialog with optional title. |
| update | Updates the currently open dialog. |
| warning | Shows a warning-style dialog with optional title. |
Methods Details
alert()
• Details
Expects an HTML string, an optional title, and optional DialogOptions for the alert dialog.
Returns a Promise that resolves with a DialogResult.
• Type
(html: string, title?: string, options?: DialogOptions) => Promise<DialogResult>• Example
Insert this code into Main or Initialization script of the form to register a global method
E8App.$methods.set('showAlert', () => {
E8App.$dialog.alert('<div class="text-success">Hello</div>', 'Greeting');
});
E8App.$methods.set('showCustomAlert', () => {
E8App.$dialog.alert(
'<div class="text-success">Hello</div>',
'Greeting',
{
confirmButtonText: 'Got it',
showCloseButton: true,
allowEscapeKey: true
}
);
});Copy this snippet into the Content section
<e8-button
class="mr-2"
on-click="showAlert"
>
Show alert
</e8-button>
<e8-button on-click="showCustomAlert">Show custom alert</e8-button>close()
• Details
Closes the currently open dialog.
• Type
() => voidconfirm()
• Details
Expects an HTML string, an optional title, and optional DialogOptions for the confirmation dialog.
Returns a Promise that resolves with a DialogResult.
• Type
(html: string, title?: string, options?: DialogOptions) => Promise<DialogResult>• Example
Insert this code into Main or Initialization script of the form to register a global method
E8App.$methods.set('showConfirm', () => {
E8App.$dialog.confirm('Do you want to continue?', 'Confirm');
});
E8App.$methods.set('showCustomConfirm', () => {
E8App.$dialog.confirm(
'Do you want to continue?',
'Confirm',
{
confirmButtonText: 'Continue',
cancelButtonText: 'Go back',
focusCancel: true
}
);
});Copy this snippet into the Content section
<e8-button
class="mr-2"
on-click="showConfirm"
>
Show confirmation
</e8-button>
<e8-button on-click="showCustomConfirm">Show custom confirmation</e8-button>danger()
• Details
Expects an HTML string, an optional title, and optional DialogOptions for the danger-style dialog.
Returns a Promise that resolves with a DialogResult.
• Type
(html: string, title?: string, options?: DialogOptions) => Promise<DialogResult>• Example
Insert this code into Main or Initialization script of the form to register a global method
E8App.$methods.set('showDanger', () => {
E8App.$dialog.danger('This action cannot be undone.', 'Delete record?');
});
E8App.$methods.set('showCustomDanger', () => {
E8App.$dialog.danger(
'This action cannot be undone.',
'Delete record?',
{
showCancelButton: true,
confirmButtonText: 'Delete',
cancelButtonText: 'Cancel',
customClass: {
confirmButton: 'btn btn-danger btn-lg rounded-pill mx-1',
cancelButton: 'btn btn-outline-danger btn-lg rounded-pill mx-1'
}
}
);
});Copy this snippet into the Content section
<e8-button
class="mr-2"
on-click="showDanger"
>
Show danger
</e8-button>
<e8-button on-click="showCustomDanger">Show custom danger</e8-button>fire()
• Details
Opens a dialog configured with DialogOptions.
Returns a Promise that resolves with a DialogResult.
• Type
(options?: DialogOptions) => Promise<DialogResult>• Example
Insert this code into Main or Initialization script of the form to register a global method
E8App.$methods.set('showPublishDialog', () => {
E8App.$dialog.fire({
title: 'Publish changes?',
html: 'The new version will be available immediately.',
icon: 'question',
showCancelButton: true,
confirmButtonText: 'Publish',
cancelButtonText: 'Cancel',
focusCancel: true
});
});Copy this snippet into the Content section
<e8-button on-click="showPublishDialog">Show publish dialog</e8-button>info()
• Details
Expects an HTML string, an optional title, and optional DialogOptions for the informational dialog.
Returns a Promise that resolves with a DialogResult.
• Type
(html: string, title?: string, options?: DialogOptions) => Promise<DialogResult>• Example
Insert this code into Main or Initialization script of the form to register a global method
E8App.$methods.set('showInfo', () => {
E8App.$dialog.info('The report is being prepared.', 'Information');
});
E8App.$methods.set('showCustomInfo', () => {
E8App.$dialog.info('The report is being prepared.', 'Information', {
timer: 5000,
timerProgressBar: true,
showConfirmButton: false
});
});Copy this snippet into the Content section
<e8-button
class="mr-2"
on-click="showInfo"
>
Show information
</e8-button>
<e8-button on-click="showCustomInfo">Show custom information</e8-button>question()
• Details
Expects an HTML string, an optional title, and optional DialogOptions for the question dialog.
Returns a Promise that resolves with a DialogResult.
• Type
(html: string, title?: string, options?: DialogOptions) => Promise<DialogResult>• Example
Insert this code into Main or Initialization script of the form to register a global method
E8App.$methods.set('showQuestion', () => {
E8App.$dialog.question('Are you sure you want to save changes?', 'Question');
});
E8App.$methods.set('showCustomQuestion', () => {
E8App.$dialog.question(
'Are you sure you want to save changes?',
'Question',
{
confirmButtonText: 'Yes, save',
cancelButtonText: 'No',
reverseButtons: true
}
);
});Copy this snippet into the Content section
<e8-button
class="mr-2"
on-click="showQuestion"
>
Show question
</e8-button>
<e8-button on-click="showCustomQuestion">Show custom question</e8-button>selectDateRange()
• Details
Accepts an optional SelectDateRangeOptions object:
| Option | Description | Type | Default |
|---|---|---|---|
startDate | Initial selected start date. | E8Date | — |
endDate | Initial selected end date. | E8Date | — |
minDate | Earliest selectable date, inclusive. | E8Date | — |
maxDate | Latest selectable date, inclusive. | E8Date | — |
All options are optional and use YYYY-MM-DD strings. startDate and endDate set the initial selection; minDate and maxDate restrict the dates the user can select. Each boundary can be set independently. Omitting both boundaries leaves selection unrestricted. Empty, null, and invalid boundary values are ignored. If valid minDate is after valid maxDate, no dates are selectable.
Dates outside the limits are disabled in the calendar. A predefined period is disabled if either endpoint is outside the allowed interval; it is not shortened to fit. A selected predefined period confirms and closes the dialog.
For confirmation, both selected dates must be valid, in ascending order, and within the limits. An initial selection outside the limits is not automatically rewritten, and OK stays disabled until the selection is valid. Each call applies its own limits; omitted limits are reset.
Returns a Promise that resolves with a SelectDateRangeResult, containing startDate and endDate as YYYY-MM-DD strings. Cancelling or closing without a valid confirmation rejects the Promise.
• Type
(options?: SelectDateRangeOptions) => Promise<SelectDateRangeResult>• Example
Insert this code into Main or Initialization script of the form to register a global method
E8App.$methods.set('selectDateRange', () => {
E8App.$dialog.selectDateRange({
startDate: E8App.$date.addWeeks(E8App.$date.current(), -7),
endDate: E8App.$date.current()
})
.then((range) => console.log(range))
.catch(() => console.log('cancel'));
});
E8App.$methods.set('selectJanuaryRange', () => {
E8App.$dialog.selectDateRange({
startDate: '2027-01-10',
endDate: '2027-01-20',
minDate: '2027-01-01',
maxDate: '2027-01-31'
})
.then(({ startDate, endDate }) => {
console.log(startDate, endDate);
})
.catch(() => console.log('cancel'));
});
E8App.$methods.set('selectJanuaryDates', () => {
E8App.$dialog.selectDateRange({
minDate: '2027-01-01',
maxDate: '2027-01-31'
})
.then((range) => console.log(range))
.catch(() => console.log('cancel'));
});Copy this snippet into the Content section
<e8-button
class="mr-2"
on-click="selectDateRange"
>
Select date range
</e8-button>
<e8-button
class="mr-2"
on-click="selectJanuaryRange"
>
Select January 2027 range
</e8-button>
<e8-button on-click="selectJanuaryDates">Select dates in January 2027</e8-button>spinner()
• Details
Displays a spinner dialog.
• Type
() => voidsuccess()
• Details
Expects an HTML string, an optional title, and optional DialogOptions for the success-style dialog.
Returns a Promise that resolves with a DialogResult.
• Type
(html: string, title?: string, options?: DialogOptions) => Promise<DialogResult>• Example
Insert this code into Main or Initialization script of the form to register a global method
E8App.$methods.set('showSuccess', () => {
E8App.$dialog.success('Changes have been saved.', 'Success');
});
E8App.$methods.set('showCustomSuccess', () => {
E8App.$dialog.success('Changes have been saved.', 'Success', {
confirmButtonText: 'Done',
timer: 3000,
timerProgressBar: true
});
});Copy this snippet into the Content section
<e8-button
class="mr-2"
on-click="showSuccess"
>
Show success
</e8-button>
<e8-button on-click="showCustomSuccess">Show custom success</e8-button>update()
• Details
Updates supported DialogOptions on the currently open dialog.
• Type
(options?: DialogOptions) => void• Example
Insert this code into Main or Initialization script of the form to register a global method
E8App.$methods.set('publishChanges', () => {
E8App.$dialog.fire({
title: 'Publishing...',
showConfirmButton: false,
allowOutsideClick: false,
allowEscapeKey: false
});
setTimeout(() => {
E8App.$dialog.update({
title: 'Published',
icon: 'success',
showConfirmButton: true,
confirmButtonText: 'Done',
allowOutsideClick: true,
allowEscapeKey: true
});
}, 2000);
});Copy this snippet into the Content section
<e8-button on-click="publishChanges">Publish changes</e8-button>