Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Contact Plugin

The contact plugin will help us add contact management functionality to our app. In this lesson, I'll show you how to use the contact plugin to create a contact search page.

3.5 Contact Plugin

Hello everyone. This is Reggie Dawson. Welcome to the Building an App with Cordova Course for Tuts+. In this video, we are going to configure our contact page and the contact plug-in. There are different things we can do with contacts in Cordova, from adding or removing a contact, to searching or picking a contact. When we return the data it is in the form of JSON. As a result, we will have to parse this data to make some sense of it. Also bear in mind that this example will not work for contacts without phone number. We could build some kind of error checking or use an additional plug in that returns only contacts with phone numbers. But that is outside the scope of this course. We just wanna be able to grab context as proof that we can add this functionality and we can add all the bells and whistles later. First, let's go to index.html to set up our page. Let's add a page for a div. And then of course we're going to have our UI content div again. Next we will add a ui-grid-solo div, but this time we will leave it empty. What we will add to this div is an ID of result. Then we add another ui-grid-solo with a button inside. Our button will have a value of find contact and an id of find. After that go to your command prompt and make sure you are in your project directory. We are going to run Cordova plugin@Cordova-plugin-context to add our context plugin. After that let's go to index.js. And again, we're going to add a click handler for our find button in the on device ready method. Inside this click handler, we have a calltoapp.findcontact, then of course we will add the following contact method. Now the navigator contacts pickContact method works a little different than other plugins. It consists of the method with integrated success and fail call backs, the fail call back is optional so I won't use it. First we add the method. Inside, we create a variable to hold our display name returned from the method. The pickContact method allows you to pick a contact from the contact list and returns it. As a result, we can grab the properties of the contact. Next we grab the phone number, it's a little tricky, though, as the phone number is returned as an array. In order to grab one phone number, I just referenced the first index in the array and grabbed its value. Then I add a variable for the br tag, and then I build up a string inside the next variable. Br plus name, then the name variable we created, another br, phone number, and then the phone number variable. Finally, I pinned that variable to the results div we left empty. Every time we choose a contact, it will be added to this div. That's everything we need to set up our contact page. Let's save and preview. Again, like the navigation plugin, this will only work properly on your device. Prepare and run the app on your device. When you choose a contact, you should display the information about them. Remember, it will not work if the contact doesn't have a phone number. That's all for this video. In the next video, we will add a few final touches to our app.

Back to the top