Teamwork

Log into Teamwork and click your profile picture in the top-right corner. Select 'Edit My Details' from the dropdown. On the edit page, switch to the 'API' tab — you will see your personal API key displayed. Copy this key carefully; it is a long alphanumeric string. Now you need to create the Base64 value that will go in the Authorization header. Teamwork's Basic auth scheme treats the API key as the username and accepts any string as the password. The most common convention is to use 'X' or 'xxx' as the dummy password. Open your browser's developer console (right-click → Inspect → Console) and type: `btoa('YOUR_API_KEY:X')` — substitute your real API key. Press Enter and the console returns a Base64 string like 'dGhpcyBpcyBhIHRlc3Q6WA=='. Copy this value. In FlutterFlow, go to App Settings → App Constants (also called App Values in some FlutterFlow versions) and add two constants: one named `teamworkBase64Auth` set to the Base64 string you just computed, and one named `teamworkSubdomain` set to your subdomain (just the subdomain portion, like 'yourcompany' if your Teamwork URL is yourcompany.teamwork.com). Storing the subdomain as a constant means you can swap Teamwork accounts or environments by changing one value. Important: the Base64 value includes your API key in an easily reversible encoding. Anyone who can access your FlutterFlow App Constants or decompile your app can decode it. For write operations (creating tasks, logging time), route the call through a Firebase Cloud Function that holds the API key as an environment variable, so the key never reaches the client device at all.

1// Compute in browser console:
2// btoa('YOUR_TEAMWORK_API_KEY:X')
3// Example output: 'dGhpcyBpcyBhIHRlc3Q6WA=='
4//
5// App Constants to create in FlutterFlow:
6// teamworkBase64Auth = '<result of btoa above>'
7// teamworkSubdomain  = 'yourcompany'  (just the prefix, not the full URL)
8

In FlutterFlow, click 'API Calls' in the left navigation panel. Click '+ Add' and select 'Create API Group'. Name this group 'Teamwork'. For the Base URL, enter `https://{{subdomain}}.teamwork.com` — but FlutterFlow's Base URL field does not support App Constant references directly in the URL in all versions. A practical workaround is to enter the full domain directly: `https://yourcompany.teamwork.com`. If you need to switch accounts, you will update this one field. Switch to the 'Headers' section of the API Group. Add one header: - Key: `Authorization` - Value: `Basic {{base64Auth}}` Now switch to the Variables tab of the API Group and add a variable named `base64Auth` (type String, default value: the App Constant `teamworkBase64Auth`). This variable is what gets substituted into `{{base64Auth}}` in the header above. Setting the default to your App Constant means every API Call in this group inherits the correct auth header automatically without you needing to set it per call. This is a critical step that new FlutterFlow users often get wrong: Teamwork does not accept a Bearer token, and setting `Authorization: Bearer {{apiKey}}` will return 401 Unauthorized. The value must be `Basic ` followed by the Base64-encoded `apiKey:X` string, not the raw API key itself.

1// API Group configuration reference:
2// Name:     Teamwork
3// Base URL: https://yourcompany.teamwork.com
4//
5// Headers:
6// Authorization: Basic {{base64Auth}}
7//
8// Group Variable:
9// base64Auth (String) — default: FFAppConstants.teamworkBase64Auth
10

Inside the Teamwork API Group, click '+ Add API Call'. Name it 'Get Projects'. Set the method to GET and the endpoint to `/projects.json`. Notice the `.json` suffix — this is mandatory for every Teamwork endpoint. Omitting it returns a 406 or HTML/XML response that FlutterFlow cannot parse, which will appear as an empty response or a 'JSON parse error' in the Response tab. You can optionally add query parameters to filter the results. Common ones for a project health dashboard include `status=active` (to exclude archived projects) and `orderby=lastupdated` (to sort by most recent activity). Add these as API Call Variables (type String) and append them to the endpoint like `/projects.json?status={{status}}&orderby={{orderby}}`. Click 'Response & Test' and run the call. If your credentials are correct, you will see a JSON response like `{ "STATUS": "OK", "projects": [ ... ] }`. The project data lives inside the `projects` key. Click 'Generate from Response' to create JSON Paths such as `$.projects[*].id`, `$.projects[*].name`, `$.projects[*].status`, and `$.projects[*].lastChangedOn`. Common JSON Paths you will use in your ListView: - `$.projects[*].id` — numeric project ID for drilling into tasks - `$.projects[*].name` — project display name - `$.projects[*].status` — 'active', 'archived', 'completed' - `$.projects[*].startDate` and `$.projects[*].endDate` - `$.projects[*].company.name` — client company name If you see a 401 response, double-check that your Authorization header value starts with 'Basic ' (with a space) followed by the Base64 string — missing the space is the second most common setup mistake after forgetting the `.json` suffix.

