Friday Nov 29, 2013

Cordova Contacts via AngularJS and NetBeans IDE

Starting out from yesterday's blog entry, where I controlled the Android camera via an AngularJS Cordova application, let's now, instead of the Android camera, get hold of the Android contacts list.

So, do everything explained yesterday, except that you need to include the "Contacts" plugin, instead of the "Camera" plugin, via the tools in NetBeans IDE.

Then:

<button ng-contacts>Retrieve Contacts!</button>
<ol ng-repeat="contact in contacts">
    <div ng-show="contact.displayName.length > 0">
        <li style="list-style: circle">
            {{contact.displayName}}
        </li>
    </div>
</ol>

And here's the Directive referred to in the button above:

var app = angular.module('myApp.directives', []);
app.directive('ngContacts', function() {
    return {
        restrict: 'A',
        link: function(scope, elm, attrs, ctrl) {
            elm.on('click', function() {
                navigator.contacts.create();
                var options = new ContactFindOptions();
                options.multiple = true;
                var fields = ["displayName"];
                navigator.contacts.find(fields, function(foundcontacts) {
                    scope.$apply(function() {
                        scope.contacts = foundcontacts;
                    });
                }, function(error) {
                    scope.$apply(function() {
                        alert('error: ' + error);
                    });
                }, options);
            });
        }
    };
});

That's all you need. Click the button and all the contacts are loaded and displayed if the display name has a length.

If you want to search for a particular name, use "options.filter = scope.filter", i.e., on the ContactFindOptions that you see above, set a filter, defined by a "filter" variable in an expression defined in the view.

Spent a lot of time trying to get the contact photo to be displayed, but failed so far.

Related resources:

http://tech.pro/tutorial/1401/phonegap-and-angularjs-contacts

https://issues.apache.org/jira/browse/CB-1045

About

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.

Search

Archives
« November 2013 »
SunMonTueWedThuFriSat
     
       
Today