**TITLE**: Deploying or Updating an Adaptation Project to the ABAP Repository

**INTRODUCTION**: Steps to deploy or update an SAP Fiori adaptation project (app variant) to the SAPUI5 ABAP repository in SAP S/4HANA Cloud or SAP BTP. Includes GUI (Deployment Wizard) and CLI methods, required fields for SAP Fiori Launchpad configuration, and the exact commands to run.

**TAGS**: fiori-tools, SAPUI5, ABAP, deployment, adaptation-project, SAP BTP, S/4HANA Cloud, CLI, npm

**STEP**: 1 — Open Deployment Wizard (GUI)

**DESCRIPTION**: Open the Adaptation Project Deployment Wizard from Visual Studio Code / SAP Business Application Studio. Right-click the app variant descriptor file inside the project's webapp folder to launch the wizard which guides you through SAP Fiori Launchpad configuration and ABAP repository settings.

- File to open: right-click the manifest descriptor in the webapp folder.
- The wizard requires SAP Fiori Launchpad configuration:
  - If the base app has a navigation intent in its manifest, select it.
  - Otherwise provide Semantic Object, Action, and (optional) Parameters manually.
- Provide tile metadata: Title (required), Subtitle (optional).
- Provide deployment settings: SAPUI5 ABAP repository (target system), Package, (optional) Description.
- If required by the ABAP system, provide a Transport Request number.
- Finish the wizard and wait for the deployment to complete; a notification appears on success.

**LANGUAGE**: text

**CODE**:
```text
Right-click: <your-project>/webapp/manifest.appdescr_variant
```

**STEP**: 2 — Deploy or Update Using the Command Line (CLI)

**DESCRIPTION**: Use the project CLI to deploy or update the adaptation project. Ensure you run commands from the project's main folder in the terminal. Keep the builder up-to-date before deploying to avoid issues after upgrades.

- Open terminal in project root: Terminal > New terminal (in SAP Business Application Studio or VS Code).
- Optional maintenance step: update builder and dependencies.
- Deploy/Update step: run the deploy npm script provided by the adaptation project.

**LANGUAGE**: bash

**CODE**:
```bash
# (Optional) keep the builder up-to-date
npm update

# Deploy or update the adaptation project
npm run deploy
```

**STEP**: 3 — Notes and Optional Fields

**DESCRIPTION**: Additional technical details to keep in mind while automating or scripting deployment processes.

- Ensure you are in the main project folder when running CLI commands.
- The deployment wizard or CLI may prompt for:
  - SAPUI5 ABAP repository destination (target system)
  - Package name
  - Transport Request number (when required by ABAP system)
  - Optional description for the deployment
- When automating GUI steps, replicate the following required inputs in your automation:
  - SAP Fiori Launchpad Intent: Semantic Object, Action [, Parameters]
  - Tile Title (required), Tile Subtitle (optional)

**LANGUAGE**: text

**CODE**:
```text
Required GUI inputs to replicate in automation:
- Semantic Object (if base app has no intent)
- Action
- Parameters (optional)
- Tile Title (required)
- Tile Subtitle (optional)
- ABAP repository (target)
- Package
- Transport Request (optional, if requested by system)
```

fiori-tools
SAPUI5
ABAP
deployment
adaptation-project
SAP BTP
S/4HANA Cloud
CLI
npm


**TITLE**: Developing SAP Fiori Elements Applications with SAP Fiori Tools — Actionable Guide for Code Generation

**INTRODUCTION**: Practical, code-focused guidance for generating, previewing, and developing SAP Fiori elements applications using SAP Fiori tools. This guide covers recommended floorplans, OData choices, AI-assisted generation (Project Accelerator / Joule), previewing, annotation maintenance, and CAP project structure to help AI agents produce correct project scaffolding and development steps.

**TAGS**: fiori-tools, sap-fiori-elements, odata-v4, odata-v2, cap, joule, project-accelerator, annotations, preview, service-modeler, language-server

**STEP**: 1 — Generate an SAP Fiori Elements Application (starter)
**DESCRIPTION**: Use SAP Fiori tools to generate a new SAP Fiori elements application either as a standalone project or inside a CAP project. Choose one of the standard floorplans (List Report, Worklist, Analytical List, Object, Overview) or a Custom Page (recommended for flexibility). Prefer OData V4 for building-block support and custom pages; OData V2 is supported but V4 is recommended.
**LANGUAGE**: Text
**CODE**:
```Text
Actions (VS Code / Business Application Studio):
- Command Palette: "SAP Fiori Tools: Application Generator" (or use the Project Wizard)
- Choose:
  - Project type: Standalone / CAP
  - Template: SAP Fiori elements (OData V4 recommended) or Custom Page (if custom UI needed)
  - Floorplan: List Report | Worklist | Analytical List Page | Object Page | Overview Page | Custom Page
Reference docs:
- Generating an Application: Generating-an-Application/generating-an-application-db44d45.md
Recommendations:
- Prefer OData V4 for building blocks and custom pages.
- Freestyle SAPUI5 templates are deprecated; prefer Custom Page floorplan if UI coding required.
```

**STEP**: 2 — Choose Floorplan and Building Blocks
**DESCRIPTION**: Select the appropriate floorplan or custom page based on UI and interaction needs. Use building blocks for reusable UI/interaction patterns. For custom layouts use Custom Page plus building blocks to keep FE framework qualities while allowing SAPUI5 coding.
**LANGUAGE**: Text
**CODE**:
```Text
Standard floorplans (OData V4 & V2):
- List Report Page
- Worklist Page
- Analytical List Page
- Object Page
- Overview Page

Building blocks:
- Reusable artifacts for layout and behavior; use them to ensure enterprise-readiness and UI consistency.

Live examples and references:
- Building Blocks: https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/buildingBlocks/buildingBlocks
- Standard Floorplans: https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/topic/floorplans
- Custom Page: https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/controllerExtensions/customPage
```

**STEP**: 3 — Generate Project with Project Accelerator or Joule (AI-assisted)
**DESCRIPTION**: Use the Project Accelerator (SAP Fiori tools AI) or Joule to convert business requirements (text, images, or both) into a CAP project scaffold that includes data models, services, sample data, and one SAP Fiori elements application (list report, list+object pages, or form entry). Provide the business requirements as structured input where possible to get deterministic artifacts.
**LANGUAGE**: JSON
**CODE**:
```JSON
{
  "businessRequirements": {
    "title": "Sales Orders Management",
    "description": "Manage sales orders with header and item details. Include status, customer, order date, total amount.",
    "entities": [
      {
        "name": "SalesOrder",
        "fields": [
          {"name":"ID","type":"UUID","key":true},
          {"name":"CustomerID","type":"String"},
          {"name":"OrderDate","type":"Date"},
          {"name":"Status","type":"String"},
          {"name":"TotalAmount","type":"Decimal"}
        ]
      },
      {
        "name": "SalesOrderItem",
        "fields": [
          {"name":"ID","type":"UUID","key":true},
          {"name":"OrderID","type":"UUID"},
          {"name":"ProductID","type":"String"},
          {"name":"Quantity","type":"Integer"},
          {"name":"Price","type":"Decimal"}
        ]
      }
    ],
    "ui": {
      "applicationType": "SAP Fiori elements",
      "floorplan": "List Report + Object Page",
      "odataVersion": "V4"
    }
  },
  "expectedOutputs": {
    "cap": ["db/data-model.cds", "srv/service.cds", "app/fiori-app/*", "package.json"],
    "fiori": ["webapp/manifest.json", "webapp/annotations.xml", "webapp/Component.js"]
  }
}
```
Reference and docs:
- Generating with AI: https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/6845fedbb38c4da7a54a2c76081f3abb.html

**STEP**: 4 — CAP Project Typical File Structure (expected scaffold)
**DESCRIPTION**: When generating into a CAP project, expect the following conventional file layout. Use this structure to guide further code generation and to place UI, service, and data artifacts correctly.
**LANGUAGE**: FileTree
**CODE**:
```Text
cap-project/
├─ app/                   # Fiori UI application (generated)
│  ├─ webapp/
│  │  ├─ manifest.json
│  │  ├─ Component.js
│  │  └─ annotations/     # OData annotations (XML or JSON)
├─ db/
│  ├─ data-model.cds      # CDS entities and types
│  └─ sample-data.csv     # optional sample data
├─ srv/
│  ├─ service.cds         # service definitions (expose entities)
│  └─ srv.js              # service handlers (Node.js)
├─ package.json
└─ README.md
```

**STEP**: 5 — Preview Application with Live or Mock Data
**DESCRIPTION**: During development preview the Fiori application using SAP Fiori tools. Choose mock data for UI layout and early development or live OData service for integration testing. Use the editor or IDE commands to launch the preview and switch between mock/live as needed.
**LANGUAGE**: Text
**CODE**:
```Text
Preview methods:
- VS Code / Business Application Studio:
  - Command Palette: "Fiori: Preview Application" or "SAP Fiori Tools: Preview Application"
  - Select data option: mock data | live OData service
- Configure mock server:
  - Provide annotations file (.xml/.json) and mock data mappings
Reference:
- Previewing an Application: Previewing-an-Application/previewing-an-application-b962685.md
```

**STEP**: 6 — Maintain Annotations and Use Service Modeler
**DESCRIPTION**: Modify manifest.json and annotation files via Service Modeler schematic overview. Use the annotation Language Server Protocol (LSP) for intelligent code assistance when editing annotations. Keep annotation-based settings consistent with the OData service and manifest.
**LANGUAGE**: Text
**CODE**:
```Text
Actions:
- Open Service Modeler from SAP Fiori Tools to visualize and edit annotations and consumed services.
- Use Annotation LSP (Language Server) to get completion, validation, and quick fixes for annotation files (.xml, .json).
- Sync manifest.json pages/targets with annotation definitions.
References:
- Visualizing Annotations with Service Modeler: Developing-an-Application/visualizing-annotations-with-service-modeler-58784b5.md
- Maintaining Annotations with Language Server: Developing-an-Application/maintaining-annotations-with-language-server-6fc93f8.md
```

**STEP**: 7 — Add Features with Guided Feature Guides
**DESCRIPTION**: Use guided Feature Guides from SAP Fiori tools to add common features (navigation, actions, cards, facets) to your application. Feature Guides provide step-by-step changes and update manifest/annotation artifacts automatically when possible.
**LANGUAGE**: Text
**CODE**:
```Text
Actions:
- In SAP Fiori Tools extension, open "Use Feature Guides" to add or configure features.
- Apply guided changes and review diffs for manifest.json and annotation updates.
Reference:
- Use Feature Guides: Developing-an-Application/use-feature-guides-0c9e518.md
```

