retool

// Retool connects to databases, APIs, and services natively:
// - PostgreSQL, MySQL, MongoDB, Redis, BigQuery, Snowflake
// - REST API, GraphQL, gRPC
// - Stripe, Twilio, SendGrid, Slack, Google Sheets
// - S3, Firebase, Supabase

// SQL Query (runs server-side, results available as {{ query1.data }})
SELECT
  u.id, u.email, u.name, u.plan, u.created_at,
  COUNT(o.id) as order_count,
  SUM(o.amount) as total_spent
FROM users u
LEFT JOIN orders o ON o.user_id = u.id
WHERE u.plan = {{ planFilter.value }}
  AND u.created_at >= {{ dateRange.start }}
GROUP BY u.id
ORDER BY total_spent DESC
LIMIT {{ pagination.pageSize }}
OFFSET {{ pagination.offset }}

// REST API query
// Method: POST
// URL: https://api.stripe.com/v1/refunds
// Headers: Authorization: Bearer {{ STRIPE_KEY }}
// Body: { "charge": {{ table1.selectedRow.stripe_charge_id }}, "amount": {{ refundAmount.value * 100 }} }

// Table component displays query results
// Columns auto-detect from query. Customize:
table1.columns = [
  { key: "email", label: "Email", type: "link" },
  { key: "plan", label: "Plan", type: "tag",
    colors: { free: "gray", pro: "blue", enterprise: "purple" } },
  { key: "total_spent", label: "Revenue", type: "currency" },
  { key: "created_at", label: "Joined", type: "date" },
];

// Button click handler (JavaScript)
// Runs when "Process Refund" button is clicked
async function handleRefund() {
  const row = table1.selectedRow;
  if (!row) return utils.showNotification({ title: "Select a row first" });

  const confirmed = await utils.openConfirmDialog({
    title: "Process Refund",
    body: `Refund $${refundAmount.value} to ${row.email}?`,
  });
  if (!confirmed) return;

  await refundQuery.trigger();  // Runs the Stripe API query

  if (refundQuery.error) {
    utils.showNotification({ title: "Refund Failed", description: refundQuery.error });
  } else {
    utils.showNotification({ title: "Refund Processed", type: "success" });
    await usersQuery.trigger();  // Refresh the table
  }
}

// Conditional visibility
// Show refund panel only for paid users
refundPanel.hidden = {{ table1.selectedRow?.plan === 'free' }}

// Dynamic form validation
submitButton.disabled = {{
  !emailInput.value ||
  !emailInput.value.includes('@') ||
  amountInput.value <= 0
}}

// Retool supports custom React components for advanced use cases
const CustomChart = ({ data, height }) => {
  return (
    <ResponsiveContainer width="100%" height={height}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="revenue" fill="#4f46e5" />
        <Bar dataKey="costs" fill="#ef4444" />
      </BarChart>
    </ResponsiveContainer>
  );
};

// Retool Workflows — serverless backend logic
// Trigger: webhook, schedule, or manual

// Step 1: Query database for expiring trials
const expiringTrials = await query("SELECT * FROM users WHERE trial_ends_at < NOW() + INTERVAL '3 days' AND plan = 'trial'");

// Step 2: For each user, send reminder email
for (const user of expiringTrials) {
  await sendgrid.send({
    to: user.email,
    template_id: "trial-expiring",
    data: { name: user.name, days_left: daysUntil(user.trial_ends_at) },
  });
}

// Step 3: Log results
await query("INSERT INTO email_logs (type, count, sent_at) VALUES ('trial_expiring', $1, NOW())", [expiringTrials.length]);

return { sent: expiringTrials.length };