From fee63d563a676961cbf45eb2529c66f384d15cb6 Mon Sep 17 00:00:00 2001 From: Zhongwei Li Date: Sun, 30 Nov 2025 08:55:20 +0800 Subject: [PATCH] Initial commit --- .claude-plugin/plugin.json | 12 + README.md | 3 + SKILL.md | 419 +++++++++++++++++++++++ plugin.lock.json | 73 ++++ references/adaptation-projects.md | 479 ++++++++++++++++++++++++++ references/annotations.md | 415 ++++++++++++++++++++++ references/configuration.md | 549 ++++++++++++++++++++++++++++++ references/deployment.md | 430 +++++++++++++++++++++++ references/getting-started.md | 375 ++++++++++++++++++++ references/page-editor.md | 482 ++++++++++++++++++++++++++ references/preview.md | 511 +++++++++++++++++++++++++++ 11 files changed, 3748 insertions(+) create mode 100644 .claude-plugin/plugin.json create mode 100644 README.md create mode 100644 SKILL.md create mode 100644 plugin.lock.json create mode 100644 references/adaptation-projects.md create mode 100644 references/annotations.md create mode 100644 references/configuration.md create mode 100644 references/deployment.md create mode 100644 references/getting-started.md create mode 100644 references/page-editor.md create mode 100644 references/preview.md diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..265ad62 --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,12 @@ +{ + "name": "sap-fiori-tools", + "description": "Develops SAP Fiori applications using SAP Fiori tools extensions for VS Code and BAS. Covers Fiori Elements, Page Editor, and Freestyle SAPUI5 generation.", + "version": "1.0.0", + "author": { + "name": "Zhongwei Li", + "email": "zhongweili@tubi.tv" + }, + "skills": [ + "./" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..a6ab22a --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# sap-fiori-tools + +Develops SAP Fiori applications using SAP Fiori tools extensions for VS Code and BAS. Covers Fiori Elements, Page Editor, and Freestyle SAPUI5 generation. diff --git a/SKILL.md b/SKILL.md new file mode 100644 index 0000000..d7b3132 --- /dev/null +++ b/SKILL.md @@ -0,0 +1,419 @@ +--- +name: sap-fiori-tools +description: | + Develops SAP Fiori applications using SAP Fiori tools extensions for VS Code and SAP Business Application Studio. + Use when: generating Fiori Elements or Freestyle SAPUI5 applications, configuring Page Editor for List Report + or Object Page, working with annotations and Service Modeler, setting up deployment to ABAP or Cloud Foundry, + creating adaptation projects, using Guided Development, previewing with mock data or live data, configuring + SAP Fiori launchpad, or using AI-powered generation with Project Accelerator/Joule. + Technologies: SAP Fiori Elements, SAPUI5, OData V2/V4, CAP, SAP BTP, ABAP, Cloud Foundry. +license: GPL-3.0 +metadata: + version: "1.0.0" + last_verified: "2025-11-25" +--- + +# SAP Fiori Tools Development Skill + +## Related Skills + +- **sapui5**: Use for underlying UI5 framework details, custom control development, and advanced UI patterns +- **sap-cap-capire**: Use for CAP service integration, OData consumption, and backend service configuration +- **sap-abap-cds**: Use when consuming ABAP CDS views as OData services or working with ABAP backends +- **sap-btp-cloud-platform**: Use for deployment targets, BTP destination configuration, and Cloud Foundry deployment +- **sap-api-style**: Use when documenting OData APIs or following API documentation standards for Fiori apps + +Comprehensive guidance for developing SAP Fiori applications using SAP Fiori tools extensions. + +## Overview + +SAP Fiori tools is a collection of extensions that simplifies SAP Fiori elements and SAPUI5 application development. It includes six main components: + +| Component | Purpose | +|-----------|---------| +| **Application Wizard** | Generate Fiori Elements and Freestyle SAPUI5 templates | +| **Application Modeler** | Visual Page Map and Page Editor for configuration | +| **Guided Development** | Step-by-step feature implementation guides | +| **Service Modeler** | Visualize OData service metadata and annotations | +| **Annotations Language Server** | Code completion, diagnostics, i18n for annotations | +| **Environment Check** | Validate setup and destination configurations | + +**Minimum SAPUI5 Version**: 1.65+ +**Support Component**: CA-UX-IDE + +## Sample Projects + +Official SAP sample repository with Fiori Elements applications built using SAP Fiori tools: + +**Repository**: [SAP-samples/fiori-tools-samples](https://github.com/SAP-samples/fiori-tools-samples) + +| Folder | Content | +|--------|---------| +| `V2/` | OData V2 Fiori Elements samples | +| `V4/` | OData V4 Fiori Elements samples | +| `cap/` | CAP project integration samples | +| `app-with-tutorials/` | Tutorial companion projects | + +**Quick Start**: +```bash +git clone [https://github.com/SAP-samples/fiori-tools-samples](https://github.com/SAP-samples/fiori-tools-samples) +cd fiori-tools-samples/V4/apps/salesorder +npm install +npm start +``` + +--- + +## Quick Start Commands + +Access features via Command Palette (`Cmd/Ctrl + Shift + P`): + +``` +Fiori: Open Application Generator # Create new application +Fiori: Open Application Info # View project commands +Fiori: Open Page Map # Visual navigation editor +Fiori: Open Guided Development # Feature implementation guides +Fiori: Open Service Modeler # Explore OData service +Fiori: Add Deployment Configuration # Setup ABAP or CF deployment +Fiori: Add Fiori Launchpad Configuration # Configure FLP tile +Fiori: Validate Project # Run project validation +Fiori: Open Environment Check # Troubleshoot destinations +``` + +## Application Generation + +### Fiori Elements Floorplans + +| Floorplan | OData V2 | OData V4 | Use Case | +|-----------|----------|----------|----------| +| List Report Page | Yes | Yes | Browse large datasets, navigate to details | +| Worklist Page | Yes | 1.99+ | Process work items, task completion | +| Analytical List Page | Yes | 1.90+ | Data analysis, KPI visualization | +| Overview Page | Yes | Yes | Role-based dashboards, multi-card views | +| Form Entry Object Page | Yes | Yes | Structured data entry | +| Custom Page | No | Yes | Extensible custom UI with building blocks | + +### Data Source Options + +1. **SAP System** - Connect to ABAP on-premise or BTP systems +2. **CAP Project** - Use local Node.js or Java CAP project +3. **EDMX File** - Upload metadata for mock-only development +4. **SAP Business Accelerator Hub** - Development/testing only (deprecated) + +### Generated Project Structure + +``` +webapp/ + ├── manifest.json # App descriptor + ├── Component.js # UI5 component + ├── localService/ # Mock data and metadata + │ ├── metadata.xml + │ └── mockdata/ + └── annotations/ # Local annotation files +package.json +ui5.yaml # UI5 tooling config +ui5-local.yaml # Local development config +``` + +## Page Editor Configuration + +The Page Editor provides visual configuration for Fiori Elements pages. + +### List Report Page Elements + +- **Filter Fields** - Configure filter bar with value helps +- **Table** - Configure columns, actions, row selection +- **Multiple Views** - Create tabbed table views +- **Analytical Chart** - Add data visualizations + +### Object Page Elements + +- **Header** - Configure header facets and actions +- **Sections** - Form, Table, Identification, Chart, Group sections +- **Footer** - Configure footer actions + +### Extension-Based Elements (OData V4) + +| Element | Location | Description | +|---------|----------|-------------| +| Custom Column | Table | Add custom columns with fragments | +| Custom Section | Object Page | Add custom sections with views | +| Custom Action | Header/Table | Add action buttons with handlers | +| Custom View | List Report | Add custom tab views | +| Controller Extension | Page | Override lifecycle methods | + +For detailed configuration, see `references/page-editor.md`. + +## Annotations Development + +### Language Server Features + +- **Code Completion** (`Ctrl/Cmd + Space`) - Context-aware suggestions +- **Micro-Snippets** - Insert complete annotation blocks +- **Diagnostics** - Validation against vocabularies +- **i18n Support** - Externalize translatable strings +- **Peek/Go to Definition** - Navigate to annotation sources + +### Supported Vocabularies + +OASIS OData v4: Core, Capabilities, Aggregation, Authorization, JSON, Measures, Repeatability, Temporal, Validation + +SAP Vocabularies: Analytics, CodeList, Common, Communication, DataIntegration, DirectEdit, Graph, Hierarchy, HTML5, ODM, PDF, PersonalData, Preview, Session, UI + +### Annotation Files Location + +- **CDS files**: CAP project `.cds` files +- **XML files**: `webapp/annotations/*.xml` + +For annotation patterns, see `references/annotations.md`. + +## Preview Options + +### NPM Scripts + +```bash +npm start # Live data from backend +npm run start-mock # Mock data via MockServer +npm run start-local # Mock data + local SAPUI5 resources +npm run start-noflp # Without Fiori launchpad sandbox +``` + +### Run Control + +Configure via `launch.json` in `.vscode/` folder. Supports: +- Multiple run configurations per workspace +- VS Code and BAS integration +- App-to-app navigation preview + +### Mock Data + +- **Data Editor** - Visual mock data management +- **AI Generation** - Generate contextual mock data (requires SAP Build Code) +- **MockServer** - Automatic mock server setup + +For preview details, see `references/preview.md`. + +## Deployment + +### ABAP Deployment + +**Prerequisites**: +- SAP_UI 7.53+ +- SAPUI5 ABAP Repository service enabled +- S_DEVELOP authorization + +**Configuration**: +```bash +npx fiori add deploy-config # Generate ui5-deploy.yaml +npm run deploy # Execute deployment +``` + +**Generated Files**: `ui5-deploy.yaml`, updated `package.json` + +### Cloud Foundry Deployment + +**Prerequisites**: +- MTA tool: `npm i -g mta` +- CF CLI with multiapps plugin +- HTML5 Repository service instance + +**Configuration**: +```bash +npx fiori add deploy-config # Select Cloud Foundry +npm run build # Generate mta.yaml +npm run deploy # Deploy to CF +``` + +**Generated Files**: `mta.yaml`, `xs-app.json`, `xs-security.json` + +For deployment details, see `references/deployment.md`. + +## Fiori Launchpad Configuration + +Add FLP tile configuration via: +``` +Fiori: Add Fiori Launchpad Configuration +``` + +**Required Parameters**: +- Semantic Object (unique identifier) +- Action (e.g., "display") +- Title +- Subtitle (optional) + +Configuration updates `manifest.json` with inbound navigation. + +## Adaptation Projects + +Extend existing Fiori applications without modifying source code. + +### Prerequisites + +**On-Premise (VS Code)**: +- SAP_UI 7.54+, SAPUI5 1.72+ +- Base app must have manifest.json +- Cannot use ABAP Cloud packages + +**S/4HANA Cloud & BTP ABAP**: +- Application must be "released for extensibility" +- 3-system landscape with developer tenant +- Required business catalogs assigned + +### Adaptation Workflow + +1. Create adaptation project via Template Wizard +2. Make UI adaptations in Adaptation Editor +3. Preview adaptation +4. Deploy to ABAP repository + +### Adaptation Capabilities + +| Adaptation | Description | +|------------|-------------| +| Control Variants | Create page variants/views | +| Fragments | Add UI fragments to extension points | +| Controller Extensions | Override/extend controller methods | +| App Descriptor Changes | Modify manifest.json settings | +| OData Service | Add/replace OData services | +| Component Usages | Add SAPUI5 component references | + +For adaptation details, see `references/adaptation-projects.md`. + +## AI-Powered Generation + +### Project Accelerator / Joule + +Generate complete CAP projects with Fiori UI from business requirements. + +**Input Formats**: Text, Images, or Combined + +**Generated Output**: +- Entity definitions and associations +- Code lists and value helps +- List Report applications +- Object Page configurations +- Sample data + +**Limitations**: +- No charts or specialized headers +- Do not include personal/sensitive data in requirements + +### AI Mock Data Generation + +Generate contextual mock data using entity property names (requires SAP Build Code subscription). + +## Project Functions + +| Function | Command | +|----------|---------| +| Application Info | `Fiori: Open Application Info` | +| Project Validation | `Fiori: Validate Project` | +| Environment Check | `Fiori: Open Environment Check` | +| Data Editor | Via Application Info page | +| Service Metadata | `Fiori: Open Service Modeler` | +| System Connections | Manage SAP Systems in VS Code | + +### Project Validation Checks + +1. **Project** - Verify package.json, manifest.json, ui5.yaml +2. **Annotation** - Validate annotation files +3. **Specification** - Check manifest and changes folder +4. **ESLint** - Run ESLint if configured + +## Building Blocks (OData V4) + +Reusable UI components for custom pages and sections: + +| Block | Use Case | +|-------|----------| +| Chart | Data visualization | +| Filter Bar | Query filtering | +| Table | Tabular data display | +| Page | Custom page container | +| Rich Text Editor | Content editing in custom sections | + +## Troubleshooting + +### Common Issues + +**Port 8080 in use**: System auto-selects next available port + +**HTTPS/SSL errors**: Configure browser to trust localhost certificates + +**Deployment 400 errors**: Check `/IWFND/ERROR_LOG`, configure virus scan in `/IWFND/VIRUS_SCAN` + +**Debug deployment**: +```bash +# macOS/Linux +DEBUG=ux-odata-client npm run deploy + +# Windows +set DEBUG=ux-odata-client & npm run deploy +``` + +### CLI Help + +```bash +npx fiori help # List available commands +npx fiori deploy help # Deployment command help +``` + +## Migration from SAP Web IDE + +Migrate existing projects using: +``` +Fiori: Migrate Project for use in Fiori tools +``` + +**Supported Types**: Fiori Elements (V2/V4), Freestyle SAPUI5, Adaptation Projects, Extensibility Projects + +**Post-Migration**: Run `npm run deploy-config` to update deployment configuration. + +For migration details, see `references/getting-started.md`. + +## Guided Development (76+ Guides) + +Access step-by-step implementation guides: +``` +Fiori: Open Guided Development +``` + +**Guide Categories**: +- Building Blocks (Chart, Filter Bar, Table) +- Page Elements (Cards, Header Facets, Sections) +- Table Enhancements (Column types, Actions) +- Filtering & Navigation +- Configuration (Variant management, Side effects) +- Extensions (Custom actions, sections, columns) + +## Reference Documentation + +For detailed information on specific topics: + +- `references/getting-started.md` - Installation, migration, ADT integration, commands +- `references/configuration.md` - MTA, middlewares, SAPUI5 versions, project functions +- `references/page-editor.md` - Page Editor configuration details +- `references/annotations.md` - Annotation patterns and examples +- `references/deployment.md` - Deployment configuration details +- `references/adaptation-projects.md` - Adaptation project workflows +- `references/preview.md` - Preview and testing options + +## Documentation Sources + +**Primary Source**: [https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs](https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs) + +**Last Updated**: 2025-11-22 + +| Section | Documentation Link | +|---------|-------------------| +| Getting Started | `Getting-Started-with-SAP-Fiori-Tools/` | +| Generating Apps | `Generating-an-Application/` | +| Developing | `Developing-an-Application/` | +| Previewing | `Previewing-an-Application/` | +| Deploying | `Deploying-an-Application/` | +| Project Functions | `Project-Functions/` | +| Adaptation Projects | Root docs folder | + +**SAP Resources**: +- Fiori Design Guidelines: [https://experience.sap.com/fiori-design-web/](https://experience.sap.com/fiori-design-web/) +- SAP Help Portal: [https://help.sap.com/docs/SAP_FIORI_tools](https://help.sap.com/docs/SAP_FIORI_tools) diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..1cdf0af --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,73 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:secondsky/sap-skills:skills/sap-fiori-tools", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "33ad98de2cfae8c3e4cb1df0c80510b95a9ae875", + "treeHash": "85a796a8d15c23d6d0f2f1fe66893194e2397094edb1702279a235f6ca462fbd", + "generatedAt": "2025-11-28T10:28:13.844021Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "sap-fiori-tools", + "description": "Develops SAP Fiori applications using SAP Fiori tools extensions for VS Code and BAS. Covers Fiori Elements, Page Editor, and Freestyle SAPUI5 generation.", + "version": "1.0.0" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "7681fbfc151af583a026bd241902cd6937ef20fe599d65e2fba51da45b531230" + }, + { + "path": "SKILL.md", + "sha256": "e00c79ec49ed0a81ce8e0f0e1120750d011ea8f9ba7b98a7e3e4036516e27b21" + }, + { + "path": "references/page-editor.md", + "sha256": "5e234decae5c075772a86152e5014464721570aede50ee7ee08167fb40fe2f47" + }, + { + "path": "references/annotations.md", + "sha256": "ffa5d85a99c5c7dd5ad5df857c42f6730d2e5f2a9b63859f86c6e2e6c4be0e7a" + }, + { + "path": "references/getting-started.md", + "sha256": "439c78ad1444e5812d0dea4437b7e312879f4b65ab136068c086dd332f52ddea" + }, + { + "path": "references/adaptation-projects.md", + "sha256": "9c7e384fec4622ad2b76646600265803cf2b1f40eb1d3ed75be05f76c1f5615b" + }, + { + "path": "references/deployment.md", + "sha256": "58fedd8e9dca69b02aea4e328fb3f51934bf82ca081a6bc726d13ddfec5e6dc3" + }, + { + "path": "references/configuration.md", + "sha256": "eae2ae9d55f2ee09327d947840e3a0a7bd1695674e20e4a8f365c9ce75ee8d77" + }, + { + "path": "references/preview.md", + "sha256": "611d07ad65f2b2da9b2d7d0dd3ea5cf26b733757500099bfbacb905e6227ecff" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "6796392db809275d28bd8ba90073c6171767e692ca582acfb421237a2ae3d2f8" + } + ], + "dirSha256": "85a796a8d15c23d6d0f2f1fe66893194e2397094edb1702279a235f6ca462fbd" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/references/adaptation-projects.md b/references/adaptation-projects.md new file mode 100644 index 0000000..b0c075c --- /dev/null +++ b/references/adaptation-projects.md @@ -0,0 +1,479 @@ +# Adaptation Projects Reference + +Comprehensive reference for creating and managing SAP Fiori adaptation projects. + +## Table of Contents + +1. [Overview](#overview) +2. [On-Premise Systems](#on-premise-systems) +3. [S/4HANA Cloud and BTP ABAP](#s4hana-cloud-and-btp-abap) +4. [Creating Adaptation Projects](#creating-adaptation-projects) +5. [Adaptation Capabilities](#adaptation-capabilities) +6. [Controller Extensions](#controller-extensions) +7. [Fragments and Extension Points](#fragments-and-extension-points) +8. [Preview and Testing](#preview-and-testing) +9. [Deployment](#deployment) +10. [Upgrade-Safe Rules](#upgrade-safe-rules) + +--- + +## Overview + +Adaptation projects allow extending existing SAP Fiori applications without modifying source code. They create **application variants** that maintain separation from the original application. + +### Benefits + +- Non-invasive extensions +- Independent lifecycle from base application +- Upgrade-safe modifications +- Version control support + +### Supported Environments + +| Environment | IDE Support | Deployment Target | +|-------------|-------------|-------------------| +| On-Premise ABAP | VS Code | ABAP Repository | +| SAP S/4HANA Cloud | BAS | BTP ABAP Environment | +| SAP BTP ABAP | BAS, VS Code | BTP ABAP Environment | + +--- + +## On-Premise Systems + +### Prerequisites + +| Requirement | Version/Details | +|-------------|-----------------| +| SAP_UI Component | 7.54 or higher | +| System SAPUI5 Version | 1.72 or higher | +| Base App SAPUI5 Version | 1.30 or higher | +| Base App | Must have manifest.json | + +### Limitations + +- Cannot use ABAP Cloud Development packages +- Apps with mandatory startup parameters unsupported +- Previously deployed application variants cannot serve as bases +- Apps using `sap.ca.scfld.md` scaffolding unsupported + +### Required Services + +Enable and activate: +- `/sap/bc/adt` - ABAP Development Tools +- `/sap/bc/ui2/app_index/` - Application Index + +Grant access to: +- `/sap/bc/adt/discovery` + +### Workflow + +1. Create adaptation project +2. (Optional) Initialize Git repository +3. Make adaptations +4. Preview adaptation project +5. Deploy to ABAP repository + +--- + +## S/4HANA Cloud and BTP ABAP + +### Prerequisites + +**SAP S/4HANA Cloud**: +- Verify extensibility support in SAP Fiori Apps Reference Library +- 3-system landscape with developer tenant required +- Submit enhancement requests via Influence Opportunity Homepage if needed + +**Both Environments**: +- Source application must be "released for extensibility" +- Destination to development tenant configured +- Required business catalogs assigned + +### Required Business Catalogs + +| Catalog | Purpose | +|---------|---------| +| SAP_A4C_BC_DEV_UID_PC | Development - UI Deployment | +| SAP_A4C_BC_DEV_OBJ_DIS_PC | Retrieve extensible applications | + +### Destination Configuration + +Create destination in BTP Cockpit pointing to development tenant with appropriate authentication. + +--- + +## Creating Adaptation Projects + +### Via Template Wizard + +1. Open Command Palette: `Cmd/Ctrl + Shift + P` +2. Execute: `Fiori: Open Template Wizard` +3. Select "Adaptation Project" tile +4. Configure project settings + +### Configuration Fields + +| Field | Description | +|-------|-------------| +| Project Name | Unique project identifier | +| Application Title | Display title | +| Namespace | Prefixed with `customer.` | +| SAPUI5 Version | Target UI5 version | +| Target System | SAP system connection | +| Application | Base application to extend | + +### Via Generator Command + +``` +Fiori: Open Adaptation Project Generator +``` + +### Add Deployment Configuration + +Optional during creation or added later via: +``` +Fiori: Add Deployment Configuration +``` + +--- + +## Adaptation Capabilities + +### UI Adaptations + +| Adaptation | Description | +|------------|-------------| +| Control Variants | Create page variants/views | +| Hide/Show Controls | Toggle control visibility | +| Move Controls | Reposition UI elements | +| Rename Labels | Change display texts | +| Change Properties | Modify control properties | + +### Structural Changes + +| Change | Description | +|--------|-------------| +| Add Fragments | Insert UI fragments at extension points | +| Controller Extensions | Override/extend controller methods | +| Component Usages | Add SAPUI5 component references | + +### Configuration Changes + +| Change | Description | +|--------|-------------| +| App Descriptor | Modify manifest.json settings | +| OData Service | Add/replace OData services | +| Local Annotations | Add annotation files | +| Inbound Navigation | Modify navigation configuration | + +### Adaptation Editor UI Operations + +Access: Right-click `manifest.appdescr_variant` > "Open Adaptation Editor" + +| Operation | Method | +|-----------|--------| +| Modify properties | Select element, adjust in Properties pane | +| Add fields | Right-click group > "Add Field" > select fields | +| Create groups | Right-click > "Add Group" | +| Add sections | Right-click sections > "Add Section" | +| Rename elements | Double-click or right-click > rename | +| Reorder elements | Drag and drop | +| Move elements | Cut, highlight target, paste | +| Combine fields | Ctrl+click multiple (max 3) > "Combine" | +| Split fields | Right-click combined > "Split" | +| Remove elements | Right-click > remove or Delete key | + +**Note**: Removed fields remain available for re-adding. Mandatory fields require confirmation. + +### Quick Actions Availability Matrix + +Quick actions vary by SAPUI5 version. Key milestones: + +| Action | Min Version | OData | +|--------|-------------|-------| +| Add Controller to Page | 1.71 | V2, V4 | +| Add Header Field | 1.71 | V2, V4 | +| Add Custom Section | 1.71 | V2, V4 | +| Enable/Disable Clear Button | 1.71 | V2, V4 | +| Add Custom Table Action | 1.96 | V2, V4 | +| Add Custom Table Column | 1.96 | V2, V4 | +| Change Table Columns | 1.96 | V2, V4 | +| Enable Variant Management | 1.96 | V2, V4 | +| Add Custom Page Action | 1.120 | V2, V4 | +| Add Local Annotation File | 1.133 | V2, V4 | +| Add Subpage (V4) | 1.135 | V4 only | + +--- + +## Controller Extensions + +### Purpose + +Enhance existing controller functionality with: +- New methods +- Override methods +- Lifecycle hooks + +### File Structure + +``` +webapp/ +├── changes/ +│ ├── coding/ +│ │ └── MyExtension.js +│ └── MyExtension.controllerExtension.change +``` + +### Extension Template + +```javascript +sap.ui.define([ + "sap/ui/core/mvc/ControllerExtension" +], function(ControllerExtension) { + "use strict"; + + return ControllerExtension.extend("customer.project.extension.MyExtension", { + // Override member for lifecycle and base methods + override: { + // Lifecycle methods + onInit: function() { + // Called after base controller onInit + }, + onBeforeRendering: function() { + // Called before view rendering + }, + onAfterRendering: function() { + // Called after view rendering + }, + onExit: function() { + // Called on controller destruction + } + }, + + // Custom methods (outside override) + myCustomMethod: function(oEvent) { + // Custom business logic + } + }); +}); +``` + +### Event Handler Binding + +For methods in XML fragments, use prefix: +``` +.extension. +``` + +Example: +```xml +