How to Integrate Retool with Trello

Trello authentication requires two credentials: an API key that identifies your application and a user token that authorizes access to your specific Trello account. Generating both takes about 5 minutes. In a browser, navigate to https://trello.com/power-ups/admin. Log in with your Trello account if not already logged in. Click New (or Create New) to create a new Power-Up (this is Trello's term for an application with API access). Fill in the Power-Up name (e.g., Retool Integration), workspace (select any of your workspaces), iframe connector URL (can be any placeholder like https://example.com), and email. Click Create. The Power-Up detail page shows your API key — copy it. Now generate a user token. In the same Power-Up admin page, click the API Key link to go to the API key page (https://trello.com/app-key). On that page, click the Token link under the API key. A Trello authorization page asks you to allow your application to access your Trello account. Click Allow. Trello displays a 64-character token — copy it immediately. This token authorizes API access on behalf of your Trello account. Note the board IDs for boards you want to query: open a Trello board, click Share in the top right, and the board URL contains the board ID as the last segment (e.g., in trello.com/b/BOARDID/board-name, the BOARDID is what you need). Alternatively, the /members/me/boards API endpoint returns all boards your account can access along with their IDs, which you can use to build a dynamic board selector.

In Retool, navigate to the Resources tab and click Add Resource. Select REST API from the list. Name the resource Trello API. In the Base URL field, enter https://api.trello.com/1 — this is the Trello API v1 base URL. Trello's authentication uses URL parameters rather than headers: the API key and token are appended as query parameters to every request. In the URL Parameters section (not Headers), add two parameters that will be sent with every request. First: name key, value {{ config.TRELLO_API_KEY }}. Second: name token, value {{ config.TRELLO_USER_TOKEN }}. Create the configuration variables: navigate to Settings → Configuration Variables. Add TRELLO_API_KEY with your 32-character API key and mark it as secret. Add TRELLO_USER_TOKEN with your 64-character user token and mark it as secret. Storing both as configuration variables prevents them from appearing in browser DevTools network requests even though they are URL parameters, since Retool's server-side proxy is what actually makes the HTTP calls. Click Save on the Trello API Resource. Test the connection by creating a GET query to /members/me/boards — this returns all Trello boards accessible to your account and is a reliable authentication health check. Each board object in the response includes an id, name, and url property.

Trello's data is hierarchical: boards contain lists, lists contain cards. To build a cross-board view, you need to query each level. Create a query to fetch all boards your account can access: Set Method to GET, Path to /members/me/boards, and add a fields URL parameter with value name,id,url,desc to limit the response to just the fields you need. This returns an array of board objects. Store the board list in a state variable or use it to populate a multi-select component for board filtering. Next, create a query to fetch all cards for a selected board: Path /boards/{{ boardsSelect.value }}/cards, with fields parameter value name,id,idList,idBoard,due,labels,idMembers,desc,url,pos. Add include URL parameter with value card_members to embed member information. The response is a flat array of all cards on the board regardless of which list they are in — each card includes an idList field to identify its list. Create a third query to fetch lists for the same board: Path /boards/{{ boardsSelect.value }}/lists with fields name,id,pos. Use the lists data to build a lookup map in a JavaScript transformer, mapping list IDs to list names. Join the card data with list names and member names in a JavaScript query to produce a display-ready dataset without needing to make individual per-card API calls.

1// JavaScript query: join cards with list names and format for display
2// Assumes: getCards.data = cards array, getLists.data = lists array
3const cards = getCards.data || [];
4const lists = getLists.data || [];
5const boards = getBoards.data || [];
6
7// Build lookup maps
8const listMap = {};
9lists.forEach(l => { listMap[l.id] = l.name; });
10
11const boardMap = {};
12boards.forEach(b => { boardMap[b.id] = b.name; });
13
14const today = new Date().toISOString().split('T')[0];
15
16return cards.map(card => {
17  const dueDate = card.due ? card.due.substring(0, 10) : null;
18  const isOverdue = dueDate && dueDate < today;
19
20  const labels = card.labels?.map(l => l.name || l.color).filter(Boolean) || [];
21  const members = card.idMembers || [];
22
23  return {
24    id: card.id,
25    name: card.name,
26    list_name: listMap[card.idList] || 'Unknown List',
27    list_id: card.idList,
28    board_name: boardMap[card.idBoard] || 'Unknown Board',
29    board_id: card.idBoard,
30    due_date: dueDate || '',
31    is_overdue: isOverdue,
32    due_display: dueDate || 'No due date',
33    labels: labels.join(', '),
34    member_count: members.length,
35    url: card.url || '',
36    description: card.desc || ''
37  };
38}).sort((a, b) => {
39  // Overdue cards first, then by due date
40  if (a.is_overdue && !b.is_overdue) return -1;
41  if (!a.is_overdue && b.is_overdue) return 1;
42  if (a.due_date && b.due_date) return a.due_date.localeCompare(b.due_date);
43  return 0;
44});

