Generate PDF Shipping Forms with Retool for Inventory Management

Introduction

Inventory management applications built with Retool excel at organizing data and providing intuitive interfaces for tracking products, orders, and shipments. However, many businesses require professional documentation for their shipping operations that goes beyond simple data displays. Creating PDF shipping forms that include detailed product information, addresses, and custom branding can significantly improve logistics operations and provide customers with professional documentation.

In this tutorial, we’ll enhance Retool’s existing Inventory Management App template by integrating DocuGenerate’s document generation capabilities. Instead of building an inventory system from scratch, we’ll focus on adding professional PDF shipping form generation to an already functional application. This approach demonstrates how existing Retool applications can be enhanced with document generation features without disrupting established workflows.

The integration we’ll build creates a powerful combination where users can manage their inventory data through Retool’s intuitive interface while generating professional shipping documents on demand. This solution is particularly valuable for businesses that need to provide carriers, customers, and internal teams with standardized shipping documentation that includes detailed product information and company branding.

Understanding the Base Application

Before adding document generation capabilities, let’s examine the foundation we’re working with. Retool’s Inventory Management App template provides a comprehensive solution for tracking inventory levels, managing shipments, and monitoring product data across multiple locations.

The application includes several key components that make it ideal for our shipping form enhancement:

• Shipment Tracking: A complete system for managing shipments from creation to delivery, including status updates and detailed shipment information.

• Product Management: Comprehensive product data including descriptions, quantities, and pricing information that’s essential for shipping documentation.

• Location Management: Support for multiple warehouses and shipping locations, providing the address information needed for shipping forms.

• Data Relationships: Well-structured relationships between shipments, products, and locations that facilitate comprehensive document generation.

The template’s existing data structure provides all the information typically required for professional shipping forms, including sender and receiver details, product descriptions, quantities, and shipment status information.

Preparing the Application

To focus on the document generation aspects of this tutorial, we’ll make several modifications to the base template. These changes simplify the interface while preserving the core functionality needed for shipping form generation.

Cloning the Template

Start by cloning the Inventory Management App template from Retool’s template library. This provides the complete foundation with sample data, established workflows, and proven user interface patterns.

The cloned template includes all necessary components, queries, and sample data to demonstrate the shipping form generation process. The existing structure provides realistic shipment scenarios that showcase various document generation possibilities.

Simplifying the Interface

For this tutorial, we’ll remove some complexity to focus on the document generation workflow. The key simplification involves updating the shipments query to remove date filtering, making it easier to view all available shipments.

We remove the date range filtering components and simplify the getShipments query. This change doesn’t affect the core functionality but makes it easier to navigate shipments during our tutorial. In a production environment, you would typically retain these filtering capabilities for managing large volumes of shipment data. The simplified view provides immediate access to all shipments, making it easier to test document generation with various shipment types and configurations.

Adding the PDF Generation Button

Next, we’ll be adding a View Shipping Form button to the shipment detail page. This button will trigger the document generation process and navigate users to a PDF viewer page.

The button placement integrates naturally with the existing shipment detail interface, providing users with immediate access to shipping form generation without disrupting established workflows. The button’s design matches the application’s existing style patterns and maintains visual consistency.

Adding the Shipping Form Page

The final step involves creating a new ShippingFormPDF page, for displaying generated shipping forms. This page includes a PDF viewer component configured to display documents generated by DocuGenerate and a Print fab button to allow users to print the shipping form.

Creating the Shipping Form Template

To generate dynamic shipping forms, we’ll need to first create a template, designed to include all essential elements typically found in commercial shipping documentation. The shipping form template includes sections with merge tags for sender information, receiver details, shipment contents, and additional notes.

The Shipping Form template used in this tutorial includes several important features:

• Conditional Content: The notes section only appears when shipment notes are present, using the conditional syntax

• Dynamic Table: The shipment items section automatically expands to accommodate varying numbers of products using the table syntax

• Consistent Formatting: All elements maintain professional formatting regardless of content length or complexity

Setting Up Document Generation

With our interface ready, we can focus on integrating DocuGenerate’s PDF generation capabilities into the existing shipment workflow to create shipping forms automatically.

DocuGenerate Resource

We need to configure the connection between Retool and DocuGenerate’s API. This involves creating a REST API resource that handles authentication and communication with DocuGenerate’s document generation service.

The REST API configuration requires:

• Resource Name: Use “DocuGenerate” for easy identification in queries
• Base URL: Set to https://api.docugenerate.com (or use one of our regional endpoints for improved performance)
• Authentication: Add your DocuGenerate API Key in the Authorization header

This configuration establishes the foundation for all document generation requests, handling authentication automatically and providing a reusable connection for multiple document types.

Document Generation Query

With our template created, we need to configure the Retool query that sends shipment data to DocuGenerate for processing. This query handles data transformation and API communication.

