**TITLE**: Fiori Tools — Command Palette Reference (VS Code)

**INTRODUCTION**: This reference lists all Fiori Tools commands available in the VS Code Command Palette. Each entry is action-oriented for automation or code-generation tools: how to invoke the command, what it does, and any important file paths or documentation links to consult.

**TAGS**: fiori-tools, vscode, command-palette, sap-fiori, sapui5, deployment, preview, annotation, generator, telemetry

STEP: 1 — Add Configuration for Variants Creation
DESCRIPTION: Open the Command Palette and run the command to add configuration enabling variants creation for the application.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Add Configuration for Variants Creation
```

STEP: 2 — Add Deployment Configuration
DESCRIPTION: Add or update the deployment configuration for the application (used by deployment commands and CI workflows).
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Add Deployment Configuration
```

STEP: 3 — Add Reference to SAP Fiori Apps Reusable Libraries
DESCRIPTION: Insert a reference to another project/library so the current app can reuse components. See Reuse Library Support for additional context.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Add Reference to SAP Fiori Apps Reusable Libraries
```
Note: See documentation: ../Project-Functions/reuse-library-support-6e99fbb.md

STEP: 4 — Add SAP System
DESCRIPTION: Create and save a new SAP system connection in VS Code (ABAP On-Premises or ABAP Environment with a service key). The connection is stored in your workspace/user system list.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Add SAP System
```
Note: See Managing SAP System Connections: ../Project-Functions/managing-sap-system-connections-78a82b6.md

STEP: 5 — Add SAP Fiori Launchpad Configuration
DESCRIPTION: Add the configuration files necessary for the app to run on SAP Fiori launchpad after deployment (manifest/site/FLP configuration).
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Add SAP Fiori Launchpad Configuration
```

STEP: 6 — Add SAP Fiori Launchpad Embedded Configuration
DESCRIPTION: Create and save configuration that allows previewing an app in the target environment without redeploying. Useful for FLP embedded preview and local testing.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Add SAP Fiori Launchpad Embedded Configuration
```
Note: See Preview an Application on External SAP Fiori Launchpad: ../Previewing-an-Application/preview-an-application-on-external-sap-fiori-launchpad-c789692.md

STEP: 7 — Archive Project
DESCRIPTION: Archive the current project (packaging/archive workflow).
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Archive Project
```

STEP: 8 — Change Telemetry Settings
DESCRIPTION: Toggle whether telemetry data for SAP Fiori tools is sent to SAP. Use this to enable/disable usage reporting.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Change Telemetry Settings
```
Note: See Telemetry: telemetry-837c231.md

STEP: 9 — Change the Minimum SAPUI5 Version
DESCRIPTION: Update the application's required minimum SAPUI5 version (modifies manifest and configuration where applicable).
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Change the Minimum SAPUI5 Version
```

STEP: 10 — Delete Application from CAP Project
DESCRIPTION: Remove an application from a multi-application CAP project. This deletes app-specific artifacts and updates project configuration.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Delete Application from CAP Project
```
Note: See Deleting an Application in CAP Project: ../Project-Functions/deleting-an-application-in-cap-project-709f838.md

STEP: 11 — Deploy Application
DESCRIPTION: Deploy the application using the deployment configuration (default stored in ui5-deploy.yaml). Run this after configuring deployment settings or during CI/CD.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Deploy Application
```
Note: Deployment configuration file: ui5-deploy.yaml

STEP: 12 — Enable App-to-App Navigation Preview
DESCRIPTION: Create and save configuration required to preview navigation between apps in the same workspace (app-to-app navigation testing).
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Enable App-to-App Navigation Preview
```
Note: See App-to-App Navigation Preview: ../Previewing-an-Application/app-to-app-navigation-preview-543675f.md

STEP: 13 — Import SAP System
DESCRIPTION: Import and save a new ABAP On-Premise SAP system connection into VS Code.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Import SAP System
```
Note: See Managing SAP System Connections: ../Project-Functions/managing-sap-system-connections-78a82b6.md

STEP: 14 — Migrate Project for use in SAP Fiori Tools
DESCRIPTION: Migrate SAP Fiori projects from other tooling (e.g., SAP Web IDE) into VS Code or Business Application Studio. This updates project structure and metadata required by Fiori Tools.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Migrate Project for use in SAP Fiori Tools
```
Note: See Migration: migration-70d41f3.md

STEP: 15 — Open Annotation File Manager
DESCRIPTION: Launch the Annotation File Manager to create, edit, and manage OData annotation files for your services.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open Annotation File Manager
```

STEP: 16 — Open Application Generator
DESCRIPTION: Start the SAP Fiori application generator to scaffold a new Fiori application using guided prompts and templates.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open Application Generator
```
Note: See Generating an Application: ../Generating-an-Application/generating-an-application-db44d45.md

STEP: 17 — Open Application Info
DESCRIPTION: Open the Application Information page to view and edit app metadata (IDs, titles, descriptions, tags).
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open Application Info
```
Note: See Application Information: ../Project-Functions/application-information-c3e0989.md

STEP: 18 — Open CF Application Router Generator
DESCRIPTION: Generate Cloud Foundry app router configuration for MTA deployment scenarios. Adds app router artifacts used by CF deployment.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open CF Application Router Generator
```
Note: See Generating an MTA Deployment File: ../Generating-an-Application/Additional-Configuration/generating-an-mta-deployment-file-9c41152.md

STEP: 19 — Open Data Editor
DESCRIPTION: Launch the Data Editor to manage mock or local test data bound to your Fiori app.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open Data Editor
```

STEP: 20 — Open Environment Check
DESCRIPTION: Run checks on the development environment and generate reports to identify missing dependencies or setup problems.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open Environment Check
```

STEP: 21 — Open Guided Development
DESCRIPTION: Launch Guided Development to apply feature guides that generate and insert code snippets based on selected parameters to implement or update features.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open Guided Development
```
Note: See Use Feature Guides: ../Developing-an-Application/use-feature-guides-0c9e518.md

STEP: 22 — Open Guided Development to the Side
DESCRIPTION: Launch Guided Development in a side editor pane to continue working in the main editor while applying feature guides.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open Guided Development to the Side
```

STEP: 23 — Open Reusable Library Generator
DESCRIPTION: Launch the generator to create or update a reusable library for SAP Fiori apps (components, controls, modules).
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open Reusable Library Generator
```

STEP: 24 — Open Run Configurations
DESCRIPTION: Open the Run Configuration editor to define preview/run scripts and options for the project (local preview, target environments).
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open Run Configurations
```
Note: See Use Run Control: ../Previewing-an-Application/use-run-control-09171c8.md

STEP: 25 — Open Service Manager
DESCRIPTION: Launch the Service Manager to view and manage OData services, destinations, and bindings used by your app.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open Service Manager
```

STEP: 26 — Open Service Modeler
DESCRIPTION: Launch the Service Modeler to visualize OData service metadata and annotations for model-driven development.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open Service Modeler
```
Note: See Viewing Service Metadata: ../Project-Functions/viewing-service-metadata-e369c2c.md

STEP: 27 — Open Service Modeler to the Side
DESCRIPTION: Open the Service Modeler in a side editor pane to inspect service models while editing application files.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Open Service Modeler to the Side
```

STEP: 28 — Preview Application
DESCRIPTION: Launch the application preview flow and select a start script (from package.json or configured run profiles) to run the app locally or in an emulated environment.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Preview Application
```

STEP: 29 — Refresh Application Modeler View
DESCRIPTION: Refresh the Application Modeler to reflect recent changes in project structure, pages, and configuration.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Refresh Application Modeler View
```

STEP: 30 — Restart XML Annotation Language Server
DESCRIPTION: Restart the XML annotation language server if it has failed or becomes unresponsive (helps recover validation and editing features for XML-based annotations).
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Restart XML Annotation Language Server
```

STEP: 31 — Run UI5 Linter
DESCRIPTION: Run static code analysis using the UI5 linter to validate SAPUI5 best practices and detect common issues. Use in pre-commit, CI, or local validation workflows.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Run UI5 Linter
```
Note: UI5 linter project: https://github.com/UI5/linter

STEP: 32 — Show Output Channel
DESCRIPTION: Open the Output channel specific to the Application Modeler and Fiori Tools to inspect logs, errors, and diagnostic messages produced by extensions.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Show Output Channel
```

STEP: 33 — Show Page Editor
DESCRIPTION: Open the Page Editor to view an outline of configurable elements on the selected page and edit page-level configuration.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Show Page Editor
```
Note: See Configure Page Elements: ../Developing-an-Application/configure-page-elements-047507c.md

STEP: 34 — Show Page Map
DESCRIPTION: Open the Page Map to visualize application pages and navigation paths; useful for defining and verifying app routing and structure.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Show Page Map
```
Note: See Define Application Structure: ../Developing-an-Application/define-application-structure-bae38e6.md

STEP: 35 — Show Release Notes
DESCRIPTION: Display the SAP Fiori Tools release notes to review changes and updates in the extension.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Show Release Notes
```

STEP: 36 — Show SAP System Details
DESCRIPTION: Open the detailed view for a saved SAP system connection to inspect credentials, destinations, and metadata.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Show SAP System Details
```

STEP: 37 — Fiori tools AI: Show Fiori Tools Joule
DESCRIPTION: Launch Joule, the SAP Fiori Tools AI assistant in SAP Business Application Studio. Requires a subscription to SAP Build Code to use the assistant.
LANGUAGE: Command (VS Code / BAS)
CODE:
```text
Fiori tools AI: Show Fiori Tools Joule
```
Note: Requires SAP Build Code subscription.

STEP: 38 — Validate Project
DESCRIPTION: Run project validation checks to ensure the project meets Fiori Tools requirements and detect configuration or consistency problems.
LANGUAGE: Command (VS Code)
CODE:
```text
Fiori: Validate Project
```

fiori-tools vscode command-palette sap-fiori sapui5 deployment preview annotation generator telemetry


**TITLE**: Getting Started with SAP Fiori Tools

**INTRODUCTION**: Quick reference for developers to install, configure, and use SAP Fiori tools extensions in SAP Business Application Studio or Visual Studio Code. Action-oriented checklist of available extensions, features, supported targets, and where to find deeper documentation and troubleshooting.

**TAGS**: fiori-tools, SAPUI5, SAP Fiori, SAP BTP, S/4HANA, VSCode, Business Application Studio, annotations, OData

**STEP**: 1 — Install SAP Fiori tools in your IDE

**DESCRIPTION**: Install or enable SAP Fiori tools in the IDE you use. Choose either SAP Business Application Studio (recommended for cloud dev) or Visual Studio Code. Follow the linked IDE pages for step-by-step installation and workspace setup.

**LANGUAGE**: Markdown

**CODE**:
```markdown
SAP Business Application Studio install doc:
- sap-business-application-studio-b011040.md

Visual Studio Code install doc:
- visual-studio-code-17efa21.md#loio17efa217f7f34a9eba53d7b209ca4280
```

**STEP**: 2 — Understand the SAP Fiori tools extension set

**DESCRIPTION**: Review the extensions that compose SAP Fiori tools. Use the listed docs for each extension to perform tasks such as generating applications, visualizing navigation, and maintaining annotations.

**LANGUAGE**: Markdown

