al-development-collection/prompts/al-pages.prompt.md

AI Native AL Development toolkit for Microsoft Dynamics 365 Business Central with GitHub Copilot integration

---
agent: agent
model: Claude Sonnet 4.5
description: 'Design and customize Business Central pages using the AL Page Designer for enhanced user experience.'
tools: ['runCommands', 'runTasks', 'github/github-mcp-server/*', 'microsoft-docs/*', 'edit', 'runNotebooks', 'search', 'new', 'Azure MCP/search', 'extensions', 'runSubagent', 'usages', 'vscodeAPI', 'problems', 'changes', 'testFailure', 'openSimpleBrowser', 'fetch', 'githubRepo', 'ms-dynamics-smb.al/al_build', 'ms-dynamics-smb.al/al_incremental_publish', 'ms-dynamics-smb.al/al_open_page_designer', 'todos', 'runTests']
---

# AL Page Designer Customization

Your goal is to design or customize a Business Central page for `${input:PagePurpose}`.

## Page Designer Workflow

### 1. Open Page Designer
```
al_open_Page_Designer
```

### 2. Page Design Options

#### Creating New Pages
1. **Card Pages** - For single record display
   ```al
   page 50100 "Customer Enhancement Card"
   {
       PageType = Card;
       SourceTable = Customer;
       Caption = 'Customer Enhancement';
       
       layout
       {
           area(Content)
           {
               group(General)
               {
                   field("No."; Rec."No.") { }
                   field(Name; Rec.Name) { }
               }
           }
       }
   }
   ```

2. **List Pages** - For multiple records
3. **Document Pages** - For header/lines structure
4. **Worksheet Pages** - For data entry
5. **Role Centers** - For user dashboards

#### Modifying Existing Pages
1. Use `al_open_Page_Designer` to:
   - Rearrange fields visually
   - Add/remove fields
   - Create new groups
   - Modify field properties
   - Add actions

### 3. Advanced Customizations

#### Field Customizations
```al
field(CustomField; Rec.CustomField)
{
    ApplicationArea = All;
    Importance = Promoted;
    Style = Strong;
    StyleExpr = StyleExpression;
    
    trigger OnValidate()
    begin
        // Custom validation
    end;
}
```

#### Dynamic UI Elements
- Conditional visibility
- Dynamic styling
- Field interactions
- Custom controls

#### Page Extensions
```al
pageextension 50100 "Customer Card Ext" extends "Customer Card"
{
    layout
    {
        addafter(General)
        {
            group(CustomGroup)
            {
                Caption = 'Custom Information';
                field(CustomField; Rec.CustomField)
                {
                    ApplicationArea = All;
                }
            }
        }
    }
    
    actions
    {
        addafter(NewSalesOrder)
        {
            action(CustomAction)
            {
                Caption = 'Custom Process';
                Image = Process;
                
                trigger OnAction()
                begin
                    // Custom logic
                end;
            }
        }
    }
}
```

### 4. Best Practices

#### Layout Organization
1. **Logical Grouping**
   - Related fields together
   - Most important first
   - Consistent ordering

2. **FastTabs Usage**
   - General information first
   - Details in expandable sections
   - Hide rarely used fields

3. **Action Placement**
   - Primary actions promoted
   - Related actions grouped
   - Consistent positioning

#### Performance Considerations
- Limit FlowFields on lists
- Use appropriate field loading
- Optimize factboxes
- Lazy load complex data

### 5. Testing and Deployment

#### Human Gate: UI Changes Review
**Present UI changes for approval before deploying**

1. **Build Changes**
   ```
   al_build
   ```
   
2. **Human Review**: Present build results and UI modifications
   - Show affected pages/fields
   - Describe user experience impact
   - Confirm changes meet requirements

3. **Approval Required**: Wait for confirmation before deployment

4. **Quick Deploy** (only after approval)
   ```
   al_incremental_publish
   ```

5. **User Testing**
   - Navigation flow
   - Data entry efficiency
   - Visual clarity
   - Performance impact

## Common Scenarios

### Simplifying Complex Pages
1. Hide technical fields
2. Group related information
3. Add helpful tooltips
4. Streamline actions

### Mobile Optimization
1. Priority fields first
2. Minimize scrolling
3. Touch-friendly controls
4. Simplified layouts

### Role-Based Customization
1. Show/hide based on permissions
2. Department-specific layouts
3. Personalization options
4. Saved views support

## Workflow

1. Read Page object.
2. Propose visual changes
3. Test and iterate