How to Integrate Retool with Asana

Go to asana.com and sign in. Click your profile picture in the top right, select 'My Profile Settings', then click the 'Apps' tab. Scroll down to 'Developer Apps' and click 'Manage Developer Apps'. Click 'New Access Token', give it a descriptive name like 'Retool Dashboard', and click 'Create Token'. Asana displays the access token once — copy it immediately and store it in a password manager. This token authenticates as you and has access to everything your Asana user account can see: all workspaces, teams, projects, and tasks you're a member of or have been granted access to. For team deployments where multiple Retool users need access to shared Asana projects, consider using Asana's OAuth 2.0 app authentication instead. This requires creating an Asana developer application at asana.com/0/developer-console, configuring OAuth credentials, and setting up per-user authentication in Retool. For most internal tool use cases, a shared service account token (if permitted by your Asana admin) is simpler and more practical. Note your workspace GID as well — you'll need it for queries that require workspace context. To find it, open any Asana task URL: the number appearing as the first segment after 'app.asana.com/0/' is your workspace GID.

In Retool, go to the Resources tab and click 'Create a resource'. Select 'REST API'. Name it 'Asana API'. Set the base URL to https://app.asana.com/api/1.0. This is Asana's stable API v1 base URL — all query paths are relative to this. For authentication, select 'Bearer Token'. Paste your Asana personal access token in the token field. Retool will send Authorization: Bearer {token} with every request. Add a custom header to help Asana format responses correctly. Click 'Add header' and set the name to asana-enable with the value new_user_task_lists,new_project_templates. This enables newer API behaviors for the Asana API and prevents deprecation warnings in responses. Also add Accept: application/json to ensure JSON responses. Save the resource. Since personal access tokens don't expire, there's no OAuth flow to complete — the resource is ready to use immediately. For team environments, store the Asana token in a Retool configuration variable (Settings → Configuration Variables, mark as secret) and reference it in the Bearer Token field as {{ retoolContext.configVars.ASANA_TOKEN }}. This lets you rotate the token without updating every Resource.

Start by querying Asana's top-level resources to understand what's available. Create a query named 'getWorkspaces' with GET method and path /workspaces. This returns all workspaces your token can access. Run it and note the GID of the workspace you want to query — copy the GID value for use in subsequent queries. Next, create a query 'getProjects' with GET method and path /projects. Add URL parameters: workspace (set to your workspace GID), archived (set to false to exclude archived projects), and opt_fields (set to gid,name,color,current_status,due_on,owner,owner.name,permalink_url). The opt_fields parameter is critical for Asana — without it, most queries return only GID and name, and additional fields require a separate request per object. Asana's API returns paginated results using a cursor-based pagination system. The response body has a 'data' array and optionally a 'next_page' object with an 'offset' cursor string. Add a limit parameter set to 100 (Asana's maximum) and implement pagination by passing the offset cursor in subsequent requests. Create a third query 'getProjectTasks' with GET method and path /tasks. Add URL parameters: project (set to {{ projectsTable.selectedRow?.gid || '' }}), completed_since (set to 'now' to get incomplete tasks or a specific date string), and opt_fields (set to gid,name,assignee,assignee.name,due_on,completed,notes,custom_fields,memberships,tags,permalink_url). Run this query after selecting a project row.

1// JavaScript transformer for Asana tasks response
2const tasks = data.data || [];
3
4return tasks.map(task => {
5  // Extract custom field values (custom fields vary by project)
6  const customFields = {};
7  (task.custom_fields || []).forEach(cf => {
8    const value = cf.type === 'enum' ? cf.enum_value?.name
9      : cf.type === 'number' ? cf.number_value
10      : cf.type === 'text' ? cf.text_value
11      : cf.type === 'date' ? cf.date_value
12      : cf.display_value;
13    customFields[cf.name] = value || '';
14  });
15  
16  const dueDate = task.due_on ? new Date(task.due_on) : null;
17  const today = new Date();
18  const isOverdue = dueDate && !task.completed && dueDate < today;
19  const daysUntilDue = dueDate
20    ? Math.ceil((dueDate - today) / (1000 * 60 * 60 * 24))
21    : null;
22
23  return {
24    gid: task.gid,
25    name: task.name,
26    assignee: task.assignee?.name || 'Unassigned',
27    dueOn: task.due_on || '',
28    daysUntilDue,
29    isOverdue,
30    completed: task.completed,
31    priority: customFields['Priority'] || '',
32    status: customFields['Status'] || '',
33    notes: task.notes ? task.notes.substring(0, 100) + (task.notes.length > 100 ? '...' : '') : '',
34    url: task.permalink_url
35  };
36});