**CODE**:
```markdown
SAP Fiori tools includes these extensions and features:

- Application Wizard
  - Doc: ../Generating-an-Application/SAP-Fiori-Elements/sap-fiori-elements-1488469.md
  - Purpose: Wizard-style generator for SAP Fiori elements and freestyle SAPUI5 templates.

- SAP Fiori Tools – Application Modeler
  - Doc: ../Developing-an-Application/developing-an-application-a9c0043.md
  - Purpose: Visualize application pages, navigation, and service entities; add/delete pages and navigation; jump to editing tools.
  - Subfeatures:
    - Page Editor: ../Developing-an-Application/configure-page-elements-047507c.md
    - Page Map: ../Developing-an-Application/define-application-structure-bae38e6.md

- Guided Development
  - Doc: ../Developing-an-Application/use-feature-guides-0c9e518.md
  - Purpose: Step-by-step How-To guides and tutorials integrated into the project.

- Service Modeler
  - Doc: ../Project-Functions/viewing-service-metadata-e369c2c.md
  - Purpose: Browse and visualize OData service metadata: entities, properties, associations.

- Maintaining Annotations with Language Server
  - Doc: ../Developing-an-Application/maintaining-annotations-with-language-server-6fc93f8.md
  - Features: Code completion, micro-snippets, diagnostics, internationalization support.

- SAP Fiori tools Environment Check
  - Doc: ../Project-Functions/environment-check-75390cf.md
  - Purpose: Run checks against local/cloud environment and configured SAP BTP destinations.
```

**STEP**: 3 — Visual references and artifacts

**DESCRIPTION**: Keep reference images and assets packaged with your documentation or project for visual guidance. The product doc includes a flow diagram image to reference user flows.

**LANGUAGE**: plaintext

**CODE**:
```text
Image referenced in documentation:
- images/FIORI_TOOL_USER_FLOW_WFREESTYLE_3ad8363.png
```

**STEP**: 4 — Supported deployment landscapes and data sources

**DESCRIPTION**: Target these deployment landscapes when planning or generating applications. For supported data sources consult the Data Source doc.

**LANGUAGE**: Markdown

**CODE**:
```markdown
Supported Deployment Landscapes:
- SAP S/4HANA
- SAP S/4HANA Cloud
- SAP BTP (ABAP and Cloud Foundry Environments)

Data sources documentation:
- ../Generating-an-Application/SAP-Fiori-Elements/data-source-9906181.md
```

**STEP**: 5 — Language Server capabilities (annotations)

**DESCRIPTION**: Use the Language Server to author and maintain annotation files with IDE support. It provides editor features to speed up annotation maintenance and maintain consistency.

**LANGUAGE**: Markdown

**CODE**:
```markdown
Maintaining Annotations with Language Server:
- Doc: ../Developing-an-Application/maintaining-annotations-with-language-server-6fc93f8.md
- Key features to use:
  - Code completion (annotations and vocabulary)
  - Micro-snippets for common annotation patterns
  - Diagnostics (validation and error messages)
  - Internationalization support for annotation texts
```

**STEP**: 6 — Use the Application Modeler (Page Editor & Page Map)

**DESCRIPTION**: Use the Application Modeler to visualize and edit the application's page structure and navigation. Jump between visual editing and source files using the provided editor links.

**LANGUAGE**: Markdown

**CODE**:
```markdown
Application Modeler:
- Doc: ../Developing-an-Application/developing-an-application-a9c0043.md
- Page Editor: ../Developing-an-Application/configure-page-elements-047507c.md
- Page Map: ../Developing-an-Application/define-application-structure-bae38e6.md
```

**STEP**: 7 — Run environment checks

**DESCRIPTION**: Validate your development environment and SAP BTP destinations before generating or deploying applications. Use the Environment Check extension to surface missing configuration or incompatible settings.

**LANGUAGE**: Markdown

**CODE**:
```markdown
Environment Check:
- Doc: ../Project-Functions/environment-check-75390cf.md
- Purpose: Run checks against local environment and configured SAP BTP destinations
```

**STEP**: 8 — Troubleshooting and support process

**DESCRIPTION**: If you encounter issues that require SAP support, create an incident in the SAP Support Portal and reference the component CA-UX-IDE.

**LANGUAGE**: plaintext

**CODE**:
```text
Support escalation:
- Create an SAP Support Portal incident for component: CA-UX-IDE
- Reference page: Report Issues and Security (report-issues-and-security-7c755a5.md)
```

**STEP**: 9 — Compatibility caution

**DESCRIPTION**: Ensure SAPUI5 runtime version in your project and target systems is supported. Minimum SAPUI5 version required is 1.65.

**LANGUAGE**: plaintext

**CODE**:
```text
Caution:
- SAP Fiori tools supports SAPUI5 applications with a minimum SAPUI5 version of 1.65 or higher.
```

Getting Started with SAP Fiori Tools

fiori-tools
SAPUI5
SAP Fiori
SAP BTP
S/4HANA
VSCode
Business Application Studio
annotations
OData


**TITLE**: Importing an SAP Fiori Application from the SAPUI5 ABAP Repository

**INTRODUCTION**: This guide explains how to import an existing SAP Fiori application from an SAPUI5 ABAP repository into SAP Business Application Studio (BAS) or Visual Studio Code (VS Code). It covers preparing workspace folders, exporting the BSP application from the ABAP back-end, extracting files, creating required metadata, migrating the project to Fiori tools, and post-import cleanup tips for UI5 CLI builds.

**TAGS**: fiori-tools, sapui5, abap, migrate, restore, BAS, VSCode, UI5

**STEP**: 1 — Prepare workspace folders

**DESCRIPTION**: Create the required folder structure in your BAS or VS Code workspace. The top-level folder is a container for the restored app; the webapp subfolder will contain the extracted application files (unzipped download).

- Folder names (exact):
  - restore-from-exported
  - restore-from-exported/webapp

Create them using your environment UI or a terminal.

**LANGUAGE**: text

**CODE**:
```text
# create folders (example for Unix-like shells)
mkdir -p restore-from-exported/webapp

# verify
ls -la restore-from-exported
ls -la restore-from-exported/webapp
```

**STEP**: 2 — Export the application from the SAPUI5 ABAP repository

**DESCRIPTION**: In the ABAP system, run the repository export report to download the application as a zip. Follow the ABAP UI steps precisely.

- Log into your SAPUI5 ABAP back-end system.
- Open transaction SE80.
- Run report /UI5/UI5_REPOSITORY_LOAD.
- Enter the SAPUI5 application name and click Download.
- Choose an empty folder as the download target.
- From the resulting view click "Click here to Download" to obtain a .zip file.

**LANGUAGE**: text

**CODE**:
```text
# ABAP/UI steps (no CLI):
# 1. Go to transaction SE80
# 2. Run report: /UI5/UI5_REPOSITORY_LOAD
# 3. Provide application name -> Click Download
# 4. Choose an empty folder on the ABAP server -> Download .zip via "Click here to Download"
```

**STEP**: 3 — Extract the downloaded zip into the workspace and verify manifest

**DESCRIPTION**: Unzip the downloaded archive into restore-from-exported/webapp. Confirm the manifest.json is at restore-from-exported/webapp/manifest.json (root of webapp).

**LANGUAGE**: text

**CODE**:
```text
# example unzip into workspace (adjust path to your downloaded zip)
unzip path/to/downloaded-app.zip -d restore-from-exported/webapp

# verify manifest is present
ls -la restore-from-exported/webapp/manifest.json
```

**STEP**: 4 — Create package.json matching application id in manifest

**DESCRIPTION**: Create a package.json file inside restore-from-exported. The name value must match the application id (sap.app/id) found in manifest.json.

- Open restore-from-exported/manifest.json and locate sap.app.id to get the correct application name/namespace.
- Create restore-from-exported/package.json with the "name" field set to that id.

Preserve the exact JSON structure shown below.

**LANGUAGE**: JSON

**CODE**:
```json
{
   "name": "sap.fe.demo.awesomeapp",
}
```

**STEP**: 5 — Verify application id in manifest.json (example)

**DESCRIPTION**: Example snippet showing where to find the app id inside manifest.json. Use this value for package.json "name".

**LANGUAGE**: JSON

**CODE**:
```json
{
   "sap.app": {
      "id": "sap.fe.demo.awesomeapp",
      ..
```

**STEP**: 6 — Run Fiori Tools migration in BAS or VS Code

**DESCRIPTION**: Start the Fiori tools migration command to convert the restored app to be compatible with SAP Fiori tools.

- Open SAP Business Application Studio or VS Code workspace (the folder containing restore-from-exported must be part of the workspace).
- Run the command: "Fiori: Migrate Project for use in Fiori tools" (via Command Palette).
- The migration command should detect the project under restore-from-exported and list it.
- Choose the appropriate migration options when prompted and complete the migration.

**LANGUAGE**: text

**CODE**:
```text
# In VS Code or BAS:
# 1. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
# 2. Run: Fiori: Migrate Project for use in Fiori tools
# 3. Select the project at: restore-from-exported
# 4. Follow prompts to complete migration
```

**STEP**: 7 — Post-import cleanup and developer tips

**DESCRIPTION**: Notes and required cleanup before running UI5 CLI build and for readability of code:

- The BSP application you downloaded is typically minified. Use this import only if the app is not available in source control.
- The -dbg.js files (for example Component-dbg.js) contain original un-minified code. To make code human-readable, copy Component-dbg.js -> Component.js (or corresponding files).
- Before running UI5 CLI build, remove these files to avoid duplicates in dist: *-dbg.js, *-preload.js, and *.js.map. If not removed they are recreated in the dist folder.

Examples for copying and removing files:

**LANGUAGE**: text

**CODE**:
```text
# Example: copy dbg to non-dbg for readability
cp restore-from-exported/webapp/Component-dbg.js restore-from-exported/webapp/Component.js

# Remove debug/preload/map files before UI5 CLI build
find restore-from-exported/webapp -type f \( -name '*-dbg.js' -o -name '*-preload.js' -o -name '*.js.map' \) -delete

# Then run UI5 CLI build (example)
# cd restore-from-exported
# ui5 build --include-task=generateManifestBundle
```

**STEP**: 8 — Confirmation

**DESCRIPTION**: After migration and cleanup, the project under restore-from-exported should be compatible with SAP Fiori tools and ready for development or further refactoring into source control.

**LANGUAGE**: text

**CODE**:
```text
# Verify:
# - manifest.json exists at restore-from-exported/webapp/manifest.json
# - package.json exists at restore-from-exported/package.json with matching name
# - project migrated successfully via Fiori tools
# - debug/preload/map files removed before ui5 build
```

fiori-tools sapui5 abap migrate restore BAS VSCode UI5


**TITLE**: Installation for fiori-tools

**INTRODUCTION**: This page points to IDE-specific installation instructions for fiori-tools. Use the appropriate step below for your development environment (SAP Business Application Studio or Visual Studio Code) to complete installation and setup.

**TAGS**: fiori-tools, installation, SAP, Business Application Studio, Visual Studio Code, IDE

**STEP**: 1 — SAP Business Application Studio

**DESCRIPTION**: Open and follow the installation instructions for SAP Business Application Studio in the referenced document. This contains all steps required to install and configure fiori-tools in the SAP Business Application Studio environment.

**LANGUAGE**: Markdown

**CODE**:
```markdown
[SAP Business Application Studio](sap-business-application-studio-b011040.md)
```

**STEP**: 2 — Visual Studio Code

