/sap-fiori-tools

Preview Reference

Comprehensive reference for previewing SAP Fiori applications during development.

Table of Contents

1. Preview Overview
2. NPM Scripts
3. Run Control
4. Mock Data
5. Live Data
6. App-to-App Navigation
7. External FLP Preview
8. Developer Variants
9. SAP Horizon Theme
10. Virtual Endpoints
11. CAP Project Preview

Preview Overview

SAP Fiori tools provides multiple preview options:

Default Preview Port

Applications run on localhost:8080 by default. If port is in use, system selects next available port.

HTTPS/SSL Considerations

• localhost serves as HTTP proxy to backend services
• Domain security policies may require HTTPS
• Configure browser to trust local certificates if needed

NPM Scripts

Available Scripts

Running Scripts

VS Code:

1. Open terminal: Ctrl + ``
2. Navigate to project root
3. Run script: npm run start-mock

SAP Business Application Studio:

1. Open terminal: Terminal > New Terminal
2. Navigate to project root
3. Run script: npm run start-mock

Context Menu: Right-click project folder and select from available scripts.

Run Control

Configuration Location

<workspace_root>/.vscode/launch.json

Important: Run Control only searches root-level .vscode/ folder, not subfolders.

Sample launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Start app-name",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run", "start"],
            "cwd": "${workspaceFolder}",
            "console": "integratedTerminal"
        },
        {
            "name": "Start app-name (mock)",
            "type": "node",
            "request": "launch",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run", "start-mock"],
            "cwd": "${workspaceFolder}",
            "console": "integratedTerminal"
        }
    ]
}

Multi-Root Workspace

Multiple configurations can be merged:

1. Add folders as workspace roots
2. Each root's launch.json configurations become available
3. Access via Run and Debug view

Creating Run Configurations

VS Code:

Fiori: Create Run Configuration (VS Code)

SAP Business Application Studio:

Fiori: Create Run Configuration (BAS)

Mock Data

MockServer Setup

Install MockServer:

Fiori: Install MockServer

Or manually:

npm install @sap-ux/ui5-middleware-fe-mockserver --save-dev

Mock Data Location

webapp/localService/mockdata/
├── EntitySet.json
├── AssociatedEntitySet.json
└── ...

Mock Data Format

[
    {
        "ID": "1",
        "Name": "Product 1",
        "Price": 100.00,
        "Currency": "USD"
    },
    {
        "ID": "2",
        "Name": "Product 2",
        "Price": 200.00,
        "Currency": "EUR"
    }
]

Data Editor

Visual mock data management tool.

Launch: Via Application Info page > Start Data Editor

Features:

• Edit cells by double-clicking (primary/foreign keys excluded)
• Add rows with automatic cascading to related entities
• Delete rows with cascading deletions
• Search functionality
• Show/hide columns

Configuration for Live Updates:

Add to ui5-mock.yaml:

server:
  customMiddleware:
    - name: "@sap-ux/ui5-middleware-fe-mockserver"
      configuration:
        watch: true

AI Mock Data Generation

Generate contextual mock data using entity property names.

Requirements:

• SAP Build Code subscription or Test Drive access
• EDMX project with metadata.xml file

Launch: Via Page Editor > Generate Mock Data action

Live Data

Configuration

Live data preview connects to actual backend OData services.

Requirements:

• Backend system accessible
• Authentication configured
• Destination set up (BAS) or system connection (VS Code)

Start Command

npm start

ui5.yaml Configuration

server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        backend:
          - path: /sap
            url: https://backend.system.com
            destination: BACKEND_DESTINATION

App-to-App Navigation

Enable Navigation Preview

Fiori: Enable App-to-App Navigation Preview

Configuration Steps

1. Execute command via Command Palette
2. Select source application
3. Select destination application(s)
4. Launch source app preview
5. Execute navigation

Generated Files

Source Application:

