How to Pass Parameters Between Retool Components

1// Text Input Default Value — pre-fill from selected table row:
2{{ table1.selectedRow.data.customer_name }}
3
4// SQL query WHERE clause — filter by dropdown:
5SELECT * FROM orders WHERE customer_id = {{ customerSelect.value }}
6
7// Button Disabled property — prevent action on empty input:
8{{ searchInput.value.trim() === '' }}
9
10// Text component content — display form summary:
11{{ `Submitting: ${nameInput.value} (${emailInput.value})` }}
12
13// Number component value — display running total:
14{{ (quantityInput.value || 0) * (priceInput.value || 0) }}

1// customerSelect Change event handler:
2// Event: Change → Trigger query → getCustomerDetails
3
4// SQL query: getCustomerDetails
5SELECT id, full_name, email, phone, address
6FROM customers
7WHERE id = {{ customerSelect.value }}
8LIMIT 1;
9
10// phoneText component content:
11{{ getCustomerDetails.data[0]?.phone || 'Select a customer' }}
12
13// emailText component content:
14{{ getCustomerDetails.data[0]?.email || '' }}

1// Event handler on a Table row click (Inspector → Interaction):
2// Action: Open URL
3// URL: /retool/apps/my-app/edit-customer?id={{ table1.selectedRow.data.id }}&name={{ table1.selectedRow.data.full_name }}
4
5// OR in a JS Query:
6const customerId = table1.selectedRow.data.id;
7const customerName = table1.selectedRow.data.full_name;
8utils.openUrl(
9  `/retool/apps/my-app/edit-customer?id=${customerId}&name=${encodeURIComponent(customerName)}`,
10  { newTab: false }
11);
12
13// On the destination page — read URL params:
14// Text Input Default Value:
15{{ url.searchParams.id }}
16
17// Text component showing customer name:
18{{ url.searchParams.name }}
19
20// Query parameter using URL param:
21SELECT * FROM customers WHERE id = {{ url.searchParams.id }}

1// Temporary State: selectedCustomerId (default: null)
2// Temporary State: cartItems (default: [])
3
4// JS Query: selectCustomer (triggered from table row click)
5await selectedCustomerId.setValue(table1.selectedRow.data.id);
6
7// JS Query: addToCart (triggered from Add button click)
8const current = cartItems.value;
9const item = productsTable.selectedRow.data;
10await cartItems.setValue([...current, item]);
11
12// SQL query using state variable:
13SELECT * FROM orders WHERE customer_id = {{ selectedCustomerId.value }}
14
15// Cart count Text component:
16{{ cartItems.value.length }} items
17
18// Cart total Text component:
19{{ cartItems.value.reduce((sum, item) => sum + item.price, 0) }}

1// In the consuming app — Module component Inspector inputs:
2// userId: {{ table1.selectedRow.data.id }}
3// apiKey: {{ secretInput.value }}
4// dateRange: {{ dateRangePicker1.value }}
5
6// Inside the Module (how it reads inputs):
7// SQL query parameter: {{ module.inputs.userId }}
8// JS Query: const userId = module.inputs.userId;
9
10// Module output — read from the consuming app:
11{{ moduleComponent1.outputs.totalRevenue }}
12{{ moduleComponent1.outputs.recordCount }}

1// Decision guide:
2
3// Use direct reference when:
4// - Component B shows data from component A's current value
5// - The relationship is 1-to-1 and synchronous
6// Example: textInput1.value → SQL WHERE clause
7
8// Use URL parameter when:
9// - Navigating between pages and need to carry context
10// - Deep linking from external systems
11// Example: /app/details?orderId=42
12
13// Use Temporary State when:
14// - Multiple components contribute to a shared value
15// - Value needs to persist across user actions (cart, selection list)
16// - Complex computation result needs to be stored
17// Example: selectedItems[] accumulates across multiple clicks
18
19// Use module inputs/outputs when:
20// - Building a reusable component for multiple apps
21// - Encapsulating a complex sub-feature