**DESCRIPTION**: Open and follow the installation instructions for Visual Studio Code in the referenced document and anchor. This contains the VS Code-specific steps (extensions, configuration, and commands) required to install and configure fiori-tools.

**LANGUAGE**: Markdown

**CODE**:
```markdown
[Visual Studio Code](visual-studio-code-17efa21.md#loio17efa217f7f34a9eba53d7b209ca4280)
```

Installation for fiori-tools

fiori-tools
installation
SAP
Business Application Studio
Visual Studio Code
IDE


**TITLE**: Migrate SAP Fiori projects to SAP Fiori tools (VS Code / Business Application Studio)

**INTRODUCTION**: Practical, action-oriented instructions to migrate SAP Fiori projects (from SAP Web IDE or file export) to Visual Studio Code or SAP Business Application Studio using the SAP Fiori tools migration utility. Covers prerequisites, exact migration steps, fields to fill, files changed by migration, verification steps, and post-migration actions.

**TAGS**: fiori-tools, migration, sapui5, vscode, business-application-studio, web-ide, ui5-tooling, adaptation

STEP: Prerequisites
DESCRIPTION: Verify environment and project readiness before running migration.
- Install the latest SAP Fiori tools extensions in your IDE (VS Code / SAP Business Application Studio).
- Ensure your project runs correctly in SAP Web IDE and is one of the supported types: SAP Fiori elements V2, SAP Fiori elements V4, freestyle SAPUI5, or Extension project.
- Ensure the project contains a main data source defined in:
LANGUAGE: Text
CODE:
```text
manifest.appdescr_variant
# The project must have the main data source specified in this file.
```

STEP: Recommendations (IDE-specific)
DESCRIPTION: Prepare IDE-specific connectivity and version info used during migration.
- SAP Business Application Studio: define a destination that reflects the original target system. If not defined, live-data preview will fail.
- VS Code: know the target system hostname and/or client to enter into the migration dialog.
- Use a destination for the front-end server hosting SAPUI5 libraries (do not point migration directly to back-end OData server).
- Keep the migrated project under version control.
LANGUAGE: Text
CODE:
```text
# SAP Business Application Studio:
# - Ensure a destination exists in your subaccount matching the target system.
# - Migration will preselect a destination if neo-app.json destination name matches an available destination.

# VS Code:
# - Have the target system hostname and SAP client (optional numeric) available.
```

STEP: Import or clone the project into the workspace
DESCRIPTION: Bring the source project files into your active workspace (either by git clone or file import/export).
- Option A: Clone from git using CLI.
- Option B: Export project from SAP Web IDE to local disk, unzip, then open/move into workspace.
- In VS Code: File > Open Workspace (create a workspace in the projects folder) or drag the unzipped project into the workspace.
LANGUAGE: Shell / Text
CODE:
```bash
# Example: clone from git (replace with your repo)
git clone <repository-url> /path/to/workspace/project-name

# Or:
# 1. Export project from SAP Web IDE -> unzip locally
# 2. Drag project folder into your VS Code or Business Application Studio workspace
```

STEP: Open the Migration view and start migration flow
DESCRIPTION: Launch the Migration UI and select projects to migrate.
- Start migration from the popup when opening a cloned/imported project, or:
- Open Command Palette and execute the migration command:
LANGUAGE: Text
CODE:
```text
# Open Migration view via Command Palette
# Keystroke:
#   macOS: CMD + Shift + P
#   Windows/Linux: CTRL + Shift + P
# Command:
Fiori: Migrate Project for use in Fiori tools
```

STEP: Select projects and provide migration metadata
DESCRIPTION: Select checkboxes for projects to migrate. Optionally click "Add Project" to add a folder manually. Provide or confirm the following fields for each project in the Migration view:
- Application Identifier: value from manifest.json or pom.xml
- Project Path: file system path to the project
- SAP System: choose saved VS Code systems or BAS destinations (selecting sets hostname/client)
- Destination: (BAS only) default from neo-app.json — should point to front-end server with SAPUI5 libraries
- Hostname: (VS Code only) back-end hostname (valid URL or blank)
- SAP Client: optional numeric client
- SAPUI5 Version: select preview runtime version (defaults to neo-app.json or manifest minUI5Version). Note: Extensibility projects require at least 1.71.0
LANGUAGE: Text
CODE:
```text
# Fields to fill in Migration view:
Application Identifier: <value from manifest.json or pom.xml>
Project Path: /absolute/or/relative/path/to/project
SAP System: <dropdown of saved systems/destinations>
Destination: <destination name>  # BAS only
Hostname: https://host.example.com  # VS Code only
SAP Client: 001  # optional
SAPUI5 Version: 1.71.0 or higher (Extensibility projects require >= 1.71.0)
```

STEP: Run the migration
DESCRIPTION: Click Start Migration in the Migration view. Migration will:
- Modify project files as listed below
- Install required npm packages
- Produce a migration results view with actions (View Info / Back)
- Note: migration does NOT update deployment configuration; run deployment config after migration
LANGUAGE: Shell
CODE:
```bash
# After migration, configure deployment:
npm run deploy-config
```

STEP: Files updated or added by migration
DESCRIPTION: The migration modifies/creates files to adopt ui5-tooling and SAP Fiori tools standards. Review these changed files and commit to version control as appropriate.
LANGUAGE: Text
CODE:
```text
Files created/updated by migration:

.gitignore
  - New file added. Contains build artifacts and libraries to ignore.

package-lock.json
  - Deleted and re-created to reflect updated libraries.

package.json
  - Removes SAP Web IDE specific libraries.
  - Updates npm scripts with SAP Fiori tooling targets and dependencies.
  - Presence of "sapux": true and ui5-tooling identifies SAP Fiori tools support.

ui5-local.yaml
  - New. Supports offline development, local ui5 libraries, and mock data.

ui5.yaml
  - Removes SAP Web IDE builder tasks. Adds proxy middleware and live reload config.
  - Deployment tasks are added later when you run deploy-config.

index.html
  - New. Supports stand-alone preview without SAP Fiori launchpad.

manifest.json
  - Populated/updated by SAP Fiori tools.

changes_loader.js
  - New. Supports live reload of the application.

changes_preview.js
  - New. Supports .changes files produced by adaptation updates.

flpSandbox.html
  - Updated. Paths changed so UI5 libraries are proxied; runtime UI5 version selectable; updated recommended config.

locate-reuse-libs.js
  - New. Detects custom reuse libraries referenced in manifest and registers them at runtime if installed.

flpSandboxMockServer.html
  - Updated similarly to flpSandbox.html but includes mock server support.

# Note: If no webapp folder existed in source, migration creates webapp and moves relevant HTML/JS there.
```

STEP: Post-migration verification and follow-up actions
DESCRIPTION: Verify changes and enable optional features:
- Review source control diffs for overwritten project-specific changes; reapply custom changes if needed.
- Sync OData service metadata if missing files (e.g., metadata.xml) using Service Manager.
- Launch SAP Fiori tools commands to validate functionality (Page Map, Generators, Guided Development).
LANGUAGE: Text
CODE:
```text
# Useful SAP Fiori tools commands after migration (via Command Palette):
Fiori: Open Application Generator
Fiori: Open Guided Development
# Other checks:
# - Open Page Map
# - Use Service Manager to sync OData/annotation files if metadata.xml is missing
```

STEP: Adaptation Projects / Adaptation Editor note
DESCRIPTION: If migrating SAPUI5 adaptation projects: adaptation projects migrated previously can be migrated again to enable the Adaptation Editor in BAS (available in Adaptation Project tooling 1.1.60+). After re-migration, the new Adaptation Editor becomes available.
LANGUAGE: Text
CODE:
```text
# Adaptation project requirement:
# - Adaptation Project tooling >= 1.1.60 in BAS provides Adaptation Editor.
# - Re-migrate previously migrated adaptation projects to enable the new editor.
```

STEP: Related resources
DESCRIPTION: External references for further reading and walkthroughs.
LANGUAGE: Text
CODE:
```text
# Related resources:
# - Extending an SAP Fiori Application:
#   https://help.sap.com/docs/bas/developing-sap-fiori-app-in-sap-business-application-studio/extending-sap-fiori-application
# - Blog: Migrate SAP Fiori projects from SAP Web IDE to SAP Business Application Studio:
#   https://blogs.sap.com/2022/01/06/migrate-sap-fiori-projects-from-sap-web-ide-to-sap-business-application-studio/
# - For Application Information after migration, see Project Functions > Application Information.
```

fiori-tools migration sapui5 vscode business-application-studio web-ide ui5-tooling adaptation


**TITLE**: Report Issues and Security for SAP Fiori tools

**INTRODUCTION**: Quick reference for where to report issues with SAP Fiori tools and concrete security actions to follow when developing Fiori applications. Use this to find community/official support and to run basic checks that reduce security risk in development environments.

**TAGS**: fiori-tools, sap, support, security, odata, npm, path, source-control, devops

**STEP**: 1 — Check official FAQs and community first

**DESCRIPTION**: Before creating a support incident, verify up-to-date guidance and community answers. Use the official SAP Fiori tools FAQ and the SAP Fiori tools Community to find known issues and solutions.

**LANGUAGE**: Text

**CODE**:
```text
SAP Fiori tools FAQ:
https://help.sap.com/viewer/42532dbd1ebb434a80506113970f96e9/Latest/en-US

SAP Fiori tools Community:
https://answers.sap.com/tags/73555000100800002345
```

**STEP**: 2 — Create an SAP Support incident

**DESCRIPTION**: If community/FAQ do not resolve your issue, create an incident in SAP Support Portal. Provide the product component and concise reproduction steps, logs, and environment details.

**LANGUAGE**: Text

**CODE**:
```text
Open an incident in SAP Support Portal under component: CA-UX-IDE
Contact SAP Support page:
https://help.sap.com/viewer/1bb01966b27a429ebf62fa2e45354fea/Latest/en-US
```

**STEP**: 3 — Follow organizational software development security guidance

**DESCRIPTION**: Apply your organization's SDLC security policies (code review, secret management, vulnerability scanning, approved dependencies). This is the foundation; follow it before proceeding with local checks below.

**LANGUAGE**: Text

**CODE**:
```text
Action: Follow your organization's documented security guidance for software development,
including secret scanning, vulnerability scanning, code review, and dependency policy.
```

**STEP**: 4 — Avoid using production OData services for development

**DESCRIPTION**: Use a dedicated development or sandbox backend for building and testing Fiori apps. Do not use production OData services or production credentials during development.

**LANGUAGE**: Text

**CODE**:
```text
Best practice:
- Do NOT use OData services hosted on production systems for development.
- Use separate developer or sandbox instances for OData endpoints and testing.
- Do NOT reuse production user credentials for development.
```

**STEP**: 5 — Use a trusted NPM registry and verify packages

**DESCRIPTION**: Ensure npm registry is trusted, lock dependencies where possible, and audit packages for vulnerabilities.

**LANGUAGE**: Shell

**CODE**:
```bash
# Check current npm registry
npm config get registry

# Set registry to official npm registry (example)
npm config set registry https://registry.npmjs.org/

# Audit dependencies
npm audit

# Use lockfiles to pin dependencies
# npm creates package-lock.json automatically, or use yarn.lock for yarn
```

**STEP**: 6 — Use source control and commit regularly

**DESCRIPTION**: Keep all code in a source control system and make regular commits. Include build artifacts in .gitignore as appropriate.

**LANGUAGE**: Shell