1// API Call reference:
2// Name:     Get Projects
3// Method:   GET
4// Endpoint: /projects.json
5//
6// Optional query params (add as Variables):
7// ?status=active&orderby=lastupdated
8//
9// Key JSON Paths from response:
10// $.projects[*].id
11// $.projects[*].name
12// $.projects[*].status
13// $.projects[*].company.name
14// $.projects[*].endDate
15// $.STATUS  — check this equals 'OK'
16

Add a second API Call inside the Teamwork group. Name it 'Get Tasks'. Set the method to GET and add a variable named `projectId` (type Integer). Set the endpoint to `/projects/{{projectId}}/tasks.json`. This returns all tasks for the given project. Common optional query parameters for tasks: `filter=incomplete` (show only open tasks), `orderby=duedate`, and `includeCompletedSubtasks=false`. Add these as additional Variables if you want the detail screen to filter tasks by status. Key JSON Paths from the tasks response (Teamwork wraps tasks under `todo-items`): - `$['todo-items'][*].id` - `$['todo-items'][*].content` — task name - `$['todo-items'][*].due-date` — in YYYYMMDD format - `$['todo-items'][*].completed` - `$['todo-items'][*]responsible-party-summary` — assignee name Add a third API Call named 'Get Milestones'. Endpoint: `/projects/{{projectId}}/milestones.json`. Key paths from the response: `$.milestones[*].title`, `$.milestones[*].deadline`, `$.milestones[*].status`. For the project detail screen in FlutterFlow: create a new Page called 'Project Detail'. Pass the project ID as a Route Parameter from the projects ListView (tap action → Navigate → Project Detail → set projectId parameter to `$.projects[*].id`). On the detail page, add two ListViews: one for tasks (Backend Query = Get Tasks, pass projectId from Route Parameter) and one for milestones (Backend Query = Get Milestones, same projectId). Add a Tab Bar widget at the top so users can switch between the tasks view and milestones view without scrolling past both lists. For the time-log summary, add a fourth API Call: 'Get Time Totals', endpoint `/projects/{{projectId}}/time/total.json`. This returns a single object with `timeTotals.hoursLogged` and `timeTotals.minutesLogged` — bind these to summary Text widgets at the top of the detail screen.

1// Get Tasks:
2// Method:   GET
3// Endpoint: /projects/{{projectId}}/tasks.json
4// Variable: projectId (Integer)
5//
6// Key JSON Paths (note hyphenated keys need bracket notation in paths):
7// $['todo-items'][*].id
8// $['todo-items'][*].content
9// $['todo-items'][*]['due-date']
10// $['todo-items'][*].completed
11//
12// Get Milestones:
13// Method:   GET
14// Endpoint: /projects/{{projectId}}/milestones.json
15// $.milestones[*].title
16// $.milestones[*].deadline
17// $.milestones[*].status
18

Teamwork's rate limits vary by plan — typically between 150 and 300 requests per minute. A multi-client agency app can trip this limit quickly if you fan out several API calls simultaneously. For example, if your dashboard loads 20 client projects and fires a separate tasks call for each one on load, that is 21 requests in a single screen render — well above the per-minute budget if users navigate quickly. The most effective mitigation is to separate what loads eagerly versus on demand. Load the project list (`/projects.json`) eagerly when the screen opens and cache the result in App State (a FlutterFlow Page State or App State variable of type list). Do not load tasks or milestones until the user taps a specific project. This reduces page-load API calls from N+1 to just 1. For the project list itself, add a simple time-based cache: store the projects list in App State along with a `projectsLoadedAt` timestamp. When the screen loads, check whether `projectsLoadedAt` is less than 5 minutes ago — if it is, render from App State without calling the API. If it is older, refresh from the API and update both App State variables. This pattern is fully achievable using FlutterFlow's Conditional Actions and Update App State action without any custom Dart code. For write operations (creating tasks, logging time), route those calls through a Firebase Cloud Function rather than calling Teamwork directly. This protects your API key from being visible in the compiled app and lets you add extra validation or rate limiting at the Cloud Function level if needed.