# SAP Fiori Elements Guide

**Source**: Official SAP SAPUI5 Documentation
**Documentation**: [https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements](https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements)
**Last Updated**: 2025-11-21

---

## Overview

SAP Fiori Elements provides metadata-driven templates for creating enterprise applications without writing JavaScript UI code. Applications are configured through OData annotations and manifest.json settings.

**Key Benefits**:
- Rapid application development
- Consistent UX across apps
- Automatic updates with framework upgrades
- Reduced maintenance effort
- Built-in best practices

**Documentation**: [https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements](https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements)

---

## Application Types

### List Report

Displays data in searchable, filterable tables or charts.

**Use Cases**:
- Product catalogs
- Sales orders
- Employee lists
- Any tabular data display

**Key Features**:
- Smart filter bar
- Multi-view (table/chart)
- Export to Excel/PDF
- Variant management
- Mass editing

**Annotations**:
```xml
<!-- In metadata annotations -->
<Annotations Target="Service.Products">
    <!-- Selection fields (filter bar) -->
    <Annotation Term="UI.SelectionFields">
        <Collection>
            <PropertyPath>Category</PropertyPath>
            <PropertyPath>Price</PropertyPath>
            <PropertyPath>Status</PropertyPath>
        </Collection>
    </Annotation>

    <!-- Table columns -->
    <Annotation Term="UI.LineItem">
        <Collection>
            <Record Type="UI.DataField">
                <PropertyValue Property="Value" PropertyPath="ProductID"/>
            </Record>
            <Record Type="UI.DataField">
                <PropertyValue Property="Value" PropertyPath="Name"/>
                <PropertyValue Property="Label" String="Product Name"/>
            </Record>
            <Record Type="UI.DataField">
                <PropertyValue Property="Value" PropertyPath="Price"/>
                <PropertyValue Property="Label" String="Price"/>
            </Record>
            <Record Type="UI.DataFieldForAnnotation">
                <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Rating"/>
                <PropertyValue Property="Label" String="Rating"/>
            </Record>
        </Collection>
    </Annotation>
</Annotations>
```

**manifest.json Configuration**:
```json
{
    "sap.ui5": {
        "routing": {
            "targets": {
                "ProductsList": {
                    "type": "Component",
                    "id": "ProductsList",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "contextPath": "/Products",
                            "variantManagement": "Page",
                            "initialLoad": true,
                            "tableSettings": {
                                "type": "ResponsiveTable",
                                "selectAll": true
                            }
                        }
                    }
                }
            }
        }
    }
}
```

---

### Object Page

Displays detailed information about a single business object across multiple sections.

**Use Cases**:
- Product details
- Sales order details
- Employee profile
- Any detailed view with related data

**Key Features**:
- Header with key info
- Sections and subsections
- Facets (forms, tables, charts)
- Edit mode
- Actions (approve, reject, etc.)
- Related objects navigation