**CODE**:
```bash
# Initialize a repository and do first commit
git init
git add .
git commit -m "Initial commit"

# Typical .gitignore entries for Node/Fiori projects
# node_modules/
# dist/
# .env
```

**STEP**: 7 — Verify your PATH and tool origins

**DESCRIPTION**: Confirm that tools executed from your terminal (e.g., node, cds) come from trusted installations. Inspect PATH to ensure no unexpected directories precede trusted tool locations.

**LANGUAGE**: Shell

**CODE**:
```bash
# Show PATH
echo $PATH

# Find which 'node' and 'cds' are executed
which node
node -v

which cds
cds --version

# If on Windows (PowerShell)
$env:PATH
Get-Command node
node --version
```

**STEP**: 8 — Additional security documentation reference

**DESCRIPTION**: For more comprehensive guidance, consult the security guidance referenced in the Fiori tools documentation.

**LANGUAGE**: Text

**CODE**:
```text
See: Security guidance in Deploying an Application
Relative link: ../Deploying-an-Application/security-8a147c6.md
SAP Fiori tools FAQ: https://help.sap.com/viewer/42532dbd1ebb434a80506113970f96e9/Latest/en-US
SAP Fiori tools Community: https://answers.sap.com/tags/73555000100800002345
Contact SAP Support: https://help.sap.com/viewer/1bb01966b27a429ebf62fa2e45354fea/Latest/en-US
```

fiori-tools sap support security odata npm path source-control devops


**TITLE**: SAP Business Application Studio — Dev Space and Extensions for SAP Fiori Tools

**INTRODUCTION**: Use this guide to set up a SAP Business Application Studio (BAS) workspace optimized for SAP Fiori development. It lists which dev space types include SAP Fiori tools by default, points out extensions that are not included and must be installed manually, and links to next recommended tutorials.

**TAGS**: fiori-tools, SAP, BAS, Business Application Studio, devspace, UI5, CDS, extensions

**STEP**: 1 — Create a BAS Workspace (Prerequisite)

**DESCRIPTION**: Create a new workspace in SAP Business Application Studio. Follow the official onboarding tutorial to set up your BAS environment and create a dev space.

**LANGUAGE**: text

**CODE**:
```text
Follow: https://developers.sap.com/tutorials/appstudio-onboarding.html
```

**STEP**: 2 — Select Dev Space Type (Preinstalled SAP Fiori Tools)

**DESCRIPTION**: When creating the dev space, select one of the dev space types that include SAP Fiori tools preinstalled:
- SAP Fiori Dev Space
- Full Stack Cloud Application Dev Space (recommended for CAP-based projects)

These dev spaces come with SAP Fiori tools preinstalled and loaded automatically, so you can start Fiori/UI5 development immediately.

**LANGUAGE**: text

**CODE**:
```text
Recommended dev space types:
- SAP Fiori Dev Space
- Full Stack Cloud Application Dev Space
```

**STEP**: 3 — Confirm UI5 Language Assistant (Included)

**DESCRIPTION**: The UI5 Language Assistant is a mandatory extension and is installed automatically in SAP Fiori dev spaces. No manual action required. If you need to review the extension details or update it, use the Visual Studio Code Marketplace link.

**LANGUAGE**: text

**CODE**:
```text
UI5 Language Assistant:
https://marketplace.visualstudio.com/items?itemName=SAPOSS.vscode-ui5-language-assistant&ssr=false#overview
```

**STEP**: 4 — Install CDS OData Language Server (Not Included)

**DESCRIPTION**: The CDS OData Language Server extension is NOT included by default in the SAP Fiori dev space. If your project uses CDS/OData language support, manually install the appropriate extension. See the SAP CDS Language Support section in the Visual Studio Code documentation for details and installation instructions.

**LANGUAGE**: text

**CODE**:
```text
See: visual-studio-code-17efa21.md#loio17efa217f7f34a9eba53d7b209ca4280
(Contains "SAP CDS Language Support" details)
```

**STEP**: 5 — Next Recommended Tutorial (Generate a Fiori App)

**DESCRIPTION**: After finishing BAS onboarding, generate a new SAP Fiori application using the Fiori tools generator. This is the recommended next step to scaffold a new Fiori project.

**LANGUAGE**: text

**CODE**:
```text
Generate a new Fiori app:
https://developers.sap.com/tutorials/fiori-tools-generate-project.html
```

**STEP**: 6 — Additional Getting Started Documentation

**DESCRIPTION**: Reference official BAS help and related tutorials for additional guidance on BAS usage and Fiori tooling.

**LANGUAGE**: text

**CODE**:
```text
Set Up SAP Business Application Studio - Getting Started:
https://help.sap.com/docs/bas/sap-business-application-studio/getting-started?version=Cloud

Related tutorial:
https://developers.sap.com/tutorials/appstudio-onboarding.html
```

fiori-tools
SAP
BAS
Business Application Studio
devspace
UI5
CDS
extensions


**TITLE**: Telemetry — Enable or Disable SAP Fiori tools Analytics

**INTRODUCTION**: Toggle the collection of non-personally-identifiable analytics for SAP Fiori tools. Use this to enable or disable telemetry that helps improve the product without collecting personal data.

**TAGS**: fiori-tools, telemetry, analytics, vscode, sap, fiori

**STEP**: 1 — Open Command Palette

**DESCRIPTION**: Open the editor command palette using the keyboard shortcut, then run the Fiori command to change telemetry settings.

**LANGUAGE**: Command

**CODE**:
```Command
// Open Command Palette
// macOS:
CMD + SHIFT + P
// Windows/Linux:
CTRL + SHIFT + P
```

**STEP**: 2 — Execute telemetry command

**DESCRIPTION**: Type and run the exact Fiori command to change telemetry. Select the prompt option to enable or disable telemetry when shown.

**LANGUAGE**: Command

**CODE**:
```Command
Fiori: Change Telemetry Settings
```

fiori-tools telemetry analytics vscode sap fiori


**TITLE**: Visual Studio Code — Setup and SAP Fiori Tools Prerequisites for VS Code

**INTRODUCTION**: Action-oriented guide for preparing a development environment in Visual Studio Code (VS Code) for SAP Fiori tools and SAP CAP/UI5 projects. Includes system requirements, Node.js and MTA installation, Cloud Foundry CLI reference, npm scope checks, VS Code setup, extension installation commands, optional language support extensions, and supported authentication/OData service endpoints.

**TAGS**: VS Code, SAP Fiori, Node.js, MTA, Cloud Foundry, npm, extensions, CDS, UI5, authentication, OData

STEP: 1 — Verify Node.js and npm (minimums & checks)

DESCRIPTION: Confirm a Long Term Supported (LTS) Node.js version and compatible npm are installed. Use the terminal to check versions. If Node or npm are missing or outdated, install an LTS release. These commands help verify installed versions.

LANGUAGE: Bash

CODE:
```bash
# Check installed Node.js and npm versions
node -v
npm -v
```

STEP: 2 — Install Node.js (Windows: standalone binary method when installer not available)

DESCRIPTION: Recommended: use the official installer on Windows. If you cannot use the installer (no admin rights), download the standalone binary ZIP, extract to your user Programs folder, and set NODE_PATH and PATH for your account. Steps include exact environment variable names and target paths to use.

LANGUAGE: Text

CODE:
```text
Windows standalone binary installation steps:
1. Download the standalone binary from https://nodejs.org/en/download/.
2. Extract contents to: C:\Users\<your_user>\AppData\Local\Programs\<your_node_folder>
3. Open "Edit environment variables for your user account".
4. Add a new USER variable:
   Variable name: NODE_PATH
   Variable value: C:\Users\<your_user>\AppData\Local\Programs\<your_node_folder>
5. Add %NODE_PATH% to the Path variable in System variables (or add full path to your user Path).
6. Restart your computer to apply environment variable changes.

Note: If you can use installers, prefer the Windows installer from https://nodejs.org/en/download/.
For macOS, prefer Homebrew or nvm (Node Version Manager): https://brew.sh/ or https://github.com/nvm-sh/nvm
```

STEP: 3 — Install MTA (required by SAP Fiori application generator)

DESCRIPTION: Install the MTA Node.js package globally (version 1.0+ required) so SAP Fiori application generator can build/deploy multi-target applications.

LANGUAGE: Bash

CODE:
```bash
npm install -g mta
```

STEP: 4 — Install Cloud Foundry CLI (CF CLI) for SAP BTP Cloud Foundry

DESCRIPTION: To access Cloud Foundry services on SAP Business Technology Platform, install the latest Cloud Foundry CLI following official CF CLI installation instructions.

LANGUAGE: Text

CODE:
```text
CF CLI installation reference:
https://docs.cloudfoundry.org/cf-cli/install-go-cli.html

Follow the platform-specific installer or package manager instructions on the page above.
```

STEP: 5 — Verify npm scope for @sap registry and fix .npmrc if needed

DESCRIPTION: Ensure your npm configuration does not force the @sap scope registry incorrectly. Run the get command and verify the returned value. If the registry is set to '@sap' incorrectly, remove the entry from the ~/.npmrc file.

LANGUAGE: Bash

CODE:
```bash
# Check the @sap registry setting in npm config
npm config get @sap:registry

# Expected outputs:
# - https://registry.npmjs.org
# - undefined

# If the result is '@sap' (incorrect), open and edit the .npmrc in your home directory and remove the '@sap' registry entry:
#   ~/.npmrc
```

STEP: 6 — Download and set up Visual Studio Code

DESCRIPTION: Download VS Code and choose user or system installer for Windows (choose user install if no admin rights). Learn VS Code basics via official docs and videos. Open VS Code; if blocked by IT, request exception for VS Code and node.

LANGUAGE: Text

CODE:
```text
Download:
https://code.visualstudio.com/download

If you lack admin rights on Windows, select the User Installer.

Learning resources:
- Basic layout: https://code.visualstudio.com/docs/getstarted/userinterface#_basic-layout
- Introductory videos: https://code.visualstudio.com/docs/getstarted/introvideos

Note: VS Code and node may be blocked in restricted environments — request IT exception if necessary.
```

STEP: 7 — Install SAP Fiori tools extensions (Extension Pack recommended)

DESCRIPTION: Install the SAP Fiori tools - Extension Pack to add core extensions used by the SAP Fiori tooling. You can install via the VS Code UI or CLI. The pack installs Application Wizard, Application Modeler, Guided Development, Service Modeler, XML Annotation LSP, and XML Toolkit. SAP CDS Language Support (CDS Editor) is optional for CAP projects.

LANGUAGE: Bash

CODE:
```bash
# Install SAP Fiori tools - Extension Pack via VS Code CLI
code --install-extension SAPSE.sap-ux-fiori-tools-extension-pack

# Marketplace (GUI) link:
https://marketplace.visualstudio.com/items?itemName=SAPSE.sap-ux-fiori-tools-extension-pack

# Optional: SAP CDS Language Support (CDS Editor) marketplace ID and link:
# Install via CLI:
code --install-extension SAPSE.vscode-cds
# Marketplace link:
https://marketplace.visualstudio.com/items?itemName=SAPSE.vscode-cds#overview

# Extensions included by the extension pack (installed automatically):
# - Application Wizard
# - SAP Fiori Tools – Application Modeler
# - SAP Fiori tools - Guided Development
# - SAP Fiori tools - Service Modeler
# - SAP Fiori tools - XML Annotation Language Server
# - XML Toolkit
```

