` | Major page sections | Yes | | `` | Content areas within sections | Yes | | `` | Data bindings to ProcessContext | Yes | | `` | User interaction handlers | No | | `` | Action buttons in header | No | ## Example 1: List View - Call_AccountReceivablesUI **Location:** `src/Call/PR/Call_AccountReceivables/Call_AccountReceivablesUI.userinterface.xml` **Purpose:** Display a list of account receivables with responsive layouts ### Complete UI XML ```xml

``` ### Analysis #### Page Structure ```xml ``` - **pagePattern:** Template for page layout - `SingleSectionPage` - One main section - `SingleSectionDialogPage` - Dialog-style page - `TabbedSectionPage` - Multiple tabs - **cachable:** Whether page state can be cached #### GroupedList Control ```xml ``` - **dataSource:** Binds to ProcessContext LO - Automatically iterates through list items - Each item rendered using ItemListLayout #### Responsive Layouts **Three layout definitions:** 1. **Default** - Desktop/browser 2. **Tablet** - Tablet devices 3. **Phone** - Mobile phones The framework automatically detects the device and renders the appropriate layout. #### Column/Row Grid System ```xml ``` - **Col:** Column container with width - **Row:** Content row with layout type - **layoutType:** Styling class (itemIdentifier, itemValue, itemLabel, etc.) - **bindingId:** Reference to binding definition **Width Units:** - `em` - Relative to font size - `%` - Percentage of container - `flex` - Flexible sizing #### Data Bindings ```xml ``` **Binding Attributes:** - **target:** UI element identifier (referenced by bindingId) - **type:** Data type (Text, Decimal, Date, Image, etc.) - **binding:** Path to data (`.amount` = current list item's amount property) - **formatV2:** Formatting template (10.2 = 10 digits, 2 decimals) - **bindingMode:** ONE_WAY (read-only) or TWO_WAY (editable) **Binding Path Patterns:** - `.propertyName` - Current item property (in list context) - `ProcessContext::VariableName` - Process variable - `ProcessContext::BoName.propertyName` - BO property - `ProcessContext::LoName.propertyName` - LO property #### Resource Bindings (Labels) ```xml ``` - **Resource:** Localized text - **defaultLabel:** Fallback if translation missing - **id:** Lookup key in localization files ## Example 2: Form View (Read-Only) - Visit_InfoUI **Location:** `src/Visit/PR/Visit_Info/Visit_InfoUI.userinterface.xml` **Purpose:** Display visit information in a form layout ### Complete UI XML ```xml

``` ### Analysis #### GroupedElementsArea Pattern ```xml ``` Creates collapsible/expandable form sections. #### Merger Control (Combined Fields) ```xml ... ... ``` **Purpose:** Combine two related fields with shared label - **pattern:** `twoInputControls` (two fields side-by-side) - **labelHandling:** `Combined` (single label for both) - **leftRatio/rightRatio:** Width distribution (5:5 = 50/50 split) ## Example 3: Editable Form with Events - Visit_RescheduleUI **Location:** `src/Visit/PR/Visit_Reschedule/Visit_RescheduleUI.userinterface.xml` **Purpose:** Edit visit date/time with save action ### Complete UI XML ```xml