**Annotations**:
```xml
<Annotations Target="Service.Product">
    <!-- Header info -->
    <Annotation Term="UI.HeaderInfo">
        <Record>
            <PropertyValue Property="TypeName" String="Product"/>
            <PropertyValue Property="TypeNamePlural" String="Products"/>
            <PropertyValue Property="Title">
                <Record Type="UI.DataField">
                    <PropertyValue Property="Value" PropertyPath="Name"/>
                </Record>
            </PropertyValue>
            <PropertyValue Property="Description">
                <Record Type="UI.DataField">
                    <PropertyValue Property="Value" PropertyPath="Description"/>
                </Record>
            </PropertyValue>
        </Record>
    </Annotation>

    <!-- Header facets (quick view) -->
    <Annotation Term="UI.HeaderFacets">
        <Collection>
            <Record Type="UI.ReferenceFacet">
                <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Price"/>
            </Record>
            <Record Type="UI.ReferenceFacet">
                <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Stock"/>
            </Record>
        </Collection>
    </Annotation>

    <!-- Sections -->
    <Annotation Term="UI.Facets">
        <Collection>
            <!-- General section -->
            <Record Type="UI.CollectionFacet">
                <PropertyValue Property="Label" String="General Information"/>
                <PropertyValue Property="ID" String="GeneralInfo"/>
                <PropertyValue Property="Facets">
                    <Collection>
                        <Record Type="UI.ReferenceFacet">
                            <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#General"/>
                        </Record>
                    </Collection>
                </PropertyValue>
            </Record>

            <!-- Related items table -->
            <Record Type="UI.ReferenceFacet">
                <PropertyValue Property="Label" String="Sales Orders"/>
                <PropertyValue Property="Target" AnnotationPath="SalesOrders/@UI.LineItem"/>
            </Record>
        </Collection>
    </Annotation>

    <!-- Field group -->
    <Annotation Term="UI.FieldGroup" Qualifier="General">
        <Record>
            <PropertyValue Property="Data">
                <Collection>
                    <Record Type="UI.DataField">
                        <PropertyValue Property="Value" PropertyPath="ProductID"/>
                    </Record>
                    <Record Type="UI.DataField">
                        <PropertyValue Property="Value" PropertyPath="Category"/>
                    </Record>
                    <Record Type="UI.DataField">
                        <PropertyValue Property="Value" PropertyPath="Price"/>
                    </Record>
                </Collection>
            </PropertyValue>
        </Record>
    </Annotation>
</Annotations>
```

**manifest.json Configuration**:
```json
{
    "sap.ui5": {
        "routing": {
            "targets": {
                "ProductObjectPage": {
                    "type": "Component",
                    "id": "ProductObjectPage",
                    "name": "sap.fe.templates.ObjectPage",
                    "options": {
                        "settings": {
                            "contextPath": "/Products",
                            "editableHeaderContent": true,
                            "showRelatedApps": true
                        }
                    }
                }
            }
        }
    }
}
```

---

### Analytical List Page

Combines visual filters, charts, and tables for analytical data exploration.

**Use Cases**:
- Sales analytics
- Financial reporting
- KPI dashboards
- Performance monitoring

**Key Features**:
- Visual filters (bar, line, donut charts)
- Interactive charts
- Smart filter bar
- Table view
- Drill-down capabilities

**Annotations**:
```xml
<Annotations Target="Service.SalesData">
    <!-- Chart definition -->
    <Annotation Term="UI.Chart">
        <Record>
            <PropertyValue Property="Title" String="Sales by Region"/>
            <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>
            <PropertyValue Property="Dimensions">
                <Collection>
                    <PropertyPath>Region</PropertyPath>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="Measures">
                <Collection>
                    <PropertyPath>Sales</PropertyPath>
                </Collection>
            </PropertyValue>
        </Record>
    </Annotation>

    <!-- Presentation variant -->
    <Annotation Term="UI.PresentationVariant">
        <Record>
            <PropertyValue Property="Visualizations">
                <Collection>
                    <AnnotationPath>@UI.Chart</AnnotationPath>
                    <AnnotationPath>@UI.LineItem</AnnotationPath>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="SortOrder">
                <Collection>
                    <Record Type="Common.SortOrderType">
                        <PropertyValue Property="Property" PropertyPath="Sales"/>
                        <PropertyValue Property="Descending" Bool="true"/>
                    </Record>
                </Collection>
            </PropertyValue>
        </Record>
    </Annotation>
</Annotations>
```

---

### Overview Page

Card-based dashboard displaying key metrics and lists.

**Use Cases**:
- Executive dashboards
- Overview screens
- KPI monitoring
- Multi-source data aggregation

**Key Features**:
- Cards (list, analytical, table)
- Automatic refresh
- Filter bar
- Navigation to detail apps
- Responsive layout