STEP: 8 — Install SAP CDS Language Support (CAP projects)

DESCRIPTION: For CAP projects using CDS annotations, install SAP CDS Language Support from the Visual Studio Marketplace and enable it in VS Code.

LANGUAGE: Text

CODE:
```text
Marketplace page:
https://marketplace.visualstudio.com/items?itemName=SAPSE.vscode-cds#overview

Steps:
1. Open the marketplace link in a browser.
2. Click "Install" to open VS Code.
3. In VS Code, click "Install" to enable the extension.

Additional CAP docs:
https://cap.cloud.sap/docs/get-started/tools/#add-cds-editor
https://cap.cloud.sap/docs/get-started/tools/#cds-editor
```

STEP: 9 — Install UI5 Language Assistant (optional)

DESCRIPTION: Install UI5 Language Assistant to enable control ID checks when flexEnabled=true in manifest.json and to improve suggestions/filters for UI5 development.

LANGUAGE: Bash

CODE:
```bash
# Install via VS Code CLI
code --install-extension SAPOSS.vscode-ui5-language-assistant

# Marketplace link:
https://marketplace.visualstudio.com/items?itemName=SAPOSS.vscode-ui5-language-assistant&ssr=false#overview

# Steps:
# 1. Open marketplace link.
# 2. Click "Install" to open VS Code.
# 3. In VS Code, click "Install" to finalize.
```

STEP: 10 — Supported authentication types and recommended approach

DESCRIPTION: Use this reference for which authentication types SAP Fiori tools support in VS Code across environments. Prefer SAP Business Application Studio for broader authentication support. If applicable, disable SAML for the listed OData services.

LANGUAGE: Text

CODE:
```text
Supported authentication types matrix (summary):

Authentication Type                  | SAP On Premise | SAP BTP, ABAP Env | SAP BTP, Cloud Foundry | SAP S/4HANA Cloud

VS Code
SAP Fiori
Node.js
MTA
Cloud Foundry
npm
extensions
CDS
UI5
authentication
OData


-------------------------------
OAuth 2.0 (Client Credentials)       | No             | No (uses Reentrance Ticket)   | No                    | No
Basic Authentication                 | Yes            | No            | Yes                     | No
Reentrance Ticket                    | No             | Yes           | Yes                     | Yes

Notes:
- Existing saved system connections using OAuth 2.0 are still supported for deployment but use reentrance tickets automatically for local development.
- Recommendation: Use SAP Business Application Studio for broader authentication type support.
- Reference note: https://me.sap.com/notes/0002577263
```

STEP: 11 — OData services (disable SAML if required)

DESCRIPTION: If selected OData services require SAML to be disabled for development scenarios, ensure SAML is disabled for these specific service endpoints. Use the listed paths when configuring backend or firewall/IT rules.

LANGUAGE: Text

CODE:
```text
OData service endpoints (paths):

- OData V2 catalog:
  /sap/opu/odata/IWFND/CATALOGSERVICE;v=2

- OData V4 catalog (dev):
  /sap/opu/odata4/iwfnd/config/default/iwfnd/catalog/0001

- OData V4 catalog (prod):
  /sap/opu/odata4/iwfnd/config/default/iwfnd/catalog/0002

- ATO Catalog:
  /sap/bc/adt/ato/settings

- SAPUI5 repository service (for deploy & undeploy):
  /sap/opu/odata/UI5/ABAP_REPOSITORY_SRV
```

btp-fiori-tools.md - Chunk 93


**TITLE**: App-to-App Navigation Preview (Fiori Tools)

**INTRODUCTION**: Enable and preview external App-to-App navigation between two SAP Fiori elements applications located in the same workspace. The command generates the sandbox configuration required to route from a source app to a target app during local preview.

**TAGS**: fiori-tools, fiori, app-to-app, navigation, ui5, preview, vscode

**STEP**: 1 — Run the enable command

**DESCRIPTION**: Open the Command Palette and execute the Fiori Tools command to enable App-to-App Navigation Preview for a source application in the workspace.

**LANGUAGE**: Plaintext

**CODE**:
```plaintext
Open Command Palette: [CMD/CTRL] + [Shift] + [P]
Command: Fiori: Enable App-to-App Navigation Preview
```

**STEP**: 2 — Select the source application

**DESCRIPTION**: From the list presented by the command, select the source application folder (the app where the external navigation originates). The source app must be in the same workspace as the target app(s).

**LANGUAGE**: Plaintext

**CODE**:
```plaintext
Select source application (choose the application folder in workspace that should start the external navigation)
```

**STEP**: 3 — Select the target application(s)

**DESCRIPTION**: From the next list, select one or more target application(s) (the apps to which navigation should lead). You can add multiple target navigations for the same source application.

**LANGUAGE**: Plaintext

**CODE**:
```plaintext
Select target application (choose the application folder in workspace to receive the external navigation)
```

**STEP**: 4 — Confirmation message

**DESCRIPTION**: After selecting source and target app(s), the extension confirms the enablement. Expect the following confirmation message.

**LANGUAGE**: Plaintext

**CODE**:
```plaintext
App-to-App Navigation enabled.
```

**STEP**: 5 — Files generated and updated

**DESCRIPTION**: The command generates or updates configuration files required for local preview:
- Creates a sandbox configuration file in the source application:
  - appconfig/fioriSandboxConfig.json
- Updates the UI5 project descriptor to include the sandbox config:
  - ui5.yaml (in the source application)

Keep these file paths exactly as shown; they are created/modified in the source application folder.

**LANGUAGE**: Plaintext

**CODE**:
```plaintext
Generated/updated files (located in the source application folder):
- appconfig/fioriSandboxConfig.json
- ui5.yaml
```

**STEP**: 6 — Start preview and follow navigation

**DESCRIPTION**: Start the local preview for the source application (using your normal Fiori tools/preview workflow). During runtime, follow the configured external navigation — the preview will route to the selected target application(s) based on the sandbox configuration.

**LANGUAGE**: Plaintext

**CODE**:
```plaintext
Start the preview of the source application and follow the configured external navigation.
```

**STEP**: 7 — Reference for configuring external navigation

**DESCRIPTION**: For details on how external navigation should be configured in the applications (parameters, semantic objects, intents), consult the SAP Fiori elements documentation linked below.

**LANGUAGE**: Plaintext

**CODE**:
```plaintext
More info: Configuring External Navigation
https://ui5.sap.com/sdk/#/topic/1d4a0f94bfee48d1b50ca8084a76beec
```

fiori-tools fiori app-to-app navigation ui5 preview vscode


**TITLE**: Convert a Project to Use Virtual Endpoints (sap-ux converter)

**INTRODUCTION**: Instructions to convert an SAP Fiori project’s preview configuration to use virtual endpoints. The conversion renames local HTML preview files, removes legacy preview JavaScript/TypeScript/test files, and configures virtual endpoints (preview middleware). Use these steps in a development environment (VS Code or Application Info UI) to migrate safely and keep preview setup aligned with current package best-practices.

**TAGS**: fiori-tools, sap-ux, virtual-endpoints, ui5, migration, preview-middleware

**STEP**: Prerequisites — Verify required tools and packages

**DESCRIPTION**: Confirm required tools and package versions are installed. If not installed or outdated, install or upgrade. Preserve these exact package names and minimum versions:
- SAPUI5 CLI version 3.0.0 or higher
- @sap/ux-ui5-tooling version 1.15.4 or higher (if present)
- @sap-ux/ui5-middleware-fe-mockserver OR cds-plugin-ui5 must be installed
- Migrate from sap/ui/core/util/MockServer or @sap/ux-ui5-fe-mockserver-middleware to @sap-ux/ui5-middleware-fe-mockserver
- Migrate from @sap/grunt-sapui5-bestpractice-build to @ui5/cli

**LANGUAGE**: Shell

**CODE**:
```shell
# Check installed versions (examples)
ui5 --version
npm ls @sap/ux-ui5-tooling
npm ls @sap-ux/ui5-middleware-fe-mockserver
npm ls cds-plugin-ui5

# Example install/upgrades (choose one middleware)
npm install --save-dev @ui5/cli
npm install --save-dev @sap-ux/ui5-middleware-fe-mockserver
# or if you prefer:
npm install --save-dev cds-plugin-ui5

# If you have legacy middleware, remove/migrate
# (example uninstall)
npm uninstall --save-dev @sap/ux-ui5-fe-mockserver-middleware
npm uninstall --save-dev @sap/grunt-sapui5-bestpractice-build
```

**STEP**: Context — What the sap-ux converter does

**DESCRIPTION**: Summary of converter behavior and where to find more info:
- The sap-ux converter (convert preview-config) renames local HTML preview files, deletes JavaScript/TypeScript/test files used by the legacy preview, and configures virtual endpoints (preview middleware).
- Refer to the sap-ux convert preview-config documentation for deeper details and migration guidance.

**LANGUAGE**: Text

**CODE**:
```text
Converter behavior:
- Rename local HTML preview files (e.g., flpSandbox.html)
- Delete legacy preview .js/.ts and test files
- Configure virtual endpoints via preview middleware

Reference: sap-ux convert preview-config (open-ux-tools create README)
```

**STEP**: Launch the converter from VS Code (Command Palette)

**DESCRIPTION**: Run the sap-ux converter using VS Code Command Palette. Follow prompts exactly to simulate or apply conversion and choose whether to convert test runners.

**LANGUAGE**: Text

**CODE**:
```text
1. Open the Command Palette: CMD/CTRL + Shift + P
2. Execute command: "Fiori: Convert Preview Config"
3. Respond to prompts:
   - Press Y to SIMULATE the conversion (dry-run)
   - Press N to APPLY the conversion to the project
   - Next prompt: Press Y to convert test runners, or N to decline
4. Review terminal output for details of changes
```

**STEP**: Launch the converter from Application Info (UI)

**DESCRIPTION**: Alternative to Command Palette: run the converter from your app's Application Info UI.

**LANGUAGE**: Text

**CODE**:
```text
1. Open Application Info for the project (UI within your dev environment)
2. Click "Convert Preview Config"
3. Respond to prompts as with the Command Palette:
   - Y = simulate, N = convert
   - Then Y/N to convert test runners
4. Review terminal/output panel for conversion summary
```

**STEP**: Post-conversion actions and results

**DESCRIPTION**: After conversion, verify changes and migrate any custom local HTML content into middleware initialization. If you edited local HTML files (for example flpSandbox.html), move those edits into a custom init script for the preview middleware. If you did not modify HTML files, they can be deleted.

**LANGUAGE**: Text

**CODE**:
```text
Post-conversion checklist:
- Inspect terminal output for the conversion summary and file changes
- If you modified local HTML preview files (e.g., flpSandbox.html):
    - Move customized content into a custom init script for the preview middleware
    - Reference: preview-middleware - Migration (open-ux-tools create README)
- If local HTML files were NOT modified, they may be deleted safely
- Run your app with ui5 serve / your dev server and verify preview via virtual endpoints
```

fiori-tools sap-ux virtual-endpoints ui5 migration preview-middleware


**TITLE**: Create a New Run Configuration in SAP Business Application Studio

**INTRODUCTION**: Create and manage run configurations in SAP Business Application Studio (BAS) to define how a Fiori/UI5 project is started and previewed. Use run configurations to set the startup HTML endpoint, enable mock servers, remote access, support assistant, URL parameters, and bind specific SAPUI5 versions or destinations. Note version requirements before creating configurations.

