**TITLE**: Adding an SAP Fiori Application to an MTA Deployment File with the SAP Fiori Application Generator

**INTRODUCTION**: This document explains how the SAP Fiori Application Generator updates or creates an MTA deployment file when generating a Fiori application. Use these steps to ensure correct Cloud Foundry deployment configuration, confirm required services are present in the MTA, and know the generator behaviors for existing and new MTA files.

**TAGS**: fiori-tools, mta, cloud-foundry, sap-fiori, application-generator, managed-application-router, CAP, destination, deployment

**STEP**: 1 — Add deployment configuration to an existing MTA file

**DESCRIPTION**: When you select a project folder that already contains an MTA file and you run the SAP Fiori Application Generator:
- The generator automatically enables "Add deployment configuration" (sets it to Yes).
- The generator updates the existing mta.yaml (MTA deployment file) in that folder with the supplied deployment configuration for the generated Fiori app.
- Ensure the existing MTA file already defines the required services for the chosen deployment mode:
  - Managed Application Frontend service (for managed application router deployments), or
  - Standalone application router (for standalone router deployments).
- If the MTA file is missing required services, generate or update the MTA using:
  - the MTA generator provided by SAP Fiori tools, or
  - the Application Router generator in SAP Business Application Studio.
- For local CAP projects: you can choose to generate an instance-based destination as part of the Cloud Foundry (CF) deployment configuration, or reuse an existing instance-based destination already defined in the MTA file.

Action checklist for code generation tools:
- Detect existing mta.yaml in selected project folder.
- If found, set addDeploymentConfiguration = true and merge the generated app’s module and resources into mta.yaml.
- Validate presence of required service entries for the selected deployment mode; if missing, either fail with a clear error or prompt for using the MTA/Application Router generator.

**LANGUAGE**: Instructions

**CODE**:
```text
No code snippets in original documentation.
```

**STEP**: 2 — Create an MTA deployment file during application generation

**DESCRIPTION**: If no MTA deployment file exists in the selected project folder, the generator can create a new mta.yaml automatically:
- When adding deployment configuration, select "Cloud Foundry" as the target landscape.
- The generator creates an MTA file configured for a managed application router and places it in the same folder as the generated SAP Fiori application.
- Important constraints:
  - The generated MTA file in this scenario is tied to the application folder and is not suited for multi-application projects.
  - Recommended workflow for multi-application deployments: create a central MTA file at the project root (using the MTA generator first), then generate each SAP Fiori application into subfolders so they can be merged into the single central mta.yaml.

Action checklist for code generation tools:
- If no mta.yaml found and targetLandscape == "Cloud Foundry", generate a manifest/mta.yaml with the managed application router configuration and module definitions for the new app.
- Place the generated mta.yaml in the same folder as the new app when user chooses to create the MTA automatically.
- Warn users when generating mta.yaml inside the application folder that this MTA is not recommended for multi-app deployments and suggest creating a root-level MTA and regenerating the app into a subfolder.

**LANGUAGE**: Instructions

**CODE**:
```text
No code snippets in original documentation.
```

fiori-tools mta cloud-foundry sap-fiori application-generator managed-application-router CAP destination deployment


**TITLE**: Adding JavaScript Code Assist to an SAP Fiori Project (SAPUI5 >= 1.76)

**INTRODUCTION**: Add JavaScript code completion and JSDoc-based assistance for SAPUI5 in an existing SAP Fiori project by adding TypeScript typings and ESLint plugin configuration. Applicable to projects generated with SAPUI5 version 1.76 and newer. Perform changes in the project's root folder.

**TAGS**: fiori-tools, SAPUI5, JavaScript, TypeScript, ESLint, code-assist, jsdoc

**STEP**: 1 — Update package.json devDependencies

**DESCRIPTION**: Merge or update the devDependencies block of your project's package.json to include eslint, the SAP UI5 JSDoc ESLint plugin, and the SAPUI5 TypeScript types. Add or replace the devDependencies entry in the package.json located at the project root.

**LANGUAGE**: JSON

**CODE**:
```json
"devDependencies": { "eslint": "5.16.x", "@sap/eslint-plugin-ui5-jsdocs": "2.0.x", "@sapui5/ts-types": "1.92.x" }
```

**STEP**: 2 — Add tsconfig.json to project root

**DESCRIPTION**: Create a tsconfig.json file at the project root to enable TypeScript-based checking of JavaScript files and include the SAPUI5 type definitions. This enables editor tooling to provide IntelliSense for SAPUI5 APIs in .js files.

**LANGUAGE**: JSON

**CODE**:
```json
{ "compilerOptions": { "module": "none", "noEmit": true, "checkJs": true, "allowJs": true, "types": [ "@sapui5/ts-types" ] } }
```

**STEP**: 3 — Add .eslintrc to project root

**DESCRIPTION**: Create a .eslintrc file at the project root to enable the SAP UI5 JSDoc ESLint rules and basic recommended ESLint rules. This helps surface JSDoc/style/warning diagnostics in editors that integrate ESLint.

**LANGUAGE**: JSON

**CODE**:
```json
{ "plugins": ["@sap/ui5-jsdocs"], "extends": ["plugin:@sap/ui5-jsdocs/recommended", "eslint:recommended"] }
```

**STEP**: 4 — Reinstall node modules

**DESCRIPTION**: Remove the existing node_modules folder and perform a fresh install so the added devDependencies and type packages are installed into the project.

**LANGUAGE**: Shell

**CODE**:
```sh
rm -rf node_modules
npm install
```

**STEP**: 5 — Verify JavaScript code completion

**DESCRIPTION**: Open any .js file in the project (e.g., a controller) in your editor/IDE. With the tsconfig.json and @sapui5/ts-types installed, you should see SAPUI5 code completion and JSDoc-driven assistance for APIs. No code changes required — just open the file to confirm completion.

fiori-tools SAPUI5 JavaScript TypeScript ESLint code-assist jsdoc


**TITLE**: Additional Configuration for SAP Fiori Tooling (Deployment, FLP, Advanced Options)

**INTRODUCTION**: Action-oriented reference for programmatically generating or validating project configuration options used by fiori-tools. Includes precise field names, allowed values, required flags, and JSON examples for Deployment (ABAP and Cloud Foundry), SAP Fiori Launchpad (FLP) registration, and Advanced Options (themes, linting, JS code assist, NPM workspaces, TypeScript).

**TAGS**: fiori-tools, deployment, abap, cloud-foundry, flp, sapui5, eslint, javascript, typescript, cap, npm-workspaces

**STEP**: 1 — Add Deployment Configuration

**DESCRIPTION**: Generate or validate deployment settings. First prompt: whether to enable deployment configuration (boolean). If enabled, require selection of deployTarget ("ABAP" | "CloudFoundry"). When deployTarget == "ABAP", required and optional fields below apply. When deployTarget == "CloudFoundry", only destinationName is required. Preserve behavior: if "Fetch Transport Request list from target system?" is true, the transport request list is retrieved from target system; otherwise manual transportRequestNumber entry is allowed.

- Common fields:
  - enableDeployment: boolean (controls whether to show deployment prompts)
  - deployTarget: "ABAP" | "CloudFoundry"
- ABAP-specific fields:
  - destinationName: string (required) — ABAP destination to backend
  - isCloudPlatformSystem: boolean — only applicable for Steampunk discovery (answer to "Is this an SAP Cloud Platform system?")
  - targetSystemUrl: string — prefilled from project (Not applicable in SAP Business Application Studio)
  - clientSelection: enum ["useProjectDefinedClient", "enterClient", "useDefaultSystemClient"] — Not applicable to Steampunk or BAS
  - client: string (used when clientSelection == "enterClient")
  - isS4HanaCloudSystem: boolean — not applicable if isCloudPlatformSystem == true
  - sapui5AbapRepository: string (required) — technical name of SAP Fiori app in ABAP repo
  - package: string — ABAP package or "$TMP" for local / no transport (not applicable for S/4HANA Cloud)
  - fetchTransportRequests: boolean — if true, populate dropdown of transport requests from target system; if retrieval fails fallback to manual text entry
  - transportRequestNumber: string — required only when fetchTransportRequests == false and package != "$TMP" (not applicable for S/4HANA Cloud)
- Cloud Foundry-specific fields:
  - destinationName: string (required) — Cloud Foundry destination to backend

**LANGUAGE**: JSON

**CODE**:
```json
{
  "enableDeployment": true,
  "deployTarget": "ABAP",
  "abap": {
    "destinationName": "MY_ABAP_DEST",
    "isCloudPlatformSystem": false,
    "targetSystemUrl": "https://example-abap.sap.com",
    "clientSelection": "useProjectDefinedClient",
    "client": "",
    "isS4HanaCloudSystem": false,
    "sapui5AbapRepository": "Z_MY_FIORI_APP",
    "package": "$TMP",
    "fetchTransportRequests": false,
    "transportRequestNumber": ""
  },
  "cloudFoundry": {
    "destinationName": ""
  }
}
```

**STEP**: 2 — Add FLP Configuration

**DESCRIPTION**: Add SAP Fiori launchpad (FLP) registration data for the app. If configuration already exists, display existing values and allow modification. Required and optional fields below map directly to launchpad tile/intent metadata used by routing and tile creation.

- Fields:
  - enableFlpConfig: boolean (controls whether to show FLP prompts)
  - flp:
    - semanticObject: string (represents a business entity)
    - action: string (operation on the semantic object)
    - title: string (tile title shown in launchpad) — required
    - subtitle: string (optional free-text description shown under title)

**LANGUAGE**: JSON

**CODE**:
```json
{
  "enableFlpConfig": true,
  "flp": {
    "semanticObject": "PurchaseOrder",
    "action": "display",
    "title": "Purchase Order Manager",
    "subtitle": "View and approve purchase orders"
  }
}
```

**STEP**: 3 — Configure Advanced Options

**DESCRIPTION**: Configure optional advanced project settings: SAPUI5 theme, ESLint integration, JavaScript code assist libraries, CAP NPM workspaces update, and experimental TypeScript support. Include version constraints and defaults:

- theme: string — allowed values and constraints:
  - "Morning Horizon" — default if minimum SAPUI5 version >= 1.102
  - "Evening Horizon" — available if minimum SAPUI5 version >= 1.102
  - "Quartz Light"
  - "Belize" — deprecated since SAPUI5 1.120 and removed in 1.136+
  - "Quartz Dark" — available only in SAPUI5 1.72+
- addEslint: boolean — when true include eslint-plugin-fiori-custom (npm package: "eslint-plugin-fiori-custom"); generated project should support npm run lint
- addJsCodeAssist: boolean — when true include libraries/config to provide ui5 code completion and recommended eslint/jsdoc rules; see Adding JavaScript Code Assist docs
- updateNpmWorkspacesForCap: boolean — CAP-only option to update project to use NPM workspaces (required for TypeScript support in CAP)
- enableTypeScriptExperimental: boolean — experimental; requires updateNpmWorkspacesForCap == true for CAP projects

