Real-World Examples

Complete, production-ready Pyodide examples with detailed development workflows, debugging techniques, and best practices.

---

Development Workflow

Before diving into the examples, understand the recommended development workflow:

┌─────────────────────────────────────────────────────────────────────────────┐
│                    PYODIDE REPORT DEVELOPMENT WORKFLOW                       │
└─────────────────────────────────────────────────────────────────────────────┘

  PHASE 1: DESIGN              PHASE 2: DEVELOP             PHASE 3: DEPLOY
  ┌───────────────────┐       ┌───────────────────┐       ┌───────────────────┐
  │                   │       │                   │       │                   │
  │  Design JSON      │       │  Test in Jupyter  │       │  Build Suitelet   │
  │  Data Structure   │──────▶│  Notebook         │──────▶│  + HTML Template  │
  │                   │       │  (VS Code)        │       │                   │
  └───────────────────┘       └───────────────────┘       └───────────────────┘
         │                           │                           │
         ▼                           ▼                           ▼
  • Define fields             • Load sample JSON          • Create SuiteQL
  • Plan data types           • Test pandas logic         • Build form UI
  • Create mock data          • Debug transformations     • Connect HTML
                              • Verify Excel output       • Pass JSON data

---

Available Examples

Example 1: Unpaid Invoices Report

Difficulty: Beginner to Intermediate

A comprehensive step-by-step guide covering the complete development workflow from JSON design to deployment.

Topic	What You'll Learn
JSON Design	How to model data structure for reports
Jupyter Testing	Debug Python logic before Pyodide
Suitelet↔HTML	How data flows from server to client
Browser Debug	Using console.log to verify data
Excel Export	Basic XlsxWriter with subtotals

Features:

• Date range filter
• SuiteQL query with calculated fields
• Tabulator table with overdue badges
• Single-sheet Excel with month grouping

View Example 1: Unpaid Invoices →

---

Example 2: Sales Order Report

Difficulty: Intermediate to Advanced

Advanced pandas DataFrame operations with groupby, pivot tables, and multi-sheet Excel export.

Topic	What You'll Learn
pandas.groupby()	Aggregate data by multiple dimensions
pandas.pivot_table()	Cross-tabulation analysis
numpy.where()	Conditional calculations
Multi-Sheet Excel	6 different analysis views
Progress Bars	Visual fulfillment tracking

Features:

• Date range + Status dropdown filter
• Line-level aggregation with JOIN
• Progress bars for fulfillment
• 6-sheet Excel with pivot analysis

View Example 2: Sales Order Report →

---

Quick Comparison

Aspect	Unpaid Invoices	Sales Order Report
Difficulty	Beginner	Intermediate
Query Type	Single table	JOIN with lines
Filters	Date range	Date + Status
Excel Output	1 sheet	6 sheets
Pandas Features	Basic	groupby, pivot
Visual Elements	Badges	Progress bars

---

Download All Files

Unpaid Invoices Report

Suitelet (.js)

HTML Template

Sales Order Report

Suitelet (.js)

HTML Template

---

Key Concepts Covered

1. JSON Data Modeling

// Good: snake_case, proper types
{
  "invoice_number": "INV-001",
  "total_amount": 15000000,    // number, not string
  "invoice_date": "15/01/2025" // consistent format
}

2. Suitelet → HTML Data Flow

// Suitelet injects data as JavaScript variables
fldHtml.defaultValue = `
    <script>
        var invoiceData = ${JSON.stringify(results)};
        var summaryData = ${JSON.stringify(summary)};
    </script>
`;

// HTML template uses them directly
var table = new Tabulator("#table", {
    data: invoiceData  // Already available!
});

3. Debugging in Browser

// Add to HTML for debugging
console.log('Data received:', invoiceData);
console.log('Record count:', invoiceData.length);
console.log('First record:', invoiceData[0]);
console.log('Field names:', Object.keys(invoiceData[0]));

4. Pyodide Data Passing

// Pass data to Python
window.array_data = JSON.stringify(invoiceData);

// In Python
from js import array_data
data = json.loads(array_data)
df = pd.DataFrame(data)

---

Related Documentation

• Pandas Guide - Data manipulation reference
• XlsxWriter Guide - Excel formatting
• Starter Templates - Quick start templates
• Troubleshooting - Common issues