## Overview

The Grouped Attributes widget allows the flexible arrangement of attributes on a page. Unlike a standard attribute list that shows all attributes in a fixed format, this widget gives full control over which attributes appear and how they're arranged in a custom grid layout.

## When to Use

**Choose this widget when:**
- You need to highlight specific attributes rather than showing everything
- Attributes should be grouped logically (e.g., dates together, people together)
- The layout requires multiple columns with varying widths
- Individual attributes need different display settings (labels, editing behavior)

**Choose alternatives when:**
- You want a quick view of all attributes without customization - use standard Attributes widget
- Attributes should come from a connected/selected page rather than the current page - use **Connected Attributes**

## Conceptual Architecture

The widget acts as a container holding an embedded layout grid. Each cell in the grid contains a single attribute display:

```
+- Grouped Attributes Container --------------------------+
|                                                         |
|  +----------+----------+----------+----------+          |
|  | Start    | End      | Duration | Owner    |  Row 1   |
|  +----------+----------+----------+----------+          |
|  | Parent Project      | Schedule            |  Row 2   |
|  +---------------------+---------------------+          |
|  | Status              | Rating              |  Row 3   |
|  +---------------------+---------------------+          |
|                                                         |
+---------------------------------------------------------+
```

This nested structure means:
- The outer widget defines the container (title, frame, height)
- The inner grid defines rows and column proportions
- Each cell contains an individual attribute with its own display settings

## Layout Patterns

### Logical Row Grouping

Arrange related attributes in the same row for visual coherence:

| Row Theme | Typical Attributes |
|-----------|-------------------|
| Temporal | Start date, end date, duration |
| People | Owner, responsible, assignee |
| Status | State, rating, escalation level |
| Hierarchy | Parent, schedule, project |

### Column Proportions

The grid uses a 12-unit system. Common arrangements:

| Layout | Suited For |
|--------|-----------|
| Four equal columns | Short values like dates |
| Three equal columns | Medium-length values |
| Two equal columns | References, longer text |
| Full width | Descriptions, rich text |

### Progressive Disclosure

Place the Grouped Attributes widget at the top of a page with key summary information. Use Layout Tabs below for secondary details, keeping the primary view focused.

## Design Considerations

### Custom Labels

Individual attributes can have alternative labels. This is useful for:
- Adding units (e.g., "Duration (days)" instead of "Duration")
- Shortening labels in tight layouts
- Providing domain-specific terminology

### Inline Editing

Each attribute can be configured for inline editing, allowing users to modify values directly without opening a dialog. Consider enabling this for frequently-updated fields while keeping computed or sensitive fields read-only.

### Frame and Title

The container can display with or without a visual frame. Use a frame when:
- The widget sits alongside other widgets and needs visual separation
- A title helps users understand the grouped content
- The panel represents a distinct logical section

Skip the frame for seamless integration into the page flow.

## Comparison with Related Widgets

| Aspect | Grouped Attributes | Standard Attributes | Connected Attributes |
|--------|-------------------|--------------------|-----------------------|
| Attribute source | Current page | Current page | Selected page from table |
| Attribute selection | Explicit choice | All or filtered | Explicit choice |
| Layout control | Full grid customization | Fixed format | Full grid customization |
| Complexity | Higher | Lower | Higher |
| Primary use | Custom detail panels | Quick overview | Master-detail patterns |

## Common Use Cases

1. **Detail Page Header**: Show the most important attributes prominently at the top of a page, with logical grouping and custom layout

2. **Settings Panel**: Collect configuration attributes in a dedicated section with appropriate frame and title

3. **Status Overview**: Group status-related attributes (state, rating, escalation) for quick assessment

4. **Scheduling Summary**: Combine temporal attributes (dates, duration, milestones) in a focused view