sap-fiori-tools

# 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
- **dependency-upgrade**: Use when tightening npm/JavaScript supply-chain controls for UI tooling and dependency updates

Comprehensive guidance for developing SAP Fiori applications using SAP Fiori tools extensions.

## Table of Contents
- [Overview](#overview)
- [Sample Projects](#sample-projects)
- [Quick Start Commands](#quick-start-commands)
- [Application Generation](#application-generation)
- [Page Editor Configuration](#page-editor-configuration)
- [Annotations Development](#annotations-development)
- [MCP Tools (AI-Assisted Development)](#mcp-tools-ai-assisted-development)
- [Bundled Resources](#bundled-resources)

## 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