Preserve links in code consumers or docs for theme references and eslint plugin:
- eslint plugin: https://www.npmjs.com/package/eslint-plugin-fiori-custom
- Morning/Evening theme docs and Quartz links referenced in descriptive docs

**LANGUAGE**: JSON

**CODE**:
```json
{
  "advancedOptions": {
    "theme": "Morning Horizon",
    "minimumSapUi5Version": "1.102.0",
    "addEslint": true,
    "eslintPackage": "eslint-plugin-fiori-custom",
    "addJsCodeAssist": true,
    "updateNpmWorkspacesForCap": false,
    "enableTypeScriptExperimental": false,
    "notes": {
      "Belize": "Deprecated since SAPUI5 1.120 and removed in 1.136+",
      "QuartzDark": "Available only on SAPUI5 1.72+",
      "MorningEvening": "Shown only if minimum SAPUI5 version >= 1.102"
    },
    "links": {
      "eslintPlugin": "https://www.npmjs.com/package/eslint-plugin-fiori-custom",
      "themeQuartzLight": "https://help.sap.com/viewer/0120a9e442b44ad9925841dde3bc521f/201909.002/en-US/bf53ad16229e4e438dc0ea5c42064cff.html",
      "themeBelize": "https://help.sap.com/viewer/8ec2dae34eb44cbbb560be3f9f1592fe/1709%20002/en-US/977672c6940f48578d08d770bee236f2.html",
      "themeQuartzDark": "https://help.sap.com/viewer/085edb30fb3d413da552832f3d5c01c0/2002.500/en-US/ed83b3029c724c9cb267cc4c6eff1068.html",
      "themeMorningEvening": "https://experience.sap.com/fiori-design-web/theming/"
    }
  }
}
```

fiori-tools deployment abap cloud-foundry flp sapui5 eslint javascript typescript cap npm-workspaces


**TITLE**: Generate an MTA Deployment (app router) Project for Multiple SAP Fiori Apps

**INTRODUCTION**: Step-by-step actions to generate an app router configuration project (mta.yaml included) using the Fiori CF Application Router Generator, manage its repository layout, and add multiple SAP Fiori elements apps under a single root directory. Use these instructions in automation scripts or code generation tools.

**TAGS**: fiori-tools, mta, approuter, cloud-foundry, app-router, generator, sap-fiori

**STEP**: 1 — Open the CF Application Router Generator

**DESCRIPTION**: Launch the Fiori Cloud Foundry Application Router generator from the Command Palette in VS Code to create an app router configuration project skeleton (includes mta.yaml and router configuration). Use the command name exactly as shown.

**LANGUAGE**: Shell

**CODE**:
```bash
# Open VS Code Command Palette and run:
# Keybinding (use the correct modifier for your OS): [CMD/CTRL] + [Shift] + [P]
# Exact command to execute:
Fiori: Open CF Application Router Generator
```

**STEP**: 2 — Generated project root structure

**DESCRIPTION**: The generator creates a single root directory that contains router configuration plus supporting files. Keep this file structure intact to ensure proper mta packaging and npm management. Note: the router directory name can differ (for example, `configurable`).

**LANGUAGE**: text

**CODE**:
```text
<root-directory>/
├── router/                # folder that contains the app router configuration (name can vary, e.g., 'configurable')
├── .gitignore             # files excluded from source control
├── mta.yaml               # MTA configuration file for the multi-target application
├── package-lock.json      # generated automatically when npm modifies node_modules or package.json
└── package.json           # npm package descriptor for the app router configuration project
```

**STEP**: 3 — Minimal mta.yaml skeleton for an app router project

**DESCRIPTION**: Use this minimal MTA YAML as a starting point. The file declares an approuter module and provides the MTA metadata. Extend modules and resources as you add SAP Fiori apps and backend services.

**LANGUAGE**: YAML

**CODE**:
```yaml
_schema-version: "3.2"
ID: my-mta
version: 1.0.0

modules:
  - name: approuter
    type: approuter.nodejs
    path: router
    parameters:
      memory: 128M
    requires:
      - name: html5-apps-repo-rt
        properties:
          service: html5-apps-repo
resources:
  - name: html5-apps-repo-rt
    type: org.cloudfoundry.managed-service
    properties:
      service-plan: app-runtime
```

**STEP**: 4 — Example package.json for the router module (root-level)

**DESCRIPTION**: Typical package.json for an app router configuration project. Keep dependencies and scripts to enable local development and deployment. Adjust versions and dependencies as required.

**LANGUAGE**: JSON

**CODE**:
```json
{
  "name": "my-approuter",
  "version": "1.0.0",
  "description": "SAP Cloud Foundry App Router for multiple Fiori apps",
  "scripts": {
    "start": "node router/node_modules/@sap/approuter/approuter.js",
    "build": "echo \"build step if needed\""
  },
  "dependencies": {
    "@sap/approuter": "^10.0.0"
  }
}
```

**STEP**: 5 — Add one or more SAP Fiori apps under the root directory

**DESCRIPTION**: After generating the app router project, generate SAP Fiori elements apps inside the same root directory (as sibling folders to `router`) so the router can serve them. Each app will be a separate folder under the root.

**LANGUAGE**: text

**CODE**:
```text
<root-directory>/
├── router/
├── app-fiori-sales/        # Fiori app generated with SAP Fiori generator
│   ├── webapp/
│   └── manifest.json
├── app-fiori-inventory/    # Another Fiori app
│   ├── webapp/
│   └── manifest.json
├── .gitignore
├── mta.yaml
├── package.json
└── package-lock.json
```

**STEP**: 6 — Router types and relevant references

**DESCRIPTION**: Choose the approuter type that fits your deployment: managed approuter (BTP managed), Application Frontend service, or standalone approuter. Consult these references for details and decisions between router types.

**LANGUAGE**: text

**CODE**:
```text
References:
- SAP Tech Bytes: FAQ Managed Approuter vs. Standalone Approuter
  https://blogs.sap.com/2021/05/17/sap-tech-bytes-faq-managed-approuter-vs.-standalone-approuter/

- Developing HTML5 Applications in the Cloud Foundry Environment
  https://help.sap.com/products/BTP/65de2977205c403bbc107264b8eccf4b/11d77aa154f64c2e83cc9652a78bb985.html
```

fiori-tools mta approuter cloud-foundry app-router generator sap-fiori


**TITLE**: Data Source Connections for SAP Fiori Tools (VS Code & SAP Business Application Studio)

**INTRODUCTION**: This document explains actionable steps to configure and use data sources when generating SAP Fiori applications with SAP Fiori tools. It covers connecting to SAP systems (VS Code and SAP Business Application Studio), using OData endpoints (including customized destination URLs), uploading metadata XML files, using SAP Business Accelerator Hub (deprecated), and using local CAP projects (Node.js and Java). Use these steps directly in code-generation workflows and automation scripts.

**TAGS**: fiori-tools, SAP, OData, CAP, VSCode, BAS, ABAP, SAP-BTP, metadata, destination, generation

**STEP**: Connect to an SAP System (VS Code)

**DESCRIPTION**: Create or use a saved SAP system connection in VS Code. Save connection credentials to OS secure storage to avoid repeated authentication. For SAP BTP-hosted ABAP systems you can authenticate with Service Key (requires administrator-provided service key) or Reentrance Ticket (S/4HANA Cloud 2408+). For on-premise ABAP provide system URL and optional client ID and credentials.

- Save credentials to OS secure storage:
  - Windows: Credential Manager
  - macOS: Keychain

- Recommended: If connection details must be updated, delete the system in the SAP Systems view in VS Code and recreate via the project generator.

**LANGUAGE**: n/a

**CODE**:
```text
# Example on-premise system URL and client
https://someurl:12345, client: 010
```

**STEP**: Connect to an SAP System (SAP Business Application Studio)

**DESCRIPTION**: In SAP Business Application Studio (BAS), select a configured destination from the generator’s dropdown. The generator retrieves available destinations automatically. Destinations must expose a catalog service listing OData V2/V4 services. If access to a destination is missing, an error occurs. To reference a destination endpoint directly, use the "Connect to an OData Service with a customized URL" step below.

**LANGUAGE**: n/a

**CODE**:
```text
# BAS requires destinations to provide a catalog service for OData V2 and V4 discovery.
```

**STEP**: Connect to an OData Service with a Customized URL (BAS destinations)

**DESCRIPTION**: Use destination names in the data source URL when the endpoint is accessible only via BAS destinations. Format the URL as <DestinationName>.dest plus the service path. The generator routes requests via the BAS destination.

**LANGUAGE**: n/a

**CODE**:
```text
# If Destination name = MyDestination and original URL = https://someurl.com/someservice
https://MyDestination.dest/someservice
```

**STEP**: Connect to an OData Service (Direct URL)

**DESCRIPTION**: Provide the OData endpoint URL directly in the generator. Both authenticated and unauthenticated OData endpoints are supported. Ensure OData protocol version (V2 or V4) matches the chosen application template; the generator validates and warns on mismatches. If requested, provide username/password when prompted.

**LANGUAGE**: n/a

**CODE**:
```text
# Example direct OData service URL
https://example.com/odata/service.svc/
```

**STEP**: Upload a Metadata Document (metadata XML)

**DESCRIPTION**: Upload an EDMX-format metadata XML file to generate an application without a live backend. The generator validates the metadata.xml file (EDMX format only). Using metadata.xml restricts the generated app to mock data only.

**LANGUAGE**: n/a

**CODE**:
```text
# Supported file: metadata.xml (EDMX format)
# Use uploaded metadata.xml in the generator to select entities and generate the app.
```

**STEP**: Connect to SAP Business Accelerator Hub (Deprecated)

**DESCRIPTION**: SAP Business Accelerator Hub (api.sap.com) is deprecated as a data source in the Application Generator and will be removed in a future release. It can be used for local sandbox development only and must be replaced before production. Ensure you logged into https://api.sap.com/ at least once before using it. Authentication with Username and Password is required when selected in the generator.

**LANGUAGE**: n/a

**CODE**:
```text
# Warning: Deprecated for production use. Use Service Center in SAP Business Application Studio instead.
https://api.sap.com/
```

**STEP**: Use a Local CAP Project (Overview)

**DESCRIPTION**: Select a detected CAP project in your workspace or manually provide the CAP project folder path. The generator retrieves services defined in the CAP project. Local CAP projects are supported for List Report Object Page and Analytical List Page templates based on OData V4 only. Do not mix V2 and V4 service generation within the same CAP app folder—generate V2 apps outside the CAP project if required.

**LANGUAGE**: n/a

**CODE**:
```text
# CAP documentation and versioning reference
https://cap.cloud.sap/docs/about/
https://cap.cloud.sap/docs/advanced/odata#odata-v2-support
```