**Card Configuration**:
```json
{
    "sap.ovp": {
        "cards": {
            "salesCard": {
                "model": "mainService",
                "template": "sap.ovp.cards.charts.analytical",
                "settings": {
                    "title": "Sales by Region",
                    "subTitle": "Current Year",
                    "entitySet": "SalesData",
                    "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart",
                    "selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant",
                    "presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant"
                }
            },
            "productsCard": {
                "model": "mainService",
                "template": "sap.ovp.cards.list",
                "settings": {
                    "title": "Top Products",
                    "entitySet": "Products",
                    "listType": "extended",
                    "sortBy": "Sales",
                    "sortOrder": "desc"
                }
            }
        }
    }
}
```

---

### Worklist

Simplified list report for task-oriented applications.

**Use Cases**:
- Task lists
- Approval workflows
- Simple data management
- To-do lists

**Key Features**:
- Table with basic filtering
- Search
- Item count
- Quick navigation
- Simplified UI compared to List Report

---

## Common Annotations

### UI Annotations

**@UI.LineItem**: Table columns
**@UI.SelectionFields**: Filter bar fields
**@UI.HeaderInfo**: Object page header
**@UI.HeaderFacets**: Header quick view
**@UI.Facets**: Object page sections
**@UI.FieldGroup**: Grouped fields
**@UI.DataPoint**: KPI or micro-chart
**@UI.Chart**: Chart definition
**@UI.Identification**: Form fields

### Common Annotations

**@Common.Label**: Field label
**@Common.Text**: Display text for coded values
**@Common.ValueList**: Value help
**@Common.SemanticObject**: Navigation target

### Capabilities Annotations

**@Capabilities.FilterRestrictions**: Filter limitations
**@Capabilities.SortRestrictions**: Sort limitations
**@Capabilities.InsertRestrictions**: Create permissions
**@Capabilities.UpdateRestrictions**: Edit permissions
**@Capabilities.DeleteRestrictions**: Delete permissions

### Communication Annotations

**@Communication.Contact**: Contact information
**@Communication.Address**: Address fields

**Documentation**: [https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements](https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements) (search: annotations)

---

## Actions

### Standard Actions

Automatically available for editable entities:
- Create
- Edit
- Delete
- Save
- Cancel

### Custom Actions

**OData Action Definition**:
```xml
<Action Name="ApproveOrder" IsBound="true">
    <Parameter Name="_it" Type="Service.SalesOrder"/>
    <ReturnType Type="Service.SalesOrder"/>
</Action>
```

**Annotation**:
```xml
<Annotations Target="Service.SalesOrder">
    <Annotation Term="UI.LineItem">
        <Collection>
            <!-- Regular fields -->
            <Record Type="UI.DataField">
                <PropertyValue Property="Value" PropertyPath="OrderID"/>
            </Record>

            <!-- Action button -->
            <Record Type="UI.DataFieldForAction">
                <PropertyValue Property="Label" String="Approve"/>
                <PropertyValue Property="Action" String="Service.ApproveOrder"/>
                <PropertyValue Property="InvocationGrouping" EnumMember="UI.OperationGroupingType/Isolated"/>
            </Record>
        </Collection>
    </Annotation>
</Annotations>
```

**Determining Actions**:
Actions shown in object page footer:
```xml
<Annotation Term="UI.Identification">
    <Collection>
        <Record Type="UI.DataFieldForAction">
            <PropertyValue Property="Label" String="Approve"/>
            <PropertyValue Property="Action" String="Service.ApproveOrder"/>
            <PropertyValue Property="Determining" Bool="true"/>
        </Record>
    </Collection>
</Annotation>
```

**Documentation**: [https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements](https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements) (search: actions)

---

## Draft Handling

Enable users to save incomplete work:

**OData Service**:
```xml
<EntityType Name="SalesOrder">
    <Property Name="OrderID" Type="Edm.Int32"/>
    <Property Name="IsActiveEntity" Type="Edm.Boolean"/>
    <Property Name="HasActiveEntity" Type="Edm.Boolean"/>
    <Property Name="HasDraftEntity" Type="Edm.Boolean"/>
</EntityType>
```