**TAGS**: fiori-tools, sap-business-application-studio, ui5, run-configuration, sapui5, mock-server, remote-access

**STEP**: Prerequisites / Required Package Versions

**DESCRIPTION**: Verify that your project uses compatible @sap/ux-ui5-tooling versions before using the Run Configuration Wizard and remote access features. The Run Configuration Wizard requires @sap/ux-ui5-tooling >= 1.5.3. Enabling remote access requires @sap/ux-ui5-tooling >= 1.19.1.

**LANGUAGE**: plaintext

**CODE**:
```plaintext
Required versions:
- Run Configuration Wizard: @sap/ux-ui5-tooling >= 1.5.3
- Enable Remote Access: @sap/ux-ui5-tooling >= 1.19.1
```

**STEP**: (Optional) Include project styling / icons

**DESCRIPTION**: The documentation includes a reference to SAP icon CSS. Keep the reference in your project or documentation if you use SAP icons.

**LANGUAGE**: HTML

**CODE**:
```html
<link rel="stylesheet" type="text/css" href="../css/sap-icons.css"/>
```

**STEP**: Open the Run Configurations pane

**DESCRIPTION**: In BAS, open the Run Configurations pane to view or create run configurations.

- From the left-side toolbar, click "Run Configurations".
- The run configuration pane opens (left side).

**LANGUAGE**: plaintext

**CODE**:
```plaintext
UI actions:
1. Click the left-side toolbar icon: "Run Configurations"
2. The Run Configuration pane opens
```

**STEP**: Create a new run configuration

**DESCRIPTION**: Create a new run configuration using the Add icon; provide mandatory fields and optional runtime features. Save to add the configuration to the Run and Debug pane and the Run Configurations table.

- Click the Add (+) icon in the left pane to create a new configuration.
- In the dialog, select the project for which you want the configuration.
- Fill in the fields (see next step for field details).
- Click Save.

**LANGUAGE**: plaintext

**CODE**:
```plaintext
UI actions:
1. In Run Configuration pane -> Click Add (+)
2. Select project in "What would you like to run?"
3. Provide config values -> Click Save
Result:
- New config appears in Run and Debug pane and in Run Configurations table
```

**STEP**: Run configuration fields and options (required and optional)

**DESCRIPTION**: Provide the following information when creating/editing a run configuration. Fields marked mandatory must be set.

- Name (mandatory): Change the default name as needed.
- Endpoint (mandatory): Select the HTML file used when the application starts (e.g., index.html).
- Mock Data: Run the application with a mock server that simulates OData requests.
- Support Assistant: Enable best-practice checks for SAPUI5 applications.
- Enable Remote Access: Allow access from other devices (development use only). When enabled, terminal output includes a URL or QR code for connecting. Requires @sap/ux-ui5-tooling >= 1.19.1.
- URL Components: Define additional URL query parameters and a hash fragment for Fiori launchpad intent-based navigation.
- Advanced Settings:
  - Choose which SAPUI5 version to use at runtime.
  - Change destinations used by the application.
  - Option: Use local SAPUI5 sources — downloads the SAPUI5 libraries for the selected version and uses them for preview. Note: Selecting "Use local SAPUI5 sources" automatically selects "Run with mock data".

**LANGUAGE**: plaintext

**CODE**:
```plaintext
Run configuration properties:
- Name (mandatory)
- Endpoint (mandatory) -> select HTML startup file
- Mock Data -> enable mock server for OData
- Support Assistant -> enable best-practice checks
- Enable Remote Access -> allows external device connections (dev only)
  * Requires @sap/ux-ui5-tooling >= 1.19.1
- URL Components -> add URL params and hash fragment
- Advanced Settings:
  * SAPUI5 runtime version selection
  * Destination bindings (change destinations)
  * Use local SAPUI5 sources -> downloads and uses local SAPUI5 libraries
    -> automatically enables "Run with mock data"
```

**STEP**: Run the project using a run configuration

**DESCRIPTION**: Start the application using the Actions column or the Run and Debug pane.

- In the Run Configurations table: click the [>] icon under Actions to launch the configuration.
- Or in the Run and Debug pane: select the run configuration from the dropdown and click Start Debugging (debug icon).

**LANGUAGE**: plaintext

**CODE**:
```plaintext
Run actions:
- Run Configurations table -> Click [>] under Actions
- OR Run and Debug pane -> Select config -> Click Start Debugging (debug icon)
```

**STEP**: Manage run configurations (quick actions)

**DESCRIPTION**: Use quick actions in the Run Configuration pane or context menu to modify or inspect saved configurations.

Available quick actions:
- Bind/Unbind SAPUI5 Version: Change the SAPUI5 version used by the configuration.
- Bind/Unbind Data Source: Change the destination used by the configuration.
- Rename: Right-click a run configuration -> Rename.
- Show File: Right-click a run configuration -> Show File. Opens the JSON file containing the configuration properties with the configuration name highlighted.
- Delete: Right-click a run configuration -> Delete.

**LANGUAGE**: plaintext

**CODE**:
```plaintext
Quick actions:
- Bind/Unbind SAPUI5 Version
- Bind/Unbind Data Source
- Rename -> Right-click -> Rename
- Show File -> Right-click -> Show File -> opens JSON file with properties
- Delete -> Right-click -> Delete
```

fiori-tools sap-business-application-studio ui5 run-configuration sapui5 mock-server remote-access


**TITLE**: Create a New Run Configuration in Visual Studio Code (Fiori Tools)

**INTRODUCTION**: Create additional run configurations in VS Code to control how a SAP Fiori project is started (endpoint HTML, mock data, support assistant, remote access, URL parameters, SAPUI5 version and local sources). The Run Configuration Wizard requires @sap/ux-ui5-tooling >= 1.5.3. Remote access requires @sap/ux-ui5-tooling >= 1.19.1. Preserve SAP icon stylesheet reference if used in extensions or custom docs.

**TAGS**: fiori-tools, vscode, ui5, run-configuration, ux-ui5-tooling, mock-server, support-assistant, remote-access, sapui5

STEP: 1 — Open the Run Configuration Wizard

DESCRIPTION: Open the Fiori Run Configuration wizard from the VS Code Command Palette to start creating or editing run configurations for a selected project.

LANGUAGE: text

CODE:
```text
Keyboard shortcut (macOS/Windows): [CMD/CTRL] + [Shift] + [P]
Command to execute: Fiori: Open Run Configurations
```

STEP: 2 — Select the Project

DESCRIPTION: Choose the workspace folder/project that will receive the new run configuration. Press Enter to confirm.

LANGUAGE: text

CODE:
```text
Action: Select the project in the picker and press [Enter]
```

STEP: 3 — Create a New Configuration

DESCRIPTION: The wizard displays existing run configurations for the selected project. Click Create to begin a new configuration.

LANGUAGE: text

CODE:
```text
UI: Click "Create" in the Run Configurations list
```

STEP: 4 — Provide Configuration Fields (required and optional)

DESCRIPTION: Fill out the fields in the wizard. The fields below are mandatory or optional and control runtime behavior. Preserve the combinations and automatic behavior:
- Name (mandatory): change the default name if desired.
- Endpoint (mandatory): select the HTML file used to start the application.
- Mock Data: enable a mock OData server for preview (runs the application with mocked OData requests).
- Support Assistant: enable static checks against SAPUI5 best-practice rules.
- Enable Remote Access: allow connections from other devices on the network (development only). Warning: server accepts connections from all hosts — do not use in production. Requires @sap/ux-ui5-tooling >= 1.19.1. When enabled, the terminal shows a URL and a QR code for connecting.
- URL Components: add query parameters and a hash fragment for SAP Fiori launchpad intent navigation.
- Advanced Setting: specify the SAPUI5 runtime version and change destinations used by the application.
  - Use local SAPUI5 sources: download SAPUI5 libraries for a specific version and use them for preview. When selected for preview, "Run with mock data" is automatically enabled.

LANGUAGE: text

CODE:
```text
Configuration fields:
- Name (mandatory)
- Endpoint (mandatory) -> select index.html or other start page
- Mock Data (optional) -> enable mock server for OData
- Support Assistant (optional) -> run best-practice checks
- Enable Remote Access (optional, requires @sap/ux-ui5-tooling >= 1.19.1)
    * Warning: accepts connections from all hosts — development only
    * Terminal shows connection URL and QR code when enabled
- URL Components (optional) -> additional URL parameters + hash fragment
- Advanced Setting (optional)
    * Set SAPUI5 runtime version
    * Change destinations
    * Use local SAPUI5 sources -> downloads libraries and forces Run with mock data
```

STEP: 5 — Save and Locate the New Configuration

DESCRIPTION: Save the configuration. The new entry appears in both the Run and Debug pane and the Run Configurations table.

LANGUAGE: text

CODE:
```text
Action: Click "Save"
Result: New launch configuration appears in:
- Run and Debug pane (left)
- Run Configurations table
```

STEP: 6 — Start the Application using the Run Configuration

DESCRIPTION: Start the configured launch from the Run Configurations table or the Run and Debug pane using the provided run or start debugging controls.

LANGUAGE: text

CODE:
```text
Options to start:
- In Run Configurations table: click the ">" icon under the Actions column
- In Run and Debug pane: select the desired Run Configuration from dropdown and click the Start Debugging icon (Start Debugging icon shown as SAP icon in UI)
```

STEP: Reference — Preserve UI Icon Stylesheet and Source Comment

DESCRIPTION: If your documentation pages or extension UI reference SAP icons, keep the stylesheet link and original comment for consistency.

LANGUAGE: html

CODE:
```html
<!-- loio3b1f37edf22c4d3dbc14472d6dcb6e2a -->
<link rel="stylesheet" type="text/css" href="../css/sap-icons.css"/>
```

fiori-tools vscode ui5 run-configuration ux-ui5-tooling mock-server support-assistant remote-access sapui5


**TITLE**: Developer Variant Creation (SAP Fiori tools)

**INTRODUCTION**: Create and persist developer variants (views) for SAP Fiori applications using the SAP Fiori tools preview. Variants are stored as SAPUI5 flexibility change files in webapp/changes and packaged with the app. Supported for ABAP service-based projects with SAPUI5 >= 1.90 (OData V2) and >= 1.84 (OData V4). Uses the @sap/ux-ui5-tooling preview feature.

**TAGS**: fiori-tools, SAPUI5, variants, ui5, flexibility, ux-ui5-tooling, i18n, preview

STEP: Prerequisites
DESCRIPTION: Verify project type and installed tooling, and note supported SAPUI5 versions.
LANGUAGE: Text
CODE:
```text
- Project type: ABAP service-based projects only
- Required module: @sap/ux-ui5-tooling (preview feature)
- Supported SAPUI5 versions:
  - 1.90 for OData V2 applications
  - 1.84 for OData V4 applications
```

STEP: Start variant creation (Preview)
DESCRIPTION: From the Fiori Tools Preview Application context menu, execute the preview script that opens the application in UI adaptation mode to create developer variants. If the script is present, run it directly.
LANGUAGE: Shell
CODE:
```bash
start-variants-management
```

STEP: Add configuration for variants creation (if script missing)
DESCRIPTION: If the preview script is not available, add the configuration using the VS Code Command Palette.
LANGUAGE: Text
CODE:
```text
Open Command Palette: [CMD/CTRL] + [Shift] + [P]
Execute command: Fiori: Add Configuration for Variants Creation
```