**STEP**: 8 — Use AI Assistants for Code Generation and Modification
**DESCRIPTION**: Use Joule or Project Accelerator (SAP Fiori tools AI) not only for initial scaffolding but also to generate or modify data models, service definitions, sample data, and UI artifacts. Provide clear input describing entities, relationships, UI pages, and desired interactions to get accurate outputs.
**LANGUAGE**: Text
**CODE**:
```Text
AI-assisted workflow:
- Provide structured business requirements (see STEP 3 JSON example).
- Validate generated artifacts: cds models, service definitions, annotations, manifest.json.
- Integrate generated UI into CAP project structure (see STEP 4).
Reference:
- Generating an Application with the Project Accelerator or Joule Using SAP Fiori Tools AI:
  https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/6845fedbb38c4da7a54a2c76081f3abb.html
```

**STEP**: 9 — OData V2 vs V4 — Compatibility and Recommendation
**DESCRIPTION**: Both OData V2 and V4 are supported for SAP Fiori elements. Use V4 when you need building blocks, custom pages, and the latest features. Use V2 only when constrained by legacy service requirements.
**LANGUAGE**: Text
**CODE**:
```Text
Recommendation:
- Prefer OData V4 for new applications:
  - Full building block support
  - Custom Page floorplan with extension points
- Use OData V2 only for legacy compatibility.
References:
- Using SAP Fiori Elements Floorplans (V2 & V4): https://ui5.sap.com/#/topic/797c3239b2a9491fa137e4998fd76aa7
- General FE docs: https://ui5.sap.com/#/topic/03265b0408e2432c9571d6b3feb6b1fd
```

fiori-tools sap-fiori-elements odata-v4 odata-v2 cap joule project-accelerator annotations preview service-modeler language-server


**TITLE**: Manage Contracts and Customer Information — SAP Fiori Implementation Guide

**INTRODUCTION**: This document provides an action-oriented, code-focused guide to implement a SAP Fiori application for creating and managing Contracts and Customers. It includes the original user story and acceptance criteria, a CDS data model, service exposure, UI5 master/detail XML views, and controller code to load lists automatically, apply filters (Contract Type, Status, Start Date), and display contract details.

**TAGS**: fiori-tools, sap-fiori, ui5, cds, odata, contracts, customers, master-detail

**STEP**: 1 — User story and acceptance criteria (source)

**DESCRIPTION**: Keep the original user story and acceptance criteria intact. Use this as the authoritative functional requirements and acceptance test cases.

**LANGUAGE**: text

**CODE**:
```text
I want to create an SAP Fiori application that satisfies the requirements from the following user story:

Description

As a contract manager or administrator, I want to create and manage contracts and customer information in the system,
so that I can effectively track and handle legal agreements and customer interactions.

Customer Description
Contract: A Contract involves defining a structured representation of a legal agreement or arrangement between two or more parties.
Contracts can cover a wide range of agreements, such as sales contracts, service agreements, employment contracts, and more.
Common attributes of a contract might include:
Contract ID: A unique identifier for the contract.
1. Contract ID: A unique identifier for the contract.
2. Customer: Information about the customer involved
3. Contract Type: The type of contract (e.g. sales, service, employment).
4. Start Date: The date on which the contract becomes valid.
5. End Date: The date on which the contract expires (if applicable).
6. Status: The current status of the contract (draft, active, expired, terminated, etc.)

Customer: A customer is an individual, organization, or entity that purchases goods, products, or services from another party,
typically a business or seller. A typical customer has the following attributes:
1. Name
2. Identification Number
3. Address
4. Contact Information

Identification Number: A unique identification number for a customer is a distinct and non-repeating numerical value
assigned to each customer record within a database or information system. This number serves as a primary key or identifier
that uniquely distinguishes one customer from another.
Name: A "name" typically refers to the given name of a person or entity, or a label by which they are addressed or identified.
Address: An "address" typically refers to a physical location where an individual, business, or entity is situated
or can be reached.

Acceptance Criteria

Scenario 1: List All Contracts
Given I am logged into the contract management system, when I launch the SAP Fiori application to maintain contracts,
then I should be able to view the list of all the contracts in a list without pressing the GO button.
The list of all the contracts should have : Contract ID, Customer, Contract Type and Start Date
Next to this list, I would like to see the list of all customers.
The list of filters should include Contract Type, Contract Status and Start Date.

Scenario 2: View Contract Details
Given I am logged into the contract management system, when I select a specific contract from the list of SAP Fiori application,
then I should be able to view the contract details.
The contract details will be:

Field Name       Tab in App       Section or Field Group
----------       ----------       ----------------------
ContractID       Contract Data    Contract Details
Customer Name    Contract Data    Contract Details
Contract Type    Contract Data    Contract Details
Status           Contract Data    Contract Details
Start Date       Contract Data    Contract Details
End Date         Contract Data    Contract Details
```

**STEP**: 2 — Data model: CDS definitions for Contracts and Customers

**DESCRIPTION**: Define the domain model with clear keys and associations. Use CDS to create two entities: Customer and Contract. These are the fields referenced in the acceptance criteria and used by the OData service.

**LANGUAGE**: CDS

**CODE**:
```cds
namespace my.contracts;

entity Customer {
  key IdentificationNumber : String(36);
  Name                    : String(200);
  Address                 : String(500);
  ContactInfo             : String(200);
}

entity Contract {
  key ContractID          : String(36);
  Customer                : Association to Customer;
  ContractType            : String(50);
  StartDate               : Date;
  EndDate                 : Date;
  Status                  : String(20);
}
```

**STEP**: 3 — Service exposure: publish Contracts and Customers as OData

**DESCRIPTION**: Expose the CDS entities via an OData service so UI5 can bind to /Contracts and /Customers endpoints. Use a service definition file in srv/ or api/ depending on your project layout.

**LANGUAGE**: CDS

**CODE**:
```cds
using my.contracts as db from '../path/to/model';

service ContractService @(path:'/contract') {
  entity Contracts  as projection on db.Contract;
  entity Customers  as projection on db.Customer;
}
```

**STEP**: 4 — Master view: show Contracts list and Customers list side-by-side, with filters

**DESCRIPTION**: Implement a master layout that presents:
- Left pane: Contracts list (columns: ContractID, Customer Name, ContractType, StartDate). Auto-loads on app start (no GO button).
- Right pane (in the same master area): Customers list.
- Top toolbar: filter controls for Contract Type (Select), Contract Status (Select), Start Date (DatePicker). Filters auto-apply on change.

Use a HorizontalLayout to place both lists side-by-side. Bind each list to the OData model endpoints.

**LANGUAGE**: XML

**CODE**:
```xml
<mvc:View controllerName="my.app.controller.Master" xmlns:mvc="sap.ui.core.mvc"
          xmlns="sap.m" xmlns:core="sap.ui.core" displayBlock="true">
  <Page title="Contracts">
    <content>
      <VBox>
        <!-- Filter toolbar -->
        <Toolbar>
          <Select id="filterContractType" change="onFilterChange">
            <items>
              <core:Item key="" text="All Contract Types" />
              <core:Item key="Sales" text="Sales" />
              <core:Item key="Service" text="Service" />
              <core:Item key="Employment" text="Employment" />
            </items>
          </Select>

          <Select id="filterStatus" change="onFilterChange">
            <items>
              <core:Item key="" text="All Statuses" />
              <core:Item key="Draft" text="Draft" />
              <core:Item key="Active" text="Active" />
              <core:Item key="Expired" text="Expired" />
              <core:Item key="Terminated" text="Terminated" />
            </items>
          </Select>

          <DatePicker id="filterStartDate" change="onFilterChange" displayFormat="yyyy-MM-dd" />
        </Toolbar>

        <!-- Side-by-side lists -->
        <HorizontalLayout width="100%">
          <!-- Contracts list -->
          <List id="contractList" width="60%" mode="SingleSelectMaster" items="{/Contracts}">
            <headerToolbar>
              <Toolbar><Title text="Contracts" /></Toolbar>
            </headerToolbar>
            <items>
              <StandardListItem type="Active"
                                title="{ContractID}"
                                description="{ContractType} - {StartDate}"
                                info="{Status}"
                                infoState="{= ${Status} === 'Active' ? 'Success' : 'None' }"
                                press="onContractSelect">
                <attributes>
                  <ObjectAttribute text="{Customer/Name}" />
                </attributes>
              </StandardListItem>
            </items>
          </List>

          <!-- Customers list -->
          <List id="customerList" width="40%" items="{/Customers}">
            <headerToolbar>
              <Toolbar><Title text="Customers" /></Toolbar>
            </headerToolbar>
            <items>
              <StandardListItem title="{Name}" description="{IdentificationNumber}" />
            </items>
          </List>
        </HorizontalLayout>
      </VBox>
    </content>
  </Page>
</mvc:View>
```

**STEP**: 5 — Master controller: bind lists, implement auto-loading and filters, handle selection

**DESCRIPTION**: Controller initializes OData model (v2 or v4), binds lists, applies filters automatically when filter controls change, and navigates or binds detail area when a contract is selected. Apply filters directly to the contract list binding so data is returned filtered from the OData service.

**LANGUAGE**: JavaScript

**CODE**:
```javascript
sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/Filter",
  "sap/ui/model/FilterOperator",
  "sap/ui/model/json/JSONModel"
], function (Controller, Filter, FilterOperator, JSONModel) {
  "use strict";

  return Controller.extend("my.app.controller.Master", {
    onInit: function () {
      // ODataModel should be configured in manifest or here
      // Ensure model is available as default model on the view
      this._oView = this.getView();
      this._oContractList = this._oView.byId("contractList");
      this._oCustomerList = this._oView.byId("customerList");

      // Lists will auto-load from their bindings as soon as view is rendered
      // No GO button required — initial load is automatic via binding in XML
    },

    onFilterChange: function () {
      var aFilters = [];

      var sContractType = this._oView.byId("filterContractType").getSelectedKey();
      if (sContractType) {
        aFilters.push(new Filter("ContractType", FilterOperator.EQ, sContractType));
      }

      var sStatus = this._oView.byId("filterStatus").getSelectedKey();
      if (sStatus) {
        aFilters.push(new Filter("Status", FilterOperator.EQ, sStatus));
      }

      var oStartDate = this._oView.byId("filterStartDate").getDateValue();
      if (oStartDate) {
        // filter for StartDate >= selected date
        var sIsoDate = oStartDate.toISOString().split('T')[0]; // "yyyy-mm-dd"
        aFilters.push(new Filter("StartDate", FilterOperator.GE, sIsoDate));
      }

      // Apply combined filter to the contract list binding
      var oBinding = this._oContractList.getBinding("items");
      if (oBinding) {
        oBinding.filter(aFilters);
      }
    },

    onContractSelect: function (oEvent) {
      var oItem = oEvent.getSource();
      var oContext = oItem.getBindingContext();
      // Option A: navigate with router to detail route and pass ContractID
      // Option B: bind detail view to the context's path
      // Example: publish to EventBus or set SelectedContract in local model
      var sPath = oContext.getPath(); // /Contracts('...')
      var oAppView = this.getView(); // parent view containing detail area
      // For example, set a JSONModel with selected contract data for the detail view:
      var oModel = oContext.getModel();
      oModel.read(sPath, {
        success: function (oData) {
          var oSelected = new JSONModel(oData);
          this.getView().setModel(oSelected, "selectedContract");
        }.bind(this)
      });
    }
  });
});
```

