How to Integrate Retool with AfterShip

Navigate to the Resources tab in Retool — click Resources in the left sidebar on the home page or use the top navigation. Click the blue Add Resource button in the upper right corner. In the resource type selector, search for 'REST' and click REST API to open the configuration form. Fill in the resource configuration: - Name: Enter 'AfterShip API' to clearly identify this resource. - Base URL: Enter https://api.aftership.com/v4 — this is the base URL for AfterShip's v4 REST API (the current stable version as of 2026). For authentication, AfterShip uses an API key passed in a custom request header. In the Headers section, add: - Key: as-api-key - Value: {{ retoolContext.configVars.AFTERSHIP_API_KEY }} Also add: - Key: Content-Type - Value: application/json Before clicking Save, go to Settings → Configuration Variables in another tab. Click Add Variable, name it AFTERSHIP_API_KEY, paste your API key from AfterShip's settings page, and mark it as a secret. Return to the resource configuration and save. The AfterShip resource now appears in your Resources list. Unlike some APIs, AfterShip does not require OAuth token refresh or HMAC signing — the API key is a static credential that remains valid until you rotate it in AfterShip's settings.

Create your primary data query to fetch all trackings from AfterShip. In your Retool app, click + New in the query panel. Select your AfterShip API resource. Set the HTTP method to GET and the path to /trackings. AfterShip's trackings endpoint supports several URL parameters for filtering and pagination: - page: {{ (trackingsTable.pageIndex || 0) + 1 }} — AfterShip uses 1-based page numbers - limit: 100 — maximum results per page (AfterShip allows up to 100) - keyword: {{ searchInput.value || '' }} — search by tracking number, customer name, or order ID - tag: {{ statusFilter.value || '' }} — filter by AfterShip status tag: Pending, InTransit, OutForDelivery, AttemptFail, Delivered, Exception, Expired - courier_slug: {{ carrierFilter.value || '' }} — filter by carrier (e.g., 'ups', 'fedex', 'dhl') - created_at_min: {{ dateRange.start ? new Date(dateRange.start).toISOString() : '' }} - created_at_max: {{ dateRange.end ? new Date(dateRange.end).toISOString() : '' }} Set the query to Run automatically when inputs change and trigger On page load. Add a JavaScript transformer to reshape AfterShip's response. The response has the structure: data.trackings[] where each tracking has the slug, tracking_number, tag (status), title (customer name), shipment_status_message, estimated_delivery_date, last_updated_at, and a checkpoints array. Drag a Table component onto the canvas. Bind it to {{ trackingsQuery.data }}. Configure columns for: tracking number, carrier (slug), status (tag), last checkpoint message, estimated delivery date, and customer/order reference. Add Search, Status Select, and Carrier Select filter components above the Table.

1// JavaScript transformer for AfterShip trackings list
2const trackings = data?.data?.trackings || [];
3
4return trackings.map(t => {
5  const lastCheckpoint = t.checkpoints?.[t.checkpoints.length - 1] || {};
6
7  return {
8    tracking_number: t.tracking_number,
9    carrier: t.slug,
10    status_tag: t.tag,
11    status_message: t.shipment_status_message || lastCheckpoint.message || '',
12    customer_name: t.title || t.customer_name || '',
13    order_id: t.order_id || '',
14    estimated_delivery: t.estimated_delivery_date
15      ? new Date(t.estimated_delivery_date).toLocaleDateString()
16      : 'Not available',
17    last_updated: t.last_updated_at
18      ? new Date(t.last_updated_at).toLocaleString()
19      : '',
20    checkpoint_count: (t.checkpoints || []).length,
21    is_delayed: t.tag === 'Exception' || t.tag === 'AttemptFail'
22  };
23});

When a customer service agent selects a shipment row, show the full checkpoint history in a detail panel. This gives agents the complete delivery timeline without navigating to AfterShip's interface. Create a second query using the AfterShip API resource. Set the method to GET and the path to /trackings/{{ trackingsTable.selectedRow.carrier }}/{{ trackingsTable.selectedRow.tracking_number }}. This endpoint returns the full tracking detail including all checkpoints. Set this query to trigger when the selected row changes (not on page load — only when a row is selected). In the query settings, set Trigger to Manual. In the Table's On Row Click event handler, add an action to Trigger this detail query. Drag a Container component to the right side of the canvas (or below the Table). Inside it, add: - A Text component showing the tracking number and carrier: 'Tracking: {{ trackingsTable.selectedRow.tracking_number }} via {{ trackingsTable.selectedRow.carrier }}' - A Timeline or List component for the checkpoints, bound to the transformer output of the detail query Add a JavaScript transformer on the detail query to format checkpoints for display: The checkpoint array includes: checkpoint_time (ISO datetime), country_iso3 (country code), city, state, zip, message, and tag (checkpoint status type). Format each checkpoint into an object with a formatted datetime, location string (city, state, country), and message. Drag a Table or JSON Editor component to display the formatted checkpoints. If using a Table, configure columns for: date/time, location, and event description. Sort checkpoints in reverse chronological order (most recent first) by reversing the array in the transformer.

1// JavaScript transformer for AfterShip tracking detail checkpoints
2const tracking = data?.data?.tracking || {};
3const checkpoints = tracking.checkpoints || [];
4
5// Return checkpoints in reverse chronological order (latest first)
6return [...checkpoints].reverse().map((cp, index) => ({
7  index: index + 1,
8  datetime: cp.checkpoint_time
9    ? new Date(cp.checkpoint_time).toLocaleString()
10    : 'N/A',
11  location: [cp.city, cp.state, cp.country_iso3].filter(Boolean).join(', ') || 'N/A',
12  message: cp.message || cp.tag || '',
13  status_tag: cp.tag || ''
14}));

