Org Details
Org Details renders the selected organization record, its reporting context, source information, and review metadata.
Component
Use fd-org-details beside or below Org Outline to explain what is selected without opening a dialog or changing the page context.
When to use
- Use it when a selected organization node needs source, reporting, acting, override, or conflict details.
- Use it in editor review flows where source-of-truth and override values must be compared.
- Use the
actionsslot for downstream workflow actions, such as opening a source record.
When not to use
- Do not use it as a modal dialog.
- Do not use it to resolve conflicts in v1. It displays conflict evidence; workflow actions belong to the consuming application.
- Do not rely on color or strikethrough alone to explain conflicts.
Examples
Optional avatars
Org Details can show a larger decorative avatar for person records when person.photoRef is present and photoResolver returns an image URL. The avatar uses fd-visual type="avatar"; the selected node heading remains the accessible source of the person’s name.
Properties
| Name | Type | Default | Description |
|---|---|---|---|
tree | FdOrgTree | undefined | Normalized organization tree returned by normalizeOrgTree(input). |
nodeId | string | undefined | Selected node id to display in the details panel. |
emptyLabel | string | Select an organization record to review details. | Message shown when no node is selected. |
photoResolver | FdOrgPhotoResolver | undefined | Optional resolver that maps person nodes with person.photoRef to decorative avatar image URLs. |
Slots
| Name | Description |
|---|---|
actions | Optional downstream actions for the selected node. |
Shadow parts
| Name | Description |
|---|---|
panel | Details panel wrapper. |
live | Visually hidden polite live region announcing the selected record. |
avatar | Decorative fd-visual avatar for person nodes when photo media is available. |
eyebrow | Node type and source-status summary. |
heading | Selected node heading. |
status | Status badge row. |
badge | Individual text-plus-icon status badge. |
section | Grouped details section. |
conflict | Conflict comparison block. |
actions | Optional actions slot wrapper. |
Best practices
Do
- Pair details with a visible outline selection.
- Show source labels, freshness, and effective dates when available.
- Keep conflict labels explicit: “Source of truth” and “Override.”
- Treat profile photos as optional, decorative, and policy-gated by the consuming app.
Don’t
- Hide diagnostics from editors.
- Ask people to infer status from color.
- Use the panel for destructive review actions without app-level confirmation.
- Use photos for vacancies, positions, or units.
Content guidelines
- Use plain labels for source status: Official, Draft, Historical, and Editorial override.
- For acting assignments, include start date, end date if known, and the source label.
- When source and override values disagree, show both values rather than replacing one silently.
Accessibility
- The panel is a regular section, not a dialog.
- Selection changes are announced through
aria-live="polite". - Keyboard order should move from toolbar to outline to details in the composed pattern.
- Text wraps at 200% zoom and details stack on narrow screens.
- Status remains identifiable in greyscale because every state uses text plus an icon marker.
- Avatars are decorative; use empty image alt text when adjacent text already identifies the person.
Known limitations
- V1 details are display-first. They do not fetch live records or submit conflict resolution.
- Contact and photo fields are represented by the data contract but should remain consumer-supplied until the policy is settled.