**STEP**: 6 — Detail view: display selected contract fields

**DESCRIPTION**: Create a detail view bound to the selected contract. Show ContractID, Customer Name, ContractType, Status, StartDate, EndDate. Bind to a model named "selectedContract" (set by controller on selection) or use route navigation and bind element path.

**LANGUAGE**: XML

**CODE**:
```xml
<mvc:View controllerName="my.app.controller.Detail" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
  <Page title="Contract Details">
    <content>
      <Form>
        <FormContainer title="Contract Details">
          <FormElement label="Contract ID">
            <Text text="{selectedContract>/ContractID}" />
          </FormElement>
          <FormElement label="Customer">
            <Text text="{selectedContract>/Customer/Name}" />
          </FormElement>
          <FormElement label="Contract Type">
            <Text text="{selectedContract>/ContractType}" />
          </FormElement>
          <FormElement label="Status">
            <Text text="{selectedContract>/Status}" />
          </FormElement>
          <FormElement label="Start Date">
            <Text text="{selectedContract>/StartDate}" />
          </FormElement>
          <FormElement label="End Date">
            <Text text="{selectedContract>/EndDate}" />
          </FormElement>
        </FormContainer>
      </Form>
    </content>
  </Page>
</mvc:View>
```

**STEP**: 7 — Manifest (snippet): configure model and routing

**DESCRIPTION**: Ensure manifest.json includes the ODataModel configuration and routes for master/detail (if using routing). Example shows a minimal model config and a route for the master view.

**LANGUAGE**: JSON

**CODE**:
```json
{
  "sap.app": {
    "id": "my.app",
    "title": "Contract Manager"
  },
  "sap.ui5": {
    "models": {
      "": {
        "dataSource": "mainService",
        "settings": {
          "useBatch": true
        }
      }
    },
    "routing": {
      "routes": [
        {
          "name": "master",
          "pattern": "",
          "target": "master"
        },
        {
          "name": "detail",
          "pattern": "detail/{ContractID}",
          "target": "detail"
        }
      ],
      "targets": {
        "master": {
          "viewName": "Master",
          "viewLevel": 1
        },
        "detail": {
          "viewName": "Detail",
          "viewLevel": 2
        }
      }
    }
  },
  "sap.app/dataSources": {
    "mainService": {
      "uri": "/contract/",
      "type": "OData",
      "settings": {
        "odataVersion": "2.0"
      }
    }
  }
}
```

Use these steps as a compact implementation checklist and code starting point. Adjust namespaces, OData path, and UI5 component wiring to your project structure.

fiori-tools sap-fiori ui5 cds odata contracts customers master-detail


**TITLE**: Display Customers with Related Contracts — CAP + Fiori Elements (List Report + Object Page)

**INTRODUCTION**: This guide provides a concise, code-focused recipe to implement an SAP CAP backend (CDS) and a Fiori Elements UI that shows a list of customers, a customer object page (Customer Info + Contracts list), and a contract object page (Contract Info + Validity). It includes domain model CDS, service exposure, sample data, and CDS UI annotations to drive the List Report and Object Page pages.

**TAGS**: CAP, CDS, Fiori, Fiori Elements, OData, UI5, annotations, ListReport, ObjectPage, Node.js

STEP: 1 — Scenario / Requirements (preserve original sample text)
DESCRIPTION: Exact requirements and desired UI flows. Keep this snippet as the authoritative specification the code implements.
LANGUAGE: text
CODE:
```text
I want to create an SAP Fiori application that shows my customers with their contracts.
Each customer has the following attributes:

1. Name
2. Identification Number
3. Address
4. Contract Information
A contract is referencing a customer. One customer can have multiple contracts. Attributes of a contract include:
5. Contract ID: A unique identifier for the contract
6. Customer: Information about the customer involved
7. Contract Type: The type of contract (sales, service, employment)
8. Start Date: The date on which the contract becomes valid
9. End Date: The date on which the contract expires (if applicable)
10. Status: The current status of the contract (draft, active, expired, terminated, etc.)

When starting the CAP application I first want to see a list of customers.

When selecting a specific row in that list, I want to see to a page with details of that customer.

It should show the following sections:
- section "Customer Info" displaying the attributes of the selected customer
- section "Contracts" showing a list of all contracts for this customer

When selecting a specific row in the contracts list, I want to see a page with details of that contract. This page should show two sections:
- section "Contract Info" containing:
  - contract ID
  - Customer Name
  - Contract Type
  - Status
- section "Validity" containing
  - Start Date
  - End Date
```

STEP: 2 — Domain model: CDS entities (db/schema.cds)
DESCRIPTION: Create Customer and Contract entities. Contract references Customer as an association. Use UUID keys; include meaningful types for dates and strings. Place file at db/schema.cds.
LANGUAGE: CDS
CODE:
```cds
namespace my.company;

entity Customer {
  key ID                : UUID;
  Name                  : String(111);
  IdentificationNumber  : String(50);
  Address               : String(500);
}

entity Contract {
  key ContractID        : UUID;
  Customer              : Association to Customer;
  ContractType          : String(50);
  StartDate             : Date;
  EndDate               : Date;
  Status                : String(30);
}
```

STEP: 3 — Expose service and annotate UI (srv/service.cds)
DESCRIPTION: Expose Customers and Contracts as OData entities and add CDS @UI annotations to drive Fiori Elements List Report + Object Page. Place file at srv/service.cds. The annotations below provide:
- List display of Customers (line items)
- Customer Object Page with "Customer Info" and a facet containing a table of related Contracts
- Contract Object Page showing Contract Info and Validity facets
LANGUAGE: CDS
CODE:
```cds
using my.company as my from '../db/schema';

service CatalogService @(path:'/catalog') {
  entity Customers as projection on my.Customer;
  entity Contracts  as projection on my.Contract;
}

/* UI annotations for Fiori Elements (ListReport + ObjectPage) */
annotate my.Customer with
{
  @UI.lineItem : [
    { Value : Name },
    { Value : IdentificationNumber },
    { Value : Address }
  ],
  @UI.identification : [
    { Value : Name },
    { Value : IdentificationNumber }
  ],
  /* Object Page: Customer Info section */
  @UI.facet : [
    {
      Label : 'Customer Info',
      Target : @UI.selectionFields : [ Name, IdentificationNumber, Address ]
    },
    {
      Label : 'Contracts',
      /* facet showing related Contracts as a table; this facet expects a navigation property from Customer to Contract */
      Data : [
        {
          /* Use the association path: Contracts where Contract.Customer = $self */
          Value : { Navigation : 'Contracts' }
        }
      ]
    }
  ]
};

annotate my.Contract with
{
  @UI.lineItem : [
    { Value : ContractID },
    { Value : ContractType },
    { Value : StartDate },
    { Value : EndDate },
    { Value : Status }
  ],
  @UI.identification : [
    { Value : ContractID },
    { Value : ContractType }
  ],
  @UI.facet : [
    {
      Label : 'Contract Info',
      Target : @UI.selectionFields : [ ContractID, { Value: Customer, Label: 'Customer' }, ContractType, Status ]
    },
    {
      Label : 'Validity',
      Target : @UI.selectionFields : [ StartDate, EndDate ]
    }
  ]
};
```

STEP: 4 — Provide sample data (db/data)
DESCRIPTION: Add minimal sample CSV files so the CAP SQLite (or configured DB) contains example Customers and Contracts. Place customer CSV at db/data/my.company-Customer.csv and contract CSV at db/data/my.company-Contract.csv. Ensure the association references Customer IDs.
LANGUAGE: CSV
CODE:
```csv
# db/data/my.company-Customer.csv
ID,Name,IdentificationNumber,Address
a1111111-1111-1111-1111-111111111111,Acme Inc,AC-12345,"1 Main Street, City"
b2222222-2222-2222-2222-222222222222,Contoso Ltd,CT-98765,"42 Second Ave, Town"
```

```csv
# db/data/my.company-Contract.csv
ContractID,Customer,ContractType,StartDate,EndDate,Status
c3333333-3333-3333-3333-333333333333,$ref:a1111111-1111-1111-1111-111111111111,Sales,2024-01-01,2025-01-01,Active
d4444444-4444-4444-4444-444444444444,$ref:b2222222-2222-2222-2222-222222222222,Service,2023-06-01,2024-06-01,Expired
```

STEP: 5 — Fiori Elements app configuration (app/webapp/manifest.json snippet)
DESCRIPTION: Configure a Fiori Elements app using Generic ListReport/ObjectPage (sap.ui.generic.app). Point annotations to the CDS-backed OData service (CatalogService) and to the service metadata (annotations are embedded in CDS so Fiori Elements will consume them). Add two pages: ListReport for Customers and ObjectPage for Contracts (navigation from Customers to Contracts via the related navigation property).
LANGUAGE: JSON
CODE:
```json
{
  "sap.app": {
    "id": "my.company.customers",
    "title": "Customers & Contracts"
  },
  "sap.ui5": {
    "models": {
      "": {
        "dataSource": "mainService",
        "preload": true,
        "settings": { "synchronizationMode": "TwoWay" }
      }
    },
    "dataSources": {
      "mainService": {
        "uri": "/catalog/",
        "type": "OData",
        "settings": { "odataVersion": "v4" }
      }
    },
    "routing": {
      "config": {
        "routerClass": "sap.ui.core.routing.Router",
        "viewType": "XML",
        "controlAggregation": "pages",
        "viewPath": "sap.suite.ui.generic.template",
        "controlId": "app",
        "bypassed": { "target": "notFound" }
      },
      "routes": [
        {
          "pattern": "",
          "name": "CustomersList",
          "target": "CustomersList"
        }
      ],
      "targets": {
        "CustomersList": {
          "type": "Component",
          "id": "listReport",
          "name": "sap.suite.ui.generic.template.ListReport",
          "options": {
            "settings": {
              "entitySet": "Customers"
            }
          }
        }
      }
    }
  },
  "sap.ui.generic.app": {
    "pages": [
      {
        "entitySet": "Customers",
        "component": {
          "name": "sap.suite.ui.generic.template.ListReport"
        }
      },
      {
        "entitySet": "Contracts",
        "component": {
          "name": "sap.suite.ui.generic.template.ObjectPage"
        }
      }
    ]
  }
}
```

