How to build a SmartSuite plugin for Bubble

What we’ll build

• Users can set up the integration and get the table structure for importing into Bubble.

• Users can fetch records from their SmartSuite tables.

• Users can import data from SmartSuite to display in Bubble, but they can't store or modify records within Bubble.

Prerequisites

• Bubble account and a Bubble app that you’d like to use to test with the plugin

• Some familiarity with Bubble plugins is helpful. If you're new to this, check out this guide.

• SmartSuite account

• a SmartSuite API Key and Workspace ID

• Find the Table ID for SmartSuite by looking at the second ID in the URL of the table you want to use.

1. Set up the plugin

2. Build the action to fetch the expected data structure

1. Name: “SmartSuite - Fetch Table Structure” (You can use any name. It’s for identification within Bubble workflows, so make it descriptive).

2. Action Type: Server Side

3. Fields: "TableId" with a type of "dynamic value" and "text" data type.

4. Returned Value: "TableFormat" with a type of "text.

async function(properties, context) {
   const apiKey = context.keys["API Key"];
   const workspaceId = context.keys["Workspace Id"];
   // Rest of your code here
}

async function(properties, context) {
   const apiKey = context.keys["API Key"];
   const workspaceId = context.keys["Workspace Id"];
    
   const url = `https://app.smartsuite.com/api/v1/applications/${properties.tableId}/records/list/`;
   const options = {
       method: 'POST',
       headers: {
           'Authorization': `Token ${apiKey}`, 
           'ACCOUNT-ID': workspaceId,
           'Content-Type': 'application/json'
       },
       body: JSON.stringify({
           "sort": [],
           "filter": {}
       })
   };
}

async function(properties, context) {
   const apiKey = context.keys["API Key"];
   const workspaceId = context.keys["Workspace Id"];
    
   const url = `https://app.smartsuite.com/api/v1/applications/${properties.tableId}/records/list/`;
   const options = {
       method: 'POST',
       headers: {
           'Authorization': `Token ${apiKey}`, 
           'ACCOUNT-ID': workspaceId,
           'Content-Type': 'application/json'
       },
       body: JSON.stringify({
           "sort": [],
           "filter": {}
       })
   };

   try {
       const response = await fetch(url, options);
       if (!response.ok){
           throw new Error(`HTTP error! status: ${response.status}`);
       }
      
       const responseBody = await response.json();
       const firstItem = responseBody.items && responseBody.items[0] ? JSON.stringify(responseBody.items[0]) : null;
    
       return {
           tableFormat: firstItem,
       };
   } catch (err) {
       console.error('Error:', err);
       return {
           tableFormat: null,
       };
   }
}

3. Build the action to fetch records

1. Name: 'SmartSuite - Fetch Records.'

2. Action Type: 'Server Side'

3. Field 1: “dataType” of type “App type” Users will configure this based on the data type they've created in Bubble.

4. Field 2: “tableId” with a “dynamic value” of type 'text’

5. Returned Values: 'records' with a type of 'dataType' and mark it as a list. This step helps Bubble understand the type of object this data represents.

async function(properties, context) {
   const apiKey = context.keys["API Key"];
   const workspaceId = context.keys["Workspace Id"];
    
   const url = `https://app.smartsuite.com/api/v1/applications/${properties.tableId}/records/list/`;
   const options = {
       method: 'POST',
       headers: {
           'Authorization': `Token ${apiKey}`, 
           'ACCOUNT-ID': workspaceId,
           'Content-Type': 'application/json'
       },
       body: JSON.stringify({
           "sort": [],
           "filter": {}
       })
   };
}

  let responseBody; 
    
}

Full code snippet

async function(properties, context) {
  const token = context.keys["API Key"];
  const accountSid = context.keys["Workspace Id"];
  const url = `https://app.smartsuite.com/api/v1/applications/${properties.tableId}/records/list/`;
  const options = {
    method: 'POST',
    headers: {
      'Authorization': `Token ${token}`, 
      'ACCOUNT-ID': accountSid,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      "sort": [],
      "filter": {}
    })
  };

  let responseBody; 
    
  try {
    const response = await fetch(url, options);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`); 
    }
    responseBody = await response.json();
  } catch (err) {
    console.error('Fetch Error:', err);
    return; // Make sure to exit if the fetch fails
  }
  
    let convertObject = (obj, param_prefix) => {

    if (typeof obj !== 'object' || (obj && Array.isArray(obj))) return {};

    if (typeof param_prefix !== 'string' || !param_prefix || (typeof param_prefix === 'string' && !['_p_', '_api_c2_'].includes(param_prefix))) param_prefix = '_api_c2_';

    const convert = (obj, key_parent, is_array) => {

        let result = {};

        Object.keys(obj).forEach(key => {

            let cell = obj[key], key_new = `${param_prefix}${key}`;

            if (key_parent && !is_array) key_new = `${key_parent}.${key}`;


            if ((!cell && cell !== 0 && cell !== false) || typeof cell === 'undefined') {


                result[key_new] = null

            } else if (typeof cell !== 'object' && !Array.isArray(cell)) {


                result[key_new] = cell

            } else if (typeof cell === 'object' && !Array.isArray(cell)) {


                result = Object.assign(result, convert(cell, key_new))

            } else if (Array.isArray(cell)) {

                if (typeof cell[0] === 'object') {

                    result[key_new] = [];

                    cell.forEach(value => {

                        result[key_new].push(convert(value, key_new, true))
                    })

                } else {

                    // It's not an object array, so treat
                    // it as an array of Bubble primitives.
                    //
                    result[key_new] = cell;
                }
            }
        });


        return result
    };

    return convert(obj)
};

  try {
    // Directly use responseBody, no need to parse as it's already an object
  if (Array.isArray(responseBody.items) && responseBody.items.length > 0) {
  const prefixedItems = responseBody.items.map(item => convertObject(item, '_api_c2_')); // Pass the object and prefix
  return {
    records: prefixedItems
  };
} else {
  console.error("Items array is empty or the response is not an array of objects");
}
  } catch (error) {
    console.error("Error handling response:", error.message);
  }
}

4. Try the plugin

Fetch the table format for import into Bubble

Get SmartSuite records for display in Bubble

• Enhance functionality by adding actions such as updating records in SmartSuite, deleting records, and more.

• Fine-tune the integration with sorting, filters, and limits.

• Create elements for easier setup