STEP: Use the UI adaptation mode
DESCRIPTION: After starting the script or adding the configuration, a new browser tab opens showing the preview in UI adaptation mode. Create or adapt views/variants using the on-screen adaptation tools. When finished, click Save & Exit to persist changes.
LANGUAGE: Text
CODE:
```text
Action: Save & Exit (to persist created/modified variants)
```

STEP: Location and format of saved variants
DESCRIPTION: Each new variant generates one or more SAPUI5 change files. Locate the generated change files in the project and prepare any translatable text replacements.
LANGUAGE: Path
CODE:
```text
webapp/changes
```

STEP: Make UI texts translatable
DESCRIPTION: Open each generated change file and replace static UI text values with translatable placeholders. Add or update the keys in your i18n resource files accordingly.
LANGUAGE: Text
CODE:
```text
Replace static text with i18n placeholder syntax, for example:
{i18n>textKey}
```

STEP: Notes, limitations, and references
DESCRIPTION: Keep these technical notes and links for deeper reference.
LANGUAGE: Text
CODE:
```text
- Visibility and role assignment are NOT supported for developer variants.
- Technical details and preview implementation: https://www.npmjs.com/package/@sap/ux-ui5-tooling#4-preview
- User guidance on creating/adapting views: https://help.sap.com/viewer/DRAFT/6583b46f6c164aad818a3891bc91d8d8/dev_internal/en-US/91ae3492323b42a79ca66fbfaf5af3f9.html
```


**TITLE**: Generating Mock Data with AI

**INTRODUCTION**: Generate meaningful, contextually relevant mock data for Fiori apps by using AI that leverages entity property names. Use this when you need realistic test data quickly for UI prototyping or automated tests. Requires an EDMX-based service that provides a metadata.xml file.

**TAGS**: fiori-tools, SAP Build Code, mock-data, EDMX, metadata.xml, AI

**STEP**: Prerequisites — SAP Build Code subscription and EDMX metadata
**DESCRIPTION**: Confirm you have a valid SAP Build Code subscription (or the SAP Build Code Test Drive) and that your EDMX project includes the service metadata file named metadata.xml. The metadata.xml must be accessible in your project so the AI can inspect entity property names to generate context-aware mock data.
**LANGUAGE**: Text/HTML
**CODE**:
```html
<!-- Include SAP icons CSS if your editor UI requires it -->
<link rel="stylesheet" type="text/css" href="../css/sap-icons.css"/>
```
**CODE**:
```text
# Required file in your EDMX project:
metadata.xml
```
**STEP**: Start mock data generation in the Page Editor
**DESCRIPTION**: Open the Page Editor for the UI view you want to populate. Use the "Generate Mock Data with AI" control (icon shown below) to trigger AI generation. The tool analyzes entity property names from metadata.xml and produces mock records automatically.
**LANGUAGE**: HTML
**CODE**:
```html
<!-- Click this icon in the Page Editor to open the Generate Mock Data with AI dialog -->
<span class="SAP-icons-TNT-V3"></span>  <!-- Generate Mock Data with AI -->
```
**STEP**: Execute generation
**DESCRIPTION**: In the Generate Mock Data with AI dialog, click the Generate button. The AI will create three mock records for the selected entity. Note: depending on your model size and network, generation may take several seconds.
**LANGUAGE**: Text
**CODE**:
```text
Action:
1. In Page Editor -> Click the Generate Mock Data with AI icon.
2. In the dialog -> Click "Generate".
Result:
- Three mock records are generated and inserted into the local mock dataset.
- Generation time varies with service size; please wait until completion.
```
**STEP**: Troubleshooting and verification
**DESCRIPTION**: Verify generated records in your mock data store/UI. If generation fails, ensure:
- metadata.xml is present and readable by the project tooling
- You have an active SAP Build Code subscription or are using the Test Drive
- Network access to SAP Build Code services is available
**LANGUAGE**: Text
**CODE**:
```text
If generation fails:
- Check project logs for errors referencing metadata.xml
- Confirm the EDMX service metadata includes entity property names
- Retry after ensuring subscription/authentication and network connectivity
```

Generating Mock Data with AI

fiori-tools
SAP Build Code
mock-data
EDMX
metadata.xml
AI


**TITLE**: Installing Mock Server for SAP Fiori Tools Projects

**INTRODUCTION**: Steps and commands to install, remove, update, and verify the Mock Server configuration for SAP Fiori Tools projects. Use these instructions in your project root (terminal) or via the Fiori extension UI. New projects created with the SAP Fiori application generator include this configuration automatically.

**TAGS**: fiori-tools, mockserver, sap-ux, ui5, devtools

STEP: 1 — Confirm generator auto-adds mock server for new projects

DESCRIPTION: The SAP Fiori application generator adds mock server configuration automatically for new projects. If you need to confirm the configuration was added, check package.json and the presence of ui5-mock.yaml in the project root.

LANGUAGE: Bash

CODE:
```bash
# Check package.json for the start-mock script
grep -n '"start-mock"' package.json || echo "start-mock not found in package.json"

# Check package.json for @sap-ux/ui5-middleware-fe-mockserver dependency
grep -n '@sap-ux/ui5-middleware-fe-mockserver' package.json || echo "@sap-ux/ui5-middleware-fe-mockserver not found in package.json"

# Check that ui5-mock.yaml exists in the project root
test -f ui5-mock.yaml && echo "ui5-mock.yaml found" || echo "ui5-mock.yaml missing"
```

STEP: 2 — Install mock server via CLI (project root terminal)

DESCRIPTION: Run the create utility from @sap-ux to add the mock server configuration to an existing project. Execute this in the project root terminal. For guidance on opening the terminal, see Use Mock Data documentation.

LANGUAGE: Bash

CODE:
```bash
npx @sap-ux/create add mockserver-config
```

STEP: 3 — Install or update mock server via Fiori extension UI

DESCRIPTION: Use the Fiori extension in VS Code to add or update mock server configuration from the Application Info UI.

LANGUAGE: Text

CODE:
```
Command: Fiori: Open Application Info
Action: Under "What you can do", click "Add Mock server Config"
```

STEP: 4 — Remove mock server configuration

DESCRIPTION: Remove the mock server configuration if no longer needed. Run this in the project root terminal.

LANGUAGE: Bash

CODE:
```bash
npx @sap-ux/create remove mockserver-config
```

STEP: 5 — List available @sap-ux/create commands (help)

DESCRIPTION: Show available commands from the create utility; helpful to learn other options or confirm command syntax.

LANGUAGE: Bash

CODE:
```bash
npx @sap-ux/create help
```

STEP: 6 — What the installation adds and how to verify

DESCRIPTION: After installing the mock server, verify these items are present in your project:
- package.json includes a start-mock script.
- package.json includes @sap-ux/ui5-middleware-fe-mockserver as a devDependency and UI5 dependency.
- ui5-mock.yaml file exists in the project root.
Use the commands below to verify programmatically.

LANGUAGE: Bash

CODE:
```bash
# Verify start-mock script exists
jq -r '.scripts["start-mock"] // empty' package.json && echo "start-mock script present" || echo "start-mock script missing"

# Verify dependency presence (devDependency or dependencies)
jq -r '.devDependencies["@sap-ux/ui5-middleware-fe-mockserver"] // .dependencies["@sap-ux/ui5-middleware-fe-mockserver"] // empty' package.json \
  && echo "@sap-ux/ui5-middleware-fe-mockserver present in package.json" \
  || echo "@sap-ux/ui5-middleware-fe-mockserver missing in package.json"

# Verify ui5-mock.yaml file exists
[ -f ui5-mock.yaml ] && echo "ui5-mock.yaml present" || echo "ui5-mock.yaml missing"
```

Additional notes:
- For new projects created with the SAP Fiori application generator, mock server configuration is automatically added. See Capabilities Overview: ../Getting-Started-with-SAP-Fiori-Tools/capabilities-overview-f540ae1.md
- To learn more about opening the terminal or using mock data, see: Use Mock Data (use-mock-data-bda83a4.md)

fiori-tools mockserver sap-ux ui5 devtools


**TITLE**: Preview an Application on External SAP Fiori Launchpad

**INTRODUCTION**: This guide explains how to preview a UI5/Fiori application on an external SAP Fiori Launchpad (FLP) without redeploying the app. Use this to test the app running on an existing SAP Fiori launchpad instance. Prerequisite: the application must be deployed at least once and configured on the target launchpad. Note: the SAP Launchpad service on SAP BTP does not support this feature.

**TAGS**: fiori-tools, sap, sap-fiori, ui5, flp, launchpad, preview, bsp

**STEP**: 1 — Open the Command Palette

**DESCRIPTION**: Open the editor's command palette to run Fiori Tools commands.

**LANGUAGE**: UI/Action

**CODE**:
```text
Open Command Palette: [CMD/CTRL] + [Shift] + [P]
```

**STEP**: 2 — Run the Add FLP Embedded Configuration command

**DESCRIPTION**: Start the flow that collects the FLP embedding configuration (BSP, YAML for backend config, and FLP relative link).

**LANGUAGE**: Plain Text

**CODE**:
```text
Command: Fiori: Add FLP Embedded Configuration
```

**STEP**: 3 — Enter the BSP name (lowercase required)

**DESCRIPTION**: Provide the BSP (Business Server Page) name for the deployed application. The BSP must be entered in lowercase.

**LANGUAGE**: Plain Text

**CODE**:
```text
Enter the BSP of the deployed application (must be lowercase)
Example placeholder: myapp_bsp
```

**STEP**: 4 — Provide the backend configuration YAML (usually ui5.yaml)

**DESCRIPTION**: Point to the YAML file that contains backend configuration for the app. Usually this is the project's ui5.yaml. Enter the relative path to that YAML from the project root.

**LANGUAGE**: Plain Text

**CODE**:
```text
Enter YAML file containing backend configuration (usually ui5.yaml)
Example: ./ui5.yaml
```

**STEP**: 5 — Enter the relative link to the SAP Fiori launchpad

**DESCRIPTION**: Provide the relative URL path to the external launchpad shell you will preview on. This should be relative to the launchpad host.

**LANGUAGE**: Plain Text

**CODE**:
```text
Enter relative link to SAP Fiori launchpad
Example: sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html
```

**STEP**: 6 — Build the application

**DESCRIPTION**: Build the app before starting the embedded preview. The preview uses the built artifacts.

**LANGUAGE**: Shell

**CODE**:
```bash
npm run build
```

**STEP**: 7 — Start the preview on the existing launchpad

**DESCRIPTION**: Start the embedded preview on the external launchpad. Right-click the project folder (or any subfolder), select Preview Application, then choose start-embedded.

**LANGUAGE**: UI/Action

**CODE**:
```text
Right-click project folder (or subfolder) -> Preview Application -> start-embedded
```

**STEP**: 8 — Notes on loading, caching, and refresh behavior

**DESCRIPTION**: Operational details to manage expectations and workflow:

- Initial load on the external launchpad is slower than local previews; subsequent loads are faster due to UI5 resource caching.
- Changes in source files are not reflected immediately. Rebuild the app to see changes:
  - Run npm run build — once the build completes, the application running on the external launchpad will be automatically refreshed.
- Requirement reminder: the application must be deployed and configured on the target launchpad to be visible and runnable via this preview.

**LANGUAGE**: Plain Text

