Skip to content

Offline UI Components

Overview

Formbird provides UI components to display offline status, caching progress, and sync information to users. The primary component is sc-offline-status, which is loaded as a separate package to minimize bundle size for applications that don't use offline functionality.

sc-offline-status Component

Purpose

The sc-offline-status component displays:

  • Current caching progress
  • Documents cached count
  • Files cached count
  • Pending sync document count
  • Error notifications

Template Configuration

Add the component to your caching template:

{
    "component": [
        {
            "componentName": "sc-offline-status",
            "name": "offlineStatus",
            "fullWidth": true
        }
    ]
}

Caching Progress Indicators

Document Caching

Shows progress during document caching:

┌─────────────────────────────────────────────┐
│  Caching Documents:                          │
│  ████████████░░░░░░░░░░░░  4,500 of 10,000  │
└─────────────────────────────────────────────┘

Static App Caching

Shows service worker caching of static files:

┌─────────────────────────────────────────────┐
│  Caching Static App:                         │
│  ██████████████████████░░░  89 of 95 files  │
└─────────────────────────────────────────────┘

Map Tile Caching

Shows vector tile caching progress:

┌─────────────────────────────────────────────┐
│  Caching Map Tiles:                          │
│  ████████████████░░░░░░░░  1,200 of 1,800   │
└─────────────────────────────────────────────┘

File Attachment Caching

Shows file attachment download progress:

┌─────────────────────────────────────────────┐
│  Caching Files:                              │
│  ██████████████████████████  45 of 45 files │
└─────────────────────────────────────────────┘

Sync Status Indicators

Pending Document Badge

A badge on the user icon shows documents waiting to sync:

┌──────────────────────────────────┐
│  👤 [3]                          │  ← Badge shows pending count
│                                   │
│  3 documents waiting to sync     │
└──────────────────────────────────┘

Error Badge

Shows count of documents with sync errors:

┌──────────────────────────────────┐
│  ⚠️ [2]  Sync Errors              │
│                                   │
│  2 documents failed to sync      │
└──────────────────────────────────┘

Offline Status Dropdown

The offline status dropdown displays:

┌─────────────────────────────────────────────┐
│  Offline Status                              │
├─────────────────────────────────────────────┤
│  Connection: ● Online / ○ Offline           │
│                                              │
│  Caching: ● Enabled / ○ Disabled            │
│                                              │
│  Documents Cached: 10,245                   │
│  Files Cached: 156                          │
│  Map Tiles Cached: 2,400                    │
│                                              │
│  Pending Sync: 3 documents                  │
│  Sync Errors: 0                             │
│                                              │
│  [Disable Caching]  [Sync Now]              │
└─────────────────────────────────────────────┘

Connection Status

Visual indicator of network status:

Status Display
Online Green circle
Offline Red circle
Syncing Animated spinner

Initial Caching Complete Message

Display Conditions

The "Initial Caching Complete" message displays when:

  1. offlineStatusService.initialCachingComplete === true
  2. All documents are cached up to cut-off time
  3. All map tiles are cached
  4. All files are cached
  5. No errors occurred

OfflineStatusService

Key Properties

class OfflineStatusService {
    // Caching state
    cachingEnabled: boolean;
    initialCachingComplete: boolean;

    // Progress tracking
    currentCacheCount: number;
    maxCacheCount: number;

    // Sync tracking
    pendingDocumentCount: number;
    offlineErrorCount: number;

    // Page download progress
    pageDownloadProgress: {
        pageNumber: number;
        loaded: number;
        total: number;
    };
}

Observable Streams

// Subscribe to offline status changes
this.offlineStatusService.offlineStatus$.subscribe(status => {
    this.updateUI(status);
});

Customizing the UI

Custom Caching Progress Template

The UI customization described here applies specifically to the initial caching template - the template shown during the caching progress when a user first enables offline mode. This template is configured via cachingEnableTemplate in clientConfiguration.

Create a custom caching template with your own layout:

{
    "templateId": "custom-caching-template",
    "component": [
        {
            "componentName": "sc-offline-status",
            "name": "offlineStatus"
        },
        {
            "componentName": "sc-text",
            "name": "instructions",
            "text": "Please wait while data is cached for offline use."
        }
    ]
}

Then link it in your configuration:

{
    "clientConfiguration": {
        "cachingEnableTemplate": [
            {
                "documentId": "your-custom-caching-template-uuid",
                "name": "Custom Caching Progress"
            }
        ]
    }
}

See 106-Initial-Caching-Process.md for more details on the caching progress indicator configuration.