STEP: 6 — Implementation checklist and runtime notes
DESCRIPTION: Implement these steps in order and run the CAP app:
- Files & locations:
  - db/schema.cds (CDS entities)
  - srv/service.cds (service + annotations)
  - db/data/*.csv (sample data)
  - app/webapp/manifest.json (Fiori app descriptor)
- Start backend: cds run (or use npm start per project).
- Start Fiori app: serve app/webapp via UI5 tooling or deploy app to SAP BTP.
- Verify:
  - Open List Report -> see Customers list (Name, IdentificationNumber, Address).
  - Select a Customer -> opens Object Page showing "Customer Info" and a Contracts facet with the related Contracts table.
  - Select a Contract -> opens Contract Object Page showing "Contract Info" and "Validity".

LANGUAGE: text
CODE:
```text
Checklist:
- cds watch (or cds run) to serve OData /catalog/
- Ensure manifest.json mainService uri points to /catalog/
- UI5 tooling or deployment to run the Fiori Elements app
- Use the provided CSV sample data to seed the DB for testing
```

Step complete — the provided CDS model, service exposure, UI annotations, sample data, and manifest configuration produce the required flows: Customers list -> Customer details (Customer Info + Contracts list) -> Contract details (Contract Info + Validity).

CAP
CDS
Fiori
Fiori Elements
OData
UI5
annotations
ListReport
ObjectPage
Node.js


**TITLE**: Example: Manage Travel App List Report Object Page

**INTRODUCTION**: This example shows how to prepare a markdown specification and assets for a Fiori "Manage Travel" application (List Report + Object Page) in SAP Business Application Studio. Use the markdown file and images in your workspace to seed code generation, UI prototyping, or RAG-based codegen agents. The instructions include required image filenames, folder layout, and business rules to implement.

**TAGS**: fiori-tools, SAP, Business Application Studio, UI5, List Report, Object Page, travel, markdown, assets, validation

**STEP**: 1 — Create the markdown specification file

**DESCRIPTION**: Create a markdown (.md) file in your workspace folder (SAP Business Application Studio). Paste the sample markdown content below exactly as-is into that file. This content is the human-readable specification that RAG/codegen agents will use to produce UI5/List Report + Object Page code.

**LANGUAGE**: Markdown

**CODE**:
```markdown
I want to create a travel application that shows a list of trips taken by employees.

The list of trips should include the following details:

![Alt Text](Travel_List.jpeg)

Each trip can have many bookings and multiple notes. On the travel details page, the app should show:

![Alt Text](Travel_Details.jpeg)

The total trip price should equal the price of all the bookings for that trip. If there are no bookings for a trip, the total trip price should be zero.

If there are any bookings associated with a trip, then each booking must cost more than zero.

Clicking on a booking should allow the user to see more details.
```

**STEP**: 2 — Save required image assets (filenames and paths)

**DESCRIPTION**: Save the image files referenced in the markdown to the correct paths relative to the markdown file. The two images referenced directly in the markdown must be in the same directory as the .md file. Two additional sketch images shown in the original example should be saved under an "images" subfolder. Use the exact filenames below so codegen agents and previews find them correctly.

- Place these two images in the same directory as your markdown file:
  - Travel_List.jpeg
  - Travel_Details.jpeg

- Place these two sketch images in an images/ subfolder (relative path: images/):
  - images/Manage_Travel_App_List_Report_Page_Sketch_4633751.jpg
  - images/Manage_Travel_App_Object_Page_Sketch_999bcc3.jpg

**LANGUAGE**: Plaintext

**CODE**:
```
workspace/
├─ Manage_Travel_App.md        <- your markdown file (name can vary)
├─ Travel_List.jpeg            <- required by markdown
├─ Travel_Details.jpeg         <- required by markdown
└─ images/
   ├─ Manage_Travel_App_List_Report_Page_Sketch_4633751.jpg
   └─ Manage_Travel_App_Object_Page_Sketch_999bcc3.jpg
```

**STEP**: 3 — Implement business rules (for code generation / validation)

**DESCRIPTION**: These are the exact business rules to encode in your backend/model or UI logic. Provide explicit instructions for codegen agents to implement these behaviors (computations and validations):

- Total trip price computation:
  - Compute totalTripPrice = sum(booking.price) for all bookings associated with a trip.
  - If there are no bookings, totalTripPrice must be 0.
  - Persist or expose totalTripPrice as a computed/read-only property on the Trip entity or compute server-side in OData/CDS/service layer.

- Booking price validation:
  - If a trip has one or more bookings, each booking.price must be > 0.
  - Enforce validation on create/update of Booking entities. Return a validation error if any booking.price <= 0.

- Navigation and detail view:
  - On List Report: show trip rows with a column or link to navigate to the Trip Object Page (details).
  - On Object Page (Trip details): show bookings as a table/list; clicking a booking entry navigates to a Booking detail view or opens a booking object page/modal with full booking information.

- Data model recommendations for code generation:
  - Trip entity: id, traveler (employee), startDate, endDate, totalTripPrice (computed), notes (0..n)
  - Booking entity: id, tripId (FK), type, supplier, price (>0), currency, details
  - Relations: Trip 1..n Booking; Trip 0..n Notes

**LANGUAGE**: Plaintext

**CODE**:
```
Business rules to implement:

1) totalTripPrice = SUM(booking.price for booking in Trip.bookings)
   - If Trip.bookings is empty -> totalTripPrice = 0
   - Implement as computed property in service/model layer (preferred) or UI binding

2) Validation on Booking:
   - On create/update: if Trip has >=1 Booking then for each Booking:
       require booking.price > 0
   - Return validation error with field context if violated

3) UI navigation:
   - List Report: row -> open Trip Object Page
   - Trip Object Page: show bookings list; clicking booking -> Booking detail

4) Suggested entities:
   - Trip { id, employeeId, startDate, endDate, totalTripPrice (computed), notes[] }
   - Booking { id, tripId, type, supplier, price (numeric >0), currency, details }
```

**STEP**: 4 — Apply in Fiori tools / code generation workflows

**DESCRIPTION**: Use the markdown file and image assets as input to your RAG or code generation pipeline. Agents should parse the markdown text, use the provided images for UI mockups, and implement the business rules and data model above when scaffolding UI5 List Report + Object Page and backend (CDS/OData/REST) artifacts. Ensure validations are enforced server-side and reflected in the UI.

**LANGUAGE**: Plaintext

**CODE**:
```
Suggested workflow for agents:
1) Parse Manage_Travel_App.md for UI requirements and image references
2) Create Trip and Booking entities in data model (CDS or REST)
3) Implement computed property totalTripPrice in service layer
4) Add booking.price validation on create/update
5) Scaffold List Report for Trip and Object Page for Trip details with bookings table
6) Wire navigation: list row -> object page; booking row -> booking detail
7) Include Travel_List.jpeg and Travel_Details.jpeg for prototyping UI mockups
```

fiori-tools
SAP
Business Application Studio
UI5
List Report
Object Page
travel
markdown
assets
validation


**TITLE**: Manage Travel List Report Page — Add Example Images to Workspace

**INTRODUCTION**: This document explains how to add the example application model and page UI images for the "Manage Travel List Report Page" sample into your SAP Business Application Studio workspace. These images are required by the example and must be placed in the project's images folder with the exact filenames shown below.

**TAGS**: fiori-tools, sap, business-application-studio, ui5, mdc, images, app-model, report-page

**STEP**: 1 — Create images folder in workspace

**DESCRIPTION**: Create (if it doesn't exist) an images folder at the project root to store the example images. Use the terminal in SAP Business Application Studio or your local shell.

**LANGUAGE**: Bash

**CODE**:
```bash
# from your project root in SAP Business Application Studio terminal
mkdir -p images
ls -la images
```

**STEP**: 2 — Save and upload the example images into the images folder

**DESCRIPTION**: Save the two example image files from the documentation to your local machine, then upload or copy them into the workspace images folder. Use the exact filenames and relative paths shown so sample references work correctly.

Required filenames and relative paths:
- images/Fiori_App_for_Managing_Travel_Application_Model_7ba4a29.png
- images/Manage_Travel_Fiori_App_Page_UI_6d7f22d.jpg

Options:
- If you downloaded the files to a local folder, copy them into the workspace:
- If using the BAS file upload UI, right-click the project folder -> Upload -> select each file and ensure they appear under the images folder.

**LANGUAGE**: Bash

**CODE**:
```bash
# Example: copy from a local download directory into the workspace images folder
# Replace /path/to/downloads with your actual download path
cp /path/to/downloads/Fiori_App_for_Managing_Travel_Application_Model_7ba4a29.png images/
cp /path/to/downloads/Manage_Travel_Fiori_App_Page_UI_6d7f22d.jpg images/

# Or move files:
# mv /path/to/downloads/*.png images/
# mv /path/to/downloads/*.jpg images/
```

**STEP**: 3 — Verify files are present and reference-ready

**DESCRIPTION**: Confirm the files exist with correct names and relative paths. Verify from the terminal or BAS Project Explorer. Use these paths in your sample app, documentation, or templates.

**LANGUAGE**: Bash

**CODE**:
```bash
# list the files and show file sizes
ls -lh images/Fiori_App_for_Managing_Travel_Application_Model_7ba4a29.png
ls -lh images/Manage_Travel_Fiori_App_Page_UI_6d7f22d.jpg

# quick file-type check
file images/Fiori_App_for_Managing_Travel_Application_Model_7ba4a29.png
file images/Manage_Travel_Fiori_App_Page_UI_6d7f22d.jpg
```

**STEP**: 4 — Use the images in the project

**DESCRIPTION**: Reference the images from UI or documentation using the relative paths. Example usage in README or view templates should point to images/Fiori_App_for_Managing_Travel_Application_Model_7ba4a29.png and images/Manage_Travel_Fiori_App_Page_UI_6d7f22d.jpg.

**LANGUAGE**: Plain text / Example HTML reference

**CODE**:
```html
<!-- Example: reference image in an HTML or markdown file -->
<img src="images/Fiori_App_for_Managing_Travel_Application_Model_7ba4a29.png" alt="Fiori App for Managing Travel - Application Model">
<img src="images/Manage_Travel_Fiori_App_Page_UI_6d7f22d.jpg" alt="Manage Travel Fiori App - Page UI">
```

fiori-tools sap business-application-studio ui5 mdc images app-model report-page


**TITLE**: Experimental: Developing a CAP Application Using Application Modeler Advanced Features

**INTRODUCTION**:
Action-oriented guide for using Application Modeler advanced (experimental) features in a CAP project generated by the Project Accelerator. Covers how to auto-generate entity properties, 1:n and 1:1 entities, annotations for charts, and re-generate mock data with AI. Includes exact file locations that are modified by these actions.

**TAGS**: fiori-tools, CAP, application-modeler, advanced-features, cds, srv, test-data, mock-data, value-help, annotations

**STEP**: Caution and environment notes

**DESCRIPTION**:
Experimental features are unstable and not supported for production. Do not use on production/live data. When service or database schema files are updated outside Application Modeler (except formatting-only changes), advanced features are turned off. Ensure you have backups before experimenting.

**LANGUAGE**: Text

**CODE**:
```text
Caution: Experimental features may be changed without notice. Do not use in production.
Files that can be updated by these features:
- db/schema.cds
- srv/service.cds
- test/data/*.csv
- manifest.json
- (UI) page configuration files edited by Application Modeler
```

**STEP**: Add UI Features and Auto-Generate New Entity Properties

**DESCRIPTION**:
Use the Page Editor to add a column or UI property that does not yet exist in the CDS model. Enter a new property name in the editor; Application Modeler will:

- Append the new property to db/schema.cds.
- Update or create the matching .csv in test/data with generic mock data for the chosen type.
- Update annotations/manifest entries required for the UI.

Action steps (exact UI flow):
1. Open the Page Editor and add a new column (see Maintaining Annotation-Based Elements).
2. In the Columns dropdown, choose Enter new property and type the property name.
3. Optionally change the type (e.g., click String).
4. Click Add.

After these steps, refine the generated mock data in test/data/*.csv to match your domain.

**LANGUAGE**: Text

**CODE**:
```text
Files modified:
- db/schema.cds         <-- new property added to the relevant entity
- test/data/<entity>.csv <-- generic mock data added/updated for the property
Related UI action: Page Editor -> Columns -> Enter new property -> Add
```

**STEP**: Add Tables/Charts and Auto-Generate New Entities (1:n)

**DESCRIPTION**:
When adding analytical chart views, table/chart views in list reports, or table/chart sections in object pages, you can create a new 1:n entity directly from the Page Editor. Application Modeler will:

- Generate a new entity in db/schema.cds containing a UUID key and the properties you created (dimension and measure).
- Add a reference to that entity in srv/service.cds.
- Annotate the entity for aggregation when a chart is created (adds @Aggregation.ApplySupported with GroupableProperties and AggregatableProperties).
- Auto-generate a new CSV in test/data with generic mock data for UUID, measures, and dimensions.

Action steps (exact UI flow):
1. In Page Editor add a chart view.
2. In Entity dropdown choose Enter new entity and type a name.
3. Select Chart Type.
4. In Dimension dropdown choose Enter new property and type dimension name.
5. Optionally change type (e.g., String).
6. Select Create new measure.
7. In Property dropdown choose Enter new property and type measure name.
8. Optionally change type (e.g., Integer).
9. Select Aggregation Method.
10. Click Add.

Resulting artifacts are ready for further refinement.

**LANGUAGE**: Text

**CODE**:
```text
Files created/updated:
- db/schema.cds
  - New entity with:
    - UUID key property
    - Dimension property (as entered)
    - Measure property (as entered)
    - @Aggregation.ApplySupported annotation with:
      - GroupableProperties: [<dimension>]
      - AggregatableProperties: [<measure>]
- srv/service.cds   <-- reference to new entity and relevant annotations
- test/data/<newEntity>.csv  <-- generic mock data generated
UI action: Page Editor -> Chart View -> Enter new entity -> Add
```

**STEP**: Add Value Help and Auto-Generate New Entities (1:1)

**DESCRIPTION**:
Add Value Help for fields/filters in the Page Editor when the backing entity or properties do not exist. Application Modeler will generate the 1:1 associated entity and wiring automatically. The generated value-help entity will NOT include a UUID key. The main entity will receive a 1:1 association to the new value-help entity and annotations will be created.

Action steps (exact UI flow):
1. In Page Editor for an object page, search for display type.
2. Set Display Type to Value Help.
3. In Value Source Entity choose Enter new entity and type a name.
4. In Value Source Property choose Enter new property and type a name (key).
5. Optionally set Value Description Property by choosing Enter new property and typing a name.
6. Optionally set Text Arrangement if you provided a description property.
7. Optionally toggle Display as Dropdown.
8. Optionally Add Column under Results List; choose Enter new property to add columns to results.
   - Restriction: you cannot choose UUID for properties in value help entities.
9. Optionally Add Sort Property under Sort Order.
10. Click Apply.

What is updated/generated:
- New 1:1 value help entity in db/schema.cds (no UUID).
- The main entity gains a 1:1 association referencing the new entity (added to db/schema.cds).
- Annotations for value help are generated and added to the UI configuration and manifest.json.
- The initial primitive property is replaced in annotations/manifest.json by navigation to the key of the associated entity.
- test/data/<valueHelpEntity>.csv is created with mock data for the key (matching main entity values) and generic mock data for other properties.

**LANGUAGE**: Text

**CODE**:
```text
Files created/updated:
- db/schema.cds
  - New value-help entity (no UUID)
  - 1:1 association added on the main entity
- manifest.json
  - UI annotations updated to use navigation to the key of the value-help entity
- test/data/<valueHelpEntity>.csv  <-- mock data added (key matches main entity where applicable)
Restriction: Do not use UUID type when defining properties for value help.
UI action: Page Editor -> Field -> Display Type: Value Help -> Enter new entity -> Apply
```

**STEP**: Generate Mock Data with AI

**DESCRIPTION**:
Refine generic mock data generated by Application Modeler using the built-in AI mock data generator to produce meaningful, domain-relevant test data.

Action steps:
1. Open the Page Editor.
2. Click the Generate Mock Data with AI icon (SAP icon TNT-V3).
3. Click Generate.

The system will re-generate/refine entries in test/data/*.csv to provide context-relevant values.

**LANGUAGE**: Text

**CODE**:
```text
UI action:
- Page Editor -> Click "Generate Mock Data with AI" icon -> Click Generate

Files updated:
- test/data/*.csv  <-- mock data refined with AI
```

**STEP**: UI and Resource References

**DESCRIPTION**:
Include required static resources and images used by Application Modeler pages.

**LANGUAGE**: HTML

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

**LANGUAGE**: Text

**CODE**:
```text
Image reference used in docs:
- images/Add_Basic_Columns_-_Advanced_Features_f782c35.png
```

fiori-tools CAP application-modeler advanced-features cds srv test-data mock-data value-help annotations


**TITLE**: Extending an Existing SAP Fiori/UI5 Application

**INTRODUCTION**: Practical, code-focused guide for creating and wiring a UI5/Fiori extension inside an existing application. Includes minimal required file additions and manifest changes to add a new route/view, controller logic, and i18n text. Use this when you need to add a custom page or feature to an already deployed Fiori app without changing core application logic.

**TAGS**: fiori-tools, sap-ui5, ui5, fiori-elements, extension, manifest, routing, controller, i18n

STEP: 1 — Inspect the existing app and choose extension location

DESCRIPTION: Confirm the app structure (usually webapp/ with manifest.json, Component.js, i18n folder). Decide a folder namespace for extension files (e.g., webapp/ext). You will add a new view, controller, and manifest routing/target entry.

LANGUAGE: Notes

CODE:
```text
Expected project layout (typical):
/webapp/manifest.json
/webapp/Component.js
/webapp/index.html
/webapp/i18n/i18n.properties
/webapp/ext/     <-- create this folder for extension files
```

STEP: 2 — Add an XML view for the extension

DESCRIPTION: Create a new XML view in webapp/ext to host the UI5 controls for the extension. Keep viewName consistent with manifest targets (e.g., ext.MyExtension).

LANGUAGE: XML

CODE:
```xml
<!-- File: webapp/ext/MyExtension.view.xml -->
<mvc:View
  controllerName="ext.MyExtension"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
  <Page id="extensionPage" title="{i18n>extensionTitle}">
    <content>
      <Button id="extButton" text="Press Me" press=".onPress"/>
    </content>
  </Page>
</mvc:View>
```

STEP: 3 — Implement the controller for the view

DESCRIPTION: Add an MVC controller to handle events and logic for the extension view. Keep controller name matching controllerName in the XML view.

LANGUAGE: JavaScript

CODE:
```javascript
// File: webapp/ext/MyExtension.controller.js
sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/m/MessageToast"
], function(Controller, MessageToast) {
  "use strict";
  return Controller.extend("ext.MyExtension", {
    onInit: function() {
      // initialization logic if needed
    },

    onPress: function(oEvent) {
      MessageToast.show("Button pressed from extension");
      // add extension-specific logic here (navigation, OData calls, UI update, etc.)
    }
  });
});
```

STEP: 4 — Register a new route and target in manifest.json

DESCRIPTION: Edit webapp/manifest.json to add a route and target for your extension view. Ensure controlId and controlAggregation match the app shell (commonly "app" and "pages" for SplitApp / App controls). Add the target pointing to the view created in step 2.

LANGUAGE: JSON

CODE:
```json
// File: webapp/manifest.json
{
  "sap.ui5": {
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "controlId": "app",
        "controlAggregation": "pages",
        "async": true
      },
      "routes": [
        {
          "pattern": "myExtension",
          "name": "MyExtension",
          "target": "MyExtension"
        }
      ],
      "targets": {
        "MyExtension": {
          "viewName": "ext.MyExtension",
          "viewLevel": 1,
          "viewType": "XML",
          "controlAggregation": "pages",
          "controlId": "app"
        }
      }
    }
  }
}
```

STEP: 5 — Add i18n entry for UI text

DESCRIPTION: Update webapp/i18n/i18n.properties so the view title and any other UI strings are localized.

LANGUAGE: Properties

CODE:
```properties
# File: webapp/i18n/i18n.properties
extensionTitle=Extension Page
```

STEP: 6 — (Optional) Add a lightweight Component for the extension

DESCRIPTION: If you prefer the extension to have its own Component metadata or be bootstrapped separately, add Component.js referencing the manifest json. Otherwise the main app component will load the extension view via routing.

LANGUAGE: JavaScript

CODE:
```javascript
// File: webapp/ext/Component.js
sap.ui.define(["sap/ui/core/UIComponent"], function(UIComponent) {
  "use strict";
  return UIComponent.extend("ext.Component", {
    metadata: {
      manifest: "json"
    },
    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      // extension-specific initialization
    }
  });
});
```

STEP: 7 — Navigate to the extension programmatically or via URL

DESCRIPTION: Use the router of the main app to navigate to the extension route, or open the hash URL directly (e.g., #/myExtension). Example code to navigate from any controller.

LANGUAGE: JavaScript

CODE:
```javascript
// Example: navigate from an existing controller to the extension route
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("MyExtension"); // navigates to #/myExtension
```

STEP: 8 — Testing and validation

DESCRIPTION: Run the app locally (e.g., with UI5 tooling or your existing dev server). Validate:
- The new route (#/myExtension) loads the extension view
- The button press triggers the controller onPress handler
- i18n title resolves to extensionTitle

LANGUAGE: Notes

CODE:
```text
Typical test checklist:
- Start UI5 dev server / run app
- Open URL: http://localhost:<port>/index.html#/myExtension
- Confirm page title equals value from i18n
- Press button and observe MessageToast
```

STEP: 9 — Integrate with existing extension points (Fiori Elements) — guidance

DESCRIPTION: If the app is Fiori Elements and exposes extension points, implement extension fragments or controllers in the ext/ folder and reference them according to Fiori Elements extension documentation. Typical steps:
- Locate the extension point key in the generated view XML or annotations.
- Create fragment or controller in webapp/ext and reference it by name in the extension configuration.
- Do not change framework-generated files; use the ext/ folder pattern and manifest additions.

LANGUAGE: Notes

CODE:
```text
Guidance:
- Use fragments (.fragment.xml) for small UI insertions.
- Use controllers (.controller.js) for event handling.
- Register fragments/controllers in the manifest or annotation-based extension declarations as required by the Fiori Elements app.
```

Step 10 — Keep the extension modular and reversible

DESCRIPTION: Put all extension files under a single folder (e.g., webapp/ext) and avoid editing core business logic. This makes it easy to remove or port the extension later.

LANGUAGE: Notes

CODE:
```text
Recommended folder:
webapp/ext/
  MyExtension.view.xml
  MyExtension.controller.js
  Component.js     (optional)
  fragments/       (optional)
  i18n-ext.properties (optional, if separate localization is needed)
```

fiori-tools sap-ui5 ui5 fiori-elements extension manifest routing controller i18n


**TITLE**: Extending an SAP Fiori Application for an On-Premise System (Adaptation Projects)

**INTRODUCTION**: Practical checklist and actionable steps to prepare, verify, and work with SAP Fiori adaptation (extension) projects for on-premise ABAP systems using Visual Studio Code. Use this as a developer-oriented runbook to validate system requirements, application readiness, and the typical workflow for creating, previewing, and deploying adaptation projects.

**TAGS**: fiori-tools, sap, abap, sapui5, adaptation, extensions, VSCode, on-premise

**STEP**: 1 — Experimental integration warning
**DESCRIPTION**: This integration is experimental. Run these steps in a non-production environment first.
**LANGUAGE**: text
**CODE**:
```text
Caution: Experimental integration. Use only in non-productive environments for initial testing.
```

**STEP**: 2 — General prerequisites: connect ABAP system and activate services
**DESCRIPTION**: Ensure your on-premise ABAP system connection is configured in VS Code as described in "Managing SAP System Connections". Activate required services and grant access permissions used by ADT and the Adaptation Editor.
- Confirm you have a configured ABAP system connection (see "Managing SAP System Connections").
- Activate these services on the ABAP system.
- Ensure the connection has access to the discovery endpoint used when creating adaptation projects.
- Optionally control finer-grained access using authorization object S_ADT_RES and its URI field.
**LANGUAGE**: text
**CODE**:
```text
Required service endpoints (activate on ABAP system):
/sap/bc/adt
/sap/bc/ui2/app_index/
/sap/bc/adt/discovery

Authorization object:
S_ADT_RES  (use the URI field to restrict access to adaptation resources)
```

**STEP**: 3 — Adaptation project server and app version prerequisites
**DESCRIPTION**: Verify ABAP system and SAPUI5 version constraints before creating an adaptation project. These are hard requirements for support and deployment.
**LANGUAGE**: text
**CODE**:
```text
Server / base app version requirements for adaptation projects:
- ABAP system software component SAP_UI >= 7.54
- Base application minimum SAPUI5 version >= 1.30
- Selected application system SAPUI5 version >= 1.72 (to be eligible for adaptation projects)
```

**STEP**: 4 — Adaptation project limitations and special cases for using an adaptation project as a basis
**DESCRIPTION**: Conditions when adaptation projects can be used as bases and required remediation steps for older SAPUI5 versions.
- If the selected system has SAPUI5 < 1.96, implement SAP Note 3223667 on the system.
- If SAPUI5 < 1.90, the system does not support using an adaptation project as a base for a new adaptation project — update SAPUI5 to proceed.
- Adaptation projects cannot be used as a basis if the base application requires a mandatory start parameter or is an application variant already deployed with an adaptation project.
**LANGUAGE**: text
**CODE**:
```text
Notes:
- If SAPUI5 < 1.96  => implement SAP Note 3223667
- If SAPUI5 < 1.90  => NOT supported as a base; update SAPUI5

Not supported as a basis:
- Applications requiring a mandatory parameter to start
- Application variants already deployed with an adaptation project
```

**STEP**: 5 — Application file checks (manifest and scaffolding)
**DESCRIPTION**: Confirm the target application meets structural requirements for adaptation projects:
- The application must contain a manifest.json file.
- The application must not be a scaffolding app that uses sap.ca.scfld.md in manifest.json.
- The system SAPUI5 version used by the application must meet the constraints in Step 3.
Use these quick pattern checks against the manifest.json to detect disallowed scaffolding.
**LANGUAGE**: JSON
**CODE**:
```json
// Example checks in manifest.json (inspect these keys)
{
  "sap.ui5": { /* ... */ },
  "sap.ui": { /* ... */ },
  "sap.ca": {
    "scfld": "md" // presence indicates a scaffolding application (not supported)
  }
}
```

**STEP**: 6 — Typical developer workflow (create → source control → adapt → preview → deploy)
**DESCRIPTION**: Follow this recommended workflow:
1. Create an Adaptation Project in VS Code (use the Adaptation Project wizard/extension).
2. (Optional but recommended) Put the project in source control (Git) to maintain source and enable local previews and modifications.
3. Make adaptations using the Adaptation Editor (in VS Code) or by editing project files directly.
4. Preview changes in the Adaptation Editor preview and in a separate browser tab (sandbox-like preview; not Fiori Launchpad).
5. Deploy the adaptation project to the ABAP repository when ready.
**LANGUAGE**: text
**CODE**:
```text
Workflow:
1. Create adaptation project (VS Code)
2. Add project to Git (recommended)
3. Edit/extend using Adaptation Editor or source files
4. Preview changes (Adaptation Editor preview + browser tab)
5. Deploy to ABAP repository
```

**STEP**: 7 — Deployment and sandbox limitations
**DESCRIPTION**: Be aware of deployment constraints and preview limitations:
- You cannot deploy an adaptation project to a package enabled for "ABAP for Cloud Development". You may create and use the Adaptation Editor locally but deployment will fail.
- Preview environments (Adaptation Editor preview and browser tab) are sandbox-like and operate outside SAP Fiori launchpad; features that rely on Fiori launchpad (for example cross-app navigation) may not behave as in production. Those features typically function correctly after deployment to the real launchpad.
**LANGUAGE**: text
**CODE**:
```text
Deployment constraints:
- Packages enabled for "ABAP for Cloud Development" => adaptation project deployment NOT supported

