---
alias: "fc.page"
aliases:
  - fc.page
  - shared.components.material.DynamicPage
category: page
module: Core
---
# fc.page

Top-level page container with header, breadcrumb navigation, and automatic workflow user actions.

## When to Use
- Every page in a manifest (required as root component)
- When you need workflow-driven action buttons in the header
- When you need breadcrumb back-navigation

## Key Props
| Prop | Type | Required | What it controls |
|------|------|----------|------------------|
| `title` | string | Recommended | Header text -- supports template strings `"Order {{ref}}"` |
| `backButtons` | BreadCrumb[] | No | Breadcrumb navigation links `[{ label, path, menuLabel? }]` |
| `actions` | PageActionConfig / boolean | No | User actions config -- `true` for auto-discovery, object for custom `{ primary?, secondary?, userActionFilter?, userActionExtensions? }` |
| `tabs` | TabInfo[] | No | Page-level tab bar (different from `fc.tabs.card`) |
| `hideRefreshButton` | boolean | No | **DEPRECATED** -- the refresh button has been moved to the global header and is always displayed. This prop is accepted but has no effect |

## Data Binding
Page-level `data.query` in the route definition provides the data context for all descendants. Variables support template strings: `{ "id": "{{params.id}}", "retailerId": "{{activeRetailer.id}}" }`

## Descendants
Yes — accepts any component as children. Uses Material-UI Grid internally.

## Composition Patterns
- `fc.page` > `fc.column` + `fc.column` for multi-column layouts
- `fc.page` > `fc.tabs.card` for tabbed content
- `fc.page` > `fc.list` for entity list pages

## Gotchas
- Actions prop set to `true` auto-discovers workflow actions -- set to `false` or omit for read-only pages
- Page-level tabs are different from `fc.tabs.card` -- page tabs create URL segments, card tabs are visual only
- `hideRefreshButton` is deprecated and has no effect -- the refresh button is now in the global header
- `fullScreen` is NOT a prop on `fc.page` -- it is a route-level property set on the page definition in the manifest (e.g., `{ "path": "/scanner", "fullScreen": true, "component": "fc.page", ... }`). It collapses the sidebar navigation

## Validation Rules
P15 (title recommended), P16 (component should be fc.page), S09 (every page needs component field)

## Manifest Example
```json
{
  "component": "fc.page",
  "props": {
    "title": "Order {{ref}}",
    "backButtons": [{ "label": "Orders", "path": "/orders" }],
    "actions": true
  },
  "descendants": []
}
```

## AI Parse Notes
- **Primary intent:** Declarative Mystique component definition for manifests.
- **Selection signals:** Match by `alias`, category, and required `Key Props`.
- **Assembly hints:** Combine with compatible parent/child components listed in `Composition Patterns`.
- **Safety checks:** Validate required props and data bindings before manifest generation.
