## Legacy Notice

**This widget is considered legacy.** For new implementations, use `cf.cplace.platform.connectedAttributesGroup` (Grouped Attributes of a Table) instead, which offers:
- Flexible embedded layout (vs. fixed 3-column)
- Inline editing support (vs. read-only only)
- Part of core platform (vs. separate plugin)

This widget remains functional for existing implementations but is not recommended for new master-detail layouts.

---

## Overview

The Page Details widget dynamically displays attributes of a selected table entry and therefore requires a table. It creates a master-detail interface by displaying selected attributes of a page chosen from a connected table widget. The detail panel automatically updates when users select different rows in the table, showing a configurable set of attributes in a structured layout.

This widget implements the classic master-detail UI pattern where a table widget (the master) shows multiple rows of data, and this widget (the detail) shows comprehensive information about the selected row. The synchronization is automatic - clicking a table row instantly updates the detail view.

## Use Cases

### When to Use This Widget

**Space-Constrained Table Views**
When a table has many columns that don't all fit comfortably on screen, use this widget to show key columns in the table while displaying detailed attributes in the detail panel. For example, a project list might show only name and status in the table, with full details (description, dates, owner, budget) appearing in the detail panel.

**Read-Only Detail Information**
Ideal for displaying additional context about a selected item without providing editing capabilities. Use when users need to review details but not modify them, such as viewing full specifications of a product selected from a catalog table.

**Dashboard and Reporting Layouts**
Create dashboard pages with table plus detail layouts, or master-detail reports where the table provides overview and the detail provides depth. For example, a risk register showing all risks in a table, with detailed risk assessment displayed when a risk is selected.

**Improved User Experience**
Avoid navigation away from the current page to see details, keeping users in context while browsing list data. Provides quick preview of full information without opening separate pages, such as a task list where selecting a task shows its full description and metadata.

**Structured Information Display**
Show related but categorized information when details are too verbose for table columns but important to have readily accessible. For example, incident management where the table shows incident titles and status, while the detail panel shows full description, timestamps, and involved parties.

### Problem This Widget Solves

The widget addresses the challenge of displaying detailed information from tables without overwhelming the table view or requiring navigation:

- **Limited horizontal space**: Tables with many columns become unwieldy and hard to scan
- **Information density**: Users need both overview (table) and details simultaneously
- **Navigation overhead**: Opening individual pages disrupts workflow and context
- **Context switching**: Users want to browse multiple items quickly without leaving the page

It provides a responsive detail panel that keeps users on the same page while exploring data, combining efficient scanning of list data with instant access to comprehensive details.

## Design Considerations

### Display Layout

The widget uses a fixed 3-column layout for displaying attributes:
- Attributes are automatically distributed across three columns using modulo logic
- Each attribute is shown with its label and value
- Optional header section can display rich text content above the attributes
- All attributes are displayed in read-only mode (no in-place editing)

### Initial Selection Behavior

When the page first loads, if no table row has been explicitly selected, the widget displays attributes for the first entry from the connected table's search results. This ensures the detail panel always shows something useful rather than being empty.

### Event-Driven Architecture

The widget listens for row selection events from the connected table widget and updates its content dynamically via AJAX. This creates a seamless, responsive experience without page reloads.

## Common Pitfalls

- **Same-Page Requirement**: The table and detail widgets must be on the same page. You cannot connect to tables on other pages or workspaces.
- **Read-Only Limitation**: This widget displays attributes in read-only mode. If you need editing capabilities, consider using the Tuples Widget instead.
- **Fixed Layout**: The 3-column layout is not configurable. You cannot adjust to 1, 2, or 4 columns.
- **Single Selection Only**: The widget shows details for only one selected page at a time. Multi-selection is not supported.

## Related Widgets

**cf.cplace.platform.tableWidget** (Table Widget)
Required companion widget that serves as the master in the master-detail relationship. The table provides the list of pages, and this widget displays details of the selected item.

**cf.platform.embeddedSearchAsTable** (Embedded Search as Table)
Can be used as the master table widget, displaying search results in table format with details shown in this widget when a result is selected.

**cf.cplace.tuplesWidget.widget** (Tuples Widget)
Alternative when editing is required. Tuples Widget provides inline editing capabilities and CRUD operations on references, while Page Details is read-only and focused on viewing details.

**cf.cplace.platform.connectedAttributesGroup** (Connected Attributes Group)
Different use case - shows attributes of a fixed referenced page (static 1-to-1 relationship), while Page Details shows attributes of a dynamically selected table row.

## Alternatives

- If you need **editing capabilities** for the selected item, use the **Tuples Widget** which supports inline editing and CRUD operations.
- If you need to display attributes of a **static referenced page** (not table-driven selection), use the **Connected Attributes Group** widget.
- If you want to display all attributes of the **current embedding page** itself, use the **Attributes Widget** instead.
- If you need a **custom layout** or more than 3 columns, consider building a custom low-code widget with the desired layout.