**STEP**: SAP CAP Node.js Project — Prerequisites and Steps

**DESCRIPTION**: Ensure Node.js and project dependencies are installed for CAP Node.js. If using sample projects, set workspace root to cloned repository and run npm install. Use the generator to select the CAP project and OData service, pick main entity, set project attributes, and generate the app.

- Example project attributes:
  - Module name: incidents
  - Application title: My Incidents
  - Application namespace: sap.fe.demo

**LANGUAGE**: Shell / n/a

**CODE**:
```bash
# If using a sample CAP Node.js project (after cloning)
npm install
# Follow generator wizard:
# - Data source: Use a Local CAP Project
# - OData service: select service from dropdown
# - Entity Selection: pick main entity
# - Project Attributes: set values (e.g., incidents, My Incidents, sap.fe.demo)
# - Finish to generate
```

**STEP**: SAP CAP Java Project — Prerequisites and Steps

**DESCRIPTION**: Verify cds, java, and maven are installed and accessible in the terminal. If using CAP Java sample projects, run mvn to start the project, then run the SAP Fiori generator to select the local CAP project and service. After generation, run the Spring Boot app and open the provided local URL from the generated README to access the app.

- Example project attributes:
  - Module name: books
  - Application title: Books

- After generation run spring boot and open app link (app/books/README.md).

**LANGUAGE**: Shell / n/a

**CODE**:
```bash
# Verify prerequisites
cds --version
java --version
mvn --version

# If using CAP Java sample project
cd cloud-cap-samples-java
mvn spring-boot:run
# After startup, open:
http://localhost:8080

# Generator steps:
# - Data source: Use a Local CAP Project
# - OData service: select (e.g., CatalogService)
# - Entity Selection: pick main entity
# - Project Attributes: set values (e.g., books, Books)
# - Finish to generate

# After generation, in terminal:
mvn spring-boot:run

# Open generated README to find local app URL:
app/books/README.md
# Follow the link, then authenticate when prompted (e.g., user/user or admin/admin)
```

**STEP**: Additional Notes & Recommendations

**DESCRIPTION**: Short checklist and recommendations to ensure smooth generation:

- When connecting first time in VS Code, only "New System" option is available.
- If saved credentials expire or are invalid, the generator prompts reauthentication.
- If generator cannot find a matching @sap/CDS major version in workspace for CAP, generation will be blocked.
- For BAS, required roles to create Fiori elements in BTP ABAP environment: OrgManager, SpaceManager, SpaceDeveloper.
- Use secure storage for saved connections and manage saved systems via SAP Systems view in VS Code.

**LANGUAGE**: n/a

**CODE**:
```text
# Example saved system storage locations:
# Windows: Credential Manager
# macOS: Keychain

# If CAP @sap/CDS version mismatch occurs, ensure matching @sap/CDS major version is installed in workspace or project.
```

fiori-tools SAP OData CAP VSCode BAS ABAP SAP-BTP metadata destination generation


**TITLE**: Floorplan Properties (Fiori Tools) — Configuration and manifest.json settings

**INTRODUCTION**: This document summarizes actionable floorplan property settings used to customize generated Fiori Elements applications after selecting a data source. It lists the main floorplan-level properties, OData V2-specific and OData V4-specific properties, and provides manifest.json examples for variant management. Use these fragments when generating or editing code, scaffolding apps, or producing manifest.json content.

**TAGS**: fiori-tools, floorplan, manifest.json, OData V2, OData V4, list-report, worklist, analytical-list-page, table-type, variant-management

**STEP**: 1 — Main floorplan properties (common concepts)

**DESCRIPTION**: Define the core floorplan properties that drive the list/main area and navigation behavior. These values determine which entity set populates the main content, how navigation to other apps is performed, and what table type is generated for list-like floorplans.

- Main entity: The entity set used to populate the main content area of the list page. For a parametrized entity set, use the result entity set name.
- Navigation entity: The association from the main entity used to navigate to related applications.
- Table type: The type of table to be generated. Applicable to floorplans that display lists in table form (list report, worklist, analytical list). See Fiori design doc: https://experience.sap.com/fiori-design-web/table-types-sap-fiori-elements/

**LANGUAGE**: Text

**CODE**:
```text
// Conceptual properties to set in your floorplan configuration/UI or metadata:
Main entity: <entitySetName or resultEntitySetName>
Navigation entity: <associationName>
Table type: (e.g., Default, Analytical, Tree, Responsive)
```

**STEP**: 2 — Defaults and auto-populated values (Tip)

**DESCRIPTION**: Default behaviors based on OData service capabilities—useful to decide when to override defaults.

- If the OData V4 service supports the Analytical table type and the selected main entity supports an analytical table, the table type defaults to Analytical for list report and worklist floorplans.
- If the OData V4 service supports hierarchical usage and the selected main entity supports the tree table, the table type defaults to Tree for list report and worklist floorplans, and the Hierarchy Qualifier is populated.

**LANGUAGE**: Text

**CODE**:
```text
// Tip (informational):
If OData V4 service supports Analytical → default Table type = "Analytical" (list report, worklist)
If OData V4 supports hierarchical usage → default Table type = "Tree" and Hierarchy Qualifier auto-populated
```

**STEP**: 3 — OData V2: Worklist page — enable variant management (manifest.json)

**DESCRIPTION**: To enable variant management for Worklist pages in OData V2-based floorplans, set the following properties in your application manifest.json. Use the first fragment to enable variant management on the table level. Use the second fragment to enable variant management at the page level (smart variant management).

File: manifest.json

**LANGUAGE**: JSON

**CODE**:
```json
// To enable variant management at the table level (Worklist Page, OData V2):
{
  "variantManagementHidden": false
}
```

**LANGUAGE**: JSON

**CODE**:
```json
// To enable variant management at the page level (Worklist Page, OData V2):
{
  "smartVariantManagement": true,
  "variantManagementHidden": false
}
```

**STEP**: 4 — OData V2: Analytical List Page — supported properties and behaviors

**DESCRIPTION**: The following properties apply to Analytical List Pages using OData V2. Use them to control the table and chart interaction, multi-selection behavior, and variant management at the page level.

- Table type: Defines which table variants are supported for the analytical list page.
- Allow multi select: When enabled, a checkbox appears to select multiple items in the table. This is effective only when multi-selection actions are defined via annotations or the manifest.
- Auto hide: Controls chart↔table interaction.
  - true = the chart acts as a filter for the table (table rows filtered by chart selection).
  - false = matching table rows are highlighted but the table is not filtered.
- Enable smart variant management: Enables variant management at the page level (use smartVariantManagement = true in manifest.json).

**LANGUAGE**: Text

**CODE**:
```text
// Analytical List Page (OData V2) - conceptual property list:
Table type: <supported table types>
Allow multi select: true | false
Auto hide: true | false
Enable smart variant management: smartVariantManagement = true (manifest.json)
```

**STEP**: 5 — OData V4: Analytical List Page — selection mode

**DESCRIPTION**: For OData V4-based floorplans, the Analytical List Page exposes a Selection mode property to define row selection behavior for the generated table. Configure this selection mode to match action semantics (single, multi, none, etc.) supported by your UI and backend.

**LANGUAGE**: Text

**CODE**:
```text
// Analytical List Page (OData V4):
Selection mode: <selection mode values such as "None", "Single", "Multi"> (set in floorplan configuration)
```

**STEP**: 6 — Where to set these properties

**DESCRIPTION**: Most customizations are set in the generated application’s manifest.json or via the Fiori tools floorplan configuration UI. When programmatically editing manifest.json, add the discussed keys to the appropriate page/component settings block of your manifest. The only required file reference is:

- manifest.json

**LANGUAGE**: Text

**CODE**:
```text
// Example locations (conceptual):
manifest.json
  └─ sap.ui.generic.app or sap.ui5 component settings
      └─ pages → <pageId> → component/settings → { ...variantManagementHidden, smartVariantManagement, ... }
```

fiori-tools
floorplan
manifest.json
OData V2
OData V4
list-report
worklist
analytical-list-page
table-type
variant-management


**TITLE**: Generate a SAP Fiori Elements Application with SAP Fiori Tools

**INTRODUCTION**: Step-by-step, action-oriented instructions for generating a SAP Fiori Elements application using SAP Fiori tools. Includes floorplan selection, data source options, required project attributes, deployment and preview configuration settings, and finalization steps. Keep these values and constraints exact when automating generation or writing scripts that interact with the wizard or template generator.

**TAGS**: fiori-tools, sap-fiori-elements, sapui5, odata, CAP, mta, flp, project-generation

**STEP**: 1 — Select Floorplan

**DESCRIPTION**: Choose the floorplan for your Fiori Elements application. This determines the generated UI scaffolding and supported features. Use the exact floorplan identifiers/names when creating templates or mapping to generator flags.

**LANGUAGE**: plaintext

**CODE**:
```plaintext
Available Floorplans (select one):
- List Report Object Page
  Link: supported-floorplans-2b2b12e.md#loio2b2b12e708944d85a40d087194cc1edd__ul_emp_5pt_rlb
- Worklist
  Link: supported-floorplans-2b2b12e.md#loio2b2b12e708944d85a40d087194cc1edd__ul_v3k_15v_54b
- Analytical List Page
  Link: supported-floorplans-2b2b12e.md#loio2b2b12e708944d85a40d087194cc1edd__ul_jxj_25v_54b
- Overview Page
  Link: supported-floorplans-2b2b12e.md#loio2b2b12e708944d85a40d087194cc1edd__ul_dcr_h5v_54b
```

**STEP**: 2 — Select Data Source

**DESCRIPTION**: Choose and configure the data source for your application. If credentials are required, provide username/password and use the Login icon. When automating, map generator options to one of the supported data source types below.

**LANGUAGE**: plaintext

**CODE**:
```plaintext
Data Source options (select one):
- Connect to an SAP System
  Link: data-source-9906181.md#loio99061814ead548808d539861fb27bafb__section_tpk_mzx_v4b
- Connect to an OData Service with a customized URL
  Link: data-source-9906181.md#loio99061814ead548808d539861fb27bafb__section_i2d_yzx_v4b
- Connect to an OData service
  Link: data-source-9906181.md#loio99061814ead548808d539861fb27bafb__section_sx1_chy_v4b
- Upload a Metadata Document
  Link: data-source-9906181.md#loio99061814ead548808d539861fb27bafb__section_xk3_nhy_v4b
- Connect to SAP Business Accelerator Hub
  Link: data-source-9906181.md#loio99061814ead548808d539861fb27bafb__section_rgz_xhy_v4b
- Use a Local CAP Project
  Link: data-source-9906181.md#loio99061814ead548808d539861fb27bafb__section_fgh_m3y_v4b

Credentials note:
- If username and password are required, enter credentials and click the Login icon (person with an arrow).
- Login image reference: images/Login_button_App_Gen_fb8dd99.png
```

**STEP**: 3 — Configure Associated Floorplan Properties

