How to Use Custom Scripts in Retool

1// JS Query: computeDashboardStats
2const orders = getOrders.data || [];
3const customers = getCustomers.data || [];
4
5// Compute statistics
6const totalRevenue = orders.reduce((sum, o) => sum + (o.total_amount || 0), 0);
7const avgOrderValue = orders.length > 0 ? totalRevenue / orders.length : 0;
8const pendingCount = orders.filter(o => o.status === 'pending').length;
9const activeCustomers = customers.filter(c => c.is_active).length;
10
11// Return an object that components can bind to
12return {
13  totalRevenue: totalRevenue.toFixed(2),
14  avgOrderValue: avgOrderValue.toFixed(2),
15  pendingOrders: pendingCount,
16  activeCustomers
17};
18
19// In Statistic components:
20// Value: {{ computeDashboardStats.data.totalRevenue }}
21// Value: {{ computeDashboardStats.data.pendingOrders }}

1// JS Query: refreshAfterUpdate
2
3// Step 1: Run the update mutation
4await updateCustomer.trigger();
5
6// Step 2: After update completes, refresh the table data
7await getCustomers.trigger();
8
9// Step 3: Show success notification
10utils.showNotification({
11  title: 'Customer updated',
12  notificationType: 'success'
13});
14
15// Step 4: Close the modal
16await modal1.close();
17
18// IMPORTANT: Without await, the next line runs before trigger() finishes
19// WRONG: updateCustomer.trigger(); // Fire and forget — race condition!
20// CORRECT: await updateCustomer.trigger();

1// SQL Query: 'updateOrderStatus' (defined separately)
2// SQL body: UPDATE orders SET status = {{ newStatus }} WHERE id = {{ orderId }}
3
4// JS Query: bulkUpdateOrders
5const selectedRows = table1.selectedRows; // Multiple selected rows
6
7if (!selectedRows || selectedRows.length === 0) {
8  utils.showNotification({ title: 'Select rows to update', notificationType: 'warning' });
9  return;
10}
11
12const targetStatus = statusDropdown.value;
13let updatedCount = 0;
14
15for (const row of selectedRows) {
16  await updateOrderStatus.trigger({
17    additionalScope: {
18      orderId: row.id,
19      newStatus: targetStatus
20    }
21  });
22  updatedCount++;
23  console.log(`Updated order ${row.id} to ${targetStatus}`);
24}
25
26utils.showNotification({
27  title: `${updatedCount} orders updated`,
28  notificationType: 'success'
29});
30
31await getOrders.trigger();

1// SEQUENTIAL — slow (adds up durations)
2await getCustomers.trigger();
3await getOrders.trigger();
4await getProducts.trigger();
5
6// PARALLEL — fast (runs simultaneously)
7await Promise.all([
8  getCustomers.trigger(),
9  getOrders.trigger(),
10  getProducts.trigger()
11]);
12
13// After all three complete, data is available
14console.log('Customers:', getCustomers.data?.length);
15console.log('Orders:', getOrders.data?.length);
16console.log('Products:', getProducts.data?.length);

1// JS Query: processImport
2let processedCount = 0;
3const rows = parseCSV.data; // Parsed CSV rows
4
5try {
6  for (const row of rows) {
7    // Validate each row before inserting
8    if (!row.email || !row.name) {
9      console.warn('Skipping invalid row:', row);
10      continue;
11    }
12    
13    await insertUser.trigger({
14      additionalScope: { email: row.email, name: row.name }
15    });
16    processedCount++;
17  }
18  
19  utils.showNotification({
20    title: `Import complete: ${processedCount} rows`,
21    notificationType: 'success'
22  });
23  
24  await getUsers.trigger(); // Refresh table
25  
26} catch (err) {
27  utils.showNotification({
28    title: `Import failed after ${processedCount} rows`,
29    description: err.message,
30    notificationType: 'error'
31  });
32  console.error('Import error:', err);
33}