Build a multi-project task dashboard. The challenge is that Asana's task endpoint queries one project at a time — to build a cross-project view, you need to query multiple projects and aggregate results using a JavaScript query. Create a JavaScript query named 'getAllProjectTasks'. In the query body, use Promise.all() to query tasks from multiple project GIDs simultaneously, then merge and sort the results. Reference the projects query to get all project GIDs dynamically. For the UI, add a Select component at the top for filtering by project, an Assignee Select filter, a Date Range picker for due date filtering, and a Toggle for 'Show overdue only'. Connect these filters to your task transformer using {{ }} expressions. Add a Table component showing the transformed task data. Configure columns: name (with a link to task.url), project (if showing cross-project data), assignee (as a Tag), dueOn (formatted), isOverdue (as conditional row styling — red background for overdue tasks), priority, and status. Above the table, add three Statistic components: Total Tasks, Overdue Tasks (tasks where isOverdue is true), and Tasks Due This Week. These give the executive-level summary at a glance. For charts, add a Bar Chart showing task count by assignee, and a second chart showing tasks by due date distribution to visualize workload concentration.

1// JavaScript query to aggregate tasks across multiple projects
2const projectGids = getProjects.data?.data?.map(p => p.gid) || [];
3
4if (projectGids.length === 0) return [];
5
6// Query tasks for each project in parallel (up to 10 projects)
7const projectsToQuery = projectGids.slice(0, 10);
8
9const results = await Promise.all(
10  projectsToQuery.map(projectGid =>
11    getProjectTasks.trigger({ additionalScope: { overrideProjectGid: projectGid } })
12      .then(result => (result.data || []).map(task => ({
13        ...task,
14        projectGid,
15        projectName: getProjects.data?.data?.find(p => p.gid === projectGid)?.name || ''
16      })))
17      .catch(() => []) // Handle individual project failures gracefully
18  )
19);
20
21// Flatten all project results into one array and sort by due date
22return results.flat().sort((a, b) => {
23  if (!a.due_on) return 1;
24  if (!b.due_on) return -1;
25  return new Date(a.due_on) - new Date(b.due_on);
26});

Enable the Retool dashboard to create and update Asana tasks. Create a query named 'createTask' with POST method and path /tasks. The request body must include the workspace or project GID, task name, and optional properties. Build a Retool Form component for task creation. Add fields: Task Name (TextInput, required), Project (Select, populated from getProjects), Section (Select, populated based on project selection), Assignee (Select, populated from team members), Due Date (DatePicker), Priority (Select for custom field), and Description (TextArea). Connect the Form's submit button to the createTask query. For task updates, add inline editing to the tasks Table component: enable 'Save changes' mode and create an 'updateTask' query with PUT method and path /tasks/{{ tasksTable.selectedRow?.gid }}. The update body only needs the changed fields — Asana supports partial updates. For marking tasks complete, add a 'Mark Complete' action button in the table. This triggers a PUT to /tasks/{gid} with body { "completed": true }. Add a confirmation modal since completing tasks in Asana notifies assignees and followers. For complex Asana integrations with portfolio management, custom fields, rules automation, and cross-workspace reporting, RapidDev's team can help build the complete operations system.

1// POST /tasks — Create a new Asana task
2{
3  "data": {
4    "name": "{{ taskNameInput.value }}",
5    "notes": "{{ taskDescriptionInput.value }}",
6    "assignee": "{{ assigneeSelect.value || null }}",
7    "due_on": "{{ taskDueDatePicker.value || null }}",
8    "projects": ["{{ projectSelect.value }}"],
9    "memberships": [{
10      "project": "{{ projectSelect.value }}",
11      "section": "{{ sectionSelect.value || null }}"
12    }],
13    "custom_fields": {
14      "{{ priorityFieldGid }}": "{{ prioritySelect.value }}"
15    }
16  }
17}