**DESCRIPTION**: Select the main entity and any navigation entities for the chosen floorplan. These values define the generated OData bindings and navigation links. Ensure entity names match the data source metadata.

**LANGUAGE**: plaintext

**CODE**:
```plaintext
Associated floorplan properties:
- Main entity: [select main entity from metadata]
- Navigation entity: [select related navigation entities as needed]
Reference: floorplan-properties-745ae0c.md
```

**STEP**: 4 — Configure Project Attributes (Project Attributes wizard page)

**DESCRIPTION**: Provide required and optional project attributes precisely. These values control package names, folder structure, SAPUI5 minimum version, deployment integration, and preview behavior. Enforce constraints when validating input in automation scripts.

**LANGUAGE**: plaintext

**CODE**:
```plaintext
Project Attributes (provide values):

- Module name (required)
  - Must be alpha-numeric and cannot contain spaces.
  - Used as Node.js package name and generated application folder name.
  - Only URL-friendly characters allowed.
- Application title
  - Display title for launchpad tile and app header.
- Application namespace
  - SAPUI5 project namespace: must start with a letter; may contain letters, digits, and periods only.
- Description
  - Application description.
- Project folder path (required)
  - Parent folder where the new application folder (module name) is created.
  - Cannot select a folder that already contains an SAP Fiori application.
  - To generate as part of a CAP project, select "Local CAP Project" as the Data Source in Step 2.
- Minimum SAPUI5 version
  - Select from dropdown of available SAPUI5 versions (grouped by maintenance status).
  - Default version is preselected; if source is ABAP on Premise, default matches that ABAP system's SAPUI5 version where possible.
  - For OData V4 data source, supported SAPUI5 versions are limited to the most recent versions.
  - SAPUI5 version overview: https://ui5.sap.com/versionoverview.html

Deployment & Additional configuration options (defaults shown):
- Adding Deployment Configuration to an Existing MTA Deployment File
  - Reference: ../Additional-Configuration/adding-an-sap-fiori-application-to-an-mta-deployment-file-with-5a17ba6.md#loiod7525cef6f6c4aa4acf3ec09c5a8eacb
  - If generating inside an app router config project with an MTA file, deployment configuration is used by default; you may still select No to skip.
- Add deployment configuration
  - Default: No
  - Reference: ../Additional-Configuration/additional-configuration-9bea64e.md#loio9bea64e63b824261932d90037ce3c5ae__section_itv_dk5_t4b
- Add FLP configuration
  - Default: No
  - Reference: ../Additional-Configuration/additional-configuration-9bea64e.md#loio9bea64e63b824261932d90037ce3c5ae__section_hbd_gzy_t4b
- Configure virtual endpoints for local preview
  - Default: Yes
  - If Yes, generator will configure virtual endpoints and you do not need to create these files manually.
  - Reference: ../../Previewing-an-Application/convert-a-project-to-use-virtual-endpoints-630ddec.md
- Configure advanced options
  - Default: No
  - Reference: ../Additional-Configuration/additional-configuration-9bea64e.md#loio9bea64e63b824261932d90037ce3c5ae__section_uhj_l2z_t4b

After providing values to these prompts, click Finish to generate.
```

**STEP**: 5 — Finish Generation

**DESCRIPTION**: Finalize the wizard to generate the application. The generator will create a new folder named after the module name inside the specified Project folder path and scaffold the Node.js/SAPUI5 application artifacts. Validate generated files and configuration for deployment and preview.

**LANGUAGE**: plaintext

**CODE**:
```plaintext
Action: Click "Finish" to generate the application.

Result:
- New application folder: [ProjectFolderPath]/[ModuleName]
- Generated artifacts include Node.js application (package name = module name), SAPUI5 project files, OData bindings per selected floorplan, and optional deployment/FLP/virtual endpoint files per selections.
```

fiori-tools sap-fiori-elements sapui5 odata CAP mta flp project-generation


**TITLE**: Supported Floorplans for SAP Fiori elements (fiori-tools)

**INTRODUCTION**: This reference lists the SAP Fiori elements floorplans provided by the SAP Fiori generator. Use it to choose the floorplan to scaffold an app, understand compatibility constraints (SAPUI5 and OData versions), and identify what must be configured (annotations, charts, cards, extension points) when generating or extending an application.

**TAGS**: fiori-tools, fiori-elements, floorplans, SAPUI5, ODataV4, ODataV2, list-report, worklist, analytical-list, overview-page, object-page, custom-page

**STEP**: 1 — List Report Page

**DESCRIPTION**: Choose the List Report Page when the app needs to display and act on large datasets with strong built-in filtering, searching, and navigation to a detail (object) page. Actionable items when generating/code-extending:
- Provide OData annotations for list presentation, selection fields, and navigation targets to Object Page.
- Confirm manifest and routing point to the List Report and configure the target Object Page for details.
- Use List Report when you need a scalable entry point to item details.

**LANGUAGE**: Markdown

**CODE**:
```markdown
-   *List Report Page*

    With the list report page, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It’s often used as an entry point for navigating to the item details, which are shown on the object page.

    For more information, see [List Report](https://experience.sap.com/fiori-design-web/list-report-floorplan-sap-fiori-element/) and [Object Page](https://experience.sap.com/fiori-design-web/object-page/).
```

**STEP**: 2 — Worklist Page

**DESCRIPTION**: Use the Worklist Page for processing tasks or items users must act on (approve, complete, delegate). Implementation details and actions:
- Configure the app using a List Report + Object Page combination (the Worklist can be configured from any List Report and Object Page).
- Ensure application logic centers on item processing (actions exposed in the list and object page).
- Compatibility: For OData V4 data sources, use SAPUI5 >= 1.99. For OData V2, consult the floorplan properties doc at floorplan-properties-745ae0c.md.
- Validate annotation-based intent-driven navigation and action availability for task processing.

**LANGUAGE**: Markdown

**CODE**:
```markdown
-   *Worklist Page*

    The worklist page displays a collection of items that the user needs to process. Working through the list usually involves reviewing details of the items and taking action. In most cases, the user has to either complete a work item or delegate it.

    The focus of the worklist floorplan is on processing items. This differs from the list report floorplan, which focuses on finding and acting on relevant items from a large dataset.

    You can use any*List Report* and *Object Page* to configure the *Worklist Page*.

    For more information, see [Worklist Floorplan](https://experience.sap.com/fiori-design-web/work-list/).

    > ### Note:
    > For worklist floorplans using an OData V4 data source, only `SAPUI5` versions 1.99 and above are supported.

    For information on what the worklist page supports for OData V2, see [Floorplan Properties](floorplan-properties-745ae0c.md).
```

**STEP**: 3 — Analytical List Page

**DESCRIPTION**: Select the Analytical List Page for combined analytical and transactional scenarios where visualization, drill-down, and hybrid table/chart views are required. Actions for generator/configuration:
- Provide annotations for charts, KPIs, visual filters, and measures.
- Configure hybrid view (table + chart), chart-drill behaviors, and drill-in navigation to detail pages.
- Compatibility: For OData V4, use SAPUI5 >= 1.90.
- Include measures and aggregations in the OData model and enable direct actions on transactional content.

**LANGUAGE**: Markdown

**CODE**:
```markdown
-   *Analytical List Page*

    The analytical list page offers a unique way to analyze data step by step from different perspectives to investigate the root cause of any deviations, spikes, and abnormalities through drilldown, and to act on transactional content. All this can be done seamlessly within a single page. The purpose of the analytical list page is to identify problem areas within datasets or significant single instances using data visualization and business intelligence.

    Visualization helps users to recognize facts and situations, and to reduce the number of interaction steps needed to gain insights or to identify significant single instances. Chart visualization enables users to spot relevant data more quickly.

    The main target group are users who work on transactional content. They benefit from fully transparent business object data and direct access to business actions. In addition, they have access to analytical views and functions without having to switch between systems. These include KPIs, a visual filter where filter values are enriched by measures and visualizations, and a combined table or chart view with drill-in capabilities \(hybrid view\). Users can interact with the chart to look deep into the data. The visualization enables them to identify spikes, deviations, and abnormalities more quickly, and to take appropriate action right away.

    For more information, see [Analytical List Page](https://experience.sap.com/fiori-design-web/analytical-list-page/).

    > ### Note:
    > For analytical list page floorplans using an OData V4 data source, only `SAPUI5` versions 1.90 and above are supported.
```

**STEP**: 4 — Overview Page

**DESCRIPTION**: Use the Overview Page to build role- or domain-centric dashboards composed of cards. Implementation actions:
- Create annotation-driven cards (KPIs, lists, charts) to display relevant role-specific content.
- Configure card navigation targets and data sources via annotations.
- Use the Overview Page as a container for multiple cards and content containers to allow users to filter and react to information on one page.

**LANGUAGE**: Markdown

**CODE**:
```markdown
-   *Overview Page*

    The overview page is a data-driven SAP Fiori floorplan that provides all the information the user needs on a single page, based on the user specific domain or role. It allows the user to focus on the most important tasks, and view, filter, and react to the information quickly.

    Each task or topic is represented by a card or a content container. The overview page acts as a UI framework for organizing multiple cards on a single page.

    The overview page uses annotated views of app data, meaning that the app content can be tailored to the domain or role. Different types of cards allow you to visualize information in an attractive and efficient way.

    For more information, see [Overview Page](https://experience.sap.com/fiori-design-web/overview-page/).
```

**STEP**: 5 — Form Entry Object Page

**DESCRIPTION**: Choose Form Entry Object Page when the app requires record creation with a generated form and an object page. Actions to implement:
- Provide create-level annotations and editable field annotations for the form.
- Ensure object page sections and subsections are defined via annotations to structure the generated form.
- Validate that the generated object page supports the required create and edit flows.

**LANGUAGE**: Markdown

**CODE**:
```markdown
-   *Form Entry Object Page*

    The form entry object page allows users to create an application with an object page and a generated form. The object page floorplan enables end-users to provide data entry in the generated application.

    For more information, see [Object Page](https://experience.sap.com/fiori-design-web/object-page/).
```

**STEP**: 6 — Custom Page

**DESCRIPTION**: Use the Custom Page for full control and to extend Fiori elements apps (OData V4 focused). Actionable guidance:
- Implement controller extensions and UI fragments using any SAPUI5 coding patterns in provided extension points.
- Use Custom Page when you need non-annotation-driven UI, custom controls, or bespoke logic.
- Reference live examples and extension patterns in the SAP Fiori development portal and the FE core fpmExplorer.
- Confirm compatibility with OData V4 scenarios and follow extension security and manifest conventions.

**LANGUAGE**: Markdown

**CODE**:
```markdown
-   *Custom Page*

    The custom page floorplan makes it easy for you to extend apps based on SAP Fiori elements for OData V4. You can use any `SAPUI5` coding or controls in extension points, and take advantage of the provided building blocks.

    For more information and live examples, see the SAP Fiori development portal at [Custom Page](https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/controllerExtensions/customPage).
```

