Exercise 9: Recording Live OData Traffic with ui5-middleware-odata-recorder

9.1 How It Works

Exercise 9 demonstrates how to use ui5-middleware-odata-recorder to capture live OData traffic from your backend and automatically generate mockserver-compatible datasets.

The recorder sits between your UI5 app and backend, intercepting OData responses to create mockserver datasets:

You can find the detailed documentation for the recorder here .

9.2 Quick Start

Exercise 9 ( ex9/ ) includes the recorder middleware pre-configured:

# 1. Ensure your CAP backend is running
cd ../ui5-call-action
npm run watch  # Backend on http://localhost:4004

# 2. Start recording mode (captures live traffic)
cd ex9
npm run start-record

# 3. Open browser with recording enabled
# http://localhost:8089/index.html?__record=1

# 4. Click through the app - data gets recorded automatically
# Navigate to books, open details, try actions, etc.

# 5. Stop server (Ctrl+C) to save recorded data

# 6. Start mockserver mode (uses recorded data)
npm run start-mock

# 7. Open browser for offline mode
# http://localhost:8089/index.html

From the root directory:

# Record live data
npm run start:ex9-record

# Use recorded data offline
npm run start:ex9-mock

9.3 Configuration Overview

The recorder uses three UI5 configurations:

1. ui5-record.yaml - Recording Mode

server:
  customMiddleware:
    # Proxy requests to live backend
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        backend:
          - path: /bookshop
            url: http://localhost:4004

    # Recorder captures responses AFTER proxy
    - name: ui5-middleware-odata-recorder
      beforeMiddleware: fiori-tools-proxy
      configuration:
        services:
          - alias: mainService
            version: v4
            basePath: /bookshop/
            targetDir: webapp/localService/mainService/data

2. ui5-mock.yaml - Offline Replay Mode

server:
  customMiddleware:
    - name: sap-fe-mockserver
      beforeMiddleware: csp
      configuration:
        services:
          - urlPath: /bookshop
            metadataPath: ./webapp/localService/mainService/metadata.xml
            mockdataPath: ./webapp/localService/mainService/data
            generateMockData: false # Use recorded data only

9.4 Recording Process

Step 1: Start Recording

npm run start-record
# Server starts on http://localhost:8089

Step 2: Enable Recording Mode

Open: http://localhost:8089/index.html?__record=1

The ?__record=1 parameter tells the recorder to start capturing.

Step 3: Interact With Your App

• Navigate: List Report → Object Page → Sub-pages
• Filter & Search: Use filter bar, search fields
• Execute Actions: Click CAP action buttons (Promote Book, Set Discount, etc.)
• Expand Data: View related entities (chapters, reviews)

Step 4: Review Recorded Data

# Check what was recorded
ls webapp/localService/mainService/data/
# Output: Books.json, Chapters.json, Reviews.json, metadata.xml

9.5 Key Features Demonstrated

1. Complete Entity Capture

By default, the recorder removes $select parameters to capture full entities:

• UI Request: GET /Books?$select=ID,title&$top=10
• Modified Request: GET /Books?$top=10 (no $select)
• Result: Complete entity data including foreign keys, metadata fields

This ensures relationship navigation works offline and UI changes don't break mock data.

2. Smart Deduplication

Entities are automatically deduplicated by primary key:

// Multiple requests for same book only stores once
GET /Books('3afb35fa-e2c9-40d0-8e22-90e96ead9944'); // First time
GET /Books('3afb35fa-e2c9-40d0-8e22-90e96ead9944'); // Deduplicated

3. Metadata Integration

The recorder automatically captures $metadata to understand the service.

9.6 Recording Options

Multi-Tenant Recording

Record different datasets per SAP client:

# Record tenant 100 data
http://localhost:8089/index.html?__record=1&sap-client=100
# Creates: Books-100.json, Chapters-100.json

# Record tenant 200 data
http://localhost:8089/index.html?__record=1&sap-client=200
# Creates: Books-200.json, Chapters-200.json

9.7 Key Benefits of Live Data Recording

• Live Data Capture: Record real OData responses from backend systems by clicking through apps
• Automatic Dataset Generation: Convert live traffic into mockserver-compatible JSON files
• Complete Entity Capture: Capture full entity data, not just UI-selected fields
• Multi-Tenant Recording: Record different datasets per SAP client for isolated testing
• Hybrid Development: Record from backend → Replay offline for development/testing

9.8 Practical Use Cases

1. Production Data Capture

Capture real production patterns safely for development use (with appropriate data anonymization).

2. Complex Scenario Recording

Record complete user workflows including all related data for comprehensive offline testing.

3. Integration Testing

Record cross-service interactions to ensure offline mockserver accurately simulates real system behavior.

4. Performance Testing

Capture large datasets from production systems for performance testing without backend load.

Next Steps

Exercise 10 will show how to leverage TypeScript type generation from OData metadata for type-safe mock data development with compile-time validation and IntelliSense support.