• appconfig/fioriSandboxConfig.json - FLP sandbox configuration
• Updated ui5.yaml - Middleware configuration

fioriSandboxConfig.json Structure

{
    "applications": {
        "destination-app-semantic-object-action": {
            "additionalInformation": "SAPUI5.Component=namespace.destination",
            "applicationType": "URL",
            "url": "../destination-app/",
            "title": "Destination App"
        }
    }
}

Requirements

• Both applications in same workspace
• Configured external navigation in source app
• Matching semantic objects and actions

External FLP Preview

Purpose

Preview application within actual SAP Fiori launchpad environment.

Configuration

Fiori: Preview on External Fiori Launchpad

Parameters

Use Cases

• Test FLP-dependent features
• Verify tile configuration
• Test cross-application navigation

Developer Variants

Purpose

Create and test page variants during development.

Creating Variants

Fiori: Create Developer Variant

Variant Types

• Filter variants
• Table variants
• Page variants

Storage

Developer variants stored locally, not deployed to backend.

SAP Horizon Theme

Preview with Horizon Theme

Fiori: Preview with SAP Horizon Theme

About SAP Horizon

SAP Horizon is SAP's evolved design language with:

• Modern visual design
• Improved accessibility
• Enhanced user experience

Theme Variants

Virtual Endpoints

Purpose

Convert project to use virtual endpoints for simplified proxy configuration.

Convert Command

Fiori: Convert to Virtual Endpoints

Benefits

• Simplified destination configuration
• Consistent endpoint naming
• Easier multi-system setup

Configuration Update

Updates ui5.yaml with virtual endpoint mappings.

CAP Project Preview

Prerequisites

• CAP project with cds dependencies
• Node.js or Java runtime
• Database configured (SQLite for development)

Starting Preview

Node.js CAP:

cds watch

Java CAP:

mvn spring-boot:run

Fiori Preview in CAP

From CAP project root:

npm run start

Or use Run Control with CAP-specific configuration.

Supported Templates for CAP

• List Report Object Page (OData V4)
• Analytical List Page (OData V4)

CAP-Specific ui5.yaml

specVersion: "2.4"
metadata:
  name: cap-app
type: application
server:
  customMiddleware:
    - name: fiori-tools-proxy
      afterMiddleware: compression
      configuration:
        backend:
          - path: /odata/v4
            url: http://localhost:4004

Custom Middlewares

Adding Custom Middleware

Create custom server middleware for specialized preview needs.

Configuration

In ui5.yaml:

server:
  customMiddleware:
    - name: my-custom-middleware
      afterMiddleware: compression
      configuration:
        option1: value1

Use Cases

• Custom authentication handling
• Request/response modification
• Logging and debugging
• Feature flags

Troubleshooting

Port Already in Use

System automatically selects next available port. Check terminal output for actual port.

SSL Certificate Errors

Configure browser to trust localhost certificates or use HTTP for development.

Backend Connection Failed

1. Verify destination/system configuration
2. Check authentication credentials
3. Confirm backend service is accessible
4. Review proxy configuration in ui5.yaml

Mock Data Not Loading

1. Verify MockServer is installed
2. Check mock data file names match entity sets
3. Validate JSON syntax in mock data files
4. Ensure metadata.xml is present

Documentation Source

GitHub: https://github.com/SAP-docs/btp-fiori-tools/tree/main/docs/Previewing-an-Application

Key files:

• previewing-an-application-b962685.md
• use-mock-data-bda83a4.md
• use-live-data-497aee2.md
• generating-mock-data-with-ai-815c310.md
• run-control-overview-d7f20f3.md
• app-to-app-navigation-preview-543675f.md
• preview-an-application-on-external-sap-fiori-launchpad-c789692.md
• developer-variant-creation-ceb845a.md
• preview-an-application-with-the-sap-horizon-theme-2a42256.md
• use-custom-middlewares-dce5315.md
• previewing-an-sap-fiori-elements-cap-project-1dc179a.md