Cordova dialog box

This plug-in calls the platform local dialog UI element.

Step 1 - Installation dialog box

Type the following in the command prompt window to install the plug-in.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs

Step 2 - Add a button

Let's .html index and add four buttons, each with a button.

<button id = "dialogAlert">ALERT</button>
<button id = "dialogConfirm">CONFIRM</button>
<button id = "dialogPrompt">PROMPT</button>
<button id = "dialogBeep">BEEP</button>>

Step 3 - Add an event listener

Now we'.js the event listener in the onDeviceReady function in index. /b10> Once the corresponding button is clicked, the listener calls the callback function.

document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
document.getElementById("dialogBeep").addEventListener("click", dialogBeep);	

Step 4A - Create an alert function

Since we've added four event listeners, we'll now .js callback functions for them in the index file. /b10> The first is dialogAlert.

function dialogAlert() {
   var message = "I am Alert Dialog!";
   var title = "ALERT";
   var buttonName = "Alert Button";
	
   navigator.notification.alert(message, alertCallback, title, buttonName);

   function alertCallback() {
      console.log("Alert is Dismissed!");
   }
	
}

If we click the ALERT button, we will see an alert dialog box.

When we click the dialog button, we will get the console output.

Step 4B - Create a confirmation function

The second function we need to create is the dialogConfirm function.

function dialogConfirm() {
   var message = "Am I Confirm Dialog?";
   var title = "CONFIRM";
   var buttonLabels = "YES,NO";
	
   navigator.notification.confirm(message, confirmCallback, title, buttonLabels);

   function confirmCallback(buttonIndex) {
      console.log("You clicked " + buttonIndex + " button!");
   }
	
}

When the CONFIRM button is pressed, a new dialog box pops up.

We'll answer the question by clicking the Yes button. The console output will show the following -

Step 4C - Create a prompt feature

The third function is dialogPrompt. /b10> It allows the user to type text in the dialog input element.

function dialogPrompt() {
   var message = "Am I Prompt Dialog?";
   var title = "PROMPT";
   var buttonLabels = ["YES","NO"];
   var defaultText = "Default"
	
   navigator.notification.prompt(message, promptCallback, title, buttonLabels, defaultText);

   function promptCallback(result) {
      console.log("You clicked " + result.buttonIndex + " button! \n" + 
         "You entered " +  result.input1);
   }
	
}

The PROMPT button triggers this dialog box.

In this dialog box, we have the option to type text. /b10> We'll record this text in the console and click the button.

Step 4D - Create a beep function

The last one is dialogBeep. /b10> This is used to call audio beep notifications. /b11> The times parameter sets the number of repetitions of the beep signal.

function dialogBeep() {
   var times = 2;
   navigator.notification.beep(times);
}

When we click the BEEP button, we hear two notification sounds because the secondary value is set to 2.