I've been having a lot of fun building with Appsmith lately and wanted to do something with Google Contacts.

It's easy to connect to a new API from Appsmith, but it's not so easy to enable the Google Contacts API for first time users. It takes a bit of setup in the Google Cloud Console before you can start using the API. You have to set up billing, create a project, add credentials, define the scope, etc. But most of the same data can be accessed using Apps Script, and without all the setup work to enable the API.

📐 Project Requirements

• Create endpoint for GET requests to retrieve all Contacts by 'label'
• Option to retrieve full list of all labels, to populate dropdown in Appsmith
• Security check so web app does not respond to all requests

📗 Topics Covered

• Publishing a script as a web app
• Passing URL parameters to the web app
• Using ContactsApp to retrieve contacts & labels

📌 A Note on Terminology

Google uses the term Label throughout the Gmail UI to refer to email categories.

But on the Apps Script and API side, they are referred to as Groups!

In an effort to maintain an equal level of confusion in this post, I'll also be using Label to refer to the frontend (user input) and using Groups when referencing the data returned from the ContactsApp. 🙃

⚙️ Setup Guide

SCRIPT: Deploy as Web App

1. Create a new Apps Script project and paste in the script below.
2. Replace the APIKEY with a custom value, then SAVE.
3. Deploy> New Deployment> Select Type> WEB APP
4. Execute As: ME, Who has access: ANYONE
5. DEPLOY and copy the new URL for the web app.

Appsmith: Add Contacts Web App as API

1. Create a new app, and add a new API using the web app URL.
2. Add parameters: key={APIKEY} and labels -with no value (to return the list of labels)
3. Add a Select-widget and set the Options to {{get_labels.data.groups}}
4. Copy the get_labels API, rename get_contacts
5. Update parameters: Change labels to label= {{Select1.selectedOptionValue}}
6. Add a Table-widget and set the Data as {{get_contacts.data.contacts}}
7. DEPLOY

AWESOME! Now all Gmail Contacts can be pulled into Appsmith by Label. 🤓

💾 Script

const key = 'APIKEY';  // custom string to check before returning contacts

function doGet(e) {
  let responseBody = {'requestEvent':e};

  if('label' in e.parameter && e.parameter.key == key){
    const label = e.parameter.label;
    const foundContacts = getContacts(label);
    responseBody['contacts'] = foundContacts;

  }else if('labels' in e.parameter && e.parameter.key == key){
    const foundGroups = getLabels();
    responseBody['groups'] = foundGroups;

  }

  return ContentService.createTextOutput(JSON.stringify(responseBody))
  .setMimeType(ContentService.MimeType.JSON)
}


function getContacts(label) {
  const contactGroup = ContactsApp.getContactGroup(label); 
  const contactsArr = ContactsApp.getContactsByGroup(contactGroup);

  const contacts = contactsArr.map(function(c) {
    let cObj = {};
    cObj['name'] = c.getFullName();
    cObj['phone'] = c.getMobilePhone();
    cObj['email'] = c.getEmailAddresses()[0];
    return cObj
  });

  Logger.log(JSON.stringify(contacts));
  return contacts
}


function getLabels(){
  const groups = ContactsApp.getContactGroups();
  let groupsArr = groups.map((group, index) => {
                             return {'label':group.getName(),'value':group.getName()}
}

);

Logger.log(groupsArr);
return groupsArr
}