With card data available, build the management dashboard. First, add a multi-select Listbox or Select component for board selection — bind its options to {{ getBoards.data.map(b => ({label: b.name, value: b.id})) }}. Wire the board Select to the cards and lists queries so they re-run when the board selection changes. Drag a Table component onto the canvas and bind it to the joined card transformer output. Configure columns: Card Name, Board, List, Due Date, Labels, and Members. Hide technical fields (id, list_id, board_id, url) from display but keep them available for action buttons. Enable column sorting on all fields. Add conditional row formatting: red background where is_overdue is true. Add Table action buttons (displayed on row hover): a Move Card button that opens a Modal containing a Select dropdown populated with available lists from getLists.data. When the modal confirms, fire a PUT query to /cards/{{ selectedCard.id }} with Body { idList: {{ moveListSelect.value }} } to move the card to the new list. Add a second action button View in Trello that opens {{ currentRow.url }} in a new tab, linking directly to the card in Trello for editing. Add filter dropdowns at the top for list name and label filtering — implement these as client-side filters in a JavaScript query wrapping the joined card data rather than separate API calls. Add Stat components showing: Total Cards, Overdue Cards, and Due Today count.

1// PUT query to move a card to a different list
2// Method: PUT, Path: /cards/{{ cardsTable.selectedRow.id }}
3// Body type: JSON
4{
5  "idList": "{{ moveListSelect.value }}",
6  "pos": "bottom"
7}
8
9// PUT query to update card due date
10// Method: PUT, Path: /cards/{{ cardsTable.selectedRow.id }}
11// Body type: JSON
12{
13  "due": "{{ formatDate(newDueDatePicker.value, 'YYYY-MM-DDTHH:mm:ssZ') }}"
14}
15
16// POST query to add a comment to a card
17// Method: POST, Path: /cards/{{ cardsTable.selectedRow.id }}/actions/comments
18// Body type: JSON
19{
20  "text": "{{ commentInput.value }}"
21}

Extend the dashboard with a multi-board overview that fetches cards from multiple boards simultaneously and combines them. Create a JavaScript query that triggers parallel fetches for each selected board using Promise.all() referencing multiple board-specific card queries, or use Retool's built-in parallel query execution by selecting multiple boards in a Retool Listbox and triggering an array of queries. Combine the results in a transformer that merges all board card arrays into one unified dataset with board name attached to each card. Drag a Bar Chart to show card count by list across all boards, giving a pipeline fill view. Add a member workload section: from the combined card dataset, aggregate cards by member ID using a JavaScript reduce. Fetch member details from /boards/{id}/members to get member names. Display a Bar Chart of card count per member to identify workload imbalance. Add a pivot Table showing member names as rows and list names as columns with card counts at the intersection — this gives a workload-by-stage view. For large-scale project management tools managing multiple workspaces, dozens of boards, and custom reporting in Retool, RapidDev's team can architect comprehensive project operations platforms.

1// JavaScript query: aggregate cards by member for workload chart
2const allCards = joinedCards.data || [];
3const members = getMembers.data || [];
4
5// Build member lookup
6const memberMap = {};
7members.forEach(m => {
8  memberMap[m.id] = m.fullName || m.username;
9});
10
11// Count cards per member
12const memberCounts = {};
13allCards.forEach(card => {
14  const cardMembers = card.idMembers || [];
15  if (cardMembers.length === 0) {
16    memberCounts['unassigned'] = (memberCounts['unassigned'] || 0) + 1;
17  } else {
18    cardMembers.forEach(memberId => {
19      const name = memberMap[memberId] || memberId;
20      memberCounts[name] = (memberCounts[name] || 0) + 1;
21    });
22  }
23});
24
25return Object.entries(memberCounts)
26  .map(([name, count]) => ({ member_name: name, card_count: count }))
27  .sort((a, b) => b.card_count - a.card_count);