Preview limitations:
- Adaptation Editor and browser preview are sandbox-like (not Fiori Launchpad)
- Launchpad-dependent features (e.g., cross-app navigation) may not function in preview
```

**STEP**: 8 — Quick verification checklist for automation or pre-flight scripts
**DESCRIPTION**: Use this compact checklist in scripts or CI checks before creating or deploying adaptation projects.
**LANGUAGE**: text
**CODE**:
```text
Pre-flight checklist:
- Confirm ABAP connection configured in VS Code
- Confirm services active: /sap/bc/adt, /sap/bc/ui2/app_index/, /sap/bc/adt/discovery
- Confirm S_ADT_RES access for the connection (URI field)
- Confirm SAP_UI >= 7.54 on server
- Confirm application contains manifest.json
- Confirm application system SAPUI5 version >= 1.72
- Confirm application is NOT scaffolding (no sap.ca.scfld.md entry)
- Confirm package is NOT enabled for ABAP for Cloud Development (if planning to deploy)
- If SAPUI5 < 1.96 => ensure SAP Note 3223667 implemented
- If SAPUI5 < 1.90 => do NOT use adaptation project as a base; update SAPUI5
```

fiori-tools sap abap sapui5 adaptation extensions VSCode on-premise


**TITLE**: Extending an SAP Fiori Application with an SAPUI5 Adaptation Project (SAP S/4HANA Cloud & SAP BTP, ABAP Environment)

**INTRODUCTION**: This guide lists the exact checks, prerequisites, and resources required to create an SAPUI5 Adaptation Project to extend SAP Fiori elements or freestyle SAPUI5 applications by producing an application variant. Use this as a concise checklist to prepare environments, verify extensibility, assign required roles/catalogs, and connect development tooling (for example, SAP Business Application Studio).

**TAGS**: fiori-tools, sapui5, sap-s-4hana-cloud, sap-btp, abap, adaptation-project, extensibility, developer-tenant, destination, git

**STEP**: 1 — Overview

**DESCRIPTION**: Purpose and high-level behavior. Use an SAPUI5 Adaptation Project to extend SAP Fiori elements or freestyle SAPUI5 applications with an application variant without modifying the original application. The application variant is maintained separately (source code can be stored in Git). Use the adaptation project to preview and modify the project source code.

**LANGUAGE**: Text

**CODE**:
```Text
Use an SAPUI5 Adaptation Project to extend SAP Fiori elements or freestyle SAPUI5 applications with an application variant without changing the original application.
```

**STEP**: 2 — Verify Application Extensibility

**DESCRIPTION**: Before creating an adaptation project, verify that the SAP-delivered application is released for extensibility. Check the application’s implementation information under "Extensibility (extensibility of the SAPUI5 application in the front-end server)" in the SAP Fiori Apps Reference Library.

**LANGUAGE**: Text

**CODE**:
```Text
SAP Fiori Apps Reference Library:
https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/homePage

