Build Dynamic Reports

What You'll Build

A multi-section report template with a cover page, summary statistics, data tables, and a footer. This pattern works for financial reports, analytics summaries, HR reports, and more.

Report Structure

Most reports follow a common layout:

1. Header — Company branding + report title
2. Metadata — Report date, period, department
3. Summary Section — Key metrics at a glance
4. Data Table — Detailed breakdown
5. Footer — Notes, disclaimers, page info

Step 1: Set Up the Page

1. Create a new template named "Monthly Report"
2. Use A4 Portrait — standard for business reports
3. Set margins to 40px for clean spacing
4. Use a light background (#fafafa) for a softer look

Step 2: Build the Header

1. Add your company logo (Image element) in the top-left
2. Add a Field element with key report_title — position it prominently at 24–28px
3. Below, add fields for report_period and generated_date
4. Add a line to separate the header from the body

Step 3: Add Summary Metrics

Create a row of key metric cards using grouped elements:

1. For each metric, create a text label and a field element:
   • Label: "Total Revenue" → Field key: total_revenue
   • Label: "Orders" → Field key: total_orders
   • Label: "Growth" → Field key: growth_percentage
2. Style the field values larger (20–24px) and bold to make them stand out
3. Arrange them in a horizontal row across the page

Step 4: Add the Data Table

1. Add a Table element below the summary section
2. Bind it to a data key, e.g., monthly_data
3. Configure columns for your report type. For a sales report:
   • Product — field key: product
   • Units Sold — field key: units
   • Revenue — field key: revenue
   • % of Total — field key: percentage
4. Style the header row with your brand's accent color

Step 5: Add a Footer

1. Add a line near the page bottom as a separator
2. Add a text element: "Confidential — Internal Use Only"
3. Add a field for report_notes for dynamic per-report notes

Generate via API

const pdf = await client.generate({
  templateId: "tmpl_monthly_report",
  data: {
    report_title: "Monthly Sales Report",
    report_period: "January 2026",
    generated_date: "February 1, 2026",
    total_revenue: "$142,500",
    total_orders: "1,247",
    growth_percentage: "+12.3%",
    monthly_data: [
      { product: "Enterprise Plan", units: "45", revenue: "$67,500", percentage: "47%" },
      { product: "Pro Plan", units: "312", revenue: "$46,800", percentage: "33%" },
      { product: "Starter Plan", units: "890", revenue: "$28,200", percentage: "20%" },
    ],
    report_notes: "Q1 target is on track. Enterprise sales exceeded forecast by 15%.",
  },
});

Automating Report Generation

Combine the API with a scheduler (cron, Vercel Cron, AWS EventBridge) to generate reports automatically:

// Example: Generate a report at the start of each month
// Run this as a scheduled job

async function generateMonthlyReport() {
  const data = await fetchSalesData(lastMonth());

  const pdf = await client.generate({
    templateId: "tmpl_monthly_report",
    data: {
      report_title: "Monthly Sales Report",
      report_period: formatMonth(lastMonth()),
      generated_date: formatDate(new Date()),
      total_revenue: formatCurrency(data.totalRevenue),
      total_orders: data.totalOrders.toLocaleString(),
      growth_percentage: formatPercentage(data.growth),
      monthly_data: data.products.map(p => ({
        product: p.name,
        units: p.units.toString(),
        revenue: formatCurrency(p.revenue),
        percentage: formatPercentage(p.share),
      })),
    },
  });

  // Email to stakeholders, upload to shared drive, etc.
  await emailReport(pdf, ["ceo@company.com", "sales@company.com"]);
}