sap-fiori-tools

What this skill does

# 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

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