Get Contact List

Ui Builder and Mobile Native Shell make it very easy to retrieve the contact list from the device. There may be multiple scenarios when the application needs to access the contact list. These may include the following use-case:

• help users find and connect with people they know, and identify which contacts are already using the app for easy connection or communication.
• auto fill email addresses or phone numbers when sending messages or emails, enhancing user convenience in communication.
• send alerts or sharing the user's location with selected contacts in case of an emergency.
• suggest connections, or uncovering opportunities based on existing contacts.
• send event invitations, track RSVPs, or coordinate with attendees using contact information.

To retrieve a contact list from the user's device, utilize the following codeless functionality:

The first time this block is used in your application, it will prompt the user for permission to access the contact list. If this permission is denied, an error is generated, which can be managed using the Try/Catch codeless block. On the other hand, if permission is granted, the Get Contacts List block yields a list of objects, each representing an individual contact. The structure of a contact object is as follows:

{  
  "avatar": [] or null,  
  "emails": [] or null,  
  "phones": [] or null,  
  "prefix": "value" or null,  
  "suffix": "value" or null,  
  "company": "value" or null,  
  "birthday": "value" or null,  
  "jobTitle": "value" or null,  
  "givenName": "Tony",  
  "familyName": "Stark",  
  "identifier": "value",  
  "middleName": "value" or null,  
  "displayName": "Tony Stark",  
  "postalAddresses": [],  
  "androidAccountName": "value" or null,  
  "androidAccountType": "value" or null  
}

avatar: To create an avatar image, the list must be processed to create a base64 encoded string which can be used to render it.

[137,80,78,71,13,10,....]

The avatar property is a list of unsigned integers which are character codes. Below is an example of logic handling the avatar property. The logic is for the Source URL Logic of the Image component. The image uses the data provider of a Repeater. The data provider is a list of contacts:

The Custom Code block uses the following code:

The code above as text:

var binary = '';  
var bytes = new Uint8Array( list );  
var len = bytes.byteLength;  

for (var i = 0; i < len; i++) {  
  binary += String.fromCharCode( bytes[ i ] );  
}  

return window.btoa( binary );

phones property:

If the phones property contains a value, it is a list of objects. Each object has a label and the value which is contact's phone number:

[  
 {  
  "label": "mobile",  
  "value": "(214) 555-1212"  
 },  
 {  
  "label": "home",  
  "value": "9725551212"  
 }  
] 

emails property:

If the emails property contains a value, it is a list of objects. Each object has a label and the value which is contact's email address:

[  
  {  
   "label": "value",  
   "value": "tony@marvel.com  
 }  
]

Implementation Primer

You can find a detailed walk through of implementing a UI Builder page that uses the Get Contacts block and rendering a list of contacts in Backendless Knowledgebase.