Reusing Alpha Pages With Other Pages (New component)!

[doomedCode]

Page Reuser Component

An Alpha component for reusing pages by pageId with comprehensive error handling, loading states, and seamless integration with the Alpha platform.

Overview

The Page Reuser component allows you to dynamically render any page from your Alpha application by simply selecting a page from the attribute window.
It provides a clean, user-friendly interface with robust error handling and loading states, making it perfect for creating reusable page templates and modular content blocks.

Sandbox Playground: Alpha Studio

Features

• Dynamic Page Rendering: Render any page by selecting its ID
• Loading States: Beautiful loading spinner with smooth animations
• Error Handling: Comprehensive error states with retry functionality
• Readonly Mode: Optional readonly rendering for display-only scenarios
• Event System: Custom events for page lifecycle management

Using In Alpha Studio

• Open the attribute window after the component in dfragged and dropped from the palette to the canvas
• Select the page to be displayed by choosing from the available list of pages via “Select Page” drop-down
• Optionally set the “Readonly” property in the “Page Settings” category of the attribute window

Note: “Select Page” drop down shows only global pages if this component is being configured in a global page.
If configured in any task pages, then both global and task pages will listed for you to select.

Workflow Stdui Configuration

CMUI Preview Sample

Basic Properties

Property	Description
Select Page	Select the page to display
Readonly	Choose whether the selected page should be displayed as readonly or not

Trigger

Event	Description	Payload
onPageLoaded	Fired when page loads successfully	PageLoadSuccessPayload
onPageError	Fired when page fails to load	PageLoadErrorPayload

Component States

Loading State

When fetching page data, the component displays a centered loading spinner with the message “Loading page…”.

Error State

If page loading fails, users see:

• Error icon and title
• Detailed error message
• Page information
• Retry button to attempt loading again

Empty State

When no page is selected, users see:

• Document icon
• “No Page Selected” title
• Helpful instruction message

Success State

When a page loads successfully, it renders using the alpha-renderer component with all the page’s panels, data sources, and configurations.

Styling

The component uses CSS custom properties for easy theming:

:host {
    --alpha-primary-color: #007bff;
    --alpha-error-color: #e53e3e;
    --alpha-text-color: #333;
    --alpha-bg-color: #fff;
    --alpha-border-radius: 8px;
    /* ... and many more */
}

CSS Classes

• .page-reuse-renderer - Main container
• .loading-state - Loading spinner container
• .error-state - Error message container
• .empty-state - No page selected container
• .page-content - Rendered page container

API Integration

The component integrates with the Alpha plugins API:

// Fetches page data using Alpha's page API
const pageData = await window.ap.pages.get(pageId, pageType);

Renderer Options

The component automatically creates renderer options from page data:

interface RendererOptions {
    pageDesignJson: any[];
    dataSource: Record<string, any>;
    hooks: Record<string, any>;
    translationMap: Record<string, any>;
    forLoopConfig: Record<string, any>;
}

Error Handling

The component handles various error scenarios:

• Missing Page ID: Shows validation error
• API Unavailable: Displays API availability error
• Page Not Found: Shows page not found error
• Network Errors: Generic error with retry option
• Invalid Page Data: Handles malformed page data gracefully

Changelog

For a complete list of changes, see CHANGELOG.md.

Related Components

• alpha-renderer - Core rendering component
• alpha-annotations-lib - Component annotation library
• Alpha Platform - Main application platform