**CODE**:
```text
Notes:
- Initial load is slower due to external FLP and caching.
- To apply code changes: run `npm run build`. After build completion the external FLP preview auto-refreshes.
- The app must be deployed and configured on the target FLP before previewing.
- SAP Launchpad service on SAP BTP does NOT support this feature.
```

fiori-tools sap sap-fiori ui5 flp launchpad preview bsp


**TITLE**: Preview an Application with the SAP Horizon Theme

**INTRODUCTION**: Ensure your SAPUI5 application uses a SAPUI5 version that includes the SAP Horizon theme, then enable or preview the Horizon theme. This document gives actionable steps to verify and set the SAPUI5 version (ui5.yaml) and guidance for new projects and custom controls.

**TAGS**: SAPUI5, SAP Fiori, Horizon theme, ui5.yaml, theme, preview, generator

STEP: 1 — Verify SAPUI5 version compatibility

DESCRIPTION: Confirm your application uses an SAPUI5 version that includes the SAP Horizon theme. Horizon is available starting from SAPUI5 versions 1.93.3 and 1.96.0 (and higher). If your project does not specify a version in ui5.yaml, the latest SAPUI5 version is used by default (which is compatible).

LANGUAGE: YAML

CODE:
```yaml
# Example ui5.yaml specifying a compatible SAPUI5 version
specVersion: "2.2"
metadata:
  name: my.app
type: application

framework:
  name: SAPUI5
  version: "1.96.0"    # ensure this is 1.93.3, 1.96.0 or higher
  libraries:
    - name: sap.m
```

STEP: 2 — Update SAPUI5 version for existing applications

DESCRIPTION: For an existing SAP Fiori application, edit the project's ui5.yaml file to set the framework.version to a compatible SAPUI5 release (see Step 1). Save and rebuild/serve the app to use the updated SAPUI5 runtime.

LANGUAGE: YAML

CODE:
```yaml
# Edit ui5.yaml: change the version value to a Horizon-compatible SAPUI5 release
framework:
  name: SAPUI5
  version: "1.96.0"
```

STEP: 3 — Choose SAPUI5 version when creating a new project

DESCRIPTION: When generating a new SAP Fiori application with the SAP Fiori application generator, select a minimum SAPUI5 version that supports the Horizon theme on the Project Attributes step of the generator UI. This ensures the generated project already references a Horizon-compatible SAPUI5 version.

LANGUAGE: text

CODE:
```text
Action: In the SAP Fiori application generator (project attributes), set the SAPUI5 version to >= 1.93.3 (or >= 1.96.0) before generating the project.
```

STEP: 4 — Validate custom controls and design consistency

DESCRIPTION: Applications built with SAP Fiori elements and standard SAPUI5 controls will generally render correctly with the Horizon theme without technical changes. If your app uses custom controls, verify visuals and behavior under the Horizon theme. Inspect style/layout regressions and adjust custom CSS or control rendering as needed.

LANGUAGE: text

CODE:
```text
Action: Manually test views and custom controls using the Horizon theme. Adjust CSS/custom control rendering if design inconsistencies appear.
Reference: https://blogs.sap.com/2021/11/17/saps-ui-technologies-supporting-the-new-Horizon-visual-theme-of-SAP-Fiori/
```

STEP: 5 — Start previewing with the Horizon theme

DESCRIPTION: Once your project uses a Horizon-compatible SAPUI5 version, preview the application normally (e.g., ui5 serve, Fiori tools preview). The Horizon theme will be available in the runtime. For detailed usage and theme variants, consult the linked SAP blog.

LANGUAGE: text

CODE:
```text
Action: Serve or run the app (for example, using UI5 Tooling or Fiori tools preview). The Horizon visual theme is included in compatible SAPUI5 releases.
Tip: If you need to explicitly apply or test a theme variant, use runtime options or URL parameters supported by your environment (see SAP documentation/blog).
Reference: https://blogs.sap.com/2021/11/17/saps-ui-technologies-supporting-the-new-Horizon-visual-theme-of-SAP-Fiori/
```

SAPUI5
SAP Fiori
Horizon theme
ui5.yaml
theme
preview
generator


**TITLE**: Previewing a Fiori Application (fiori-tools)

**INTRODUCTION**: Quick reference for starting and troubleshooting application previews created with fiori-tools. Covers terminal commands, Run Control (VS Code / SAP Business Application Studio), context-menu preview options, and the HSTS/localhost HTTPS issue.

**TAGS**: fiori-tools, preview, npm, vs-code, sap-business-application-studio, mock-data, launchpad, HSTS, localhost

**STEP**: 1 — Handle localhost / HTTPS redirect (HSTS) issues

**DESCRIPTION**: If an SSL protocol error appears after URL redirection when previewing via localhost, check browser security/HSTS settings. For Chrome, use the HSTS configuration page to inspect and delete any problematic localhost HSTS entries.

**LANGUAGE**: URL

**CODE**:
```text
chrome://net-internals/#hsts
```

**STEP**: 2 — Start a preview from the terminal

**DESCRIPTION**: Run the npm start scripts from your project root to launch the preview server. Use the specific npm script names to select the desired preview mode (live data, mock data, local UI5, or no FLP sandbox). Use `npm start` or `npm run <script>`.

**LANGUAGE**: Shell

**CODE**:
```bash
# Default preview (as configured in package.json)
npm start

# Explicitly run named preview scripts
npm run start
npm run start-local     # mock data + local SAPUI5 resources (offline)
npm run start-noflp     # preview without SAP Fiori launchpad sandbox
npm run start-mock      # preview with mock data
```

**STEP**: 3 — Start a preview with Run Control (VS Code / SAP Business Application Studio)

**DESCRIPTION**: Use VS Code Launch Configurations or SAP Business Application Studio Run Configurations to start previews via the editor UI. Create a launch configuration that invokes the appropriate npm script (example below runs the "start" npm script). Use this to bind debugging, environment variables, or custom runtime args.

**LANGUAGE**: JSON

**CODE**:
```json
// .vscode/launch.json - example to run "npm run start"
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch npm start",
      "type": "pwa-node",
      "request": "launch",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "start"],
      "console": "integratedTerminal"
    }
  ]
}
```

**STEP**: 4 — Start a preview from the context menu (VS Code / SAP Business Application Studio)

**DESCRIPTION**: Right-click the project folder or an application-related subfolder in the Explorer and choose "Preview Application". The context menu exposes the following default preview options — choose one to launch that preview mode.

**LANGUAGE**: Text

**CODE**:
```text
Preview Application options (default):
  start        - starts the application with real service data
  start-local  - starts with mock data and a local copy of SAPUI5 resources (offline)
  start-noflp  - starts without the SAP Fiori launchpad sandbox
  start-mock   - starts the application with mock data

Note: Automatic SAPUI5 download is supported for SAPUI5 versions 1.76 and higher.
```

**STEP**: 5 — Use Run Configurations and Run Control pages

**DESCRIPTION**: For detailed options and UI steps, refer to the Run Control and "create a new run configuration" guides in your environment:
- Use Run Control: use-run-control-09171c8.md
- Create a new run configuration in VS Code: create-a-new-run-configuration-in-visual-studio-code-3b1f37e.md
- Create a new run configuration in SAP Business Application Studio: create-a-new-run-configuration-in-sap-business-application-studio-05f2a9e.md

**LANGUAGE**: Text

**CODE**:
```text
Documentation references:
  Use Run Control: use-run-control-09171c8.md
  Create a new run configuration (VS Code): create-a-new-run-configuration-in-visual-studio-code-3b1f37e.md
  Create a new run configuration (SAP BAS): create-a-new-run-configuration-in-sap-business-application-studio-05f2a9e.md
```

**STEP**: 6 — App-to-App Navigation preview

**DESCRIPTION**: To enable and preview app-to-app navigation behavior, follow the dedicated guide.

**LANGUAGE**: Text

**CODE**:
```text
App-to-App Navigation Preview: app-to-app-navigation-preview-543675f.md
```

fiori-tools preview npm vs-code sap-business-application-studio mock-data launchpad HSTS localhost


**TITLE**: Previewing an SAP Fiori Elements CAP Project (VS Code & SAP Business Application Studio)

**INTRODUCTION**: Quick, action-oriented instructions to run and preview a generated SAP Fiori Elements CAP project locally using Visual Studio Code or SAP Business Application Studio. Includes terminal commands, expected output, troubleshooting, and how to open the app launchpad link.

**TAGS**: fiori-tools, CAP, cds, @sap/cds, launchpad, Visual Studio Code, Business Application Studio, preview

**STEP**: 1 — Open the terminal (Visual Studio Code)

**DESCRIPTION**: Open an integrated terminal in VS Code using any of the supported methods so you can run project commands.

**LANGUAGE**: Shell

**CODE**:
```text
Methods to open the terminal in VS Code:
- Press Ctrl+`
- From the menu: View > Terminal
- Command Palette (Ctrl/Command + Shift + P) -> execute "View: Toggle Integrated Terminal"
```

**STEP**: 2 — Open the terminal (SAP Business Application Studio)

**DESCRIPTION**: Open a terminal in SAP Business Application Studio to run project commands.

**LANGUAGE**: Shell

**CODE**:
```text
In SAP Business Application Studio:
- From the menu: Terminal > New Terminal
```

**STEP**: 3 — Ensure you are in the project root

**DESCRIPTION**: Set the terminal's working directory to the root of your CAP project before running the app server.

**LANGUAGE**: Shell

**CODE**:
```bash
# Example: change directory to your CAP project root
cd /path/to/your/cap-project
# verify files (optional)
ls
```

**STEP**: 4 — Start the local CAP server

**DESCRIPTION**: Run the CAP development server. This serves the OData/REST backend and the Fiori webapp for preview.

**LANGUAGE**: Shell

**CODE**:
```bash
cds run
```

**STEP**: 5 — Confirm server is listening and locate the HTML link

**DESCRIPTION**: After cds run starts, verify the server URL printed to the terminal and open the provided links. Use Ctrl + Click on the URL shown in the terminal to open the list of available app links in a browser.

**LANGUAGE**: text

**CODE**:
```text
Example terminal output:
server listening on { url: 'http://localhost:4004' }

Open the URL (Ctrl + Click in the terminal). In the browser, click the HTML link for your webapp, for example:
  /incidents/webapp/index.html
or the upper HTML link shown in SAP Business Application Studio output.
```

**STEP**: 6 — Troubleshoot missing cds or cds-dk

**DESCRIPTION**: If cds run fails due to missing global packages, install the required tools globally and retry. Use --force for cds-dk if necessary.

**LANGUAGE**: Shell

**CODE**:
```bash
npm i -g @sap/cds
npm i -g @sap/cds-dk --force
# Then retry:
cds run
```

**STEP**: 7 — View the application on the launchpad

**DESCRIPTION**: After opening the HTML link (e.g., /incidents/webapp/index.html), the Fiori Elements application is displayed on the launchpad in the browser. Interact with it to validate UI and navigation.

**LANGUAGE**: text

**CODE**:
```text
In the browser:
- Click the HTML link shown after cds run (e.g., /incidents/webapp/index.html)
- The application opens on the Fiori launchpad for preview
```

**STEP**: 8 — Stop the local CAP server

**DESCRIPTION**: When finished previewing, stop the running server from the terminal.

**LANGUAGE**: Shell

**CODE**:
```text
# In the terminal running cds run:
Press Ctrl-C
```

fiori-tools
CAP
cds
@sap/cds
launchpad
Visual Studio Code
Business Application Studio
preview