How to Integrate Retool with ShipBob

Before configuring Retool, you need a ShipBob API token. Log into your ShipBob merchant dashboard at app.shipbob.com. Navigate to Settings in the left sidebar, then select API Tokens from the settings menu. Click the Generate New Token button. Give the token a descriptive name like 'Retool Integration' so you can identify and revoke it later if needed. ShipBob displays the token value once — copy it immediately and store it in a secure location such as a password manager or your team's secrets vault. You will not be able to view the full token again after leaving this page. ShipBob Personal Access Tokens are scoped to your merchant account and have access to all API endpoints, including read and write operations for orders, inventory, products, and receiving. There is currently no granular scope selection — the token grants full API access. For this reason, treat the token as a high-privilege credential: do not commit it to source control, do not share it in plaintext, and do not embed it in any client-side code. In Retool, you will store it as a configuration variable marked as secret so it is never exposed to the browser. If you are running Retool self-hosted, you can also store the token as a RETOOL_EXPOSED_ environment variable in your infrastructure configuration, but the configuration variable approach works on both Cloud and self-hosted and is easier to rotate without requiring a container restart.

Open Retool and navigate to the Resources tab in the left sidebar of the home page (or click Resources in the top navigation bar). Click the Add Resource button in the top-right corner. In the resource type selector, scroll to find REST API or type it in the search bar, then click REST API. In the resource configuration form, fill in the following fields: - Name: Enter a descriptive name such as 'ShipBob API' or 'ShipBob Production'. This name appears in the query editor's Resource dropdown. - Base URL: Enter https://api.shipbob.com/1.0 — this is ShipBob's versioned API base URL. All query paths you write later will be appended to this base. - Authentication: In the Authentication dropdown, select Bearer Token. In the Bearer Token field, do not paste your actual token directly here. Instead, reference a configuration variable: enter {{ environment.variables.SHIPBOB_API_TOKEN }} in the Bearer Token field. Before saving, go to Settings → Configuration Variables in your Retool account (accessible from the top-right user menu or sidebar). Click Add Variable, enter SHIPBOB_API_TOKEN as the variable name, paste your ShipBob token as the value, and check the Mark as Secret checkbox. Secret configuration variables are never sent to the browser — they resolve only in server-side resource configurations and Workflows. Return to the resource configuration and click Save Changes. Retool stores the resource with the token securely referenced via the configuration variable. To verify the connection, you can create a test query pointing to /orders with a GET request and check that you receive a valid JSON response.

Open a Retool app (or create a new one). In the bottom Code panel, click the + New button to create a new query. Select your ShipBob API resource from the Resource dropdown. The query editor shows fields for Method, URL path, Params, Headers, and Body. For a basic orders query, configure: - Method: GET - URL: /orders - Params: Add query parameters for filtering and pagination. ShipBob supports page (integer, starting at 1), limit (integer, max 250), StartDate (ISO 8601 datetime), EndDate (ISO 8601 datetime), Status (e.g., 'Processing', 'Completed', 'Exception'), and ChannelId. Set Trigger to Automatically run when inputs change and enable Run this query on page load so orders load immediately when the app opens. In the Advanced tab of the query, add a Transformer to reshape the response: For inventory queries, create a second query: - Method: GET - URL: /inventory - Params: Add Page and Limit parameters. The inventory endpoint returns product inventory objects with fields for product_id, name, total_fulfillable_quantity, total_onhand_quantity, total_committed_quantity, and per-warehouse breakdown under the fulfillment_center_quantities array. Bind the orders query result to a Table component by dragging a Table from the Component panel onto the canvas and setting its Data property to {{ ordersQuery.data }}. Configure columns to show the fields most relevant to your operations — ShipBob order objects include id, status, created_date, estimated_fulfillment_date, shipping_method, and a nested recipient object with name and address. Use column formatters to display dates in a readable format and status values as colored badges.

1// JavaScript transformer for ShipBob orders query
2// Add as query transformer in the Advanced tab
3const orders = data;
4return orders.map(order => ({
5  id: order.id,
6  reference_id: order.reference_id || 'N/A',
7  status: order.status,
8  created_date: new Date(order.created_date).toLocaleDateString(),
9  customer_name: order.recipient ? order.recipient.name : 'N/A',
10  customer_email: order.recipient ? order.recipient.email : 'N/A',
11  shipping_method: order.shipping_method || 'Standard',
12  est_fulfillment_date: order.estimated_fulfillment_date
13    ? new Date(order.estimated_fulfillment_date).toLocaleDateString()
14    : 'Pending',
15  warehouse: order.fulfillment_center ? order.fulfillment_center.name : 'Unassigned',
16  items_count: order.products ? order.products.length : 0
17}));