Enrich the dashboard with carrier breakdown statistics and a dynamically populated carrier filter. Create a query to fetch the list of active couriers in your AfterShip account: GET /couriers — this returns all carriers that have been added to your AfterShip account and have active trackings. Add a transformer to format the response into { value: courier.slug, label: courier.name } objects for the carrier Select filter component. For summary statistics, create a JavaScript query that processes the full trackings dataset (from the trackingsQuery.data array) to compute aggregate metrics: - Total trackings count - Count by status tag (InTransit, Delivered, Exception, etc.) - Count by carrier - Average time from creation to delivery (for delivered shipments) - Percentage delayed (Exception or AttemptFail tags) Drag Summary (Stat) components to the top of your dashboard canvas. Bind each Stat to the relevant field from the aggregates JavaScript query: - Total Shipments: {{ statsQuery.data.total }} - In Transit: {{ statsQuery.data.in_transit }} - Delayed / Exception: {{ statsQuery.data.exceptions }} - Delivered Today: {{ statsQuery.data.delivered_today }} Add a Bar Chart component below the stats using AfterShip data to show shipments by carrier — this gives logistics managers a quick overview of volume distribution across carriers, which is useful for carrier diversification decisions and contract negotiations.

1// JavaScript query: compute summary statistics from AfterShip trackings
2const trackings = trackingsQuery.data || [];
3const today = new Date().toDateString();
4
5const stats = {
6  total: trackings.length,
7  in_transit: trackings.filter(t => t.status_tag === 'InTransit').length,
8  out_for_delivery: trackings.filter(t => t.status_tag === 'OutForDelivery').length,
9  delivered: trackings.filter(t => t.status_tag === 'Delivered').length,
10  delivered_today: trackings.filter(t =>
11    t.status_tag === 'Delivered' &&
12    t.last_updated &&
13    new Date(t.last_updated).toDateString() === today
14  ).length,
15  exceptions: trackings.filter(t =>
16    t.status_tag === 'Exception' || t.status_tag === 'AttemptFail'
17  ).length,
18  pending: trackings.filter(t => t.status_tag === 'Pending').length
19};
20
21stats.exception_rate = trackings.length > 0
22  ? ((stats.exceptions / trackings.length) * 100).toFixed(1) + '%'
23  : '0%';
24
25return stats;

Set up automated monitoring for delayed and exception shipments using a Retool Workflow that runs on a schedule and alerts your logistics team via Slack when packages need attention. Navigate to Workflows in the Retool sidebar. Click New Workflow. Click Add Trigger → Schedule. Set the schedule to run twice daily: 9 AM and 2 PM in your operations timezone. This gives the team morning and afternoon visibility into shipment exceptions. Add the first block: a Resource Query block using the AfterShip API resource. Configure it as GET /trackings with URL parameters: tag=Exception&limit=100 to fetch all exception-status trackings. Add a second Resource Query block: GET /trackings with tag=AttemptFail&limit=100 for failed delivery attempts. Add a JavaScript Code block that combines the two result sets and deduplicates, then filters for trackings older than 24 hours that have not been flagged in your internal database (to avoid duplicate alerts). This requires a third Resource Query block querying your PostgreSQL database for already-flagged tracking numbers. Add a Branch block: if the filtered list has records, proceed to the Slack notification block. If empty, end the workflow (no alerts needed). For the Slack notification block, use your Slack resource (native connector). Set Action Type to Post Message and construct a message that lists each problematic shipment: tracking number, carrier, status, last checkpoint, and a deep link to AfterShip. For more than 5 affected shipments, use Slack Block Kit to format them as a structured list. Add a final Resource Query block that inserts the flagged tracking numbers into your PostgreSQL exceptions table with a timestamp, preventing duplicate alerts in the next Workflow run. Click Publish Release to activate the Workflow.

1// JavaScript Code block: filter and prepare exception shipments for alerting
2const exceptionTrackings = exceptionQuery.data?.data?.trackings || [];
3const attemptFailTrackings = attemptFailQuery.data?.data?.trackings || [];
4const alreadyFlagged = new Set((flaggedQuery.data || []).map(r => r.tracking_number));
5
6const allExceptions = [...exceptionTrackings, ...attemptFailTrackings];
7
8// Deduplicate and filter out already-flagged trackings
9const seen = new Set();
10const toAlert = allExceptions.filter(t => {
11  if (seen.has(t.tracking_number) || alreadyFlagged.has(t.tracking_number)) return false;
12  seen.add(t.tracking_number);
13
14  // Only alert if the last update was more than 24 hours ago
15  const lastUpdated = new Date(t.last_updated_at || t.created_at);
16  const hoursSinceUpdate = (Date.now() - lastUpdated.getTime()) / (1000 * 60 * 60);
17  return hoursSinceUpdate > 24;
18});
19
20const alertMessage = toAlert.length > 0
21  ? `*${toAlert.length} shipment(s) need attention:*\n` +
22    toAlert.slice(0, 10).map(t =>
23      `• ${t.tracking_number} (${t.slug}): ${t.tag} — ${t.shipment_status_message || 'No message'}`
24    ).join('\n') +
25    (toAlert.length > 10 ? `\n_...and ${toAlert.length - 10} more_` : '')
26  : null;
27
28return { toAlert, alertMessage, hasAlerts: toAlert.length > 0 };