Sign up! We’ll send you a link to your component, set up your Onymos Cloud Account, and generate your Onymos license credentials. In the meantime, you can get familiar with our API Documentation and developer resources, or join a whole community of developers building apps with Onymos on Reddit!

Add your components to a folder in your app’s root (e.g., onymos_components).

Add the Onymos Initialize component to your environment.

$ ionic cordova plugin add onymos_components/onymos-component-initialize

Then we can add the Onymos Contacts component.

$ ionic cordova plugin add onymos_components/onymos-component-contacts

Then update the widget inside your config.xml with the Onymos Widget ID you receive after you create an Onymos Cloud Account.

Using the Contacts component in your app
Apps are better with friends—use the Onymos Contacts component so your users can import all of theirs! Filter by names, addresses, phone numbers, emails, and more. With its intelligent loading and in-memory manipulation, Contacts can keep up with even the most gregarious userbase.

Before we use Contacts, let’s make sure we have everything we need to configure your onymosConnectObject. The onymosConnectObject requires the appropriate Onymos license credentials: your Customer ID (also called an Onymos ID) and your Onymos Auth Token. You’ll need these credentials to use this (or any) component in your app.

Next, let’s go inside your Ionic app’s app.component.ts file and initialize Contacts.

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
    
    declare var OnymosInitialize: any;
    declare var OnymosContacts: any;
    
    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html',
      styleUrls: ['app.component.scss'],
    })
    export class AppComponent {
      constructor(
        private platform: Platform
      ) {
            this.initializeApp();
        }
    
    
     initializeApp(){
        this.platform.ready().then(() => {
    
          const OnymosConnectObject={
            customerId : 'Your customerId goes here', 
            onymosAuthToken : 'Your onymosAuthToken goes here',  
            envType: 'PRD'
            }
    
          OnymosInitialize.initialize(
            OnymosConnectObject,
          
            function onymosInitializeSuccess(status){
              console.log("Onymos initialized Successfully.", status)
            },
    
            function onymosInitializeFailure(error){
              console.log("Onymos failed to initialize.", error)
            })
        })
      }
    }
    

Great! If we configured your onymosConnectObject correctly, onymosInitializeSuccess() should print its message to the console. Now we’re ready to use Contacts. Let’s create a function called getContactsList() in the app.component.ts file, then your users will be able to start importing their contacts.

getContactsList() {
  OnymosContacts.getList(
    callId,

    function getContactsListSuccess(listOfContactsArray){
      listOfContactsArray [] = {
        // Array of Contacts
        // Fields as requested in options.displayFields
      }
    }

    function getContactsListFailure(error){
      console.log(error)
    },
    
    options)
}

Your callId will be a string that identifies your call to select a list of contacts (e.g., ‘1’).

The getList() method also includes optional parameters you can define to meticulously filter the contacts imported into your app. Let’s take a closer look at the options object. You can find out even more by checking out Contact’s API documentation.

{
  filter: 'A filter string applied to either a "Given name" (First name), or "Family name" (Last name).',
  searchField: 'Defines whether your filter will be applied to first or last names (e.g., OnymosContactsConstants.SearchField.givenName).',
  hasPhoneNumber: 'A boolean that when set to true only returns those contacts with phone numbers.',
  displayFields: 'An array of fields you want fetched for each contact returned. See a full list of these fields in Contact's API Documentation.',
  numberOfRecrods: 'An integer that defines how many contacts you want the method to return. Its default value is 100.'
}

Let’s actually configure the getList() method.

getContactsList() {
    OnymosMedia.getList(
      '1',
  
      function getContactsListSuccess(listOfContactsArray){
        console.log(listOfContactsArray)
      }
  
      function getContactsListFailure(error){
        console.log(error)
      },
      
      {
        filter: ‘Jo’,
        hasPhoneNumber: true,
        searchField: OnymosContactsConstants.SearchField.givenName,
        displayFields: [
          OnymosContactsConstants.DisplayFields.name,
          OnymosContactsConstants.DisplayFields.nickname,
          OnymosContactsConstants.DisplayFields.phoneNumbers,
          OnymosContactsConstants.DisplayFields.emails,
          OnymosContactsConstants.DisplayFields.addresses,
          OnymosContactsConstants.DisplayFields.note
        ],
        numberOfRecords: 200
      })
  }
 

Now your app is filled with contacts… and you just have to decide what to do with them all!

Wait, what if a user has more than 200 contacts? Well, wow, but don’t worry, you can use the loadNextSet() method to import them too.

How do I squash this bug? Is Ionic supposed to do that? Why is this iOS build failing?

Let’s figure it out—join the Onymos community on Reddit! More of a loner? You can email us directly at customersuccess@onymos.com.