# Reference: Page Patterns

All valid `pagePattern` values are drawn from a codebase grep:

```bash
grep -rohE 'pagePattern="[^"]*"' src/ | sort -u
```

## Valid pagePattern Values

| Pattern                   | Use Case                                                        | `onBackDiscard`        |
| ------------------------- | --------------------------------------------------------------- | ---------------------- |
| `SingleSectionDialogPage` | Modal dialog collecting inputs; modal edit forms                | `"true"` (recommended) |
| `SingleSectionPage`       | Standard full-screen page; list overviews; cockpit pages        | —                      |
| `MasterDetailSectionPage` | Split master/detail (tablet) with list on left, detail on right | —                      |
| `MultiSectionPage`        | Multiple independent sections rendered sequentially             | —                      |
| `SplitScreenPage`         | Side-by-side two-panel layout                                   | —                      |

These are the **only five values** seen in the real codebase. The validator silently case-normalizes
(e.g., `singlesectiondialogpage` → `SingleSectionDialogPage`), but always author with exact casing.

---

## UIDescription Root Element

```xml
<UIDescription name="<Module>::<FlowName>UI" schemaVersion="0.0.0.5">
```

-   `name` uses `::` scope separator, NOT `/` or `.`
-   Module and FlowName are PascalCase: `Visit::RescheduleUI`, `Order::OverviewUI`
-   `schemaVersion` is **always** `"0.0.0.5"` for UI files (unlike BOs/LOs which use `"1.1"`)
-   No `xmlns` attribute — the validator strips it

Real examples:

-   `Visit::RescheduleUI` — `src/Visit/PR/Visit_Reschedule/Visit_RescheduleUI.userinterface.xml`
-   `Order::Overview` — `src/Order/PR/Order_Overview/Order_Overview.userinterface.xml`
-   `Visit::RetailStoreCockpitUI` — `src/Visit/PR/Visit_RetailStoreCockpit/Visit_RetailStoreCockpitUI.userinterface.xml`

---

## File Location Rule

UI files **always** live co-located with their process in the `PR/` folder:

```
src/<Module>/PR/<FlowName>/<FlowName>UI.userinterface.xml
```

They are **never** in a separate `UI/` subfolder. See `_shared/naming.md`.

---

## SingleSectionDialogPage

```xml
<UIDescription name="Visit::RescheduleUI" schemaVersion="0.0.0.5">
  <Page pagePattern="SingleSectionDialogPage" onBackDiscard="true">
    <PageHeader>
      <Bindings>
        <Resource target="title" type="Label" id="RescheduleId" defaultLabel="Reschedule" />
      </Bindings>
      <MenuItems>
        <MenuItem directlyVisible="true" itemId="done">
          <Bindings>
            <Resource target="Text" type="Label" id="doneId" defaultLabel="Done" />
            <Resource target="Icon" type="Image" id="CheckGrey24" defaultImage="light/done_24.png" />
          </Bindings>
          <Events>
            <ButtonPressedEvent event="rescheduleVisit" />
          </Events>
        </MenuItem>
      </MenuItems>
    </PageHeader>
    <Section sectionName="masterSection" sectionPattern="SingleAreaSection">
      <Area areaName="mainArea" areaPattern="GroupedElementsArea">
        <!-- GroupElements with form controls -->
      </Area>
    </Section>
  </Page>
</UIDescription>
```

Real file: `src/Visit/PR/Visit_Reschedule/Visit_RescheduleUI.userinterface.xml`

---

## SingleSectionPage (List Overview)

```xml
<UIDescription name="Order::Overview" schemaVersion="0.0.0.5">
  <Page pagePattern="SingleSectionPage">
    <PageHeader>
      <Bindings>
        <Resource target="title" type="Label" id="OrderOverviewId" defaultLabel="Order Overview" />
      </Bindings>
      <MenuItems>
        <MenuItem directlyVisible="true" itemId="createNew">
          <Bindings>
            <Resource target="Text" type="Label" id="createNewId" defaultLabel="New" />
            <Resource target="Icon" type="Image" id="Plus_PB" />
          </Bindings>
          <Events>
            <ButtonPressedEvent event="createNew" />
          </Events>
        </MenuItem>
      </MenuItems>
    </PageHeader>
    <Section sectionName="masterSection" sectionPattern="SingleAreaSection">
      <Area areaName="mainArea" areaPattern="SingleElementArea">
        <GroupedList name="ItemList" dataSource="ProcessContext::OverviewList.Items[]">
          <!-- Items, ItemListLayout, Bindings, Events -->
        </GroupedList>
      </Area>
    </Section>
  </Page>
</UIDescription>
```