fiori-tools fiori-elements floorplans SAPUI5 ODataV4 ODataV2 list-report worklist analytical-list overview-page object-page custom-page


**TITLE**: Basic Template — SAPUI5 Starter App (webapp)

**INTRODUCTION**: Minimal, standalone SAPUI5 starter template providing a blank canvas and recommended file structure. Use this to start coding a UI5 app immediately. Note: this template is standalone and does not include Node.js or launchpad/tile features — add those manually if needed.

**TAGS**: fiori-tools, sapui5, ui5, template, basic-template, webapp, unit-tests

STEP: 1 — Location and purpose
DESCRIPTION: File layout and purpose. The main entry is webapp/index.html which loads SAPUI5, initializes the app, and instantiates an XML view (webapp/view/App.view.xml). Tests reside under webapp/test (unit/integration). Use this step to locate and modify the entry point and view.
LANGUAGE: text
CODE:
```text
Path: webapp/index.html
Path: webapp/view/App.view.xml
Path: webapp/controller/App.controller.js
Path: webapp/test/unit/...   (sample tests for formatters and controller)
```

STEP: 2 — webapp/index.html (entry point)
DESCRIPTION: Minimal index.html that boots SAPUI5, loads sap.m, and creates the XML view named view.App. Place this file at webapp/index.html. Modify bootstrap URL, theme, and libs as required.
LANGUAGE: HTML
CODE:
```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Basic Template</title>
    <script
      id="sap-ui-bootstrap"
      src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_belize"
      data-sap-ui-libs="sap.m"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-async="true">
    </script>
    <script>
      sap.ui.getCore().attachInit(function () {
        sap.ui.xmlview({
          viewName: "view.App"
        }).placeAt("content");
      });
    </script>
  </head>
  <body id="content" class="sapUiBody"></body>
</html>
```

STEP: 3 — webapp/view/App.view.xml (XML view with header and title)
DESCRIPTION: Minimal XML view using sap.m controls. Place this file at webapp/view/App.view.xml. It provides a Page with a title coming from an i18n key (i18n resource bundle recommended).
LANGUAGE: XML
CODE:
```xml
<mvc:View
  controllerName="controller.App"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
  <App>
    <pages>
      <Page id="page" title="{i18n>appTitle}">
        <!-- Blank canvas: add content here -->
      </Page>
    </pages>
  </App>
</mvc:View>
```

STEP: 4 — webapp/controller/App.controller.js (basic controller)
DESCRIPTION: Minimal controller skeleton. Place at webapp/controller/App.controller.js. Expand with event handlers and lifecycle methods.
LANGUAGE: JavaScript
CODE:
```javascript
sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function (Controller) {
  "use strict";

  return Controller.extend("controller.App", {
    onInit: function () {
      // initialization logic
    }
    // add event handlers and methods here
  });
});
```

STEP: 5 — i18n resource bundle (optional but recommended)
DESCRIPTION: Add an i18n.properties file under webapp/i18n/i18n.properties and include an appTitle key referenced in the view. This file stores UI strings.
LANGUAGE: text
CODE:
```text
Path: webapp/i18n/i18n.properties

# Example content
appTitle=Basic Template
```

STEP: 6 — Tests: location and example unit tests
DESCRIPTION: Tests for formatters and the app controller are included as best-practice samples. Place unit tests under webapp/test/unit/... Use QUnit for unit tests. Below are example test stubs for a formatter and the App controller. Update module paths to match your project structure.
LANGUAGE: JavaScript
CODE:
```javascript
// Path: webapp/test/unit/formatter/formatter.qunit.js
QUnit.module("Formatter tests");

QUnit.test("sample formatter behavior", function (assert) {
  // Replace with correct module path for your formatter
  var oFormatter = sap.ui.requireSync("my/app/formatter");
  assert.ok(oFormatter, "Formatter module loaded");
  // Example assertion (adapt to your formatter)
  if (oFormatter && typeof oFormatter.someFormat === "function") {
    assert.strictEqual(oFormatter.someFormat("a"), "A", "someFormat transforms as expected");
  }
});
```

```javascript
// Path: webapp/test/unit/controller/App.controller.qunit.js
QUnit.module("App Controller");

QUnit.test("controller initialization", function (assert) {
  // Replace with correct controller module path
  var AppController = sap.ui.requireSync("controller/App");
  assert.ok(AppController, "App controller module loaded");
  // If controller is a constructor or has onInit method, test accordingly
  var oControllerInstance = (AppController && AppController.prototype) ? new AppController() : AppController;
  assert.ok(oControllerInstance && (oControllerInstance.onInit || oControllerInstance.onInit === undefined), "Controller instance created");
});
```

STEP: 7 — Notes and conversion tips
DESCRIPTION: Notes for converting this standalone template into a launchpad app or adding Node.js tooling:
- This template intentionally omits Node.js features (no package.json, no dev server scripts).
- To convert to a launchpad app, add required manifest.json entries, tile/target configuration, and implement Save as Tile if needed.
- Ensure tests are wired into your CI pipeline and update module paths for test runner configuration (QUnit, Karma, etc.).

fiori-tools sapui5 ui5 template basic-template webapp unit-tests


**TITLE**: Data Source Configuration for SAP Fiori Application Generator

**INTRODUCTION**: Instructions for connecting the SAP Fiori application generator to data sources during project generation. Covers connection methods for VS Code and SAP Business Application Studio (BAS), OData endpoints, destination-based routing, uploading a metadata.xml file, using SAP Business Accelerator Hub (deprecated), and selecting a local CAP project. Use these steps to configure data sources so the generator can detect services, authenticate, and validate OData versions.

**TAGS**: fiori-tools, sap, odata, cap, metadata, BAS, VSCode, sap-btp, sap-abap, s4hana

**STEP**: Connect to an SAP System (VS Code)

**DESCRIPTION**: Create or select a saved SAP system to connect the generator to an on-premise SAP ABAP system or SAP Business Technology Platform ABAP system. You can save connection details in OS secure storage so you don't repeatedly re-enter credentials.

- Add a new system:
  1. Enter a system name to save connection details.
  2. Select the SAP ABAP system type.

- Authentication types for SAP BTP-hosted ABAP:
  - Service Key: Provide the service key (admin must supply). A browser tab will open for authentication after providing the key.
  - Reentrance Ticket: Provide the URL to your SAP S/4HANA Cloud system and log in via browser.

- Notes:
  - Reentrance tickets require SAP S/4HANA Cloud 2408 or higher.
  - After authentication, the generator shows available OData services for the user. See the Service dropdown titled:
    Service (for user [<USERNAME>])
  - On-premise ABAP requires system URL and optional client ID and authentication details.
  - Example on-premise URL and client:

**LANGUAGE**: text

**CODE**:
```text
https://someurl:12345, client: 010
```

- Secure storage targets (saved systems):
  - Microsoft Windows: Keychain.
  - macOS: Credential Manager.
- Deletion: Saved systems can be removed from OS secure storage.
- When connecting for the first time, only the New System option is available.
- Reference: Create Service Keys Using the Cockpit:
  https://help.sap.com/products/BTP/65de2977205c403bbc107264b8eccf4b/cdf4f200db3e4c248fa67401937b2f78.html

**STEP**: Connect to an SAP System (SAP Business Application Studio)

**DESCRIPTION**: When using BAS, the generator retrieves configured destinations for the BAS instance automatically. Select a destination from the list. If you lack access rights to a destination endpoint, an error will be shown.

**LANGUAGE**: text

**CODE**:
```text
(Automatically retrieved destination list in BAS)
```

**STEP**: Connect to an OData Service with a Customized URL (BAS destinations)

**DESCRIPTION**: If your OData endpoint is not directly accessible, set it up as a BAS destination and reference it using a .dest URL in the generator.

Steps:
1. In BAS, launch the SAP Fiori Generator and select a template.
2. Choose "Connect to an OData Service" from the data source dropdown.
3. For the data source URL, use the destination name + ".dest". BAS will route to the service via the destination name.

- Example: Destination defined URL and name:
  - Destination URL: https://someurl.com/someservice
  - Destination name: MyDestination
  - Generator URL to use:

**LANGUAGE**: text

**CODE**:
```text
https://MyDestination.dest/someservice
```

**STEP**: Connect to an OData Service (direct URL)

**DESCRIPTION**: Enter the OData endpoint URL directly. Supported endpoints: unauthenticated or basic authentication. The generator validates OData version compatibility with the selected template and prompts for username/password if required.

- Note: Provide the correct OData version for your template (e.g., OData V2 endpoints for OData V2 templates). The wizard notifies you on version mismatches.

**LANGUAGE**: text

**CODE**:
```text
(Enter OData endpoint URL; basic auth or no auth supported)
```

**STEP**: Upload a Metadata Document (metadata.xml)

**DESCRIPTION**: To generate an application without a live backend, upload a metadata.xml in EDMX format. The generator validates the metadata.xml and then allows entity selection. Generated applications using metadata.xml are limited to mock data only.

- Supported format: EDMX
- File name example: metadata.xml
- Note: Only EDMX format is supported.

**LANGUAGE**: text

**CODE**:
```text
metadata.xml
```

- EDMX reference:
  https://docs.microsoft.com/en-us/openspecs/windows_protocols/mc-edmx/5dff5e25-56a1-408b-9d44-bff6634c7d16

**STEP**: Connect to SAP Business Accelerator Hub (Deprecated)

**DESCRIPTION**: SAP Business Accelerator Hub is deprecated as a data source in the Application Generator and will be removed in a future release. It is intended only for local development and must be replaced with a real data source before going live. Use Service Center in BAS instead for production intent.

- Workflow when selected:
  - Choose a predefined industry-relevant service (e.g., Just-In-Time Calls, Transaction Classifications, Content, Request of Quotation).
  - Enter Username and Password when prompted.
  - Click Next to continue generation.

- Caution: Not intended for SAP Fiori UI development or deployment (local development only).
- Reference: https://api.sap.com/
- Alternative: Service Center in BAS:
  https://help.sap.com/products/SAP%20Business%20Application%20Studio/9d1db9835307451daa8c930fbd9ab264/1e8ec75c9c784b51a91c7370f269ff98.html

**LANGUAGE**: text

**CODE**:
```text
(SAP Business Accelerator Hub is deprecated — use BAS Service Center instead)
```

**STEP**: Use a Local CAP Project

**DESCRIPTION**: Select a local SAP Cloud Application Programming Model (CAP) Node.js project folder. The generator validates the folder to ensure it is a supported CAP Node.js project and retrieves the defined services for generation.

- Validation: Folder must be a CAP Node.js project supported by the generator.
- Reference: CAP overview and services:
  https://cap.cloud.sap/docs/about/

**LANGUAGE**: text

**CODE**:
```text
(Select local CAP project folder; generator validates and lists CAP services)
```

