Using PhoneGap notification API to display customized alert

Introduction: In each and every mobile application we need to display customize message to user and the message should be well formatted and well designed. As we know PhoneGap application is based on JavaScript , we normally use JavaScript to display the message. But PhoneGap provides the mechanism to display well formatted message using Notification API.

 Description: As PhoneGap supports JavaScript we can use the JavaScript to show the alert but that alert will not look good in mobile devices.The alert will display with the page name as alert header.

alert("Unable to connect to server !");

image1

So instead of using normal JavaScript we can use the Notification API in our applications. Here are the basic steps we need to follow to display the alert using PhoneGap.

1. Include the Phonegap/Cordova javascript file inside your html page.

2. Replace the alert with navigator.notification.alert

navigator.notification.alert("Unable to connect to server !");

In iOS

In Android

So it will display the alert with Alert as alert header. Here navigator.notification method is used to display the native like alert by replacing the page name from alert header. We can also customize the alert using bellow code.

navigator.notification.alert( 'Unable to connect to server !', PhoneGapAlert, 'HelloWorld', 'Exit');

In iOS

In Android

In Android

function PhoneGapAlert() {
 // Function called when alert get dismissed
}

navigator.notification.alert takes 4 parameters

  1. Message : Message to be displayed to user.(string)

  2. AlertCallback : Function which will executed when the alert dismissed.(function)

  3. Title : Alert header/title. (string)

  4. ButtonName :Button name. (string)

If we will not declare the alert header it will display “Alert” as default header and if we will not mentioned the button name it will be displayed as “OK“.

We can also display confirmation message using Notification API and here is example bellow.

navigator.notification.confirm( 'Do you want to quit the game !', AlertConfirmed, 'HelloWorld', ['Yes, No']);
In iOS

In iOS

In Android

In Android

function AlertConfirmed(buttonIndex) {
navigator.notification.alert('You have selected the button ' + buttonIndex);
}

navigator.notification.confirm also takes 4 parameters

1. Message : Message to be displayed to user.(string)

2. ConfirmCallback :Function which will executed when the user confirms.(function)

3. Title : Alert header/title. (string)

4. ButtonLabels : Button names. (array)

If we will not declare button names it will be displayed as “OK” and “Cancel“. From PhoneGap version 2.7 onwards button name should be declared as array but previously it was declared as string. So if we click the OK button the buttonIndex will be 1 and for Cancel it will be 2.

Summary: So using the above example we can integrate the notification API with our application and display the customized alert to user.

Presented By: Sourabha Kumar Sahoo, Software Developer, Mindfire Solutions

Advertisements

6 thoughts on “Using PhoneGap notification API to display customized alert

  1. Pingback: Using PhoneGap notification API to display customized alert | souravsahoo

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s