``` ### Analysis #### Menu Items (Action Buttons) ```xml ``` **Event Flow:** ``` User clicks "Done" button | UI fires ButtonPressedEvent("rescheduleVisit") | Process handles event (defined in Process definition) | Process action executes (e.g., save, validate, navigate) ``` #### TWO_WAY Data Binding ```xml ``` - **Read:** UI displays current value from BO - **Write:** User edits -> value written back to BO - Required for editable fields #### Editable vs Disabled - **editable="false":** Computed/calculated fields (looks editable but cannot be modified) - **disabled="true":** Greyed out, clearly read-only ## UI Control Types ### Input Controls | Control | Purpose | Example Use | | ---------------------- | ------------------------------ | ---------------------- | | **InputArea** | Single-line text input/display | Name, ID, Status | | **InputAreaMultiLine** | Multi-line text input/display | Notes, Description | | **DatePickerField** | Date selection | Visit Date, Due Date | | **TimePickerField** | Time selection | Start Time, End Time | | **DropdownField** | Single selection from list | Status, Type, Category | | **CheckboxField** | Boolean toggle | Active, Required | | **NumericField** | Number input | Quantity, Price | ### List Controls | Control | Purpose | Example Use | | --------------- | --------------------------- | --------------------------- | | **GroupedList** | List of items from LO | Account Receivables, Visits | | **SimpleList** | Basic list without grouping | Options, Choices | | **Grid** | Tabular data display | Order Items, Products | ### Container Controls | Control | Purpose | Example Use | | ---------------- | ------------------------------ | -------------------------- | | **GroupElement** | Grouped form fields with title | Visit Information, Address | | **Merger** | Combine related fields | Date/Time, First/Last Name | | **TabStrip** | Tabbed interface | Order Tabs, Product Tabs | ### Layout Controls | Element | Purpose | Example Use | | ---------- | ---------------- | ------------------- | | **Col** | Column container | Grid layout columns | | **Row** | Row container | Grid layout rows | | **Spacer** | Empty space | Visual separation | ## Binding Patterns ### Pattern 1: Process Variable ```xml ``` ### Pattern 2: BO Property ```xml ``` ### Pattern 3: BO Nested Property ```xml ``` ### Pattern 4: LO Item Property (List Context) ```xml ``` ### Pattern 5: LO Property (List Level) ```xml ``` ### Pattern 6: Object Property Path ```xml ``` ## Binding Modes | Mode | Direction | Use Case | | ------------ | --------- | --------------------- | | **ONE_TIME** | Read once | Static labels, titles | | **ONE_WAY** | BO -> UI | Read-only displays | | **TWO_WAY** | BO <-> UI | Editable fields | ## Format Patterns ### Decimal Formatting ```xml ``` **formatV2="10.2":** 10 total digits, 2 decimal places. Example: 1234.56 ### Date Formatting ```xml ``` **format options:** - `shortDate` - MM/DD/YYYY - `longDate` - Month DD, YYYY - `dateTime` - MM/DD/YYYY HH:MM ### Currency Formatting ```xml ``` Framework adds currency symbol based on locale. ## Responsive Layout Strategy ### Layout Hierarchy ``` ``` ### Design Principles **Desktop (Default):** - Horizontal layout - Multiple columns visible - Fixed widths in `em` - More information density **Tablet:** - Moderate horizontal layout - Some columns combined - Mix of fixed and flexible widths **Phone:** - Vertical/stacked layout - Minimal columns (1-2) - Flexible widths (`flex`) - Essential information only ## Event Handling ### UI Events **Common Events:** - `ButtonPressedEvent` - Button/menu item clicked - `ItemSelectedEvent` - List item selected - `ValueChangedEvent` - Field value changed - `SwipeEvent` - Swipe gesture - `LongPressEvent` - Long press on item ### Event Definition (UI) ```xml ``` ### Event Handler (Process) ```xml Visit::RescheduleUI ``` ## Best Practices ### 1. Use Appropriate Binding Modes ```xml ``` ### 2. Provide Responsive Layouts Always define Phone, Tablet, and Default layouts for lists: ```xml ``` ### 3. Use Meaningful Layout Types ```xml ``` ### 4. Localize All Text ```xml ``` ### 5. Group Related Fields ```xml ``` ### 6. Use Mergers for Related Pairs ```xml ``` ## Key Takeaways 1. **UI binds to ProcessContext** variables (BOs, LOs, simple types) 2. **Responsive layouts** adapt to device (Phone, Tablet, Default) 3. **Binding modes** control data flow (ONE_TIME, ONE_WAY, TWO_WAY) 4. **Col/Row grid system** structures item layouts 5. **GroupElement** organizes form fields into sections 6. **MenuItems** define action buttons in header 7. **Events** connect UI interactions to Process actions 8. **Resource bindings** provide localized labels 9. **Format patterns** control display (dates, decimals, currency) 10. **Control types** match data types (InputArea, DatePicker, GroupedList) ## Files Referenced | File Path | Purpose | | ------------------------------------------------------------------------------- | --------------------------------- | | src/Call/PR/Call_AccountReceivables/Call_AccountReceivablesUI.userinterface.xml | List view with responsive layouts | | src/Visit/PR/Visit_Info/Visit_InfoUI.userinterface.xml | Form view with grouped elements | | src/Visit/PR/Visit_Reschedule/Visit_RescheduleUI.userinterface.xml | Editable form with events | --- _This documentation is maintained by the Modeler CLI plugin and refreshed on workspace upgrade._