ShipBob's inventory API returns a fulfillment_center_quantities array on each inventory item — a list of objects showing how much stock is available at each individual warehouse. To display this in Retool's Table component in a useful way, you need to transform the nested data structure into a flat format. Create a JavaScript transformer (click the Transformer option in the Code panel sidebar, or add it inline on the inventory query in the Advanced tab). The transformer receives the raw API response as data and should return a flat array of rows, one per SKU: After creating the flattened inventory dataset, bind it to a Table component. Configure the table columns to show: Product Name, SKU, Total Available, Total On Hand, Total Committed, and one column per warehouse (you can generate these dynamically from your transformer output). Add conditional column styling — for example, set the 'Total Available' column to show a red badge when the value is below a configurable threshold. To make the safety stock threshold configurable, add a Number Input component to the app canvas labeled 'Safety Stock Threshold'. In the Table's column configuration for 'Total Available', add a Row Color rule: when the value in that column is less than {{ safetyStockInput.value }}, apply a red background color (#FEE2E2) and red text (#991B1B). Below the inventory table, add a Chart component to visualize stock distribution. Set the Chart type to Bar and configure the series to show Total Fulfillable Quantity by warehouse across your top products. This gives operations managers an at-a-glance view of where inventory is concentrated.

1// JavaScript transformer for ShipBob inventory query
2// Flattens warehouse-level quantities into a table-ready structure
3const inventory = data;
4return inventory.map(item => {
5  const warehouseData = {};
6  if (item.fulfillment_center_quantities) {
7    item.fulfillment_center_quantities.forEach(fc => {
8      warehouseData[fc.name + '_available'] = fc.fulfillable_quantity;
9      warehouseData[fc.name + '_onhand'] = fc.onhand_quantity;
10    });
11  }
12  return {
13    product_id: item.id,
14    name: item.name,
15    sku: item.sku || 'N/A',
16    total_available: item.total_fulfillable_quantity || 0,
17    total_onhand: item.total_onhand_quantity || 0,
18    total_committed: item.total_committed_quantity || 0,
19    is_active: item.is_active ? 'Active' : 'Inactive',
20    ...warehouseData
21  };
22});

For automated monitoring that runs without any user being logged into the Retool app, use Retool Workflows. Navigate to the Workflows section in the Retool home page sidebar (look for the lightning bolt icon). Click New Workflow to open the canvas. Click Add Trigger and select Schedule. Configure it to run once per day — for example, every day at 7 AM in your business timezone. This ensures your team starts each day with an inventory alert if any SKUs are critically low. Add a Resource Query block and connect it to your ShipBob API resource. Set Method to GET and path to /inventory. Set limit to 250 to fetch as many products as possible in a single call. For larger catalogs, you may need a Loop block to paginate through multiple pages. Add a JavaScript Code block after the inventory query. In this block, filter the inventory results to identify SKUs below your alert threshold: Add a third block — another Resource Query block configured to use your Slack resource (or email resource). In the message field, reference the output of the JavaScript block using the block's name variable (e.g., {{ jsBlock1.data }}) to construct an alert message listing the at-risk SKUs with their current quantities. Finally, add a Branch (conditional logic) block before the Slack notification block. Set the condition to {{ jsBlock1.data.length > 0 }} — this ensures the Slack alert only fires when there are actually low-stock items, preventing daily empty notifications. Click Publish Release to activate the workflow. Check the Runs tab to monitor execution history after the first scheduled run.

1// JavaScript Code block in Retool Workflow
2// Filter inventory for SKUs below threshold
3const inventory = block1.data; // reference your inventory query block name
4const THRESHOLD = 50; // units below which to alert
5
6const lowStockItems = inventory
7  .filter(item => item.is_active && item.total_fulfillable_quantity < THRESHOLD)
8  .map(item => ({
9    name: item.name,
10    sku: item.sku,
11    available: item.total_fulfillable_quantity,
12    onhand: item.total_onhand_quantity
13  }))
14  .sort((a, b) => a.available - b.available); // lowest stock first
15
16return lowStockItems;