Smartsheet

Log into Smartsheet and click your account icon in the top-right corner. Select 'Apps & Integrations' from the menu, then navigate to 'API Access'. Click 'Generate New Access Token', give it a descriptive name like 'FlutterFlow Integration', and copy the token that appears. This is the only time Smartsheet shows you the full token value — store it securely in a password manager. Next, find the Sheet ID of the sheet you want to display. Open the sheet in Smartsheet and look at the browser URL. A typical Smartsheet sheet URL looks like `https://app.smartsheet.com/sheets/3XXXXXXXXXXXXXXXXXX` — the long number after `/sheets/` is your Sheet ID. You can also find it by opening Sheet Properties (File → Properties → Sheet ID). Copy this number — you will need it as a path parameter in your API calls. In FlutterFlow, go to App Settings → App Constants (or App Values) and add two constants: `smartsheetToken` set to your access token, and `smartsheetSheetId` set to your Sheet ID. For read-only integrations, storing the token in App Constants is acceptable. For apps that write data, you will use a Cloud Function in a later step and the token will move there — but for now, App Constants lets you test reads quickly. Note: Smartsheet access tokens do not expire by default, but you can revoke them at any time from the API Access settings. If the token is ever compromised, revoke it immediately and generate a new one.

In FlutterFlow, click 'API Calls' in the left navigation panel. Click '+ Add' → 'Create API Group'. Name it 'Smartsheet'. Set the Base URL to `https://api.smartsheet.com/2.0`. Switch to the Headers section of the API Group and add one header: - Key: `Authorization` - Value: `Bearer {{token}}` Switch to the Variables tab and add a variable named `token` (type String). Set its default value to the `smartsheetToken` App Constant you created in the previous step. This way every API Call in the Smartsheet group automatically includes the correct Bearer token without you having to set it per call. Also consider adding an `Accept: application/json` header to the group, though Smartsheet returns JSON by default. This is optional but makes the API Group more explicit about the expected content type. Test the group by adding a temporary test API Call: method GET, endpoint `/users/me`. If the Authorization is set up correctly, this call returns your Smartsheet account information as JSON. Once confirmed, delete or keep the test call as a sanity-check endpoint.

1// API Group configuration reference:
2// Name:     Smartsheet
3// Base URL: https://api.smartsheet.com/2.0
4//
5// Headers:
6// Authorization: Bearer {{token}}
7// Accept: application/json
8//
9// Group Variable:
10// token (String) — default: FFAppConstants.smartsheetToken
11

This step is the most important one for getting stable widget bindings — it is what separates a working Smartsheet integration from one that breaks whenever someone rearranges columns. Inside the Smartsheet API Group, add a new API Call. Name it 'Get Columns'. Set the method to GET. Add a Variable named `sheetId` (type String, default: `FFAppConstants.smartsheetSheetId`). Set the endpoint to `/sheets/{{sheetId}}/columns`. Run the call in the Response tab. The response is a JSON object with a `data` array. Each element looks like `{ "id": 4756098765, "title": "Task Name", "type": "TEXT_NUMBER", "index": 0 }`. These are the column definitions. The `id` field is the numeric column ID, and `title` is the human-readable column name. Generate JSON Paths: `$.data[*].id`, `$.data[*].title`, `$.data[*].index`. In FlutterFlow, create an App State variable named `smartsheetColumns` of type 'JSON' (or a List of custom data types if you prefer). When your main screen loads, call 'Get Columns' as a Backend Query and store the result in the `smartsheetColumns` App State variable using an 'Update App State' action. You can then use a Custom Function to find the column ID for a specific column name: pass the column title you want (e.g., 'Status') and the columns array, and return the matching `id` value. Store the most-used column IDs (Status, Owner, Due Date) in dedicated App State variables so you only need to run the lookup once. This column-lookup pattern is the key to building a Smartsheet integration that stays correct even when users reorder or rename columns in Smartsheet.

1// Custom Function — findColumnId (synchronous, no packages needed)
2// Arguments:
3//   columns: dynamic (the $.data array from Get Columns response)
4//   title: String (the column name to look for)
5// Return type: int
6
7int findColumnId(dynamic columns, String title) {
8  if (columns == null) return -1;
9  for (final col in columns) {
10    if (col['title'] == title) {
11      return (col['id'] as num).toInt();
12    }
13  }
14  return -1;
15}
16