fiori-tools sap odata cap metadata BAS VSCode sap-btp sap-abap s4hana


**TITLE**: Generate a Freestyle SAPUI5 Application with the SAP Fiori Generator

**INTRODUCTION**: Step-by-step, action-oriented instructions to generate a freestyle SAPUI5 application using the SAP Fiori generator. Use this when creating a new SAPUI5 app from a supported template; includes required project attributes and optional deployment/FLP/MTA settings.

**TAGS**: fiori-tools, SAPUI5, freestyle, generator, SAP Fiori, ABAP, MTA, FLP

STEP 0: Pre-check — SAP Business Application Studio dev space
DESCRIPTION: If you are using SAP Business Application Studio, ensure you use an SAP Fiori dev space before generating applications.
LANGUAGE: Text
CODE:
```Text
Note: If you are using SAP Business Application Studio, ensure you use an SAP Fiori dev space.
```

STEP 1: Select template
DESCRIPTION: In the SAP Fiori generator UI, choose a template that supports freestyle SAPUI5 applications and proceed to the next screen. Reference the supported templates documentation when picking a template.
LANGUAGE: Text
CODE:
```Text
1. In the SAP Fiori generator, select a template that supports freestyle SAPUI5 applications and click Next.
For more information, see: supported-templates-20d1146.md
```

STEP 2: Select data source
DESCRIPTION: Choose the data source the generated application will use (OData, mock data, etc.) and proceed. Refer to the Data Source documentation for details on available options and configuration.
LANGUAGE: Text
CODE:
```Text
2. Select a Data source and click Next.
For more information, see: data-source-37a0fcf.md
```

STEP 3: Enter view name
DESCRIPTION: Provide a name for the initial view of the application (used by the template) and continue to project configuration. See Template Properties for field specifics.
LANGUAGE: Text
CODE:
```Text
3. Enter a name for your view and click Next.
For more information, see: template-properties-c2a3c82.md
```

STEP 4: Configure project attributes (required and optional)
DESCRIPTION: Configure all project attributes on the project setup screen. Mandatory fields are prefilled with defaults. Carefully set these attributes because they determine folder names, namespaces, deployment behavior, FLP integration, and preview options.

- Follow naming rules:
  - Module name: alphanumeric, no spaces (used as folder/package name).
  - Application namespace: starts with a letter; only letters, digits, and periods.
- Project folder: parent folder in which a new folder with the module name will be created. If a folder with the same name exists, choose a different module name.
- Minimum SAPUI5 version: choose from dropdown (grouped by maintenance status). If source system is ABAP on-premise, default equals the SAPUI5 version on the ABAP system. See SAPUI5 Versions Maintenance Status: https://ui5.sap.com/versionoverview.html

LANGUAGE: Text
CODE:
```Text
4. Configure the project attributes and click Finish. A list of project attributes is provided below:

Tip:
Mandatory fields are prefilled with default text.

- Module name (Required): The module name attribute is used as the folder and package name for the generated application. The module name must be alphanumeric and cannot contain spaces.
- Application title (Required): The application title attribute is used as the title in the header of the generated application.
- Application namespace (Required): The application namespace attribute is used as the SAPUI5 project namespace. It must start with a letter and only contain letters, digits, and periods.
- Description: The description attribute is used as the description of the application.
- Project folder (Required): The project folder attribute is used as the parent folder in which the new application is generated. The new application is generated in a new folder with the module name. If a folder with the same name already exists, you must choose a new module name.
- Minimum SAPUI5 version: The minimum SAPUI5 version attribute is used as the minimum SAPUI5 version required in the application.
    - The dropdown shows the list of available SAPUI5 versions grouped by maintenace status and the default version is preselected. For more information on the maintenace status of SAPUI5 versions, see SAPUI5 Versions Maintenance Status: https://ui5.sap.com/versionoverview.html
    - If the source system is an ABAP on-premise system, then the default version selected in the dropdown is equal to the SAPUI5 version on the ABAP system.

- Add deployment configuration to MTA project:
    The add deployment to MTA project attribute is used if an MTA file already exists in the project folder path. If a project is generated inside an app router configuration project that has an MTA file, then uses its deployment configuration by default.
    For more information, see: ../Additional-Configuration/adding-an-sap-fiori-application-to-an-mta-deployment-file-with-5a17ba6.md#loio5a17ba6b62b2462aa0e25ffae7b8d728

- Add deployment configuration: The add deployment configuration attribute is used to determine whether to configure deployment settings.
    For more information, see: ../Additional-Configuration/additional-configuration-9bea64e.md#loio9bea64e63b824261932d90037ce3c5ae__section_itv_dk5_t4b

- Add FLP configuration: The Add FLP configuration attribute is used to determine whether to add a SAP Fiori launchpad configuration.
    For more information, see: ../Additional-Configuration/additional-configuration-9bea64e.md#loio9bea64e63b824261932d90037ce3c5ae__section_hbd_gzy_t4b

- Configure virtual endpoints for local preview:
    The configure virtual endpoints for local preview attribute is used to determine whether to activate virtual endpoints for preview. When active, preview files are not created during generation and virtual endpoints are used instead.

- Configure advanced options: The configure advanced options attribute is used to determine whether to display advanced options.
    For more information, see: ../Additional-Configuration/additional-configuration-9bea64e.md#loio9bea64e63b824261932d90037ce3c5ae__section_uhj_l2z_t4b
```

STEP 5: Generate the application
DESCRIPTION: Finalize generation. Clicking Finish creates the new freestyle SAPUI5 application inside the chosen project folder (a subfolder named after Module name).
LANGUAGE: Text
CODE:
```Text
5. Click Finish to generate the application.
```

fiori-tools
SAPUI5
freestyle
generator
SAP Fiori
ABAP
MTA
FLP


**TITLE**: Supported Templates for SAP Fiori Tools

**INTRODUCTION**: This document lists templates supported by SAP Fiori tools for creating freestyle SAPUI5 applications and SAP Fiori elements applications with a custom page. Use these templates when scaffolding a new project or when programmatically selecting a template in a generator. Note the minimum SAPUI5 runtime requirement.

**TAGS**: fiori-tools, sapui5, templates, freestyle, fiori-elements, custom-page

**STEP**: 1 — Basic template

**DESCRIPTION**: Use the Basic template when you want a blank canvas to start coding a freestyle SAPUI5 application. The template configures a recommended project file structure so you can begin implementing UI and business logic immediately. Choose this template when you want minimal scaffolding and full control over app structure.

**LANGUAGE**: Markdown

**CODE**:
```markdown
Template name: Basic
Reference file: basic-template-14fdcc0.md
Purpose: Blank freestyle SAPUI5 application with recommended file structure
Usage: Select this template in your project generator or scaffold command to create a starter project.
```

**STEP**: 2 — Custom Page (SAP Fiori elements)

**DESCRIPTION**: Use the Custom Page template to create a SAP Fiori elements application that includes a custom page using the flexible programming model. This template adds the Page building block as the default layout so you can extend and implement controller logic for a custom page within the Fiori elements framework. Ideal when you need a mix of generated Fiori elements features and custom UI code.

**LANGUAGE**: Markdown

**CODE**:
```markdown
Template name: Custom Page
Purpose: SAP Fiori elements application with a custom page based on the flexible programming model
Default layout: Page building block
Live examples and documentation: https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/controllerExtensions/customPage
Usage: Select this template to scaffold a Fiori elements app and then extend the page with custom controller/view code.
```

**STEP**: 3 — Minimum SAPUI5 version requirement (Caution)

**DESCRIPTION**: All templates in SAP Fiori tools (freestyle and Fiori elements) require a minimum SAPUI5 runtime version. Ensure your project's SAPUI5 dependency meets the minimum version before scaffolding or running generated apps.

**LANGUAGE**: Text

**CODE**:
```
Caution:
SAP Fiori tools supports the development of SAP Fiori elements and freestyle SAPUI5 applications with a minimum SAPUI5 version of 1.65 or higher.
```

Supported Templates for SAP Fiori Tools

fiori-tools sapui5 templates freestyle fiori-elements custom-page


**TITLE**: Template Properties — Set View Name for Generated SAPUI5 View

**INTRODUCTION**: Configure the Template Properties for a generated SAPUI5 application. After the data source is configured, provide a unique View name that the generator will use to create the SAPUI5 view file. This name becomes the SAPUI5 view identifier and is used in generated code and routing.

**TAGS**: fiori-tools, sapui5, template, view, generator, configuration

**STEP**: 1 — Ensure data source is supplied

**DESCRIPTION**: Confirm the application generator has access to the required data source (OData, local model, etc.). The View name setting applies once the data source is provided and the generator can determine which entities or screens to scaffold.

**LANGUAGE**: Text

**CODE**:
```text
(Ensure your data source is configured in your project/generator UI before setting the View name.)
```

**STEP**: 2 — Provide a unique View name

**DESCRIPTION**: Specify a unique View name to be used for the SAPUI5 view created by the generator. The View name must be unique within the application to avoid naming collisions. This value becomes the file/view identifier used in generated controller code, XML view filename, and routing references.

- Use PascalCase or camelCase per your project conventions (example: SalesOverview, CustomerList).
- Keep names descriptive and unique across views.
- The generator will create files and references using this view name.

Preserve the generator UI asset for reference:
- Image asset: images/ViewNamePropertyGenAppFreestyle_f78f30e.png

**LANGUAGE**: JSON

**CODE**:
```json
{
  "templateProperties": {
    "viewName": "SalesOverview"
  }
}
```

**STEP**: 3 — Verify generated artifacts

**DESCRIPTION**: After generation, confirm the following artifacts reference the provided view name:
- XML view file: [viewName].view.xml (e.g., SalesOverview.view.xml)
- Controller file: [viewName].controller.js (e.g., SalesOverview.controller.js)
- Any manifest.json routing or targets that point to the view

**LANGUAGE**: Text

**CODE**:
```text
Verify:
- src/view/SalesOverview.view.xml
- src/controller/SalesOverview.controller.js
- manifest.json routes/targets referencing "SalesOverview"
```

fiori-tools sapui5 template view generator configuration


**TITLE**: Generate an SAP Fiori Application (VS Code / SAP Business Application Studio)

**INTRODUCTION**: Step-by-step, action-oriented instructions to generate an SAP Fiori (SAPUI5) application using the Fiori application generator in VS Code or SAP Business Application Studio. Includes commands to open the generator, template selection guidance, where to relaunch application info, Service Center usage, resulting project structure, and notes for CAP-based projects and tooling references.

**TAGS**: sap, fiori, sapui5, vscode, business-application-studio, generator, project-structure, cap, npm, ui5

**STEP**: 1 — Open the Fiori Application Generator

**DESCRIPTION**: Open the VS Code Command Palette (or Studio equivalent) and start the Fiori application generator.

**LANGUAGE**: bash

