Getting started with JavaScript Predefined Dialogs control

06 Jun 2023 / 5 minutes to read

This section explains how to create a simple redefined dialogs, and configure its available functionalities in TypeScript using Essential JS 2 quickstart seed repository

Dependencies

The following list of dependencies are required to use Predefined dialogs in your application.

|-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons

Set up your development environment

To get you started with Predefined dialogs, you can clone the Essential JS 2 quickstart project and install the packages by using the following commands.

git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

The project is preconfigured with common settings (src/styles/styles.css, system.config.js ) to start with all Essential JS 2 components.

Refer the Predefined dialogs dependencies in system.config.js configuration file.

[src/system.config.js]

System.config({
paths: {
    'npm:' : './node_modules/'
    'syncfusion:': './npm/@syncfusion/'
},
map: {
    app: 'app',
    //Syncfusion packages mapping
    typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
    "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
    "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
    "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js"
},
packages: {
    'app': { main: 'app', defaultExtension: 'js' }
}
});

System.import('app.ts').catch(console.error.bind(console)).then(function(){
document.getElementById('loader').style.display = "none";
document.getElementById('container').style.visibility = "visible";
});

Render a dialog using utility functions

The dialog component provides built-in utility functions to render the alert and confirm dialogs with the minimal code. The following options are used as an argument on calling the utility functions:

Options	Description
title	Specifies the title of dialog like the header property.
content	Specifies the value that can be displayed in dialog’s content area like the content property.
isModal	Specifies the Boolean value whether the dialog can be displayed as modal or non-modal. For more details, refer to the isModal property.
position	Specifies the value where the alert or confirm dialog is positioned within the document. For more details, refer to the position property { X: ‘center’, Y: ‘center’}
okButton	Configures the `OK button` that contains button properties with the click events. `okButton:{ icon:'prefix icon to the button', cssClass:'custom class to the button', click: 'action for OK button click', text: 'Yes' // <-- Default value is 'OK'}`
cancelButton	Configures the `Cancel button` that contains button properties with the click events. `cancelButton:{ icon:'prefix icon to the button', cssClass:'custom class to the button', click: 'action for ‘Cancel’ button click', text: 'No' // <-- Default value is 'Cancel'}`
isDraggable	Specifies the value whether the alert or confirm dialog can be dragged by the user.
showCloseIcon	When set to true, the close icon is shown in the dialog component.
closeOnEscape	When set to true, you can close the dialog by pressing ESC key.
animationSettings	Specifies the animation settings of the dialog component.
cssClass	Specifies the CSS class name that can be appended to the dialog.
zIndex	Specifies the order of the dialog, that is displayed in front or behind of another component.
open	Event which is triggered after the dialog is opened.
Close	Event which is triggered after the dialog is closed.

Alert dialog

An alert dialog box used to display an errors, warnings, and information alerts that needs user awareness. The alert dialog is displayed along with the OK button. When user clicks on ‘OK’ button, alert dialog will get closed. Use the following code to render a simple alert dialog in an application.

Source

Preview

app.ts

index.html

import { DialogUtility } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';

let alertBtn: Button = new Button({cssClass: 'e-danger'});
alertBtn.appendTo('#alertBtn');
document.getElementById('alertBtn').onclick = (): void => {
document.getElementById("statusText").style.display="none";
// Initialize and render alert dialog
let alertDialogObj = DialogUtility.alert({
    title: 'Low Battery',
    width: '250px',
    content: '10% of battery remaining',
    okButton: {click:alertBtnClick.bind(this)},
})

function alertBtnClick () {
    alertDialogObj.hide();
    document.getElementById("statusText").innerHTML="The user closed the Alert dialog."
    document.getElementById("statusText").style.display="block";
};
};

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Dialog utility</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript UI Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <button id="alertBtn" type="button">Alert</button>
        <span id="statusText"></span>
    </div>
</body>
</html>

Confirm dialog

A confirm dialog box used to displays a specified message along with the ‘OK’ and ‘Cancel’ button. It is used to get approval from the user, and it appears before any critical action. After get approval from the user the dialog will disappear automatically. Use the following code to render a simple confirm dialog in an application.

Source

Preview

app.ts

index.html

import { DialogUtility } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';

let confirmBtn: Button = new Button({cssClass: 'e-success'});
confirmBtn.appendTo('#confirmBtn');
document.getElementById('confirmBtn').onclick = (): void => {
document.getElementById("statusText").style.display="none";
let comfirmDialogObj = DialogUtility.confirm({
    title: 'Confirmation Dialog',
    content: "This is a Confirmation Dialog!",
    width: '300px',
    okButton: {  text: 'OK', click: confirmOkAction.bind(this) },
    cancelButton: {  text: 'Cancel', click: confirmCancelAction.bind(this)},
});
function confirmOkAction() {
    comfirmDialogObj.hide();
    document.getElementById("statusText").innerHTML = "The user confirmed the dialog box";
    document.getElementById("statusText").style.display = "block";
}
function confirmCancelAction() {
    comfirmDialogObj.hide();
    document.getElementById("statusText").innerHTML = "The user canceled the dialog box";
    document.getElementById("statusText").style.display = "block";
}
};

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Dialog utility</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript UI Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <button id="confirmBtn" type="button">Confirm</button>
        <span id="statusText"></span>
    </div>
</body>
</html>

Prompt dialog

A prompt dialog is used to get the input from the user. When the user clicks the ‘OK’ button the input value from the dialog is returned. If the user clicks the ‘Cancel’ button the null value is returned. After getting the input from the user the dialog will disappear automatically.

Source

Preview

app.ts

index.html

import { DialogUtility } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';

let promptBtn: Button = new Button({isPrimary: true});
promptBtn.appendTo('#promptBtn');
document.getElementById('promptBtn').onclick = (): void => {
document.getElementById("statusText").style.display="none";
let dialogObj = DialogUtility.confirm({
    title: 'Join Chat Group',
    width: '300px',
    content: '<p>Enter your name: </p><input id= "inputEle" type="text" name="Required" class="e-input" placeholder="Type here.." />',
    okButton: { click:promptOkAction.bind(this)},
    cancelButton: { click:promptCancelAction.bind(this)},
});

function promptOkAction (){
    let value:string ;
    value = (document.getElementById("inputEle")as any).value;
    if (value==""){
        dialogObj.hide();
        document.getElementById("statusText").innerHTML="The user's input is returned as \" \" ";
        document.getElementById("statusText").style.display="block";
    }
    else{
        dialogObj.hide();
        document.getElementById("statusText").innerHTML="The user's input is returned as"+" "+value;
        document.getElementById("statusText").style.display="block";
    }
}
function promptCancelAction (){
    dialogObj.hide();
    document.getElementById("statusText").innerHTML="The user canceled the prompt dialog";
    document.getElementById("statusText").style.display="block";
}
};

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Dialog utility</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript UI Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <button id="promptBtn" type="button">Prompt</button>
        <span id="statusText"></span>
    </div>
</body>
</html>

Contents

Dependencies
Set up your development environment
Render a dialog using utility functions
Alert dialog
Confirm dialog
Prompt dialog

Contents

Dependencies
Set up your development environment
Render a dialog using utility functions
Alert dialog
Confirm dialog
Prompt dialog