Inside the Smartsheet API Group, add another API Call. Name it 'Get Rows'. Set the method to GET. Use the same `sheetId` variable. Set the endpoint to `/sheets/{{sheetId}}`. The response from `GET /sheets/{id}` includes both the column definitions and all rows. Rows live under `$.rows[*]` and each row has a `cells` array. A single row looks like this: ``` { "id": 123, "rowNumber": 1, "cells": [ { "columnId": 4756098765, "value": "Design mockup" }, { "columnId": 7009898379, "value": "Alice" }, { "columnId": 1503248572, "value": "2026-07-15" }, { "columnId": 6006848199, "value": "In Progress" } ]} ``` For simple layouts where you control the sheet structure, bind cells by index position: - Column 1 (index 0): `$.rows[*].cells[0].value` — Task Name - Column 2 (index 1): `$.rows[*].cells[1].value` — Owner - Column 3 (index 2): `$.rows[*].cells[2].value` — Due Date - Column 4 (index 3): `$.rows[*].cells[3].value` — Status Add a DataTable widget to your page (found under Layout → Data Table or as a Community widget). Set its Backend Query to 'Get Rows'. Bind each column to the appropriate JSON Path. For status-based color coding, add a Conditional expression on the row's background color comparing `$.rows[*].cells[3].value` against 'Complete', 'In Progress', and 'Overdue'. For long sheets (more than 200 rows), use the `rowsModifiedSince` query parameter to fetch only recently changed rows, or use `pageSize` and `page` pagination parameters. Add these as API Call Variables and build a 'Load More' button that increments the page number and merges results into App State. If you want robust ID-based binding rather than positional, add a Custom Function that takes a row's cells array and a target column ID, then returns the matching cell's value. This function replaces the fragile `cells[0].value` approach with something that survives column reordering.

1// Custom Function — getCellValue
2// Returns the value of a cell matching the target column ID
3// Arguments:
4//   cells: dynamic (the $.rows[*].cells array for one row)
5//   columnId: int
6// Return type: String
7
8String getCellValue(dynamic cells, int columnId) {
9  if (cells == null) return '';
10  for (final cell in cells) {
11    if ((cell['columnId'] as num).toInt() == columnId) {
12      return cell['value']?.toString() ?? '';
13    }
14  }
15  return '';
16}
17

Reading data from Smartsheet is low-risk with the token in App Constants, but writing — adding rows, updating status, deleting rows — is a different story. A write operation with a leaked token could corrupt your sheet data or expose business-sensitive information. The correct pattern for writes is a Firebase Cloud Function. Create a Cloud Function named `smartsheetAddRow`. Set the environment variable `SMARTSHEET_TOKEN` to your access token in the Firebase console. The function accepts a POST request with the new row data as JSON, maps field names to column IDs, and calls the Smartsheet API to insert the row. In FlutterFlow, add a new API Group called 'Smartsheet Proxy' (or add a new API Call to a 'Firebase Functions' group if you already have one). Set the base URL to your Cloud Function URL. The proxy call accepts JSON with your form field names and the function handles the column ID mapping server-side, which also means you can update the column mappings in the function without redeploying the app. For the write action in FlutterFlow: add a Button to your form screen with an Action Flow that calls the 'Smartsheet Proxy → Add Row' API Call, passes the form field values as the request body, and shows a success Snackbar or navigates back on a 200 response. Add error handling for non-200 responses to show a 'Could not save — please try again' message. Note: if your app only ever reads data and never writes, you can skip this step entirely and use the Bearer token in App Constants for all calls.

1// Firebase Cloud Function — index.js
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5// Store column IDs for your specific sheet
6const COLUMN_IDS = {
7  taskName: 4756098765,
8  owner: 7009898379,
9  dueDate: 1503248572,
10  status: 6006848199
11};
12const SHEET_ID = process.env.SMARTSHEET_SHEET_ID;
13const TOKEN = process.env.SMARTSHEET_TOKEN;
14
15exports.smartsheetAddRow = functions.https.onRequest(async (req, res) => {
16  res.set('Access-Control-Allow-Origin', '*');
17  if (req.method === 'OPTIONS') {
18    res.set('Access-Control-Allow-Methods', 'POST');
19    res.set('Access-Control-Allow-Headers', 'Content-Type');
20    return res.status(204).send('');
21  }
22
23  const { taskName, owner, dueDate, status } = req.body;
24
25  const row = {
26    toBottom: true,
27    cells: [
28      { columnId: COLUMN_IDS.taskName, value: taskName },
29      { columnId: COLUMN_IDS.owner, value: owner },
30      { columnId: COLUMN_IDS.dueDate, value: dueDate },
31      { columnId: COLUMN_IDS.status, value: status }
32    ]
33  };
34
35  try {
36    const response = await axios.post(
37      `https://api.smartsheet.com/2.0/sheets/${SHEET_ID}/rows`,
38      [row],
39      {
40        headers: {
41          'Authorization': `Bearer ${TOKEN}`,
42          'Content-Type': 'application/json'
43        }
44      }
45    );
46    return res.status(200).json({ success: true, result: response.data });
47  } catch (err) {
48    return res.status(500).json({ error: err.message });
49  }
50});
51