**Annotations**:
```xml
<Annotations Target="Service.SalesOrder">
    <Annotation Term="Common.DraftRoot">
        <Record>
            <PropertyValue Property="ActivationAction" String="Service.draftActivate"/>
            <PropertyValue Property="EditAction" String="Service.draftEdit"/>
            <PropertyValue Property="PreparationAction" String="Service.draftPrepare"/>
        </Record>
    </Annotation>
</Annotations>
```

**Behavior**:
- Edit creates draft copy
- Save updates draft
- Save & Exit activates draft
- Cancel discards draft
- Warning on navigation if unsaved changes

**Documentation**: [https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements](https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements) (search: draft)

---

## Flexible Column Layout

Multi-column responsive layout for master-detail-detail views:

**manifest.json**:
```json
{
    "sap.ui5": {
        "routing": {
            "config": {
                "routerClass": "sap.f.routing.Router",
                "flexibleColumnLayout": {
                    "defaultTwoColumnLayoutType": "TwoColumnsMidExpanded",
                    "defaultThreeColumnLayoutType": "ThreeColumnsMidExpanded"
                }
            },
            "routes": [
                {
                    "pattern": "",
                    "name": "ProductsList",
                    "target": ["ProductsList"]
                },
                {
                    "pattern": "Products({key})",
                    "name": "ProductDetail",
                    "target": ["ProductsList", "ProductDetail"]
                },
                {
                    "pattern": "Products({key})/Items({itemKey})",
                    "name": "ItemDetail",
                    "target": ["ProductsList", "ProductDetail", "ItemDetail"]
                }
            ]
        }
    }
}
```

**Layout Types**:
- OneColumn
- TwoColumnsBeginExpanded
- TwoColumnsMidExpanded
- ThreeColumnsMidExpanded
- ThreeColumnsEndExpanded