The generateDocument query uses the DocuGenerate resource and its configuration includes:

• URL Path: POST request to the /v1/document/ endpoint for creating new documents
• Request Body: JSON containing the following fields:
  • template_id: ID of the Shipping Form template created in DocuGenerate
  • output_format: set to .pdf to generate PDF documents
  • name: specifies the dynamic document name to match the name displayed in the app (Shipment #{{ Shipments_HistoryCollection.selectedItem.id }})
  • data: the shipping form data based on Shipments_HistoryCollection.selectedItem

    
  [{
    "shipment_number": "{{ Shipments_HistoryCollection.selectedItem.id }}",
    "shipment_from": "{{ Shipments_HistoryCollection.selectedItem.fromStreet }}",
    "shipment_to": "{{ Shipments_HistoryCollection.selectedItem.toStreet }}",
    "shipment_status": "{{ Shipments_HistoryCollection.selectedItem.status }}",
    "shipment_notes": "{{ Shipments_HistoryCollection.selectedItem.notes }}",
    "shipment_items": {{ getShipmentItems.data }},
    "shipment_date": "{{ Shipments_HistoryCollection.selectedItem.date }}"
  }]
    
  

The query transforms Retool’s shipment data into the format expected by DocuGenerate’s template processing engine. This includes extracting relevant information from the selected shipment record and formatting it appropriately for the merge tags defined in our template.

Data Transformation

The getShipmentItems query provides the shipment items in a table format, but that is incompatible with the list format expected for the shipment_items value used in the generateDocument query.

We need to convert this tabular data into an array structure that can populate the dynamic product list in our shipping form template. Entering the following JavaScript code in the Transform results step will convert the table format into an array of objects with title and quantity attributes:

const { title, quantity } = data;

return title.map((t, i) => ({
  title: t,
  quantity: quantity[i]
}));

This transformation ensures that product information from Retool’s database structure matches the array format expected by DocuGenerate’s template processing engine. The resulting array can accommodate any number of products while maintaining consistent formatting in the generated document.

Implementing the Complete Workflow

The final implementation connects all components into a smooth user experience, from shipment selection to PDF generation and display. This integration ensures that document generation feels like a natural extension of the existing inventory management workflow rather than a separate process.

Event Handler Configuration

The View Shipping Form button requires two event handlers to manage the complete workflow. The first event handler triggers the generateDocument query, which sends the shipment data to DocuGenerate and receives the generated PDF URL in response.

The second event handler manages navigation to the ShippingFormPDF page after successful document generation. This creates a smooth user experience where clicking the button immediately generates the document and displays it to the user.

PDF Viewer Implementation

The final step consists in displaying the generated shipping form in the dedicated page that was added to the application at the beginning of this tutorial.

To load the generated document in the ShippingFormPDFViewer component, we must specify the following value in the File URL input field:

{{ generateDocument.data?.document_uri }}

This configuration automatically displays the PDF returned by DocuGenerate’s API via the document generation query, providing users with immediate access to their generated shipping forms.

Testing the Complete Solution

With all components configured, the complete workflow provides a professional document generation experience integrated directly into the inventory management interface. Users can navigate from shipment management to professional PDF generation without leaving the application.

The finalized solution, which you can access here, demonstrates several key advantages:

• Workflow Integration: Document generation fits naturally into existing shipment management processes
• Professional Output: Generated forms maintain consistent formatting and branding across all shipments
• User Experience: Simple button clicks trigger complex document generation without exposing technical complexity
• Data Consistency: All shipment information automatically populates in the generated forms, eliminating manual data entry errors

Conclusion

Integrating DocuGenerate’s document generation capabilities into Retool’s Inventory Management App demonstrates how existing no-code applications can be enhanced with professional document creation without disrupting established workflows. This approach provides significant value for businesses that need to generate consistent, professional shipping documentation while maintaining the efficiency of their existing inventory management processes.

The combination of Retool’s intuitive interface building capabilities with DocuGenerate’s robust template processing creates a solution that bridges operational efficiency with professional documentation requirements. Users can continue managing their inventory and shipments through familiar interfaces while accessing enterprise-grade document generation capabilities with simple button clicks. The flexibility of both platforms means the solution can evolve alongside changing business requirements, supporting everything from simple shipping labels to complex multi-page shipping manifests.

The tutorial’s step-by-step approach demonstrates that sophisticated document generation features can be added to existing applications without requiring extensive development resources or disrupting current operational workflows. This makes professional document automation accessible to businesses of all sizes, from small operations managing dozens of shipments to large enterprises processing thousands of shipping documents daily.

Resources

• Retool Inventory Management Template for the base application structure.
• DocuGenerate API Documentation with comprehensive integration guidance.
• Shipping Form template used in this tutorial.
• Live Demo Application showing the complete integration in action.