Check: Implementation information -> Extensibility (extensibility of the SAPUI5 application in the front-end server)
```

**STEP**: 3 — If Not Supported: Submit Influence Request

**DESCRIPTION**: If the SAP-delivered application is not supported for adaptation projects in SAP S/4HANA Cloud, submit a request via the Customer Influence portal.

**LANGUAGE**: Text

**CODE**:
```Text
Influence Opportunity Homepage - Customer Influence:
https://influence.sap.com/sap/ino/#/campaign/1177
```

**STEP**: 4 — Ensure Proper System Landscape and Developer Tenant

**DESCRIPTION**: The adaptation-project feature requires a developer tenant and is available only in a 3-system landscape for SAP S/4HANA Cloud. Confirm your landscape setup and access rights before proceeding.

**LANGUAGE**: Text

**CODE**:
```Text
System Landscapes in SAP S/4HANA Cloud:
https://help.sap.com/docs/SAP_S4HANA_CLOUD/a630d57fc5004c6383e7a81efee7a8bb/aa60b129af7b4ce8ae052618c8315d29.html
```

**STEP**: 5 — Release Reference for Extensibility

**DESCRIPTION**: Review the official documentation about releasing an SAP Fiori application for extensibility in adaptation projects (S/4HANA Cloud and SAP BTP ABAP Environment) to confirm app-specific requirements and notes.

**LANGUAGE**: Text

**CODE**:
```Text
Releasing an SAP Fiori Application to Be Extensible in Adaptation Projects on SAP S/4HANA Cloud and SAP BTP, ABAP Environment:
releasing-an-sap-fiori-application-to-be-extensible-in-adaptation-projects-on-sap-s-4hana-1046206.md
```

**STEP**: 6 — Create Destination for Development Tenant

**DESCRIPTION**: Ensure a destination exists to connect your development environment (for example, SAP Business Application Studio) to the SAP S/4HANA Cloud development tenant. Create or validate the destination configuration before starting the adaptation project.

**LANGUAGE**: Text

**CODE**:
```Text
Create a Destination to Connect to SAP Business Application Studio:
https://help.sap.com/docs/SAP_S4HANA_CLOUD/6aa39f1ac05441e5a23f484f31e477e7/0af2819bbe064a3da455753c8518dd81.html
```

**STEP**: 7 — Assign Required Business Catalogs to Developer

**DESCRIPTION**: The developer user must have the required business catalogs assigned so the adaptation project can be created and maintained. Ensure the following catalogs (examples provided) are assigned:

**LANGUAGE**: Text

**CODE**:
```Text
Required business catalogs (examples):
- Development - UI Deployment (SAP_A4C_BC_DEV_UID_PC)
- Business catalog to retrieve the list of extensible apps (for example SAP_A4C_BC_DEV_OBJ_DIS_PC)
```

**STEP**: 8 — Use Source Control (Git) and Project Source Code

**DESCRIPTION**: Use Git or another source-control system to maintain the adaptation-project source code. You must use the project source code to preview and modify the adaptation. Confirm access to your repository and clone the project into your development workspace to continue.

**LANGUAGE**: Text

**CODE**:
```Text
Git Source Control:
https://help.sap.com/docs/bas/sap-business-application-studio/git-source-control

