zhongwei/gh-secondsky-sap-skills-skills-sapui5

Files

Zhongwei Li cc90ad1792 Initial commit

2025-11-30 08:55:36 +08:00

24 KiB

Raw Blame History

SAP Fiori Elements Guide

Source: Official SAP SAPUI5 Documentation Documentation: 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

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:

<!-- 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:

{
    "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:

<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:

{
    "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:

<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:

{
    "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 (search: annotations)

Actions

Standard Actions

Automatically available for editable entities:

Create
Edit
Delete
Save
Cancel

Custom Actions

OData Action Definition:

<Action Name="ApproveOrder" IsBound="true">
    <Parameter Name="_it" Type="Service.SalesOrder"/>
    <ReturnType Type="Service.SalesOrder"/>
</Action>

Annotation:

<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:

<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 (search: actions)

Draft Handling

Enable users to save incomplete work:

OData Service:

<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:

<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 (search: draft)

Flexible Column Layout

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

manifest.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 (search: flexible-column-layout)

Building Blocks

Reusable UI components for custom pages:

Usage:

<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 (search: building-blocks)

Extension Points

Customize Fiori Elements apps without modifying templates:

Controller Extensions

manifest.json:

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

ext/ListReportExtension.controller.js:

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:

{
    "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:

<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 (search: extensibility, extension-points)

manifest.json Configuration

Complete Example:

{
    "_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
Annotations: 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 (search: building-blocks)
Extensions: 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 (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.

24 KiB Raw Blame History

SAP Fiori Elements Guide

Overview

Application Types

List Report

Object Page

Analytical List Page

Overview Page

Worklist

Common Annotations

UI Annotations

Common Annotations

Capabilities Annotations

Communication Annotations

Actions

Standard Actions

Custom Actions

Draft Handling

Flexible Column Layout

Building Blocks

Extension Points

Controller Extensions

Fragment Extensions

manifest.json Configuration

Links to Official Documentation

24 KiB

Raw Blame History