**Documentation**: [https://github.com/SAP-docs/sapui5/tree/main/docs/10_More_About_Controls](https://github.com/SAP-docs/sapui5/tree/main/docs/10_More_About_Controls) (search: flexible-column-layout)

---

## Building Blocks

Reusable UI components for custom pages:

**Usage**:
```xml
<macros:Table
    id="productTable"
    contextPath="/Products"
    metaPath="@com.sap.vocabularies.UI.v1.LineItem"
    readOnly="true"/>

<macros:FilterBar
    id="filterBar"
    contextPath="/Products"
    metaPath="@com.sap.vocabularies.UI.v1.SelectionFields"/>

<macros:Form
    id="productForm"
    contextPath="/Products"
    metaPath="@com.sap.vocabularies.UI.v1.FieldGroup#General"/>
```

**Available Building Blocks**:
- Table
- Chart
- FilterBar
- Form
- Field
- MicroChart
- ValueHelp

**Documentation**: [https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements](https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements) (search: building-blocks)

---

## Extension Points

Customize Fiori Elements apps without modifying templates:

### Controller Extensions

**manifest.json**:
```json
{
    "sap.ui5": {
        "extends": {
            "extensions": {
                "sap.ui.controllerExtensions": {
                    "sap.fe.templates.ListReport.ListReportController": {
                        "controllerName": "com.mycompany.myapp.ext.ListReportExtension"
                    }
                }
            }
        }
    }
}
```

**ext/ListReportExtension.controller.js**:
```javascript
sap.ui.define([
    "sap/ui/core/mvc/ControllerExtension"
], function(ControllerExtension) {
    "use strict";

    return ControllerExtension.extend("com.mycompany.myapp.ext.ListReportExtension", {
        override: {
            onInit: function() {
                // Custom initialization
            },

            routing: {
                onBeforeBinding: function(oBindingContext) {
                    // Custom logic before binding
                }
            }
        },

        customAction: function() {
            // Custom function
        }
    });
});
```

### Fragment Extensions

Add custom content to specific locations:

**manifest.json**:
```json
{
    "sap.ui5": {
        "extends": {
            "extensions": {
                "sap.ui.viewExtensions": {
                    "sap.fe.templates.ListReport.ListReport": {
                        "ResponsiveTableColumnsExtension::Products": {
                            "className": "sap.ui.core.Fragment",
                            "fragmentName": "com.mycompany.myapp.ext.CustomColumns",
                            "type": "XML"
                        }
                    }
                }
            }
        }
    }
}
```

**ext/CustomColumns.fragment.xml**:
```xml
<core:FragmentDefinition
    xmlns="sap.m"
    xmlns:core="sap.ui.core">
    <Column>
        <Text text="Custom Column"/>
    </Column>
</core:FragmentDefinition>
```

**Documentation**: [https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements](https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements) (search: extensibility, extension-points)

---

## manifest.json Configuration

**Complete Example**:
```json
{
    "_version": "1.42.0",
    "sap.app": {
        "id": "com.mycompany.products",
        "type": "application",
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "applicationVersion": {
            "version": "1.0.0"
        },
        "dataSources": {
            "mainService": {
                "uri": "/sap/opu/odata/sap/PRODUCT_SRV/",
                "type": "OData",
                "settings": {
                    "annotations": ["annotation"],
                    "localUri": "localService/metadata.xml",
                    "odataVersion": "2.0"
                }
            },
            "annotation": {
                "type": "ODataAnnotation",
                "uri": "annotations/annotation.xml",
                "settings": {
                    "localUri": "annotations/annotation.xml"
                }
            }
        }
    },
    "sap.ui5": {
        "dependencies": {
            "minUI5Version": "1.120.0",
            "libs": {
                "sap.fe.templates": {}
            }
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "com.mycompany.products.i18n.i18n"
                }
            },
            "": {
                "dataSource": "mainService",
                "preload": true,
                "settings": {
                    "defaultBindingMode": "TwoWay",
                    "defaultCountMode": "Inline",
                    "refreshAfterChange": false,
                    "metadataUrlParams": {
                        "sap-value-list": "none"
                    }
                }
            }
        },
        "routing": {
            "config": {
                "flexibleColumnLayout": {
                    "defaultTwoColumnLayoutType": "TwoColumnsMidExpanded",
                    "defaultThreeColumnLayoutType": "ThreeColumnsMidExpanded"
                },
                "routerClass": "sap.f.routing.Router"
            },
            "routes": [
                {
                    "pattern": ":?query:",
                    "name": "ProductsList",
                    "target": ["ProductsList"]
                },
                {
                    "pattern": "Products({key}):?query:",
                    "name": "ProductDetail",
                    "target": ["ProductsList", "ProductDetail"]
                }
            ],
            "targets": {
                "ProductsList": {
                    "type": "Component",
                    "id": "ProductsList",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "contextPath": "/Products",
                            "variantManagement": "Page",
                            "navigation": {
                                "Products": {
                                    "detail": {
                                        "route": "ProductDetail"
                                    }
                                }
                            },
                            "initialLoad": true,
                            "tableSettings": {
                                "type": "ResponsiveTable",
                                "selectAll": true,
                                "selectionMode": "Multi"
                            }
                        }
                    }
                },
                "ProductDetail": {
                    "type": "Component",
                    "id": "ProductDetail",
                    "name": "sap.fe.templates.ObjectPage",
                    "options": {
                        "settings": {
                            "contextPath": "/Products",
                            "editableHeaderContent": true
                        }
                    }
                }
            }
        }
    },
    "sap.fiori": {
        "registrationIds": [],
        "archeType": "transactional"
    }
}
```

---

## Links to Official Documentation

- **Fiori Elements Overview**: [https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements](https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements)
- **Annotations**: [https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements](https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements) (search: annotations)
- **Building Blocks**: [https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements](https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements) (search: building-blocks)
- **Extensions**: [https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements](https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements) (search: extensibility)
- **Draft Handling**: [https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements](https://github.com/SAP-docs/sapui5/tree/main/docs/06_SAP_Fiori_Elements) (search: draft)

---

**Note**: This document covers SAP Fiori Elements configuration and usage. For specific templates and advanced scenarios, refer to the official documentation links provided.