Note: Use the project source code to preview and modify adaptation projects.
```

**STEP**: 9 — Architecture Diagram & Project Files

**DESCRIPTION**: Reference the architecture diagram that illustrates the relationship between the source application and the application variant created by the adaptation project. Keep image and project assets with the project for documentation and onboarding.

**LANGUAGE**: Text

**CODE**:
```Text
Architecture diagram path (relative to documentation):
images/AdaptationProjectS4HCarchitecture_f84e21c.png

Note: Source application = light blue, Application variant (adaptation project) = dark blue.
```

fiori-tools sapui5 sap-s-4hana-cloud sap-btp abap adaptation-project extensibility developer-tenant destination git


**TITLE**: Generate an SAP Fiori Elements Application Using an Image (Project Accelerator)

**INTRODUCTION**: Step-by-step instructions to generate an SAP Fiori elements application with the Project Accelerator (SAP Fiori tools AI) using a single image uploaded to your workspace. Use this when your business requirement is represented by a single-list report or object page UI image. For multiple images + text use: generating-an-application-using-text-and-images-5dd43dc.md.

**TAGS**: fiori-tools, sap-fiori, project-accelerator, sap-fiori-tools-ai, workspace, image

STEP: 1 — Prepare the Image

DESCRIPTION: Create or edit a single image that represents the application model or UI of one list report or object page. Label elements in English for best results. Reference example: example-manage-travel-list-report-page-480d33c.md.

LANGUAGE: Text

CODE:
```text
- Image must represent a single list report or object page UI
- Label UI elements in English for best results
- Reference example file: example-manage-travel-list-report-page-480d33c.md
```

STEP: 2 — Upload the Image to Your Workspace Folder

DESCRIPTION: Upload the prepared image file into your workspace folder in SAP Business Application Studio. The image must be accessible from the workspace path where Project Accelerator will generate the project.

LANGUAGE: Text

CODE:
```text
- Upload image to workspace directory in SAP Business Application Studio
- Ensure the file name and path are correct and accessible
```

STEP: 3 — Launch the Project Accelerator (Two Options)

DESCRIPTION: Open Project Accelerator in SAP Fiori tools AI using either the Command Palette or the SAP Fiori activity icon.

LANGUAGE: Text

CODE:
```text
Option A: Command Palette
- Open Command Palette: [CMD/CTRL] + [Shift] + [P]
- Run the command:
  Fiori tools AI: Launch the Project Accelerator

Option B: SAP Fiori Activity
- Click the SAP Fiori icon on the activity bar (icon class: SAP-icons-TNT-V3)
```

STEP: 4 — Important Constraint for Queries

DESCRIPTION: Once Project Accelerator is open, your query must be specifically about generating an SAP Fiori elements application. General AI assistant requests are not supported in this context. Also: the Project Accelerator cannot generate a second application in the same project — ensure the request targets a single application.

LANGUAGE: Text

CODE:
```text
- Query must be related to generating an SAP Fiori elements application only.
- The Project Accelerator cannot generate a second application in the same project.
```

STEP: 5 — Choose the Image File in Project Accelerator

DESCRIPTION: In the Project Accelerator UI, click "Choose File (.docx, .md, .txt, .jpg)" and select the uploaded image. Supported upload types include .docx, .md, .txt, .jpg. Ensure you only reference a single application in your request.

LANGUAGE: Text

CODE:
```text
- Click: Choose File (.docx, .md, .txt, .jpg)
- Supported file types: .docx, .md, .txt, .jpg
- Select the workspace image you uploaded
```

STEP: 6 — Provide Project Folder Path and Generate

DESCRIPTION: Enter the Project Folder Path (workspace destination) where the generated project will be created. Click "Generate" to start generation. Generation time varies based on requirements.

LANGUAGE: Text

CODE:
```text
- Provide Project Folder Path (where the project should be generated)
- Click: Generate
- Generation may take some time depending on the business requirement
```

STEP: 7 — Stop Generation (Optional)

DESCRIPTION: If you need to cancel generation to edit the business requirement, click the Stop icon (white large square). Confirm by clicking "Yes" at the "Are you sure you want to stop generation?" prompt. After stopping, modify the image or request and generate again.

LANGUAGE: Text

CODE:
```text
- To cancel: click the Stop icon (white_large_square)
- Confirm: "Are you sure you want to stop generation?" -> Click Yes
- After stopping, edit your business requirement and re-run Generate
```

STEP: 8 — Result: Project Created and Application Information Launched

DESCRIPTION: The generated project is added to your filesystem at the Project Folder Path you provided. Project Accelerator automatically opens "Application Information" for the new SAP Fiori application. Continue editing using SAP Fiori tools.

LANGUAGE: Text

CODE:
```text
- Generated project location: <your provided Project Folder Path> in workspace filesystem
- The Project Accelerator opens Application Information for the generated app
- Continue development with SAP Fiori tools
```

STEP: Reference — HTML/CSS Asset (optional)

DESCRIPTION: Example link tag for including SAP icons CSS in documentation or local preview (preserve original usage if required in examples).

LANGUAGE: HTML

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

fiori-tools sap-fiori project-accelerator sap-fiori-tools-ai workspace image


**TITLE**: Generate an SAP Fiori Elements Application from Text and Images using Project Accelerator

**INTRODUCTION**: Generate an SAP Fiori Elements application in SAP Business Application Studio using the Project Accelerator (Fiori tools AI) by providing business requirements as a single .docx or .md file that includes images and accompanying explanatory text. This guide describes required file format rules, workspace placement, launching the accelerator, selecting the input file, generating the project, and stopping generation if needed.

**TAGS**: fiori-tools, project-accelerator, sap-fiori, sap-business-application-studio, docx, markdown, images, sap-fiori-elements

**STEP**: 1 — Prepare the business requirements file

**DESCRIPTION**: Create a single file containing your business requirements. Choose either a Microsoft Word (.docx) file or a Markdown (.md) file that references images. If using Markdown, ensure images are uploaded to your workspace folder in SAP Business Application Studio and referenced with standard Markdown image syntax. Each image must represent a single list report or object page and be accompanied by text explaining the relation between pages and any additional details (code list values, hidden sections/tabs, etc.). If a page has multiple hidden views, include multiple images showing the different states and text mapping images to sections. For .docx files, include only text and images — avoid advanced formatting (no headers/footers/tables).

**LANGUAGE**: HTML (example stylesheet link)

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

**STEP**: 2 — Naming and example file

**DESCRIPTION**: Label images in English and follow the example naming and structure conventions. Use the provided example as a template for organizing list reports and object pages.

**LANGUAGE**: Markdown / Filename

**CODE**:
```text
Example: example-manage-travel-app-list-report-object-page-d17b256.md
```

**STEP**: 3 — Upload files to your workspace

**DESCRIPTION**: Upload your .docx or .md file and any referenced images to your workspace folder in SAP Business Application Studio before launching the Project Accelerator. For Markdown, confirm image paths are relative to the workspace folder.

**LANGUAGE**: Text

**CODE**:
```text
Accepted file types: .docx, .md, .txt, .jpg
Place: workspace folder in SAP Business Application Studio (project root or subfolder)
```

**STEP**: 4 — Launch the Project Accelerator

**DESCRIPTION**: Open the Project Accelerator in SAP Fiori tools AI. Use either the Command Palette keyboard shortcut or the SAP Fiori icon on the activity bar.

**LANGUAGE**: Command / Keystroke

**CODE**:
```text
Command Palette: [CMD/CTRL] + [Shift] + [P]
Command: `Fiori tools AI: Launch the Project Accelerator`
SAP Fiori icon: click the SAP Fiori icon in the activity bar
```

**STEP**: 5 — Choose the input file in Project Accelerator

**DESCRIPTION**: In Project Accelerator, click "Choose File (.docx, .md, .txt, .jpg)" and select the file you uploaded. Ensure the request refers to a single application (the accelerator cannot generate a second application for the same project).

**LANGUAGE**: Text

**CODE**:
```text
UI action: Project Accelerator -> Choose File (.docx, .md, .txt, .jpg) -> Select your file
Note: Project Accelerator supports one application generation per project folder.
```

**STEP**: 6 — Provide project folder path and generate

**DESCRIPTION**: Enter the Project Folder Path where the generated project should be created. Click "Generate". Generation time varies depending on the complexity of your business requirements.

**LANGUAGE**: Text

**CODE**:
```text
Input: Project Folder Path (e.g., /home/user/projects/my-fiori-app)
Action: Click Generate
```

**STEP**: 7 — Stop generation (optional)

**DESCRIPTION**: To cancel generation and edit requirements, click the Stop icon and confirm "Yes" when prompted. This stops generation so you can update your input file and re-run generation.

**LANGUAGE**: Text / UI action

**CODE**:
```text
UI action: Click Stop (white_large_square icon) -> Confirm "Are you sure you want to stop generation?" -> Click Yes
```

**STEP**: 8 — Locate generated project and next steps

**DESCRIPTION**: After successful generation, the project is created at the Project Folder Path you provided. Application Information is launched for the generated SAP Fiori application. Use SAP Fiori tools to refine app structure, UI, and data binding as needed.

**LANGUAGE**: Text

**CODE**:
```text
Output: Generated project located at the specified Project Folder Path
Next steps: Open Application Information in SAP Fiori tools -> Edit pages/views -> Connect to backend / OData services
```

fiori-tools project-accelerator sap-fiori sap-business-application-studio docx markdown images sap-fiori-elements


**TITLE**: Generate an SAP Fiori elements Application Using Text with Project Accelerator (SAP Fiori tools AI)

**INTRODUCTION**: Step-by-step, code-focused instructions for launching the Project Accelerator (SAP Fiori tools AI), providing business requirements via text or file input, generating a single SAP Fiori elements application into a chosen project folder, and stopping generation if needed. Use these commands and UI labels directly when scripting or automating interactions or when instructing an AI agent to generate code or configuration.

**TAGS**: fiori-tools, sap-fiori, project-accelerator, joule, sap-business-application-studio, ai, automation

**STEP**: Assets / required styles
**DESCRIPTION**: Include the provided SAP icons stylesheet if your documentation or UI automation needs the icon CSS reference (preserve exact file path).
**LANGUAGE**: HTML
**CODE**:
```html
<link rel="stylesheet" type="text/css" href="css/sap-icons.css"/>
```

**STEP**: 1 — Launch the Project Accelerator (three options)
**DESCRIPTION**: Launch Project Accelerator using one of these methods. Use the exact command text or key chord when automating or instructing an agent.
**LANGUAGE**: Text
**CODE**:
```
Command Palette:
- Open Command Palette: [CMD/CTRL] + [Shift] + [P]
- Execute command: Fiori tools AI: Launch the Project Accelerator

