Ionic Native Contact Management (Call, SMS) [v4]

ionic-4-contact-management

If you plan to develop a quick management app including native contacts, follow along this quick win to see how all of the basic native plugins work!

We will first load all native device contacts to then display them in our app with some information and additional buttons to directly call them or write a predefined SMS.

ionic-4-contacts

Because we are using a lot of Cordova plugins you need to test the app on your real device, even the simulator doesn’t have call or SMS capabilities.

Starting our Contacts App

Get started with a blank app and install first all needed Ionic native plugins and then the according Cordova plugins for each of them by running:

In order to use our plugins we also need to add them to our app/app.module.ts like this:

Also note that you need to add a specific key for iOS in order to get the permission from your users. This needs to be done for using the camera, geolocation, and in our case native contacts as well. You can simply add the following block to your config.xml inside the iOS block:

This will automatically write the NSContactsUsageDescription to the *-info.plist file for your native iOS project and you don’t have to fear any submission problems!

Working with Your Native Contact

Now we can get started with the contacts, and of course you have to wait until the platform is ready to use the plugin. In our example we are simply using a loadContacts function that we call at a later point.

You have the option to either select one contact through the plugin or find one/many with additional options that you can specify. This gives you the chance to filter for specific contacts! In our case we are using the wildcard ['*'] to find all contacts.

In the following code snippet we also create a contact – easily possible with the same plugin! In a real example you might have some input fields and not just fixed text of course.

Go ahead and change your home/home.page.ts to:

You can also see the two other important functions to make a call and send a SMS. Actually, both of them are a simply call to the plugin!

The hardest part is actually finding the right key in the Contact class, so simply log all the contacts and inspect the objects to see what you got.

Also, for SMS you can have a predefined message and for the real call, it took my device some time to start the call! Not exactly sure what might have caused the delay, but wait and don’t immediately think it failed.

Now we can wrap this up by implementing the view, which consists only of the two buttons to trigger our previous functions and items that display the contact information.

These items are sliding items with both the call and SMS functionality hidden on the side, so it’s like a shortcut app to work with your contacts!

Open your home/home.page.html and change it to:

Now you can import all your contacts and define more shortcuts that you can trigger on your contacts, or perhaps save them locally or create a special list with important contacts?

Conclusion

Working with the native contacts is pretty easy with all the available plugins, the most complex part might actually be the data structure of the returned contacts.

You can also find a video version of this Quick Win below.

Leave a Reply

Your email address will not be published. Required fields are marked *