**CODE**:
```bash
# Open VS Code Command Palette
# macOS: CMD + Shift + P
# Windows/Linux: CTRL + Shift + P

# Run this command from the Command Palette:
Fiori: Open Application Generator

# In SAP Business Application Studio, use "Start from template"
```

**STEP**: 2 — Select Template Type in the Template Wizard

**DESCRIPTION**: In the Template Wizard, choose the template type. Default is "SAP Fiori". Optionally choose "Deprecated templates" to access older SAPUI5 templates.

**LANGUAGE**: plaintext

**CODE**:
```text
Template Type options:
- SAP Fiori       (default)
- Deprecated templates (includes deprecated SAPUI5 templates)
```

**STEP**: 3 — Proceed to Application Information

**DESCRIPTION**: Click Next after selecting the template. The Application Information page opens for additional configuration of the generated project. You can relaunch this page any time.

**LANGUAGE**: bash

**CODE**:
```bash
# Relaunch Application Information page:
# Open the Command Palette (CMD/CTRL + Shift + P) and run:
Fiori: Open Application Info
```

**STEP**: 4 — Use SAP Business Application Studio Service Center (optional)

**DESCRIPTION**: In SAP Business Application Studio, use the Service Center to explore service providers and expose data sources (subaccount destinations, SAP Business Accelerator Hub) for your app.

**LANGUAGE**: plaintext

**CODE**:
```text
Service Center documentation:
https://help.sap.com/products/SAP%20Business%20Application%20Studio/9d1db9835307451daa8c930fbd9ab264/1e8ec75c9c784b51a91c7370f269ff98.html
```

**STEP**: 5 — Inspect Generated Project Structure

**DESCRIPTION**: After generation, verify the standard project layout and files (used for local development, preview, and deployment). The list below is the typical structure when NOT using "Use a Local CAP Node.js Project".

**LANGUAGE**: plaintext

**CODE**:
```text
Generated project structure (root):
- webapp               # Root folder for SAPUI5 based web applications
- .npmrc               # npm registry configuration updates required for the project
- .gitignore           # Files/folders excluded from source control (e.g. node_modules)
- package-lock.json    # Locks node dependency versions
- package.json         # Main node project configuration
- README.md            # Details about generation options chosen
- ui5-local.yaml       # Supports local dev in preview mode
- ui5.yaml             # Connects to supplied data source; supports dynamic SAPUI5 version
- node_modules         # Local node modules (created/updated by `npm install`), do not commit
```

**STEP**: 6 — Note: Local CAP Node.js Project Differences

**DESCRIPTION**: If you selected "Use a Local CAP Node.js Project", the generator produces a reduced set of files and delegates preview/deploy to CAP. Differences to expect:

- package.json is shorter
- ui5.yaml and .npmrc may NOT be generated
- annotation.cds is generated instead of local annotation.xml (annotations in CDS syntax)

**LANGUAGE**: plaintext

**CODE**:
```text
CAP-specific changes:
- package.json: reduced (CAP provides preview/deploy)
- ui5.yaml: typically NOT generated
- .npmrc: typically NOT generated
- annotation.cds: generated instead of annotation.xml (CDS-based annotations)
```

**STEP**: 7 — References: Tooling, Libraries, and Troubleshooting

**DESCRIPTION**: The Fiori application generator uses open-source writers and provides guided troubleshooting. Use the links below for library docs and troubleshooting extension.

**LANGUAGE**: plaintext

**CODE**:
```text
Fiori writers (open-source):
- Fiori elements writer:
  https://github.com/SAP/open-ux-tools/tree/main/packages/fiori-elements-writer
- Fiori freestyle writer:
  https://github.com/SAP/open-ux-tools/tree/main/packages/fiori-freestyle-writer

NPM packages:
- @sap/generator-fiori:
  https://www.npmjs.com/package/@sap/generator-fiori
- @sap/ux-ui5-tooling:
  https://www.npmjs.com/package/@sap/ux-ui5-tooling

Guided Answers Extension (troubleshooting option shown by generator):
- https://github.com/SAP/guided-answers-extension

MTA deployment:
- See "Generating an MTA Deployment File" (Additional-Configuration/generating-an-mta-deployment-file-9c41152.md)
```

sap fiori sapui5 vscode business-application-studio generator project-structure cap npm ui5


**TITLE**: Fix "Unknown Local Certificate Authority" Errors for SAP Fiori Generator

**INTRODUCTION**: This guide shows how to make a locally issued CA certificate trusted by your OS and Node.js tooling so the SAP Fiori application generator (Yeoman / VS Code) does not reject HTTPS connections. It covers (1) locating/exporting the CA cert, (2) importing it into the OS trust store for VS Code, (3) configuring Node.js/Yeoman to use the cert via NODE_EXTRA_CA_CERTS, and (4) a last-resort option to ignore TLS verification (not recommended).

**TAGS**: fiori-tools, certificate, ssl, nodejs, vscode, yeoman, macos, windows, security

**STEP**: 1 — Save the local CA certificate file locally

**DESCRIPTION**: Export or download the Certificate Authority (CA) certificate used by your development host and save it to a local folder. Browser export steps vary by browser — choose an export method that produces a PEM/CRT file (e.g., ca.crt, ca.pem). Keep note of the saved path for later steps.

**LANGUAGE**: Text

**CODE**:
```text
Example certificate file paths:
Linux / macOS:
/home/<user>/Downloads/ca.crt
/Users/<user>/Downloads/ca.crt

Windows:
C:\Users\<user>\Downloads\ca.crt
```

**STEP**: 2 — Import the CA into the OS trust store (so VS Code trusts it)

**DESCRIPTION**: Import the downloaded CA certificate into the OS trust store so GUI apps (like VS Code) accept the certificate. Use GUI methods or the command-line examples below.

- Windows (GUI): Right-click the CA certificate file -> Install Certificate -> choose Current User or Local Machine -> place in Trusted Root Certification Authorities -> Finish.

- macOS (GUI): Right-click the CA certificate file -> Open With -> Keychain Access -> select System keychain -> import and mark as trusted.

Command-line alternatives (require admin privileges):

**LANGUAGE**: PowerShell

**CODE**:
```powershell
# Windows: import certificate into Local Machine Trusted Root (run PowerShell as Administrator)
Import-Certificate -FilePath "C:\path\to\ca.crt" -CertStoreLocation "Cert:\LocalMachine\Root"
```

**LANGUAGE**: bash

**CODE**:
```bash
# macOS: add certificate as a trusted root to the System keychain (requires sudo)
sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain /path/to/ca.crt
```

**STEP**: 3 — Configure Node/Yeoman to use the CA cert (NODE_EXTRA_CA_CERTS)

**DESCRIPTION**: For command-line usage (Yeoman generators, npm, Node.js CLI) set NODE_EXTRA_CA_CERTS to the certificate file path so Node will trust the CA. You can set it temporarily for a session or persistently.

- macOS / Linux (temporary for session):
  - Run the export command before starting generators.

**LANGUAGE**: bash

**CODE**:
```bash
export NODE_EXTRA_CA_CERTS=path/to/certificate/file
```

- macOS / Linux (persistent): add the export line to ~/.bashrc, ~/.zshrc, or your shell profile.

- Windows (temporary for current PowerShell session):
  - Use the environment variable in the session.

**LANGUAGE**: PowerShell

**CODE**:
```powershell
# Temporary (PowerShell session)
$env:NODE_EXTRA_CA_CERTS = "C:\path\to\ca.crt"
```

- Windows (persist for current user):
  - Use setx (no admin required for user-level).

**LANGUAGE**: Windows CMD / setx

**CODE**:
```cmd
# Persist for current user
setx NODE_EXTRA_CA_CERTS "C:\path\to\ca.crt"
```

- Windows (persist system-wide):
  - Run elevated (Administrator) and use /M to set system environment variable.

**LANGUAGE**: Windows CMD / setx

**CODE**:
```cmd
# Persist system-wide (requires Administrator)
setx NODE_EXTRA_CA_CERTS "C:\path\to\ca.crt" /M
```

Notes:
- After creating persistent environment variables you may need to restart your terminal / sign out and sign in for changes to take effect.
- Verify in Node: console.log(process.env.NODE_EXTRA_CA_CERTS) or run your Yeoman generator after setting the variable.

**STEP**: 4 — (Not recommended) Temporarily ignore TLS verification

**DESCRIPTION**: If the certificate is invalid (expired, wrong host, or other issues) and you need to bypass TLS checks temporarily (dangerous), you can disable Node TLS verification for the process. This is not recommended except as a last resort for local development troubleshooting.

**LANGUAGE**: bash

**CODE**:
```bash
# Linux / macOS temporary (use only for debugging)
NODE_TLS_REJECT_UNAUTHORIZED=0 yeoman-command-or-node-script
```

**LANGUAGE**: PowerShell

**CODE**:
```powershell
# PowerShell session temporary
$env:NODE_TLS_REJECT_UNAUTHORIZED = "0"
# run your generator or node script in same session
```

**STEP**: 5 — Verification and troubleshooting

**DESCRIPTION**: After importing the CA and/or setting NODE_EXTRA_CA_CERTS:
- Restart VS Code (if you imported to OS trust store) so it picks up the new trust settings.
- In a terminal, check that NODE_EXTRA_CA_CERTS points to your file:
  - bash: echo $NODE_EXTRA_CA_CERTS
  - PowerShell: echo $env:NODE_EXTRA_CA_CERTS
- Run the Yeoman generator / Fiori generator again. If errors persist, confirm:
  - The certificate file is a valid PEM/CRT containing the CA certificate.
  - You imported into the correct store (System/LocalMachine Root for system-wide trust).
  - You set NODE_EXTRA_CA_CERTS to the exact file path and restarted the shell/VS Code if necessary.

**LANGUAGE**: Text

**CODE**:
```text
Troubleshooting checklist:
- Confirm file format: PEM/CRT (base64 encoded "BEGIN CERTIFICATE")
- Ensure the path used in NODE_EXTRA_CA_CERTS is exact and accessible
- For Windows system-wide changes, restart or log out/in after setx / set environment change
- For macOS, ensure you used the System keychain for "trusted root" if you want system-wide trust
```

fiori-tools certificate ssl nodejs vscode yeoman macos windows security


**TITLE**: ABAP Development Tools (ADT) Integration with SAP Fiori Tools

**INTRODUCTION**: Configure and use the ADT integration to launch the SAP Fiori Generator from ADT (Eclipse) and to open or download SAP Fiori applications in your IDE (VS Code or SAP Business Application Studio). This guide details the one-time ADT setup per system, launching behavior, and the direct-download command for deployed ADT applications.

**TAGS**: ABAP, ADT, SAP Fiori, SAP Fiori tools, VS Code, Business Application Studio, SAPUI5, generator, integration

STEP: 1 — Configure ADT to launch target IDE