Real file: `src/Order/PR/Order_Overview/Order_Overview.userinterface.xml`

---

## TabbedViewAreaSection (Tabs within SingleSectionPage)

Use `sectionPattern="TabbedViewAreaSection"` to add a tab bar inside a `SingleSectionPage`:

```xml
<Page pagePattern="SingleSectionPage" cachable="false">
  <Section sectionName="masterSection" sectionPattern="TabbedViewAreaSection"
           currentTab="ProcessContext::CurrentTabName">
    <Area areaName="tabArea" areaPattern="TabElementArea">
      <TabSelector name="TabSelector">
        <Items>
          <Tab tabName="Details" backendSystem="both">
            <Bindings>
              <Resource target="image" type="Image" id="DetailsIcon24" />
              <Resource target="text" type="Label" defaultLabel="Details" />
            </Bindings>
          </Tab>
          <Tab tabName="Items" backendSystem="both">
            <Bindings>
              <Resource target="image" type="Image" id="ListIcon24" />
              <Resource target="text" type="Label" defaultLabel="Items" />
            </Bindings>
          </Tab>
        </Items>
        <Events>
          <ItemSelectedEvent event="tabSelected" />
        </Events>
      </TabSelector>
    </Area>
    <Area areaPattern="MultiArea" areaName="Details">
      <Area areaName="Details" areaPattern="GroupedElementsArea">
        <!-- Tab 1 content -->
      </Area>
    </Area>
    <Area areaPattern="MultiArea" areaName="Items">
      <Area areaName="Items" areaPattern="SingleElementArea">
        <!-- Tab 2 content -->
      </Area>
    </Area>
  </Section>
</Page>
```

---

## Section Patterns

| `sectionPattern`        | Used With           | Description                                |
| ----------------------- | ------------------- | ------------------------------------------ |
| `SingleAreaSection`     | Any `<Page>`        | One area; most dialogs and simple pages    |
| `TabbedViewAreaSection` | `SingleSectionPage` | Tab bar + content areas keyed by `tabName` |

---

## Area Patterns

| `areaPattern`         | Contents                                       | Description                      |
| --------------------- | ---------------------------------------------- | -------------------------------- |
| `GroupedElementsArea` | `<GroupElement>` children                      | Form layout with labeled groups  |
| `SingleElementArea`   | One list/map control                           | Full-area list, map, or calendar |
| `TabElementArea`      | `<TabSelector>`                                | Contains the tab switcher        |
| `MultiArea`           | Nested `<Area>`                                | Wraps tab content panes          |
| `Card`                | `<CardContainer>`, `<NavigationMenuContainer>` | Cockpit card area                |

---

## PageHeader MenuItems

```xml
<PageHeader>
  <Bindings>
    <!-- Static title -->
    <Resource target="title" type="Label" id="PageTitleId" defaultLabel="Page Title" />
    <!-- OR dynamic title from a BO property -->
    <Binding target="title" binding="ProcessContext::Bo.name" bindingMode="ONE_WAY" />
  </Bindings>
  <MenuItems>
    <!-- directlyVisible="true" → shows in top bar (primary actions, max 2) -->
    <!-- directlyVisible="false" → overflow/ellipsis menu -->
    <MenuItem directlyVisible="true" itemId="save">
      <Bindings>
        <Resource target="Text" type="Label" defaultLabel="Save" />
        <Resource target="Icon" type="Image" defaultImage="light/done_24.png" />
        <!-- Optional: enable/disable based on BO method -->
        <Binding type="Editable" target="Editable" call="ProcessContext::Bo.isSaveEnabled" />
        <!-- Optional: role-based visibility -->
      </Bindings>
      <Events>
        <ButtonPressedEvent event="saveItem" />
      </Events>
    </MenuItem>
  </MenuItems>
</PageHeader>
```

`id` on `<Resource>` is the label key for translation. Must be non-empty when `type="Label"`.
`defaultLabel` is the fallback when no translation is found.