Use Native Device Dialogs In Ionic Framework Mobile Apps

So you’ve been playing around with Ionic Framework for a while now and have decided that maybe $ionicPopup dialogs are not meeting your needs because they don’t look native enough. As we’ve come to expect, Apache Cordova has a plugin for us to correct this, giving us native device popup dialogs in our hybrid application.

This guide will show you how to use the Apache Cordova Dialogs plugin in your Ionic Framework Android and iOS mobile application.

Let’s start by creating a fresh Ionic project for Android and iOS:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

Note that if you’re not using a Mac computer, you cannot add and build for the iOS platform.

Since we’ll be using the Apache Cordova Dialogs plugin, we’ll need to install it from the official repository. With your current directory being the Ionic project, run the following from your Terminal or command prompt:

cordova plugin add org.apache.cordova.dialogs

The following are the available dialog types for Android and iOS:

• alert
• confirm
• prompt
• beep

However, we’ll be focusing strictly on the confirm dialog type because it allows us to use multiple buttons. Taken from the plugin documentation, to show a dialog, we must execute the following statement from our project’s code:

navigator.notification.confirm(message, confirmCallback, [title], [buttonLabels])

The confirm dialog has allows four parameters to be passed, where two of them can be optional as they have default values. Descriptions of these four parameters can be seen below:

With this knowledge, it is time to create a working example. Open your www/js/app.js file and add the following controller:

ionicApp.controller("ExampleController", function($scope) {

    $scope.confirmDialog = function() {
        navigator.notification.confirm("Checkout this confirmation dialog", function(buttonIndex) {
            switch(buttonIndex) {
                case 1:
                    console.log("Decline Pressed");
                    break;
                case 2:
                    console.log("Dont Care Pressed");
                    break;
                case 3:
                    console.log("Accept Pressed");
                    break;
            }
        }, "Our Title", [ "Decline", "Dont Care", "Accept" ]);
    }

});

We’re assuming that you’ve named your angular.module ionicApp, otherwise you’ll probably get an error when using the controller.

In the example, when the confirmDialog is called from one of your HTML pages it will show a confirmation dialog with three buttons. Although I decided to make them as negative, neutral, and positive, it really doesn’t matter what you call them or how you treat them.

When clicking a button it will fire the callback and perform an action based on the button index.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.