DESCRIPTION:
- Perform a one-time configuration in ADT for each ABAP system you want to integrate.
- This enables the "Create Fiori Project" button on service details and pre-populates the SAP Fiori Generator with the selected system and main entity.

LANGUAGE: UI steps

CODE:
```text
1. In Eclipse ADT, choose the target ABAP system in the Project/Systems view.
2. Right-click the system and select: Properties.
3. Navigate to: ABAP Development > IDE Configuration.
4. Check: Configure the target IDE
5. Choose target IDE:
   - SAP Business Application Studio OR
   - Visual Studio Code (VS Code)
6. Save the configuration.
```

STEP: 2 — Launch SAP Fiori Generator from ADT

DESCRIPTION:
- Use the new Create Fiori Project button shown alongside service details after configuration.
- When launched from ADT:
  - Data source selection in the SAP Fiori Generator is skipped (ADT already provided it).
  - The main entity for templates is pre-selected based on your ADT selection.
- If the service was previously deployed using Quick Fiori Application in ADT, Create Fiori Project downloads that deployed application into your workspace and upgrades it to support SAP Fiori tools capabilities.

LANGUAGE: UI steps

CODE:
```text
- In ADT, open the service details for your chosen OData/service.
- Click: Create Fiori Project (button displayed after IDE configuration).
- The IDE (VS Code or Business Application Studio) will open and start the SAP Fiori Generator:
  - Data source is already set.
  - Main entity is pre-selected for templates.
- If the service was deployed via ADT Quick Fiori Application, the deployed app is downloaded and updated for SAP Fiori tools.
```

STEP: 3 — Download ADT-deployed application directly from IDE

DESCRIPTION:
- Run the built-in command in your IDE to list and download SAP Fiori applications that were deployed from ADT without launching ADT.
- Select the system from a dropdown and choose the application to download.

LANGUAGE: Plain text command

CODE:
```text
Command to run in IDE command palette:
Fiori: Download ADT Deployed App from SAPUI5 ABAP Repository
```

STEP: 4 — VS Code system URL and matching rules (Important Note)

DESCRIPTION:
- Ensure the ABAP system saved in VS Code uses the same system URL as the ADT configuration to enable automatic matching when launching from ADT.
- To verify or select the saved system:
  - Open the SAP Fiori view in VS Code from the left activity toolbar.
  - Click the SAP Fiori icon (Wrench/Pencil icon) on the activity toolbar.
  - Click: SAP Systems
- If the saved system cannot be matched after launching from ADT:
  - You may choose any of the existing systems you have already saved.
- If there are existing SAP Fiori projects in your workspace that match the system and main entity:
  - You will be prompted to either choose an existing matching project or create a new one with the SAP Fiori Generator.

LANGUAGE: UI steps + image path

CODE:
```text
Verify saved system in VS Code:
1. Click SAP Fiori (Wrench/Pencil icon) on the left activity toolbar.
   (Image asset reference: images/SAP_Fiori_tools_Wrench_Pencil_9d6b0f8.png)
2. Click: SAP Systems
3. Confirm the system URL matches the ADT system URL used in Eclipse.

Behavior if no match:
- You can manually pick one of your saved systems.
- If matching SAP Fiori projects exist in workspace (same system + main entity), choose:
  - Reuse existing project OR
  - Create a new project via SAP Fiori Generator
```

ABAP
ADT
SAP Fiori
SAP Fiori tools
VS Code
Business Application Studio
SAPUI5
generator
integration


**TITLE**: SAP Fiori Tools — Project Capabilities & Command Reference

**INTRODUCTION**: Quick reference of VS Code command IDs, terminal commands, file paths, and development actions provided by SAP Fiori tools. Use this when automating tasks, creating scripts, or invoking extension commands programmatically during development of SAP Fiori / SAPUI5 apps (including adaptations and CAP backends).

**TAGS**: sap, fiori-tools, ui5, sapui5, commands, npm, mockserver, annotations, adaptation, deploy, lint, validate, typescript, javascript

**STEP**: Open Application Info

**DESCRIPTION**: Open the Application Information page (shows project-relevant commands and features). Use VS Code Command Palette (CMD/CTRL + Shift + P) and execute the "Fiori: Open Application Info" command.

**LANGUAGE**: Text

**CODE**:
```text
Open Command Palette: [CMD/CTRL] + [Shift] + [P]
Execute command: Fiori: Open Application Info
```

**STEP**: Build, Dist, and Deploy (core commands)

**DESCRIPTION**: Build the app to the dist folder, deploy using the UI5 deploy config (ui5-deploy.yaml), run test deploy, and undeploy. Use npm scripts or extension command IDs for automated workflows.

**LANGUAGE**: bash

**CODE**:
```bash
# Build the application -> output stored in the 'dist' folder
npm run build

# Deploy according to ui5-deploy.yaml (UI/extension command)
sap.ux.appGenerator.launchDeploy

# Add deploy configuration (VS Code command ID)
sap.ux.appGenerator.launchDeployConfig

# Start deployment in test mode
npm run deploy-test

# Remove a deployed artifact
npm run undeploy
```

**STEP**: Preview & Virtual Endpoints

**DESCRIPTION**: Convert configuration for preview with virtual endpoints, preview the application, and add mockserver configuration for local virtual OData endpoints.

**LANGUAGE**: bash / text

**CODE**:
```bash
# Convert config to preview the application with virtual endpoints (VS Code command ID)
sap.ux.applicationModeler.convertPreview

# Choose start scripts to run the application preview (VS Code command ID)
sap.ux.pageEditor.previewExternal

# Add configuration for mockserver middleware (use npx to add files)
npx --yes @sap-ux/create@latest add mockserver-config
```

**STEP**: Mock Data & Data Editor

**DESCRIPTION**: Open the Data Editor in the toolset to create and maintain mockdata used by the mockserver or local testing.

**LANGUAGE**: text

**CODE**:
```text
# Open Data Editor (start editor for maintaining mock data)
sap.ux.dataEditor.open
```

**STEP**: Service & Annotation Management

**DESCRIPTION**: Inspect and manage OData service metadata and XML annotations. Sync metadata.xml with backend, open annotation file manager to choose or create local XML annotation files, and open service files to review annotations for copying to local annotation files.

**LANGUAGE**: text

**CODE**:
```text
# Check service with annotation (open file)
sap.ux.serviceModeler.openFile

# Open Service Manager (sync metadata.xml with backend)
sap.ux.serviceModeler.openServiceMgr

# Open Annotation File Manager (choose/create local XML annotation files)
sap.ux.serviceModeler.openAnnotationFileMgr

# Important file: metadata.xml (sync with back end)
# Local annotation files: XML files used by the application or adaptation project
```

**STEP**: Adaptation Projects (ADP) — annotation, inbound changes, components, deployment

**DESCRIPTION**: Commands for working with adaptation projects: add local annotation files, add SAPUI5 component usages, add inbound changes, open adaptation editor and deployment wizard, replace OData service in an adaptation project.

**LANGUAGE**: text

**CODE**:
```text
# Add a local annotation file to the adaptation project
sap.ux.adp.addAnnotationFile

# Add SAPUI5 component usages to the adaptation project
sap.ux.adp.addSAPUI5ComponentUsages

# Add an inbound change to the adaptation project
sap.ux.adp.changeInbound

# Open the Adaptation Editor (create adaptations)
sap.ux.adp.openAdaptationEditor

# Open the Deployment Wizard to deploy the adaptation project
sap.ux.adp.openDeploymentWizard

# Replace the OData service of the adaptation project
sap.ux.adp.replaceODataService
```

**STEP**: Variants & Configuration Management

**DESCRIPTION**: Add and run configurations for variants creation and manage variants preview workflows.

**LANGUAGE**: text / bash

**CODE**:
```text
# Add Configuration for Variants Creation
sap.ux.applicationModeler.addVariantsConfig

# Run the configuration for variants creation (npm script)
npm run start-variants-management

# Add Configuration for Variants Creation (UI extension)
sap.ux.applicationModeler.addVariantsConfig
```

**STEP**: Linting, Validation, Documentation, and Guided Development

**DESCRIPTION**: Run static code analysis using the UI5 linter, validate the project and generate report, show documentation for manifest/UI5 flexibility properties, open guided development helpers.

**LANGUAGE**: text / bash

**CODE**:
```bash
# Check node module dependencies for newer versions
npm outdated

# Run UI5 linter (VS Code command ID)
sap.ux.applicationModeler.runUI5Linter

# Validate the project and generate a report (VS Code command ID)
sap.ux.applicationModeler.validate

# Show documentation of available manifest and UI5 flexibility properties (VS Code command ID)
sap.ux.applicationModeler.showDocu

# Open Guided Development to help solve common tasks (VS Code command ID)
sap.ux.help.openGuidedDevelopmentFromExplorer
```

**STEP**: Project Archiving & Environment Checks

**DESCRIPTION**: Create a zip archive of the project excluding node_modules for sharing (useful for support/troubleshooting).

**LANGUAGE**: text

**CODE**:
```text
# Zip the project excluding the node_modules folder for sharing
sap.ux.environmentcheck.archiveProject

# Note: node_modules (folder to exclude)
```

**STEP**: Page Map & Navigation Tools

**DESCRIPTION**: Open the page map to inspect application pages and navigation paths; useful for programmatic analysis of routing/targets.

**LANGUAGE**: text

**CODE**:
```text
# Open the page map that shows application pages and navigation paths
sap.ux.pageMap.showMap
```

**STEP**: Project Preview & External Integration

**DESCRIPTION**: Preview the app externally and use commands to convert preview settings (already referenced above). Also useful to automate preview selection in CI or local scripts.

**LANGUAGE**: text

**CODE**:
```text
# Preview application (choose from start scripts)
sap.ux.pageEditor.previewExternal
```

**STEP**: Scripting Languages & TypeScript Support

**DESCRIPTION**: SAP Fiori apps are based on SAPUI5. SAP Fiori tools supports JavaScript and TypeScript development. For TypeScript support and UI5 types, reference the UI5 TypeScript project.

**LANGUAGE**: text / url

**CODE**:
```text
# UI5 and TypeScript reference
https://sap.github.io/ui5-typescript
```

**STEP**: Usability — Keyboard Navigation and High Contrast

**DESCRIPTION**: Supported tooling features are keyboard navigable and support high contrast themes. Use arrow keys to navigate within sections, Tab/Shift+Tab to move focus, and Enter to select. For high contrast, change editor theme in Preferences > Color Themes (VS Code / Business Application Studio).

**LANGUAGE**: text

**CODE**:
```text
# Keyboard navigation keys:
# - Arrow keys: navigate within sections
# - Tab: navigate to next section/control
# - Shift+Tab: navigate back
# - Enter: make selection

# Switch to high contrast:
# Preferences > Color Themes (VS Code or SAP Business Application Studio)
```

sap fiori-tools ui5 sapui5 commands npm mockserver annotations adaptation deploy lint validate typescript javascript