May 21, 2021 Cordova
1. Step 1 - Installation dialog box
3. Step 3 - Add an event listener
4. Step 4A - Create an alert function
5. Step 4B - Create a confirmation function
This plug-in calls the platform local dialog UI element.
Type the following in the command prompt window to install the plug-in.
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-dialogs
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>>
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);
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.
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 -
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.
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.