SAP Fiori UI:
- Click the SAP Fiori icon on the activity bar (label: SAP Fiori)

Joule:
- Click the Joule icon on the activity bar (label: Joule)
```

**STEP**: 2 — Provide business requirements (Text input vs File input)
**DESCRIPTION**: Supply a single-application business requirement. Choose text inline or upload a file. For Joule use command prefixes. For best results use English. The Project Accelerator can only generate one application per project — ensure the request targets a single app.
**LANGUAGE**: Text
**CODE**:
```
Text input (Command Palette and SAP Fiori UI):
- Under "Project Accelerator" enter your requirements in the "Business Requirements" textbox.

Text input (Joule):
- Send this chat command:
  /fiori-gen-spec-app <your business requirements text>

File input (prepare file in workspace):
- Upload your file (docx, .md, .txt, .jpg) to a workspace folder in SAP Business Application Studio.

File input (Command Palette and SAP Fiori UI):
- Under "Project Accelerator" click "Choose File (docx, .md, .txt, .jpg)" and select your file.

File input (Joule):
- Send this chat command to reference a file in the workspace:
  /fiori-gen-spec-app #(path to your docx, markdown, or text file)

Examples (use these example files as templates):
- example-1-manage-contracts-and-customer-information-in-the-system-c1bccf2.md
- example-2-display-customers-with-related-contracts-a6c978f.md
```

**STEP**: 3 — Specify Project Folder Path
**DESCRIPTION**: Provide the exact filesystem path where the new project should be created. Ensure the path does not already contain an application generated by the Project Accelerator (only one generated app per project is allowed).
**LANGUAGE**: Text
**CODE**:
```
Project Folder Path:
- Enter the full path to the folder where you want the generated project, e.g.:
  /home/user/workspace/my-fiori-project
- Validation: ensure no existing generated Fiori elements app is in that project folder.
```

**STEP**: 4 — Generate and cancel generation
**DESCRIPTION**: Start generation by clicking Generate. Generation time varies by complexity. To cancel mid-process, click the Stop icon and confirm. If launched from Joule, the UI will transfer you to the Project Accelerator to complete generation.
**LANGUAGE**: Text
**CODE**:
```
Start generation:
- Click: Generate

Cancel generation:
- Click: ⬜ (Stop) icon
- Confirm prompt: "Are you sure you want to stop generation?" → Click "Yes"
- After stopping you may edit the Business Requirements and re-run generation.

Note:
- If started from Joule, you will be transferred to the Project Accelerator UI to continue.
```

**STEP**: 5 — Result and next steps
**DESCRIPTION**: After successful generation, the project files are created at the specified project folder path. The Project Accelerator opens "Application Information" for the generated SAP Fiori application. You can then modify the app with SAP Fiori tools.
**LANGUAGE**: Text
**CODE**:
```
Post-generation:
- Generated project location: <the Project Folder Path you provided>
- UI action: "Application Information" is launched for the generated SAP Fiori application
- Next steps: open the generated project in your workspace and use SAP Fiori tools to edit or extend the application
```

fiori-tools sap-fiori project-accelerator joule sap-business-application-studio ai automation


**TITLE**: Generate a CAP + SAP Fiori Application with Project Accelerator (SAP Fiori tools AI / Joule)

**INTRODUCTION**: Use the Project Accelerator (SAP Fiori tools AI or Joule) to generate a CAP project with a single SAP Fiori elements application from business-requirements input (text, images, or both). The tool generates data models, services, sample data, and a Fiori UI (list report, list report + object pages, or form entry object page). This doc is focused and action-oriented for programmatic or scripted generation, and for code-generation agents that produce or validate generated projects.

**TAGS**: fiori-tools, project-accelerator, joule, CAP, sap-fiori, code-generation, templates, test-data

STEP: Prerequisites
DESCRIPTION: Verify environment, subscriptions, and extensions required before invoking Project Accelerator/Joule. These are mandatory prerequisites.
LANGUAGE: Plain text
CODE:
```text
- Subscription:
  - SAP Build Code subscription OR sign up for SAP Build Code Test Drive:
    https://developers.sap.com/mission.sap-build-code-test-drive.html?sap-outbound-id=4E44C2A19D38B160BF5539329FA7ECC83942C1AD
  - Background: What is SAP Build Code:
    https://help.sap.com/docs/build_code/d0d8f5bfc3d640478854e6f4e7c7584a/504854f457cc4fbf9f79136dbc773618.html

- Dev space:
  - Create a dev space containing both:
    - SAP Fiori tools extension
    - CAP tools extension

- IDE:
  - Use SAP Business Application Studio (recommended)
```

STEP: Prepare business requirements (input formats)
DESCRIPTION: Prepare and choose input format(s) for generation. Project Accelerator accepts text, images, or text + images. Prefer text for field-level restrictions; prefer images for column layout.
LANGUAGE: Plain text
CODE:
```text
- Input types:
  - Text: describe entities, fields, types, restrictions (e.g., "orderId: alphanumeric(10), required")
  - Image: provide screenshots of table/column layouts for easier column extraction
  - Text + Image: mix of both to capture labels, field constraints, and layout

- Tips:
  - Field values and restrictions (like alphanumeric or max length) are easier to describe using text.
  - Columns and layout are easier to describe using images.
```

STEP: Launch generation and available guides
DESCRIPTION: Select the appropriate guide for your chosen input format. Project Accelerator will generate a project directly in the folder you select (no staging area).
LANGUAGE: Plain text
CODE:
```text
- Generation guides:
  - Text-based generation:
    https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/e7f9f8c26ebb4ab181372d09bb054cac.html?state=DRAFT
  - Image-based generation:
    https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/39193dfef3654ded850d39e7008e77d3.html?state=DRAFT
  - Text + Image generation:
    https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/5dd43dc5dcab4c36b8a654ce20bac71e.html?state=DRAFT

- Important:
  - The Project Accelerator automatically creates the project in the project folder you choose.
  - Do NOT include personal or sensitive data in inputs (no filtering provided).
```

STEP: Supported features — General (what you can request)
DESCRIPTION: Use these as supported spec elements in your business requirements. If you omit a supported feature, the generator may exclude or auto-implement it.
LANGUAGE: Plain text
CODE:
```text
Supported general features you can request explicitly:
- Entities and entity labels
- Entity properties and property labels
- Entity associations: 1:1 and 1:n
- Entities with code lists (explicit values in your input -> enums)
- Value help based on 1:1 associations and code lists
- Criticality highlighting for eligible properties in code lists
- Single list report application (floorplan)
- Single application with list report + one or more object pages
- Form Entry Object Page floorplan
```

STEP: Supported features — List Report
DESCRIPTION: Declare desired list-report features in input; unsupported features will be ignored or auto-decided.
LANGUAGE: Plain text
CODE:
```text
List report capabilities:
- Filter fields (declare explicitly if needed)
- Basic table columns (no charts/icons)
- Multiple views for a table (multiple table mode):
  - Reference: Defining Multiple Views - Multiple Table Mode:
    https://ui5.sap.com/sdk/#/topic/37aeed74e17a42caa2cba3123f0c15fc
- Initial data load behavior:
  - Reference: Loading Behavior of Data on Initial Launch:
    https://ui5.sap.com/#/topic/9f4e1192f1384b85bc160288e17f69c4
```

STEP: Supported features — Object Page
DESCRIPTION: Declare object-page layout expectations; generator supports basic sections and navigation patterns.
LANGUAGE: Plain text
CODE:
```text
Object page capabilities:
- Section tabs
- Form sections with basic fields
- Table sections with basic columns
- Navigation from table section to a second object page
```

STEP: Behavior when features are missing or unsupported
DESCRIPTION: Understand how Project Accelerator handles absent or unsupported instructions and test data generation/storage.
LANGUAGE: Plain text
CODE:
```text
- If your request omits instructions for a supported feature:
  - The generated app may exclude it, or implement a default at SAP Fiori tools AI's discretion.
  - Example: No explicit filters -> generator may add its own filter fields.

- If your request includes unsupported features:
  - They may be ignored or implemented at SAP Fiori tools AI's discretion.

- Object page header features:
  - If input is only text, header features are not guaranteed to reflect your specifics; generator may add basic headers using general description.

- Test data generation:
  - SAP Fiori tools AI populates UI features with random test values and uses image-derived data when available.
  - Test data is intended for preview/testing only and is stored in a test folder within the generated project.
  - Code lists and enum values based on explicit input values are treated as entity properties and stored in a data folder.

- Default behavior:
  - All generated apps are draft-enabled and include standard actions only.
```

STEP: Observe generation process & logs
DESCRIPTION: Monitor generation logs to debug, validate model/service creation and generated artifacts.
LANGUAGE: Plain text
CODE:
```text
- View generation logs:
  https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/4ecc286176b1429b98f6f0a243e49ee2.html?state=DRAFT

- Use logs to:
  - Verify created CDS models, services, and manifest/UI components
  - Inspect test-data and code-list generation
  - Detect missing/auto-implemented features
```

STEP: Helpful reference media and notes
DESCRIPTION: Reference the overview video and final cautions for input content and expectations.
LANGUAGE: Plain text
CODE:
```text
- Overview video: Project Accelerator: Elevate Development with AI in SAP Fiori tools
  https://dam.sap.com/mac/u/a/b4EL9s7?rc=10&doi=SAP1185906

- Notes:
  - Project Accelerator no longer presents a staging area for approval; it creates the project directly in the chosen folder.
  - Do NOT include personal or sensitive data in your business requirements (no filtering).
```

fiori-tools project-accelerator joule CAP sap-fiori code-generation templates test-data