**TITLE**: Configuring Sort Properties for SAP Fiori Elements Cards

**INTRODUCTION**: This guide shows how to configure sorting for Fiori Elements cards (list, table, stack) using either card-level settings in manifest.json or PresentationVariant annotations (XML / ABAP CDS / CAP CDS). Use manifest.json for quick card-local sorting; use PresentationVariant to share sort definitions across applications and to define multiple sort properties.

**TAGS**: fiori-elements-framework, ovp, sap, presentation-variant, sorting, manifest.json, CDS, annotations, OVP

**STEP**: 1 — Configure card-level sorting in manifest.json

**DESCRIPTION**: For list, table, and stack OVP cards, set "sortBy" and "sortOrder" in the card's "settings" block inside the application's manifest.json. Use the entity property name in "sortBy". "sortOrder" accepts "ascending" or "descending". This is a card-local configuration.

**LANGUAGE**: JSON

**CODE**:
```json
"sap.ovp": {
    ...
    "cards": {
        ...
        "card04": {
            "model": "ZCD204_EPM_DEMO_SRV",
            "template": "sap.ovp.cards.list",
            "settings": {
                "sortBy": "Price",
                "sortOrder": "descending",
                "listFlavor": "bar",
                "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#bar",
                "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#bar",
                "category": "{{card04_category}}",
                "entitySet": "Products"
            }
        },
        ...
    }
}
```

**STEP**: 2 — Configure sorting using PresentationVariant (EDMX / XML annotation)

**DESCRIPTION**: Use the OData PresentationVariant annotation com.sap.vocabularies.UI.v1.PresentationVariant to define sort order (and grouping/visualizations). Define SortOrder as a collection of Record entries; each Record sets Property (the field) and Descending (Boolean). Multiple records define multi-level sort.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.PresentationVariant" Qualifier="Eval_by_Country">
   <Record>
      <PropertyValue Property="GroupBy">
         <Collection>
            <PropertyPath>Country</PropertyPath>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="SortOrder">
         <Collection>
            <Record>
               <PropertyValue Property="Property" PropertyPath="Sales" />
               <PropertyValue Property="Descending" Boolean="true" />
            </Record>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="Visualizations">
         <Collection>
            <AnnotationPath>@UI.Chart#Eval_by_Country</AnnotationPath>
         </Collection>
      </PropertyValue>
   </Record>
</Annotation>
```

**STEP**: 3 — Configure sorting in ABAP CDS using @UI.PresentationVariant

**DESCRIPTION**: In ABAP CDS views, annotate the view with @UI.PresentationVariant to specify groupBy, sortOrder, visualizations, and qualifier. Use 'by' for the sort property; include qualifier if needed. Multiple entries in sortOrder produce multiple sort keys.

**LANGUAGE**: ABAP CDS

**CODE**:
```
@UI.PresentationVariant: [
  {
    groupBy: [
      'COUNTRY'
    ],
    sortOrder: [
      {
        by: 'SALES'
      }
    ],
    visualizations: [
      {
        type: #AS_CHART,
        qualifier: 'Eval_by_Country'
      }
    ],
    qualifier: 'Eval_by_Country'
  }
]
annotate view VIEWNAME with {

}
```

**STEP**: 4 — Configure sorting in CAP CDS (Core Data Services for CAP)

**DESCRIPTION**: In CAP CDS, define a UI.PresentationVariant block with GroupBy, SortOrder, and Visualizations. Use Property and Descending inside SortOrder entries. This integrates with OData metadata and Fiori Elements.

**LANGUAGE**: CDS

**CODE**:
```
UI.PresentationVariant #Eval_by_Country : {
    GroupBy : [
        Country
    ],
    SortOrder : [
        {
            Property : Sales,
            Descending : true
        },
    ],
    Visualizations : [
        '@UI.Chart#Eval_by_Country'
    ]
},
```

**STEP**: 5 — Notes and cross-application behavior

**DESCRIPTION**: PresentationVariant annotations can be shared by overview pages to target Fiori Elements applications; target applications can consume these parameters to apply the same sorting. For external navigation and integrating shared sort parameters, see the Overview Pages external navigation documentation.

**LANGUAGE**: text

**CODE**:
```
Note:
Overview pages allow you to share sort parameters defined in the presentation variant to any target SAP Fiori Elements application. The target applications can use these parameters to sort data accordingly. For more information, see configuring-external-navigation-1d4a0f9.md.
```

fiori-elements-framework ovp sap presentation-variant sorting manifest.json CDS annotations OVP


**TITLE**: Configuring Tables (Fiori Elements OData V4 — UI.LineItem and UI.PresentationVariant)

**INTRODUCTION**: Use OData V4 annotations to configure list/table visualizations in SAP Fiori Elements. Define UI.LineItem to control table columns and UI.PresentationVariant to control sorting, visualizations, and default presentation. Add these annotations to your OData annotation file (annotation XML or equivalent) and ensure your app's manifest.json references that annotation file.

**TAGS**: fiori-elements-framework, odata-v4, annotations, UI.LineItem, UI.PresentationVariant, manifest.json, tables, smarttable

**STEP**: 1 — Use annotations from manifest.json
**DESCRIPTION**: Ensure your annotation file (annotation XML or service metadata) containing UI.LineItem / UI.PresentationVariant is referenced by your application. The manifest.json should reference the annotation file so Fiori Elements picks up the annotations at runtime. Use annotations to control table columns, sorting, and visualizations.
**LANGUAGE**: JSON / Manifest (instructional)
**CODE**:
```json
// Ensure your annotation file is referenced in the manifest.json (example conceptual entry).
// Exact manifest paths vary by project setup; adapt as needed to reference your annotation XML.
{
  "sap.app": {
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata/sap/YOUR_SERVICE_SRV/",
        "type": "OData",
        "settings": {
          "annotations": [
            {
              "src": "annotations.xml",
              "type": "XML"
            }
          ]
        }
      }
    }
  }
}
```

**STEP**: 2 — Define UI.PresentationVariant to set default sorting and visualizations
**DESCRIPTION**: Add a UI.PresentationVariant annotation to specify presentation metadata such as Text, SortOrder, and Visualizations. Reference the UI.LineItem (by qualifier) inside Visualizations to assign the LineItem as the visualization for the presentation variant.
**LANGUAGE**: XML
**CODE**:
```xml
<Annotation Term="UI.PresentationVariant">
  <Record>
    <PropertyValue Property="Text" String="Default"/>
    <PropertyValue Property="SortOrder">
      <Collection>
        <Record Type="Common.SortOrderType">
          <PropertyValue Property="Property" PropertyPath="NetAmount"/>
          <PropertyValue Property="Descending" Bool="true"/>
        </Record>
      </Collection>
    </PropertyValue>
    <PropertyValue Property="Visualizations">
      <Collection>
         <AnnotationPath>@UI.LineItem#Default</AnnotationPath>
      </Collection>
   </PropertyValue>
  </Record>
</Annotation>
```

**STEP**: 3 — Define UI.LineItem to configure table columns and actions
**DESCRIPTION**: Implement a UI.LineItem annotation (use Qualifier if multiple variants are needed) to define the table columns (UI.DataField), intent-based navigation (UI.DataFieldForIntentBasedNavigation), and actions (UI.DataFieldForAction). Use UI.Importance to mark Important columns. Use Determining and InvocationGrouping on actions where applicable.
**LANGUAGE**: XML
**CODE**:
```xml
<Annotation Term="UI.LineItem" Qualifier="Default">
  <Collection>
    <Record Type="UI.DataField">
      <PropertyValue Property="Value" Path="DeliveryCalendarYear"/>
        <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
    </Record>
    <Record Type="UI.DataField">
      <PropertyValue Property="Value" Path="DeliveryCalendarMonth"/>
        <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
    </Record>
    <Record Type="UI.DataField">
      <PropertyValue Property="Value" Path="SalesOrder"/>
        <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
    </Record>
    <Record Type="UI.DataFieldForIntentBasedNavigation">
      <PropertyValue Property="Label" String="Manage Sales Order"/>
      <PropertyValue Property="SemanticObject" String="EPMSalesOrder"/>
      <PropertyValue Property="Action" String="manage_st"/>
      <PropertyValue Property="RequiresContext" Bool="false"/>
        <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
    </Record>
    <Record Type="UI.DataField">
      <PropertyValue Property="Label" String="Item"/>
      <PropertyValue Property="Value" Path="SalesOrderItem"/>
      <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
    </Record>
    <Record Type="UI.DataField">
      <PropertyValue Property="Value" Path="Product"/>
      <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
    </Record>
    <Record Type="UI.DataFieldForAction">
         <PropertyValue Property="Label" String="Copy"/>
         <PropertyValue Property="Action" String="CZ_EASILINEITEMS_SADL_CDS.CZ_EASILINEITEMS_SADLType/Copy"/>
         <PropertyValue Property="InvocationGrouping" EnumMember="UI.OperationGroupingType/Isolated"/>
         <PropertyValue Property="Determining" Bool="true"/>
    </Record>
    <Record Type="UI.DataFieldForIntentBasedNavigation">
         <PropertyValue Property="Label" String="Manage Products (STTA)"/>
         <PropertyValue Property="SemanticObject" String="EPMProduct"/>
         <PropertyValue Property="Action" String="manage_st"/>
         <PropertyValue Property="Determining" Bool="true"/>
     </Record>
</Collection>
</Annotation>
```

**STEP**: 4 — Additional guidance and references
**DESCRIPTION**: Use these references for additional table-related features and integration details. Consult OData V2 smart table docs if working with V2 implementations.
**LANGUAGE**: Links / References
**CODE**:
```text
- Smart table (OData V2): https://ui5.sap.com/#/api/sap.ui.comp.smarttable.SmartTable
- Tables: Which One Should I Choose? (guidance): ../10_More_About_Controls/tables-which-one-should-i-choose-148892f.md
- Configuring Default Settings (which PresentationVariant is picked): configuring-default-settings-visualizations-sort-order-filter-values-49a6ba5.md

Related Information:
- Maintaining Standard Texts for Tables: maintaining-standard-texts-for-tables-aacfac5.md
- Maintaining Standard Texts for Charts: maintaining-standard-texts-for-charts-37cd601.md
- Setting the Default Column Width: setting-the-default-column-width-a765253.md
- Extension Points for Tables: extension-points-for-tables-d525522.md
```


**TITLE**: Configure Application Title for SAP Fiori Elements (List Report, Object Page, Overview/Analytical Pages)

**INTRODUCTION**: This guide shows exactly how to configure the application title that appears in the SAP Fiori Launchpad shell bar and on page headers for List Report and Object Page apps (also applicable to Overview and Analytical List pages). The title is controlled by the @UI.headerInfo.typeName (and optional typeNamePlural) UI annotation. Examples for CDS (ABAP CDS) and OData annotation XML are provided.

**TAGS**: fiori-elements-framework, annotations, UI.headerInfo, CDS, odata, application-title, list-report, object-page, overview-page, analytical-list-page

**STEP**: 1 — Configure title in CDS (ABAP CDS)

**DESCRIPTION**: Add or update the @UI.headerInfo annotation in your ABAP CDS entity definition. Use TypeName to set the singular application title and TypeNamePlural for plural forms. Place this annotation on the entity that is exposed to the OData service and consumed by the Fiori Elements app.

**LANGUAGE**: CDS

**CODE**:
```cds
@AbapCatalog.sqlViewName: 'ZPO_HEADER'
@EndUserText.label: 'Purchase Order'
@UI.headerInfo: {
  typeName: 'Purchase Order',
  typeNamePlural: 'Purchase Orders'
}
entity Z_I_PurchaseOrder {
  key PurchaseOrderID : abap.char(10);
  // ... other fields ...
}
```

**STEP**: 2 — Configure title in OData annotation XML (vocab UI) — when using separate annotation files

**DESCRIPTION**: If you maintain annotations as external XML files (CSDL annotation files) instead of CDS, set the UI.HeaderInfo annotation for the target entity. Use PropertyValue elements for TypeName and TypeNamePlural. Ensure the Annotation block targets the correct EntityType (Namespace.EntityType).

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="MyService.PurchaseOrderType">
  <Annotation Term="UI.HeaderInfo">
    <Record>
      <PropertyValue Property="TypeName" String="Purchase Order"/>
      <PropertyValue Property="TypeNamePlural" String="Purchase Orders"/>
    </Record>
  </Annotation>
</Annotations>
```

**STEP**: 3 — Where to place the annotation (files / deployment)

**DESCRIPTION**: Place the CDS annotation within your ABAP CDS source file for the entity exposed by the OData service. For external annotation files, place the XML annotation file in your OData service project and register it so the service metadata exposes the UI annotations (for example, include in annotation.xml bundled with the service or reference it in the service registration). After deployment, Fiori Elements will pick up the UI.headerInfo values from the service metadata.

**LANGUAGE**: JSON (manifest.json example reference)

**CODE**:
```json
// In manifest.json (SAPUI5/Fiori Elements app), ensure the OData service registration points to your service:
// No direct title setting here; app uses @UI.headerInfo from the OData service metadata.
{
  "sap.app": {
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata/sap/Z_MY_SERVICE_SRV/",
        "type": "OData",
        "settings": { "odataVersion": "2.0" }
      }
    }
  }
}
```

**STEP**: 4 — Notes and additional features

**DESCRIPTION**:
- The @UI.headerInfo.typeName (and typeNamePlural) controls the application title shown in the shell bar and page headers (List Report, Object Page).
- For SAP Fiori Elements (OData V2), the same annotation can be used to configure titles on Overview pages and Analytical List pages.
- For more header customization (titles, subtitles, dynamic titles), see the Object Page header configuration documentation and the "Sample Code" section in Setting Up the Object Page Header:
  - setting-up-the-object-page-header-cce93e6.md#loiocce93e6f067a4133a8430c4f5d7b8fc7__sample_code
  - setting-the-table-header-f996207.md
  - configuring-the-object-page-header-title-and-description-333f850.md

**LANGUAGE**: Plain

**CODE**:
```text
Tips:
- Use static strings for consistent titles, or use localized texts (i18n) in CDS or annotation files where supported.
- After changing annotations, redeploy the service and refresh the Fiori app / clear browser cache to see updates.
```

fiori-elements-framework annotations UI.headerInfo CDS odata application-title list-report object-page overview-page analytical-list-page


**TITLE**: Configure Chart-Only View as Default for Analytical List Page (ALP)

**INTRODUCTION**: Step-by-step actionable instructions and exact annotation/manifest code snippets to configure the Analytical List Page (ALP) to render the chart-only view as the default. Includes manifest settings (OData V2/V4), SelectionPresentationVariant, PresentationVariant, UI.Chart annotations, chartPresentationQualifier, semantic object annotations, enabling data labels, and stable color mapping for chart dimension values.

**TAGS**: fiori-elements-framework, ALP, AnalyticalListPage, chart-only, manifest.json, UI.SelectionPresentationVariant, UI.PresentationVariant, UI.Chart, ODataV2, ODataV4, CDS, CAP, ABAP, semantic-object, stable-colors

STEP: 1 — Configure manifest.json for OData V2 to load ALP chart-only view
DESCRIPTION: Add or update the sap.ui.generic.app.pages entry in manifest.json for the ALP component. Place component settings under the relevant page's component to render ALP and set qualifiers where required.
LANGUAGE: JSON
CODE:
```json
"sap.ui.generic.app": {
   "pages": [
      {
         "entitySet": "SEPMRA_C_ALP_SlsOrdItemCube",
         "component": {
            "name": "sap.suite.ui.generic.template.AnalyticalListPage",
            "list": true,
            "settings": {
                  "qualifier":"DefaultVariant"
            }
         }
      }
   ]
}
```

STEP: 2 — Configure manifest.json for OData V4 to set the default view to chart-only
DESCRIPTION: For OData V4 ALP, set views.paths and set "defaultPath": "primary" so the primary (chart) path is loaded by default.
LANGUAGE: JSON
CODE:
```json
"views": {
    "paths": [{
        "primary": [
            {
                "annotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant"
            }
        ],
        "secondary": [
            {
                "annotationPath": "com.sap.vocabularies.UI.v1.LineItem"
            }
        ],
        "defaultPath": "primary"
    }]
},
```

STEP: 3 — Define SelectionPresentationVariant annotation (Qualifier="DefaultVariant")
DESCRIPTION: Define SelectionPresentationVariant to link a selection variant and a presentation variant (presentation qualifier "DefaultPresentationVariant") and give the overall qualifier "DefaultVariant". Use the variant that the ALP manifest references.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.SelectionPresentationVariant" Qualifier="DefaultVariant">
  <Record>
    <PropertyValue Property="Text" String="Product Financial Analysis"/>
    <PropertyValue Property="SelectionVariant" Path="@UI.SelectionVariant#DefaultSelectionVariant"/>
    <PropertyValue Property="PresentationVariant" Path="@UI.PresentationVariant#DefaultPresentationVariant"/>
  </Record>
</Annotation>
```
LANGUAGE: ABAP CDS
CODE:
```abap
@UI.SelectionPresentationVariant: [
  {
    text: 'Product Financial Analysis',
    selectionvariantqualifier: 'DefaultSelectionVariant',
    presentationvariantqualifier: 'DefaultPresentationVariant',
    qualifier: 'DefaultVariant'
  }
]
annotate view VIEWNAME with {

}
```
LANGUAGE: CAP CDS
CODE:
```cds
UI.SelectionPresentationVariant #DefaultVariant : {
    Text : 'Product Financial Analysis',
    SelectionVariant : ![@UI.SelectionVariant#DefaultSelectionVariant],
    PresentationVariant : ![@UI.PresentationVariant#DefaultPresentationVariant]
}
```

STEP: 4 — Define PresentationVariant annotation (Qualifier="DefaultPresentationVariant")
DESCRIPTION: Define the PresentationVariant that sets sort order and lists Visualizations pointing to the chart annotation qualifier used by the ALP.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.PresentationVariant" Qualifier="DefaultPresentationVariant">
  <Record>
    <PropertyValue Property="Text" String="Default"/>
    <PropertyValue Property="SortOrder">
      <Collection>
        <Record Type="Common.SortOrderType">
          <PropertyValue Property="Property" PropertyPath="NetAmount"/>
          <PropertyValue Property="Descending" Bool="true"/>
        </Record>
      </Collection>
    </PropertyValue>
    <PropertyValue Property="Visualizations">
      <Collection>
         <AnnotationPath>@UI.Chart#Default</AnnotationPath>
      </Collection>
   </PropertyValue>
  </Record>
</Annotation>
```
LANGUAGE: ABAP CDS
CODE:
```abap
@UI.PresentationVariant: [
  {
    text: 'Default',
    sortOrder: [
      {
        by: 'NETAMOUNT',
        direction: #DESC
      }
    ],
    visualizations: [
      {
        type: #AS_CHART,
        qualifier: 'Default'
      }
    ],
    qualifier: 'DefaultPresentationVariant'
  }
]
annotate view VIEWNAME with {

}
```
LANGUAGE: CAP CDS
CODE:
```cds
UI.PresentationVariant #DefaultPresentationVariant : {
    Text : 'Default',
    SortOrder : [
        {
            $Type : 'Common.SortOrderType',
            Property : NetAmount,
            Descending : true
        },
    ],
    Visualizations : [
        '@UI.Chart#Default'
    ]
}
```

STEP: 5 — Set chartPresentationQualifier in manifest.json to pick a PresentationVariant
DESCRIPTION: Use chartPresentationQualifier in the component settings (manifest.json) to instruct ALP to render the chart defined by a specific PresentationVariant qualifier.
LANGUAGE: JSON
CODE:
```json
"settings": {
  "chartPresentationQualifier": "qualifier"
}
```
NOTE: Place this under the ALP component settings entry (sap.ui.generic.app.pages[n].component.settings).

STEP: 6 — Define UI.Chart annotation (Qualifier="Default")
DESCRIPTION: Define the UI.Chart annotation (XML, ABAP CDS or CAP CDS) with dimensions, measures, roles, ChartType and qualifier "Default". This annotation is referenced from the PresentationVariant Visualizations list.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.Chart" Qualifier="Default">
  <Record Type="UI.ChartDefinitionType">
    <PropertyValue Property="Title" String="Revenue by Customer"/>
    <PropertyValue Property="Description" String="Net Revenue by Customer"/>
    <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>
    <PropertyValue Property="Dimensions">
      <Collection>
        <PropertyPath>SoldToParty</PropertyPath>
        <PropertyPath>DeliveryCalendarYear</PropertyPath>
      </Collection>
     </PropertyValue>
     <PropertyValue Property="DimensionAttributes">
       <Collection>
          <Record Type="UI.ChartDimensionAttributeType">
             <PropertyValue Property="Dimension" PropertyPath="SoldToParty"/>
             <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>
          </Record>
          <Record Type="UI.ChartDimensionAttributeType">
             <PropertyValue Property="Dimension" PropertyPath="DeliveryCalendarYear"/>
             <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Series"/>
          </Record>
       </Collection>
     </PropertyValue>
     <PropertyValue Property="Measures">
       <Collection>
         <PropertyPath>NetAmount</PropertyPath>
       </Collection>
     </PropertyValue>
     <PropertyValue Property="MeasureAttributes">
       <Collection>
          <Record Type="UI.ChartMeasureAttributeType">
             <PropertyValue Property="Measure" PropertyPath="NetAmount"/>
             <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
             <PropertyValue Property="DataPoint" AnnotationPath="@UI.DataPoint#NetAmount"/>
          </Record>
       </Collection>
     </PropertyValue>
   </Record>
</Annotation>
```
LANGUAGE: ABAP CDS
CODE:
```abap
@UI.Chart: [
  {
    title: 'Revenue by Customer',
    description: 'Net Revenue by Customer',
    chartType: #COLUMN,
    dimensions: [
      'SOLDTOPARTY',
      'DELIVERYCALENDARYEAR'
    ],
    dimensionAttributes: [
      {
        dimension: 'SoldToParty',
        role: #CATEGORY
      },
      {
        dimension: 'DeliveryCalendarYear',
        role: #SERIES
      }
    ],
    measures: [
      'NETAMOUNT'
    ],
    measureAttributes: [
      {
        measure: 'NetAmount',
        role: #AXIS_1,
        asDataPoint: true
      }
    ],
    qualifier: 'Default'
  }
]
annotate view VIEWNAME with {

}
```
LANGUAGE: CAP CDS
CODE:
```cds
UI.Chart #Default : {
    $Type : 'UI.ChartDefinitionType',
    Title : 'Revenue by Customer',
    Description : 'Net Revenue by Customer',
    ChartType : #Column,
    Dimensions : [
        SoldToParty,
        DeliveryCalendarYear
    ],
    DimensionAttributes : [
        {
            $Type : 'UI.ChartDimensionAttributeType',
            Dimension : SoldToParty,
            Role : #Category
        },
        {
            $Type : 'UI.ChartDimensionAttributeType',
            Dimension : DeliveryCalendarYear,
            Role : #Series
        },
    ],
    Measures : [
        NetAmount
    ],
    MeasureAttributes : [
        {
            $Type : 'UI.ChartMeasureAttributeType',
            Measure : NetAmount,
            Role : #Axis1,
            DataPoint : '@UI.DataPoint#NetAmount'
        }
    ]
}
```

STEP: 7 — Semantic object annotation for chart-based navigation
DESCRIPTION: Annotate the dimension property with a SemanticObject to allow semantic navigation from chart data points. The smart chart uses the semantic object to build navigation links and pass selection context to target apps.
LANGUAGE: XML
CODE:
```xml
<Annotations xmlns=http://docs.oasis-open.org/odata/ns/edm Target="Emp_Line_Item.Item/Cost_Center">
	<Annotation Term="com.sap.vocabularies.Common.v1.SemanticObject" String="CostCenter"/>
</Annotations>
```
LANGUAGE: ABAP CDS
CODE:
```abap
annotate view ITEM with {
  @Consumption.semanticObject: 'CostCenter'
  cost_center;
}
```

STEP: 8 — Enable data labels in smart charts and KPI cards via manifest.json
DESCRIPTION: Enable showDataLabel under chartSettings in the ALP component settings of manifest.json. Default is false; set to true to show numeric labels on chart points and KPI cards.
LANGUAGE: JSON
CODE:
```json
"pages": [{
  "entitySet": "SEPMRA_C_ALP_SlsOrdItemCubeALPResults",
  "component": {
      "name": "sap.suite.ui.generic.template.AnalyticalListPage",
      "list": true,
      "settings": {
          "chartSettings": {
              "showDataLabel": true
          }
      }
  }
}]
```

STEP: 9 — Enable stable colors for chart dimension values and define dimension color mapping
DESCRIPTION: Turn on enableStableColors and define dimensionSettings in manifest.json.chartSettings. Map specific dimension values to colors and legend indices. Include a "default" color fallback.
LANGUAGE: JSON
CODE:
```json
"chartSettings": {
     "showDataLabel": true,
     "enableStableColors": true,
     "dimensionSettings": {
          "CostElement": {  // Dimension Name
              "400020": { //  Dimension Value
                   "color":"red",
                   "legendIndex":0
                        },
              "421000": {
                   "color":"sapUiChartPaletteSemanticNeutral",
                   "legendIndex":1
                        },
              "417900": {
                   "color":"blue",
                   "legendIndex":2
                        }
                         },
          "Customer": {
               "C000013": {
                    "color": "red",
                    "legendIndex": 0
                          },
               "C000085": {
                    "color": "blue",
                    "legendIndex": 0
                          }
                      },
          "default" : {
               "color": "green"
                      }
        }
  }
```

STEP: 10 — Chart toolbar operations and recommendations
DESCRIPTION: Chart toolbar offers Settings (modify dimensions/measures/roles/sort) and View By (change grouping dimension) — ensure PresentationVariant and Chart annotations include intended dimensions/measures. Recommendation: Avoid deprecated determining actions; use modern alternatives for action handling.
LANGUAGE: JSON
CODE:
```json
// No additional code required. Ensure UI.Chart and UI.PresentationVariant provide
// the correct dimensions/measures and that manifest settings reference the correct qualifiers.
```


**TITLE**: Configuring the Analytical List Page Content Area (Annotations + manifest.json)

**INTRODUCTION**: This guide shows how to configure the Analytical List Page (ALP) content area to render chart and table content. It includes annotation examples for UI.Chart and UI.LineItem (OData V2) and a minimal manifest.json snippet to set the content area title. Use the annotations to control the chart/table rendering and use manifest settings to provide a content title and enable content tile / KPI behavior.

**TAGS**: fiori-elements, analytical-list-page, manifest.json, annotations, UI.Chart, UI.LineItem, OData V2, FilterableKPI

STEP: 1 — Provide UI.Chart and UI.LineItem annotations for the main entity set

DESCRIPTION: Add OData V2 annotations to define the chart visualization (UI.Chart) and the table columns (UI.LineItem). The UI.Chart annotation defines chartType, dimensions and measures. The UI.LineItem annotation defines the table columns and their labels. Replace target EntityType and property names with your service-specific names.

LANGUAGE: XML

CODE:
```xml
<!-- File: annotations.xml (OData V2 annotations) -->
<Annotations Target="YourService.YourEntityType">
  <!-- Chart definition: set chartType, dimensions and measures -->
  <Annotation Term="UI.Chart">
    <Record>
      <PropertyValue Property="chartType" String="column" />
      <PropertyValue Property="title" String="Revenue by Category" />
      <PropertyValue Property="dimensions">
        <Collection>
          <PropertyPath>ProductCategory</PropertyPath>
        </Collection>
      </PropertyValue>
      <PropertyValue Property="measures">
        <Collection>
          <PropertyPath>TotalRevenue</PropertyPath>
        </Collection>
      </PropertyValue>
    </Record>
  </Annotation>

  <!-- LineItem definition: specify the columns shown in the table -->
  <Annotation Term="UI.LineItem">
    <Collection>
      <Record Type="UI.DataField">
        <PropertyValue Property="Value" Path="ProductID" />
        <PropertyValue Property="Label" String="Product ID" />
      </Record>
      <Record Type="UI.DataField">
        <PropertyValue Property="Value" Path="ProductName" />
        <PropertyValue Property="Label" String="Product" />
      </Record>
      <Record Type="UI.DataField">
        <PropertyValue Property="Value" Path="TotalRevenue" />
        <PropertyValue Property="Label" String="Revenue" />
      </Record>
    </Collection>
  </Annotation>
</Annotations>
```

STEP: 2 — Use SelectionPresentationVariant to bind default visualization, sort order and filter behavior (optional)

DESCRIPTION: To set default visualization (chart/table), sort order, or default filter selection, add a UI.SelectionPresentationVariant annotation that links a PresentationVariant (visualizations and sort) with a SelectionVariant. This allows the ALP to honor default view, sorting and filters on initial load.

LANGUAGE: XML

CODE:
```xml
<!-- File: annotations.xml (SelectionPresentationVariant example) -->
<Annotations Target="YourService.YourEntityType">
  <Annotation Term="UI.SelectionPresentationVariant" Qualifier="DefaultView">
    <Record>
      <PropertyValue Property="SelectionVariant">
        <!-- define default filter selection(s) -->
        <Record>
          <PropertyValue Property="SelectOptions">
            <Collection>
              <Record Type="Common.SelectOption">
                <PropertyValue Property="PropertyName" PropertyPath="Region" />
                <PropertyValue Property="Ranges">
                  <Collection>
                    <Record Type="Common.Range">
                      <PropertyValue Property="Sign" String="I"/>
                      <PropertyValue Property="Option" String="EQ"/>
                      <PropertyValue Property="Low" String="EMEA"/>
                    </Record>
                  </Collection>
                </PropertyValue>
              </Record>
            </Collection>
          </PropertyValue>
        </Record>
      </PropertyValue>

      <PropertyValue Property="PresentationVariant">
        <Record Type="UI.PresentationVariant">
          <PropertyValue Property="Visualizations">
            <Collection>
              <!-- reference visualization by property path defined in the service annotations -->
              <PropertyPath>Chart</PropertyPath>
            </Collection>
          </PropertyValue>

          <PropertyValue Property="SortOrder">
            <Collection>
              <Record Type="UI.SortOrder">
                <PropertyValue Property="Property" PropertyPath="TotalRevenue" />
                <PropertyValue Property="Descending" Bool="true" />
              </Record>
            </Collection>
          </PropertyValue>
        </Record>
      </PropertyValue>
    </Record>
  </Annotation>
</Annotations>
```

STEP: 3 — Set contentTitle in manifest.json to add a content area title

DESCRIPTION: Add a contentTitle under the ALP component settings in manifest.json to display a title above the content area. Place this under the sap.ui.generic.app pages component settings for the page that targets the ALP. Replace the entitySet and title value with your app-specific values.

LANGUAGE: JSON

CODE:
```json
// File: manifest.json (minimal snippet)
{
  "sap.ui.generic.app": {
    "pages": [
      {
        "entitySet": "SalesOrderSet",
        "component": {
          "name": "sap.suite.ui.generic.template.AnalyticalListPage",
          "settings": {
            "contentTitle": "Sales Analysis"
            /* If you configure a content tile (FilterableKPI) in the manifest,
               the ALP will show the FilterableKPI view alongside the segmented
               buttons (Hybrid/Chart/Table). See related docs for full tile config. */
          }
        }
      }
    ]
  }
}
```

STEP: 4 — Choose the view mode: Table only, Chart only, or Hybrid

DESCRIPTION: ALP supports three view modes: Table only, Chart only, and Hybrid (chart + table). Control initial/default presentation with either:
- UI.SelectionPresentationVariant (preferred for annotation-driven defaults, see Step 2), or
- ALP manifest/settings (project-specific; check your template version docs if a manifest key is supported for default view).

LANGUAGE: JSON / XML

CODE:
```json
// Use SelectionPresentationVariant (XML example in Step 2) to force default visualization.
// If your project template supports a manifest key for default view, set it there per your template docs.
```

STEP: 5 — Dynamic Page Header: pinnable behavior

DESCRIPTION: The dynamic page header is pinnable when the app uses a responsive table on desktop, hybrid, and medium ('M') devices (table must be responsive). A pin toggle keeps the header content expanded while scrolling. The pin button is NOT available:
- for other table types in ALP, and
- on small ('S') devices (mobile).

LANGUAGE: Plain text

CODE:
```text
Notes:
- Ensure the table type is responsive to enable the header pin toggle on supported devices.
- Pin toggle appears on desktop, hybrid and 'M' size devices only.
```

STEP: 6 — Files and locations summary

DESCRIPTION: Use these files/locations when implementing the configuration.

LANGUAGE: Plain text

CODE:
```text
- Annotations (OData V2): annotations.xml (or service annotations file)
  - Add UI.Chart and UI.LineItem annotations for the target entity type
  - Optionally add UI.SelectionPresentationVariant to control default view/sort/filters

- Manifest: manifest.json
  - Under "sap.ui.generic.app" -> "pages" -> component -> "settings"
  - Set "contentTitle": "<your title>"
  - (Optional) Configure content tile / FilterableKPI per your template docs
```


**TITLE**: Configure Quick View Content (UI.QuickViewFacets) for SAP Fiori Elements (OData V2 & V4)

**INTRODUCTION**: This document gives concise, action-oriented instructions and examples to configure Quick View content (title area, content area: field groups, contacts, DataPoints, and footer actions) using UI.QuickViewFacets annotations for OData V2 and OData V4. Use these instructions to annotate target entities in XML annotations, ABAP CDS, or CAP CDS so Fiori Elements renders the Quick View popover correctly.

**TAGS**: quickview, ui.quickviewfacets, fiori-elements, annotations, odata-v2, odata-v4, ui.headerinfo, ui.fieldgroup, contact, datapoint, semanticobject, sap-tag

STEP: 1 — Title Area (OData V2)

DESCRIPTION: For OData V2 Quick View header behavior:
- Images: annotate HeaderInfo.ImageUrl and/or HeaderInfo.TypeImageUrl. If both exist, ImageUrl is evaluated first, then TypeImageUrl. Paths including navigation properties are evaluated.
- Title: determine title rendering via TextArrangement (e.g., TextLast, TextOnly).
- Description: must be provided according to TextArrangement. If missing, title font increases and description remains empty.

LANGUAGE: XML

CODE:
```xml

```

STEP: 2 — Content Area: Field Groups (OData V2 & V4)

DESCRIPTION:
- Add zero or multiple field groups via UI.FieldGroup annotations referenced from UI.QuickViewFacets.
- Each ReferenceFacet may have a Label (from the Record Type="UI.ReferenceFacet").
- Field paths evaluate navigation properties.
- Fields support IsEmailAddress, IsUrl, IsPhoneNumber annotations. Links that would create a popover on Quick View are ignored.
- Supported field types:
  - Handled by SmartField: DataField (with criticality), DataFieldWithUrl
  - Handled by Fiori elements: DataFieldWithIntentBasedNavigation

LANGUAGE: XML

CODE:
```xml

```

STEP: 3 — Content Area: Contacts (OData V2 & V4)

DESCRIPTION:
- Add contact facets using UI.ReferenceFacet records that target a com.sap.vocabularies.Communication.v1.Contact annotation.
- Place contacts by position in UI.QuickViewFacets collection.
- If a contact's picture, title, and description match the Quick View title area, the contact title area is not shown.

LANGUAGE: XML

CODE:
```xml

```

STEP: 4 — Content Area: DataPoints (OData V2 & V4)

DESCRIPTION:
- Reference existing UI.DataPoint annotations from UI.QuickViewFacets.
- Place DataPoint facets in any position; the ordering is defined by the collection order.
- DataPoint facets can have a Label (from the ReferenceFacet Record).

LANGUAGE: XML

CODE:
```xml

```

STEP: 5 — Sample Code: Quick View Facets (OData V2) — XML Annotation

DESCRIPTION: Example showing a Quick View with a field group, a contact, and a DataPoint referenced in UI.QuickViewFacets.

LANGUAGE: XML

CODE:
```xml
<Annotations Target="STTA_PROD_MAN.STTA_C_MP_SupplierType">    <Annotation Term="UI.QuickViewFacets">      <Collection>         <Record Type="UI.ReferenceFacet">            <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#SupplierQuickViewPOC_FieldGroup_1" />         </Record>                                 <Record Type="UI.ReferenceFacet">            <PropertyValue Property="Label" String="Main Contact Person" />            <PropertyValue Property="Target" AnnotationPath="@Communication.Contact#KeyAccount"/>         </Record>         <Record Type="UI.ReferenceFacet">            <PropertyValue Property="Label" String="DataPoint in QV"/>            <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Product"/>         </Record>       </Collection>   </Annotation></Annotations>
```

STEP: 6 — Sample Code: Quick View Facets (OData V2) — ABAP CDS Annotation

DESCRIPTION: Equivalent ABAP CDS annotate view example that registers quick-view facets for FIELDGROUP_REFERENCE, CONTACT_REFERENCE, and DATAPOINT_REFERENCE.

LANGUAGE: ABAP CDS

CODE:
```
annotate view STTA_C_MP_SUPPLIER with {@UI.Facet: [  {    targetQualifier: 'SupplierQuickViewPOC_FieldGroup_1',    type: #FIELDGROUP_REFERENCE,    purpose: #QUICK_VIEW  },  {    label: 'Main Contact Person',    targetQualifier: 'KeyAccount',    type: #CONTACT_REFERENCE,    purpose: #QUICK_VIEW  },  {    label: 'DataPoint in QV',    targetQualifier: 'Product',    type: #DATAPOINT_REFERENCE,    purpose: #QUICK_VIEW  }]supplier;}
```

STEP: 7 — Title Area (OData V4)

DESCRIPTION: For OData V4 Quick View header:
- Images: provide one or more of HeaderInfo.ImageUrl, HeaderInfo.TypeImageUrl, HeaderInfo.Initials to display an image (Initials renders initials if no URL).
- Title: taken from HeaderInfo.Title. If a main navigation (primaryAction via sap-tag) is defined, the title becomes a link.
- Description: taken from HeaderInfo.Description. If missing, subtitle displays the label of the source property.
- Restriction: Browser "Open link in new tab" on title link is not supported — navigation goes to SAP Fiori launchpad.

LANGUAGE: XML

CODE:
```xml

```

STEP: 8 — Sample Code: Quick View Facets (OData V4) — XML Annotation

DESCRIPTION: V4 XML example of UI.QuickViewFacets referencing a field group, a contact, and a DataPoint.

LANGUAGE: XML

CODE:
```xml

<Annotations Target="STTA_PROD_MAN.STTA_C_MP_SupplierType">
    <Annotation Term="UI.QuickViewFacets">
        <Collection>
            <Record Type="UI.ReferenceFacet">
                <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#SupplierQuickViewPOC_FieldGroup_1" />
            </Record>
            <Record Type="UI.ReferenceFacet">
                <PropertyValue Property="Label" String="Main Contact Person" />
                <PropertyValue Property="Target" AnnotationPath="@Communication.Contact#KeyAccount"/>
            </Record>
            <Record Type="UI.ReferenceFacet">
                <PropertyValue Property="Label" String="DataPoint in QV"/>
                <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Product"/>
            </Record>
        </Collection>
    </Annotation>
</Annotations>

```

STEP: 9 — Sample Code: Quick View Facets (OData V4) — ABAP CDS Annotation

DESCRIPTION: V4 ABAP CDS equivalent annotation of UI.Facet entries for Quick View.

LANGUAGE: ABAP CDS

CODE:
```
Annotate view STTA_C_MP_SUPPLIER with
{
    @UI.Facet: [
        {
            targetQualifier: 'SupplierQuickViewPOC_FieldGroup_1',
            type: #FIELDGROUP_REFERENCE,
            purpose: #QUICK_VIEW
        },
        {
            label: 'Main Contact Person',
            targetQualifier: 'KeyAccount',
            type: #CONTACT_REFERENCE,
            purpose: #QUICK_VIEW
        },
        {
            label: 'DataPoint in QV',
            targetQualifier: 'Product',
            type: #DATAPOINT_REFERENCE,
            purpose: #QUICK_VIEW
        }
    ]
    supplier;
}
```

STEP: 10 — Sample Code: Quick View Facets (OData V4) — CAP CDS Annotation

DESCRIPTION: CAP CDS example showing UI.QuickViewFacets using UI.ReferenceFacet entries.

LANGUAGE: CAP CDS

CODE:
```
Annotate STTA_PROD_MAN.STTA_C_MP_SupplierType with
@(
    UI.QuickViewFacets : [
        {
            $Type : 'UI.ReferenceFacet',
            Target : '@UI.FieldGroup#SupplierQuickViewPOC_FieldGroup_1'
        },
        {
            $Type : 'UI.ReferenceFacet',
            Label : 'Main Contact Person',
            Target : '@Communication.Contact#KeyAccount'
        },
        {
            $Type : 'UI.ReferenceFacet',
            Label : 'DataPoint in QV',
            Target : '@UI.DataPoint#Product'
        }
    ]
);
```

STEP: 11 — Footer Section (Actions, SemanticObject, sap-tag)

DESCRIPTION:
- To enable navigation from a Quick View facet, define a SemanticObject:
  - For a source property with ReferentialConstraints: set SemanticObject on source property.
  - For a navigation property defined via an association: set SemanticObject on the navigation target property.
- Mark important navigation targets with the sap-tag parameter superiorAction to show them by default in the Quick View footer.
- If superiorAction is not used, the first three actions are shown by default.
- Users can open the More Links popover to personalize visible actions.

Restrictions and notes:
- When running in an i-frame, browser "Open link in new tab" for action links is not supported. IntentBasedNavigation extension point processing is not executed in this scenario. See the IntentBasedNavigation API reference for details.
- If no QuickView annotations exist or no target is resolved at runtime, the field still appears as a link; pressing it displays an error/message.

LANGUAGE: JSON

CODE:
```json

```


**TITLE**: Configuring the Delete Dialog (UI.HeaderInfo & i18n keys)

**INTRODUCTION**: This guide shows how to configure the delete confirmation dialog text for SAP Fiori Elements list reports, object pages, and subobject pages. It includes exact annotation examples (XML and CDS) and rules for how the UI.HeaderInfo Title and Description are used in OData V2 and OData V4 (fullscreen and Flexible Column Layout). It also lists the i18n keys to override default delete messages.

**TAGS**: fiori-elements-framework, OData V2, OData V4, UI.HeaderInfo, delete-dialog, i18n, FCL, fullscreen

**STEP**: 1 — Add UI.HeaderInfo annotation for entity set

**DESCRIPTION**: Define the UI.HeaderInfo annotation (Title and Description) on the entity set bound to the table. Use either XML annotations or ABAP CDS annotations. The code below shows both forms exactly as used.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="UI.HeaderInfo">
  <Record>
    <PropertyValue Property="TypeName" String="Sales Order" />
    <PropertyValue Property="TypeNamePlural" String="Sales Orders" />
    <PropertyValue Property="Title">
      <Record Type="UI.DataField">
        <PropertyValue Property="Value" Path="so_id" />
       </Record>
    </PropertyValue>
    <PropertyValue Property="Description">
      <Record Type="UI.DataField">
        <PropertyValue Property="Value" String="Sales Order" />
      </Record>
    </PropertyValue>
  </Record>
</Annotation>
```

**LANGUAGE**: CDS

**CODE**:
```
@UI.headerInfo: {
  typeName: 'Sales Order',
  typeNamePlural: 'Sales Orders',
  title: {
    value: 'SO_ID',
    type: #STANDARD
  },
  description: {
    type: #STANDARD
  }
}
annotate view SALESORDERMANAGE with {

}
```

**STEP**: 2 — Behavior in OData V2 (fullscreen mode)

**DESCRIPTION**: In fullscreen mode (V2), the delete confirmation message derives from UI.HeaderInfo properties but displays only the Title even if Description is defined. If neither Title nor Description are defined, a generic delete confirmation message is shown.

**LANGUAGE**: JSON

**CODE**:
```json
{
  "V2_fullscreen_rules": [
    "If Title and Description are defined -> Delete dialog shows only Title",
    "If neither Title nor Description are defined -> Generic delete confirmation displayed"
  ]
}
```

**STEP**: 3 — Behavior in OData V2 (Flexible Column Layout - FCL)

**DESCRIPTION**: In FCL mode (V2), the delete confirmation message varies based on presence of Title and Description:
- Both Title and Description defined -> Dialog shows both Title and Description.
- Only Title defined -> Dialog shows only Title.
- Neither defined -> Generic delete confirmation message.

**LANGUAGE**: JSON

**CODE**:
```json
{
  "V2_FCL_rules": [
    "Both Title and Description defined -> show Title and Description",
    "Only Title defined -> show Title only",
    "Neither defined -> generic message"
  ]
}
```

**STEP**: 4 — Behavior in OData V4 (list reports, object pages, tables)

**DESCRIPTION**: In OData V4 the mapping is different:
- Delete from list report (main object): UI.HeaderInfo is NOT considered. Use i18n key: C_TRANSACTION_HELPER_CONFIRM_DELETE_WITH_OBJECTTITLE_SINGULAR
- Delete from object page header (or subobject page header): UI.HeaderInfo.Title and UI.HeaderInfo.Description are both considered. Use i18n key: C_TRANSACTION_HELPER_CONFIRM_DELETE_WITH_OBJECTINFO
- Delete from tables in object page or subobject page: Use i18n key: C_TRANSACTION_HELPER_CONFIRM_DELETE_WITH_OBJECTTITLE_SINGULAR

Include these keys in your i18n file to override default texts.

**LANGUAGE**: JSON

**CODE**:
```json
{
  "V4_rules_and_keys": {
    "list_report_delete": "C_TRANSACTION_HELPER_CONFIRM_DELETE_WITH_OBJECTTITLE_SINGULAR",
    "object_page_header_delete": "C_TRANSACTION_HELPER_CONFIRM_DELETE_WITH_OBJECTINFO",
    "tables_in_object_or_subobject_page_delete": "C_TRANSACTION_HELPER_CONFIRM_DELETE_WITH_OBJECTTITLE_SINGULAR"
  }
}
```

**STEP**: 5 — Localize / override delete dialog texts

**DESCRIPTION**: To change the default delete dialog text, override the specified i18n keys in your application i18n resource file. See the Localization of UI Texts document for full guidance and additional keys.

**LANGUAGE**: JSON

**CODE**:
```json
{
  "i18n_override_examples": {
    "C_TRANSACTION_HELPER_CONFIRM_DELETE_WITH_OBJECTTITLE_SINGULAR": "Are you sure you want to delete {0}?",
    "C_TRANSACTION_HELPER_CONFIRM_DELETE_WITH_OBJECTINFO": "Are you sure you want to delete {0} ({1})?"
  },
  "reference": "See localization-of-ui-texts-b8cb649.md for full list and context"
}
```

**STEP**: 6 — Important notes for implementers

**DESCRIPTION**: Keep these checks when customizing delete messages:
- Applications that override the delete message for a single table entry must review UI.HeaderInfo configuration and adapt Title/Description texts accordingly.
- Ensure Title and Description paths or values in the annotation correctly reference entity properties or strings.
- Test behavior in both Fullscreen and FCL modes for OData V2 and in list/object/table contexts for OData V4.

**LANGUAGE**: JSON

**CODE**:
```json
{
  "notes": [
    "Review UI.HeaderInfo when overriding delete message per-entry",
    "Validate Title and Description bindings (Path or String) in annotations",
    "Test delete dialog in Fullscreen and FCL (V2) and list/object/table contexts (V4)"
  ]
}
```

fiori-elements-framework
OData V2
OData V4
UI.HeaderInfo
delete-dialog
i18n
FCL
fullscreen


**TITLE**: Configuring the Delete Dialog in List Reports

**INTRODUCTION**: Instructions to adapt the Delete confirmation dialog in SAP Fiori Elements list reports. Covers how the dialog text and object context are provided for OData V2 (via UI.HeaderInfo annotation and i18n key ST_GENERIC_DELETE_SELECTED) and how to override localization keys for OData V4 (keys starting with C_TRANSACTION_HELPER_CONFIRM_DELETE).

**TAGS**: fiori-elements-framework, odata-v2, odata-v4, i18n, annotations, UI.HeaderInfo, delete-dialog

**STEP**: 1 — OData V2: Display object context in Delete dialog and change the dialog text

**DESCRIPTION**:
- The Delete dialog uses the text key ST_GENERIC_DELETE_SELECTED for the dialog message. Override this key in your app's i18n to change the default message.
- The object-specific context shown in the Delete dialog is taken from UI.HeaderInfo > Title. Map Title.Value to the property you want to display (for example so_id) in your annotation. Use either XML annotation or ABAP CDS annotation shown below.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="UI.HeaderInfo">
<Record>
  <PropertyValue Property="TypeName" String="Sales Order"/>
     <PropertyValue Property="TypeNamePlural" String="Sales Orders"/>
     <PropertyValue Property="Title">
       <Record Type="UI.DataField">
         <PropertyValue Property="Value" Path="so_id"/>
       </Record>
     </PropertyValue>
   </Record>
 </Annotation>
```

**LANGUAGE**: ABAP CDS

**CODE**:
```
@UI.headerInfo: {
  typeName: 'Sales Order',
  typeNamePlural: 'Sales Orders',
  title: {
    value: 'SO_ID',
    type: #STANDARD
  }
}
annotate view STTA_C_MP_PRODUCT with {

}
```

**LANGUAGE**: Properties (example)

**CODE**:
```properties
# Example i18n entry - update in your app's i18n file to change dialog text.
# Use {0} or the placeholder supported by your framework to insert the object title
ST_GENERIC_DELETE_SELECTED=Delete {0}?
```

**STEP**: 2 — OData V4: Override confirmation keys in i18n

**DESCRIPTION**:
- For OData V4 based list reports, override the localization keys that start with C_TRANSACTION_HELPER_CONFIRM_DELETE in your custom i18n file to change the Delete dialog texts.
- Add corresponding entries in your application's i18n file using the exact keys used by the framework. See your project localization file and the framework's Localization of UI Texts documentation for the exact key names and syntax.

**LANGUAGE**: Properties (example)

**CODE**:
```properties
# Example overrides for OData V4 (replace keys and values with actual keys from your framework)
C_TRANSACTION_HELPER_CONFIRM_DELETE=Delete {0}?
C_TRANSACTION_HELPER_CONFIRM_DELETE_TITLE=Confirm deletion
```


**TITLE**: Configuring the Dynamic Link List Card

**INTRODUCTION**: Step-by-step, code-focused instructions to configure a Dynamic Link List Card in the Fiori Elements framework. Covers manifest.json card settings, UI.HeaderInfo annotations (XML, ABAP CDS, CAP CDS), contact annotation mapping, and supported navigation types and behaviors.

**TAGS**: fiori-elements-framework, linklist, cards, manifest.json, UI.HeaderInfo, contact, annotation, navigation, ABAP CDS, CAP CDS

STEP: 1 — Configure the card in manifest.json

DESCRIPTION: Add a card entry to your app manifest. Set model, template "sap.ovp.cards.linklist", title, targetUri, listFlavor ("standard" or "carousel"), entitySet, sorting, headerAnnotationPath pointing to a UI.HeaderInfo qualifier, and defaultSpan. Use this as the card definition to render the Dynamic Link List Card.

LANGUAGE: JSON

CODE:
```json
"card017": {
          "model": "salesOrder",
          "template": "sap.ovp.cards.linklist",
          "settings": {
            "title": "Standard Dynamic Linklist Card",
            "targetUri": "https://en.abc.org/wiki/xyz _2",
            "subTitle": "Smartlink Feature Test",
            "listFlavor": "standard",
            "entitySet": "ProductSet",
            "sortBy": "Name",
            "sortOrder": "ascending",
            "headerAnnotationPath": "com.sap.vocabularies.UI.v1.HeaderInfo#header1",
            "defaultSpan": {
              "rows": 20,
              "cols": 2
            }
          }
        },
```

STEP: 2 — Configure UI.HeaderInfo (purpose and mapping for list)

DESCRIPTION: Define the card title, subtitle, and list item image/icon in the UI.HeaderInfo annotation referenced by headerAnnotationPath. Map:
- Title -> UI.HeaderInfo.Title (DataField, Value path -> label shown as list title)
- Description -> UI.HeaderInfo.Description (DataField, Value path -> list subtitle)
- TypeImageUrl or ImageUrl -> UI.HeaderInfo.TypeImageUrl / ImageUrl (used as list icon or image)
Carousel images follow the same mapping and behave like clicking the list title.

LANGUAGE: XML

CODE:
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.HeaderInfo" Qualifier="header1">
   <Record Type="com.sap.vocabularies.UI.v1.HeaderInfoType">
      <PropertyValue Property="TypeName" String="Product" />
      <PropertyValue Property="TypeNamePlural" String="Products" />
      <PropertyValue Property="Title">
         <Record Type="com.sap.vocabularies.UI.v1.DataField">
            <PropertyValue Property="Label" String="Product Name" />
            <PropertyValue Property="Value" Path="Name" />
         </Record>
      </PropertyValue>
      <PropertyValue Property="Description">
         <Record Type="com.sap.vocabularies.UI.v1.DataField">
            <PropertyValue Property="Label" String="Product Description" />
            <PropertyValue Property="Value" Path="Description" />
         </Record>
      </PropertyValue>
      <PropertyValue Property="TypeImageUrl" Path="ImageUrl" />
   </Record>
</Annotation>
```

STEP: 3 — Configure UI.HeaderInfo in ABAP CDS

DESCRIPTION: If using ABAP CDS, add @UI.headerInfo to annotate title, description, and type names. Map fields to entity properties (NAME, DESCRIPTION, etc.) to drive list display.

LANGUAGE: ABAP CDS

CODE:
```
@UI.headerInfo: {
  typeName: 'Product',
  typeNamePlural: 'Products',
  title: {
    label: 'Product Name',
    value: 'NAME',
    type: #STANDARD
  },
  description: {
    label: 'Product Description',
    value: 'DESCRIPTION',
    type: #STANDARD
  }
}
annotate view VIEWNAME with {

}
```

STEP: 4 — Configure UI.HeaderInfo in CAP CDS

DESCRIPTION: If using CAP CDS, define UI.HeaderInfo with $Type UI.HeaderInfoType and map Title, Description, and TypeImageUrl to entity fields.

LANGUAGE: CAP CDS

CODE:
```
UI.HeaderInfo #header1 : {
    $Type : 'UI.HeaderInfoType',
    TypeName : 'Product',
    TypeNamePlural : 'Products',
    Title : {
        $Type : 'UI.DataField',
        Label : 'Product Name',
        Value : Name
    },
    Description : {
        $Type : 'UI.DataField',
        Label : 'Product Description',
        Value : Description
    },
    TypeImageUrl : ImageUrl
},
```

STEP: 5 — Configure the contact annotation (purpose and field mapping)

DESCRIPTION: To enable quick view (contact popover) from the list title, add a Contact annotation (com.sap.vocabularies.Communication.v1.Contact) on the entity. Map:
- fn -> Full name (headline of contact popover)
- photo -> Picture URL used in popover header
- role -> Description text in popover header
- tel -> Collection of phone records; types control label mapping:
  - work + pref -> Phone
  - cell + work -> Mobile
  - fax -> Fax
- email -> Collection of emails; work + pref -> E-Mail
Implement contact annotation in XML / ABAP CDS / CAP CDS as shown.

LANGUAGE: XML

CODE:
```xml
<Annotation Term="com.sap.vocabularies.Communication.v1.Contact">
   <Record>
       <PropertyValue Property="fn" Path="FullName" />
      <PropertyValue Property="title" Path="Title" />
      <PropertyValue Property="org" Path="CompanyName" />
      <PropertyValue Property="role" Path="OrganizationRole" />
      <PropertyValue Property="tel">
         <Collection>
            <Record>
               <PropertyValue Property="type"
                  EnumMember="com.sap.vocabularies.Communication.v1.PhoneType/fax" />
               <PropertyValue Property="uri" Path="FaxNumber" />
            </Record>
            <Record>
               <PropertyValue Property="type"
                  EnumMember="com.sap.vocabularies.Communication.v1.PhoneType/work com.sap.vocabularies.Communication.v1.PhoneType/preferred" />
               <PropertyValue Property="uri" Path="PhoneNumber" />
            </Record>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="email">
         <Collection>
            <Record>
               <PropertyValue Property="type"
                  EnumMember="com.sap.vocabularies.Communication.v1.ContactInformationType/preferred com.sap.vocabularies.Communication.v1.ContactInformationType/work" />
               <PropertyValue Property="address" Path="EmailAddress" />
            </Record>
         </Collection>
      </PropertyValue>
   </Record>
</Annotation>
```

STEP: 6 — Contact mapping in ABAP CDS

DESCRIPTION: Annotate entity/view fields for contact semantics (full name, email, phone, job title, organization) so the contact popover uses these properties.

LANGUAGE: ABAP CDS

CODE:
```
define view VIEWNAME
{
  @Semantics.name.fullName: true
  FullName,

  @Semantics.eMail.address: true
  @Semantics.eMail.type:  [#WORK, #PREF]
  EmailAddress,

  @Semantics.telephone.type:  [ #FAX ]
  FaxNumber,

  @Semantics.telephone.type:  [ #PREF , #WORK]
  PhoneNumber,

  @Semantics.name: { jobTitle: true }
  Title,

  @Semantics.organization: { name: true }
  CompanyName,

  @Semantics.organization: { role: true, unit: true }
  OrganizationRole
}
```

STEP: 7 — Contact mapping in CAP CDS

DESCRIPTION: In CAP CDS, provide Communication.Contact mapping, listing telephone and email arrays with types and uri/address properties to drive the contact popover.

LANGUAGE: CAP CDS

CODE:
```
Communication.Contact : {
    fn : FullName,
    title : Title,
    org : CompanyName,
    role : OrganizationRole,
    tel : [
        {
            type : #fax,
            uri : FaxNumber
        },
        {
            type : [ #work, #pref ],
            uri : PhoneNumber
        }
    ],
    email : [
        {
            type : [ #pref, #work ],
            address : EmailAddress
        }
    ]
}
```

STEP: 8 — Configure navigation types and expected behavior

DESCRIPTION: The link list supports three navigation approaches. Implement one or more depending on your use case:
- Intent-based navigation: Provide UI.Identification with SemanticObject and Action (intent target).
- Function import (server-side action): Use DataFieldForAction in LineItem or set Action in LineItem to trigger an OData function import.
- External navigation (direct URL): Use a UI.LineItem of type WITH_URL; set the line item's url property to the entity field that contains the external URL.

Navigation behavior summary (when clicking list items and titles):
- If UI.Identification with Action OR LineItem with Action OR LineItem with Url exists: navigation is available from the line item.
- If any of the above exists AND default contact annotation is provided: navigation is available from the line item, and quick view (contact popover) is shown when clicking the title.
- If only the default contact annotation exists: quick view is available when clicking the title.
- If no navigation annotations and no contact annotation: only the label is displayed (no navigation, no quick view).

LANGUAGE: text

CODE:
```
Supported annotation configurations for navigation:
- UI.Identification with SemanticObject and Action (intent-based navigation)
- com.sap.vocabularies.UI.v1.LineItem with Action (DataFieldForAction -> OData action)
- com.sap.vocabularies.UI.v1.LineItem with Url (WITH_URL -> external navigation using entity field referenced in url)

Navigation behavior:
- For UI.Identification(Action) OR LineItem(Action) OR LineItem(Url): Navigation available from the line item.
- For UI.Identification(Action) OR LineItem(Action) OR LineItem(Url) + default contact annotation: Navigation available from the line item + quick view on title click.
- For default contact annotation only: Quick view available on title click.
- If no navigation/contact annotations: Only label is displayed.
```

Configuring the Dynamic Link List Card

fiori-elements-framework
linklist
cards
manifest.json
UI.HeaderInfo
contact
annotation
navigation
ABAP CDS
CAP CDS


**TITLE**: Configure Global Filter (SmartFilterBar) for SAP Fiori Elements OVP

**INTRODUCTION**: Configure the global filter (sap.ui.comp.smartfilterbar.SmartFilterBar) for Overview Pages (sap.ovp) by setting manifest.json properties. The global filter is applied to all cards that share property names in their entity types. Use UI.SelectionFields annotations to add default filters. This guide covers: manifest configuration, enabling basic search, and semantic date range (useDateRange / dateSettings) configuration.

**TAGS**: fiori-elements, sap.ovp, SmartFilterBar, manifest.json, SAPUI5, global-filter, OData, date-range, SearchRestrictions

**STEP**: 1 — Configure global filter in manifest.json

**DESCRIPTION**: Add global filter settings inside the "sap.ovp" section of your application's manifest.json. Specify:
- globalFilterModel: OData model name for the global filter.
- globalFilterEntitySet: Use from SAPUI5 1.54 onward (preferred).
- globalFilterEntityType: Deprecated since SAPUI5 1.54 — do not use for newer versions.

This configuration registers the entity set that contains the filterable properties and applies the SmartFilterBar across cards that share property names in their entity types.

**LANGUAGE**: JSON

**CODE**:
```json
"sap.ovp": {
    "_version": "1.1.0",
    "globalFilterModel": "ZCD204_EPM_DEMO_SRV",
    "globalFilterEntityType": "SalesOrder", //Deprecated since SAPUI5 1.54
    "globalFilterEntitySet": "SalesOrders", //Available from SAPUI5 1.54 onwards
    "cards": {
        ...
    }
}
```

**STEP**: 2 — Enable Basic Search on SmartFilterBar

**DESCRIPTION**: To enable the basic search field (search across all searchable entity sets) add the showBasicSearch property in manifest.json under "sap.ovp". Ensure your entity types/sets support search:
- Metadata: sap:searchable="true"
- Annotations: SearchRestrictions on the entity set

Set the property to "true" (string as in the reference) to display the search field on the SmartFilterBar.

**LANGUAGE**: JSON

**CODE**:
```json
"sap.ovp": {
    ...
    "showBasicSearch": "true"
}
```

**STEP**: 3 — Configure Semantic Date Ranges (useDateRange / dateSettings)

**DESCRIPTION**: Configure semantic date ranges and custom date-range behavior using filterSettings.dateSettings under sap.ovp in manifest.json. Options:
- customDateRangeImplementation: Reference to a JS class (controller path) to modify date range value list (can remove or add values).
- selectedValues: Comma-separated set of standard date range values to include/exclude.
- exclude: When true (default), selectedValues are excluded; when false, only selectedValues are shown.
- Precedence: customDateRangeImplementation takes precedence over selectedValues/exclude.
- useDateRange precedence: dateSettings.useDateRange always takes precedence. If not set, sap.ovp.useDateRangeType is used. Defining both causes an application error.

When useDateRange is False, other settings under dateSettings remain effective for configuring date filters.

Use property-level entries to override defaults per date property.

**LANGUAGE**: JSON

**CODE**:
```json
sap.ovp: {
    "filterSettings": {
        "dateSettings": {
            "selectedValues": "DAYS,WEEK,MONTH,DATERANGE,QUARTER,YEAR",
            "fields": {
                "DateProperty1": {
                    "selectedValues": "TOMORROW,NEXT,LASTYEAR,LAST2WEEKS,LAST3WEEKS,LAST4WEEKS,LAST5WEEKS,YEARTODATE,QUARTER1,QUARTER2,QUARTER3,QUARTER4",
                    "exclude": true
                },
                "DateProperty2": {
                    "customDateRangeImplementation": "SOMULTIENTITY.ext.controller.customDateRangeType",
                    "selectedValues": "FROM,TO,DAYS,WEEK,MONTH,DATERANGE,TODAY,TOMORROW,YEAR,YESTERDAY",
                    "exclude": true
                },
                "DateProperty3": {
                    "selectedValues": "YESTERDAY",
                    "exclude": false
                }
            }
        }
    }
}
```

**STEP**: 4 — Implementation notes and precedence rules

**DESCRIPTION**: Follow these rules when implementing:
- SmartFilterBar persists user filters and allows sharing; UI.SelectionFields annotations can add default filters.
- Use globalFilterEntitySet (preferred) instead of globalFilterEntityType for SAPUI5 >= 1.54.
- For date ranges:
  - customDateRangeImplementation overrides selectedValues/exclude for that property.
  - dateSettings.useDateRange overrides sap.ovp.useDateRangeType. Do not define both simultaneously.
  - If useDateRange = False, dateSettings entries still apply to configure date filters.

No code block required.

fiori-elements sap.ovp SmartFilterBar manifest.json SAPUI5 global-filter OData date-range SearchRestrictions


**TITLE**: Configuring the List Area (LineItem) with DataField, DataPoint, Contact, and Navigation Annotations

**INTRODUCTION**: Practical, code-focused guidance to configure the list area (UI.LineItem) for Fiori Elements using XML annotations, ABAP CDS, and CAP CDS. Shows how to: display textual values (DataField), show numeric and quick-view information (DataPoint, Contact via DataFieldForAnnotation), and configure navigation (intent-based or URL). Use these patterns to generate or modify annotation code in metadata/CDS sources.

**TAGS**: fiori-elements-framework, annotations, LineItem, DataField, DataPoint, Contact, navigation, XML, ABAP CDS, CAP CDS, UI

**STEP**: 1 — Define DataField properties (display textual values in the list)

**DESCRIPTION**: Add DataField entries to the LineItem annotation (UI.LineItem / com.sap.vocabularies.UI.v1.LineItem) to display label/value pairs in the list. Use qualifiers to scope alternate views (example uses qualifier "View4"). Provide value paths for properties and use DataFieldForAnnotation to reference other annotation constructs (e.g., DataPoint).

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.LineItem" Qualifier="View4">
   <Collection>
      <Record Type="com.sap.vocabularies.UI.v1.DataField">
         <PropertyValue Property="Label" String="Order ID" />
         <PropertyValue Property="Value" Path="SalesOrderID" />
      </Record>
      <Record Type="com.sap.vocabularies.UI.v1.DataField">
         <PropertyValue Property="Label" String="Customer" />
         <PropertyValue Property="Value" Path="ToBusinessPartner/EmailAddress" />
      </Record>
      <Record Type="com.sap.vocabularies.UI.v1.DataField">
         <PropertyValue Property="Label" String="Customer" />
         <PropertyValue Property="Value" Path="CustomerName" />
      </Record>
      <Record Type="com.sap.vocabularies.UI.v1.DataFieldForAnnotation">
         <PropertyValue Property="Label" String="TaxAmount" />
         <PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.DataPoint#TaxAmount" />
      </Record>
   </Collection>
</Annotation>
```

**LANGUAGE**: ABAP CDS

**CODE**:
```
@UI.lineItem: [
  {
    label: 'Order ID',
    position: 10,
    qualifier: 'View4'
  }
]
SALESORDERID;

@UI.lineItem: [
  {
    label: 'Customer',
    value: '_BUSINESSPARTNER.EMAILADDRESS',
    position: 20,
    qualifier: 'View4'
  }
]
TOBUSINESSPARTNER/EMAILADDRESS;

@UI.lineItem: [
  {
    label: 'Customer',
    position: 30,
    qualifier: 'View4'
  }
]
CUSTOMERNAME;

@UI.lineItem: [
  {
    label: 'TaxAmount',
    valueQualifier: 'TaxAmount',
    type: #AS_DATAPOINT,
    position: 40,
    qualifier: 'View4'
  }
]
PROPERT_NAME;
```

**LANGUAGE**: CAP CDS

**CODE**:
```
UI.LineItem #View4 : [
    {
        $Type : 'UI.DataField',
        Label : 'Order ID',
        Value : SalesOrderID
    },
    {
        $Type : 'UI.DataField',
        Label : 'Customer',
        Value : ToBusinessPartner.EmailAddress
    },
    {
        $Type : 'UI.DataField',
        Label : 'Customer',
        Value : CustomerName
    },
    {
        $Type : 'UI.DataFieldForAnnotation',
        Label : 'TaxAmount',
        Target : '@UI.DataPoint#TaxAmount'
    }
]
```

**STEP**: 2 — (Optional) Define DataFieldForAnnotation: DataPoint (numeric display)

**DESCRIPTION**: Use DataPoint annotations to render numeric/measure values in the list (referenced via DataFieldForAnnotation). Define a DataPoint with a qualifier (e.g., #TaxAmount) and include Title and Value properties. Apply the DataPoint annotation in the LineItem via a DataFieldForAnnotation Target pointing to the qualifier.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.DataPoint" Qualifier="TaxAmount">
   <Record Type="com.sap.vocabularies.UI.v1.DataPointType">
      <PropertyValue Property="Title" String="TaxAmount" />
      <PropertyValue Property="Value" Path="TaxAmount" />
   </Record>
</Annotation>
```

**LANGUAGE**: ABAP CDS

**CODE**:
```
@UI.dataPoint: {
  title: 'TaxAmount'
}
TaxAmount;
```

**LANGUAGE**: CAP CDS

**CODE**:
```
UI.DataPoint #TaxAmount : {
    $Type : 'UI.DataPointType',
    Title : 'TaxAmount',
    Value : TaxAmount
}
```

**STEP**: 3 — (Optional) Define DataFieldForAnnotation: Contact (quick view / contact details)

**DESCRIPTION**: Use the Communication.Contact annotation to present quick-view contact information for list items. Include tel and email collections with type and uri/address mapping. The Contact annotation can be referenced from a DataFieldForAnnotation in the LineItem to enable quick view panels.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="com.sap.vocabularies.Communication.v1.Contact">
   <Record>
      <PropertyValue Property="tel">
         <Collection>
            <Record>
               <PropertyValue Property="type" EnumMember="com.sap.vocabularies.Communication.v1.PhoneType/fax" />
               <PropertyValue Property="uri" Path="FaxNumber" />
            </Record>
            <Record>
               <PropertyValue Property="type" EnumMember="com.sap.vocabularies.Communication.v1.PhoneType/work com.sap.vocabularies.Communication.v1.PhoneType/preferred" />
               <PropertyValue Property="uri" Path="PhoneNumber" />
            </Record>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="email">
         <Collection>
            <Record>
               <PropertyValue Property="type" EnumMember="com.sap.vocabularies.Communication.v1.ContactInformationType/preferred com.sap.vocabularies.Communication.v1.ContactInformationType/work" />
               <PropertyValue Property="address" Path="EmailAddress" />
            </Record>
         </Collection>
      </PropertyValue>
   </Record>
</Annotation>
```

**LANGUAGE**: ABAP CDS

**CODE**:
```
define view VIEWNAME
{
  @Semantics.eMail.address: true
  @Semantics.eMail.type:  [#WORK]
  EmailAddress,

  @Semantics.telephone.type:  [ #FAX ]
  FaxNumber,

  @Semantics.telephone.type:  [ #WORK]
  PhoneNumber
}
```

**LANGUAGE**: CAP CDS

**CODE**:
```
Communication.Contact : {
    tel : [
        {
            type : #fax,
            uri : FaxNumber
        },
        {
            type : [ #work, #pref ],
            uri : PhoneNumber
        }
    ],
    email : [
        {
            type : [ #pref, #work ],
            address : EmailAddress
        }
    ]
}
```

**STEP**: 4 — Configure navigation properties for list items (intent-based and URL)

**DESCRIPTION**: Choose the navigation term appropriate to your target:
- Use com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation to enable intent-based navigation to other Fiori apps (recommended). This leverages the target mapping / intent resolution.
- Use com.sap.vocabularies.UI.v1.DataFieldWithUrl to navigate to external URLs or application routes not exposed as a target map. Overview pages treat such navigation as intent-based and open the application in the same tab with context.

Include such navigation records inside the LineItem collection. The code snippet below is a placeholder comment illustrating where to add either term inside the LineItem annotation.

**LANGUAGE**: XML

**CODE**:
```xml
<!-- Add a Record of Type DataFieldForIntentBasedNavigation or DataFieldWithUrl inside the LineItem Collection.
     Example placeholder: use DataFieldForIntentBasedNavigation to reference an intent (SemanticObject/Action)
     or DataFieldWithUrl to provide a direct URL/route. -->
```

**STEP**: 5 — Recommendation / Notes

**DESCRIPTION**: Prefer DataFieldForIntentBasedNavigation for standard intent-based navigation to Fiori applications. Use DataFieldWithUrl only when navigating to a specific application route not configured as a target mapping. Ensure qualifiers and value paths match the DataPoint/Contact qualifiers used in the LineItem.

fiori-elements-framework
annotations
LineItem
DataField
DataPoint
Contact
navigation
XML
ABAP CDS
CAP CDS
UI


**TITLE**: Configuring the List Card Header Area (sap.ovp list card)

**INTRODUCTION**: Action-oriented reference for configuring list card header elements in SAP Fiori Elements (sap.ovp). Includes manifest.json settings and required UI annotations (KPI, PresentationVariant, SelectionVariant, DataPoint), view tabs, header navigation, and header counter configuration. Use these snippets directly in your manifest and annotation sources.

**TAGS**: sap.ovp, list card, manifest.json, KPI, DataPoint, PresentationVariant, SelectionVariant, tabs, header, annotations, CDS, CAP, XML, JSON

STEP: 1 — Card Title and Subtitle (manifest.json)
DESCRIPTION: Set the card title and subtitle in the card settings of manifest.json. Place the block under "sap.ovp" -> "cards" -> "<card id>" -> "settings".
LANGUAGE: JSON
CODE:
```json
"sap.ovp": {
		"globalFilterModel": "salesOrder",
		"globalFilterEntityType": "GlobalFilters", //Deprecated since SAPUI5 1.54.
                "globalFilterEntitySet": "GlobalFilters",  //Available from SAPUI5 1.54.
              ...
              ...
		"cards": {
          "sap.ovp.test_card.card002": {
            "model": "salesOrder",
            "template": "sap.ovp.cards.list",
            "settings": {
              "title": "Purchase History",
              "subTitle": "SubTitle",
              "entitySet": "SalesOrderSet",
              ...
              ...
                }
              ]
            }
        }
```

STEP: 2 — Enable KPI on the Card Header (manifest.json)
DESCRIPTION: Reference a KPI annotation by setting kpiAnnotationPath under sap.ovp to display KPI values in the list card header.
LANGUAGE: JSON
CODE:
```json
"sap.ovp": {
    ...
    "kpiAnnotationPath": "com.sap.vocabularies.UI.v1.KPI#AllActualCosts", // Represents the KPI annotation path
    ...
}
```

STEP: 3 — KPI Annotation (XML)
DESCRIPTION: Define a KPI annotation (UI.KPI) with Detail, SelectionVariant and DataPoint references. Use Qualifier to match kpiAnnotationPath from manifest.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.KPI" Qualifier="AllActualCosts">
   <Record Type="UI.KPIType">
      <PropertyValue Property="Detail">
         <Record Type="UI.KPIDetailType">
            <PropertyValue Property="DefaultPresentationVariant" Path="@UI.PresentationVariant#Eval_by_Currency1" />
            <PropertyValue Property="AlternativePresentationVariants">
               <Collection>
                  <Path>@UI.PresentationVariant#Eval_by_Currency_Column</Path>
               </Collection>
            </PropertyValue>
            <PropertyValue Property="SemanticObject" String="Action" />
            <PropertyValue Property="Action" String="toappnavsample" />
         </Record>
      </PropertyValue>
      <PropertyValue Property="SelectionVariant" Path="@UI.SelectionVariant#Eval_by_Currency_1" />
      <PropertyValue Property="DataPoint" Path="@UI.DataPoint#Eval_by_Country_Generic" />
      <PropertyValue Property="ID" String="String for KPI Annotation" />
   </Record>
</Annotation>
```

STEP: 4 — KPI Annotation (ABAP CDS)
DESCRIPTION: Equivalent KPI definition using ABAP CDS syntax. Use the same qualifier to match manifest kpiAnnotationPath.
LANGUAGE: CDS
CODE:
```
@UI.KPI: [
  {
    detail: {
      defaultPresentationVariantQualifier: 'Eval_by_Currency1',
      alternativePresentationVariantQualifiers: [
        'Eval_by_Currency_Column'
      ],
      semanticObject: 'Action',
      semanticObjectAction: 'toappnavsample'
    },
    selectionVariantQualifier: 'Eval_by_Currency_1',
    id: 'String for KPI Annotation',
    qualifier: 'AllActualCosts'
  }
]
Eval_by_Country-Generic;
```

STEP: 5 — KPI Annotation (CAP CDS)
DESCRIPTION: CAP CDS representation of a KPI. Keep qualifier and DataPoint reference consistent with manifest.
LANGUAGE: CDS
CODE:
```
UI.KPI #AllActualCosts : {
    $Type : 'UI.KPIType',
    Detail : {
        $Type : 'UI.KPIDetailType',
        DefaultPresentationVariant : ![@UI.PresentationVariant#Eval_by_Currency1],
        AlternativePresentationVariants : [
            ![@UI.PresentationVariant#Eval_by_Currency_Column]
        ],
        SemanticObject : 'Action',
        Action : 'toappnavsample',
    },
    SelectionVariant : ![@UI.SelectionVariant#Eval_by_Currency_1],
    DataPoint : ![@UI.DataPoint#Eval_by_Country-Generic],
    ID : 'String for KPI Annotation'
},
```

STEP: 6 — Associated PresentationVariant Annotation (XML)
DESCRIPTION: Define PresentationVariant with MaxItems, GroupBy, SortOrder, and Visualizations referenced by KPI detail. Use Qualifier to link defaultPresentationVariantQualifier.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.PresentationVariant" Qualifier="Eval_by_Currency1">
   <Record>
      <PropertyValue Property="MaxItems" Int="5" />
      <PropertyValue Property="GroupBy">
         <Collection>
            <PropertyPath>Country</PropertyPath>
            <PropertyPath>Currency</PropertyPath>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="SortOrder">
         <Collection>
            <Record>
               <PropertyValue Property="Property" PropertyPath="TotalSales" />
               <PropertyValue Property="Descending" Bool="true" />
            </Record>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="Visualizations">
         <Collection>
            <AnnotationPath>@UI.Chart#Eval_by_Currency_Donut</AnnotationPath>
         </Collection>
      </PropertyValue>
   </Record>
</Annotation>
```

STEP: 7 — Associated PresentationVariant Annotation (ABAP CDS)
DESCRIPTION: ABAP CDS representation for PresentationVariant. Use qualifier Eval_by_Currency1 to match KPI detail.
LANGUAGE: CDS
CODE:
```
@UI.PresentationVariant: [
  {
    maxItems: 5,
    groupBy: [
      'COUNTRY',
      'CURRENCY'
    ],
    sortOrder: [
      {
        by: 'TOTALSALES'
      }
    ],
    visualizations: [
      {
        type: #AS_CHART,
        qualifier: 'Eval_by_Currency_Donut'
      }
    ],
    qualifier: 'Eval_by_Currency1'
  }
]
annotate view VIEWNAME with { }
```

STEP: 8 — Associated PresentationVariant Annotation (CAP CDS)
DESCRIPTION: CAP CDS PresentationVariant equivalent. Use Visualizations referencing chart qualifier.
LANGUAGE: CDS
CODE:
```
UI.PresentationVariant #Eval_by_Currency1 : {
    MaxItems : 5,
    GroupBy : [
        Country,
        Currency,
    ],
    SortOrder : [
        {
            Property : TotalSales,
            Descending : true
        },
    ],
    Visualizations : [
        '@UI.Chart#Eval_by_Currency_Donut'
    ]
},
```

STEP: 9 — Associated SelectionVariant Annotation (XML)
DESCRIPTION: Create SelectionVariant with SelectOptions and Parameters. Use Qualifier to match KPI/Tab settings.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.SelectionVariant" Qualifier="Eval_by_Currency_1">
   <Record>
      <PropertyValue Property="SelectOptions">
         <Collection>
            <Record>
               <PropertyValue Property="PropertyName" PropertyPath="Country" />
               <PropertyValue Property="Ranges">
                  <Collection>
                     <Record>
                        <PropertyValue Property="Sign" EnumMember="UI.SelectionRangeSignType/I" />
                        <PropertyValue Property="Option" EnumMember="UI.SelectionRangeOptionType/EQ" />
                        <PropertyValue Property="Low" String="IN" />
                     </Record>
                  </Collection>
               </PropertyValue>
            </Record>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="Parameters">
         <Collection>
            <Record Type="UI.Parameter">
               <PropertyValue Property="PropertyName" PropertyPath="Currency_Target" />
               <PropertyValue Property="PropertyValue" String="EUR" />
            </Record>
            <Record Type="UI.Parameter">
               <PropertyValue Property="PropertyName" PropertyPath="UoM_Target" />
               <PropertyValue Property="PropertyValue" String="KGM" />
            </Record>
         </Collection>
      </PropertyValue>
   </Record>
</Annotation>
```

STEP: 10 — Associated SelectionVariant Annotation (ABAP CDS)
DESCRIPTION: ABAP CDS SelectionVariant sample. Use qualifier Eval_by_Currency_1.
LANGUAGE: CDS
CODE:
```
@UI.SelectionVariant: [
  {
    qualifier: 'Eval_by_Currency_1',
	parameters: [
	  {name: 'PropertyName', value: 'CompanyCurrency' },
	  { name: 'PropertyValue', value: 'EUR'}
	]
  }
]
annotate view VIEWNAME with {

}
```

STEP: 11 — Associated SelectionVariant Annotation (CAP CDS)
DESCRIPTION: CAP CDS SelectionVariant example with SelectOptions and Parameters.
LANGUAGE: CDS
CODE:
```
UI.SelectionVariant #Eval_by_Currency_1 : {
    SelectOptions : [
        {
            PropertyName : Country,
            Ranges : [
                {
                    Sign : #I,
                    Option : #EQ,
                    Low : 'IN'
                }
            ]
        }
    ],
    Parameters : [
        {
            $Type : 'UI.Parameter',
            PropertyName : Currency_Target,
            PropertyValue : 'EUR'
        },
        {
            $Type : 'UI.Parameter',
            PropertyName : UoM_Target,
            PropertyValue : 'KGM'
        }
    ]
},
```

STEP: 12 — DataPoint Annotation (purpose & properties)
DESCRIPTION: Define DataPoint annotation referenced by KPI to show title, measured value, number formatting, criticality and trend. Required/used properties:
- Title: displayed on KPI header
- Value: Path to measure
- ValueFormat: number formatting (ScaleFactor, NumberOfFractionalDigits)
- Criticality/CriticalityCalculation: use either enum or a path-based value
  - Supported enum members:
    - com.sap.vocabularies.UI.v1.CriticalityType/Neutral (default neutral color)
    - com.sap.vocabularies.UI.v1.CriticalityType/Negative (red)
    - com.sap.vocabularies.UI.v1.CriticalityType/Critical (orange)
    - com.sap.vocabularies.UI.v1.CriticalityType/Positive (green)
  - Or use a numeric path returning:
    - 0 = Neutral, 1 = Negative, 2 = Critical, 3 = Positive
- CriticalityCalculation: improvementDirection, deviation/tolerance thresholds
- TargetValue, TrendCalculation: optional additional KPI metadata
LANGUAGE: (explanatory)

STEP: 13 — Associated DataPoint Annotation (XML)
DESCRIPTION: XML DataPoint example including Title, Value, ValueFormat, CriticalityCalculation, TargetValue and TrendCalculation. Qualifier should match DataPoint reference in KPI.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.DataPoint" Qualifier="Eval_by_Country_Generic">
   <Record Type="UI.DataPointType">
      <PropertyValue Property="Title" String="Sales India - Generic Card" />
      <PropertyValue Property="Value" Path="Sales" />
      <PropertyValue Property="ValueFormat">
         <Record>
            <PropertyValue Property="ScaleFactor" Decimal="2" />
            <PropertyValue Property="NumberOfFractionalDigits" Int="1" />
         </Record>
      </PropertyValue>
      <PropertyValue Property="CriticalityCalculation">
         <Record>
            <PropertyValue Property="ImprovementDirection" EnumMember="UI.ImprovementDirectionType/Minimize" />
            <PropertyValue Property="DeviationRangeHighValue" String="7300" />
            <PropertyValue Property="ToleranceRangeHighValue" String="7200" />
         </Record>
      </PropertyValue>
      <PropertyValue Property="TargetValue" String="2.000 " />
      <PropertyValue Property="TrendCalculation">
         <Record>
            <PropertyValue Property="ReferenceValue" String="5201680" />
            <PropertyValue Property="DownDifference" Decimal="10000000.0" />
         </Record>
      </PropertyValue>
   </Record>
</Annotation>
```

STEP: 14 — Associated DataPoint Annotation (ABAP CDS)
DESCRIPTION: ABAP CDS DataPoint example. Place this in your CDS source and ensure the qualifier matches KPI.DataPoint.
LANGUAGE: CDS
CODE:
```
@UI.dataPoint: {
	 title: 'Sales India - Generic Card',
	 valueFormat: { scaleFactor: 2, numberOfFractionalDigits: 1 },
	 criticalityCalculation: {
	   improvementDirection: #MINIMIZE,
	   deviationRangeHighValue: 7300,
	   toleranceRangeHighValue: 7200
	 },
	 targetValue: 2.000,
	 trendCalculation: { referenceValue: 'refValElement', downDifference: 10000000.0 }
}
Sales;
```

STEP: 15 — Associated DataPoint Annotation (CAP CDS)
DESCRIPTION: CAP CDS DataPoint block. Use qualifier Eval_by_Country-Generic to match KPI reference.
LANGUAGE: CDS
CODE:
```
UI.DataPoint #Eval_by_Country-Generic : {
    $Type : 'UI.DataPointType',
    Title : 'Sales India - Generic Card',
    Value : Sales,
    ValueFormat : {
        ScaleFactor : 2,
        NumberOfFractionalDigits : 1
    },
    CriticalityCalculation : {
        ImprovementDirection : #Minimizing,
        DeviationRangeHighValue : '7300',
        ToleranceRangeHighValue : '7200'
    },
    TargetValue : '2.000 ',
    TrendCalculation : {
        ReferenceValue : '5201680',
        DownDifference : 10000000.0
    }
},
```

STEP: 16 — View Switch (tabs in manifest.json)
DESCRIPTION: Configure card-level tabs (view switch) in the card settings using the "tabs" array. Each tab references annotation paths for LineItem, SelectionVariant, PresentationVariant, Identification and DataPoint. Use these values to present alternate tab views and KPI per tab.
LANGUAGE: JSON
CODE:
```
"cards": {
      "card00": {
        "model": "salesOrder",
        "template": "sap.ovp.cards.list",
        "settings": {
          "category" : "Sales Orders With Analytical Header",
          "listFlavor": "bar",
          "listType": "extended",
          "entitySet": "SalesOrderSet",
          "tabs": [
                {
                    "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#View1",
                    "selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#line1",
                    "presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#line",
                    "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification",
                    "dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#line",
                    "value": "{{dropdown_value1}}"
                },
                {
                    "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#View2",
                    "presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#customer",
                    "selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#SP2",
                    "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#item2",
                    "dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#line",
                    "value": "{{dropdown_value2}}"
                },
```

STEP: 17 — List Header Navigation (identification annotation)
DESCRIPTION: Use the Identification annotation to configure header and content navigation within the application. Note: LineItem navigation settings take precedence over Identification when both are present for list area navigation.
LANGUAGE: (explanatory)

STEP: 18 — Header Counter (manifest.json)
DESCRIPTION: Configure header counter visibility by setting defaultCountMode in the card settings in manifest.json. Supported only for OData V2 in SAP Fiori elements.
LANGUAGE: JSON
CODE:
```json
 "Card_Model_Name": {
                "settings": {
                    "defaultCountMode": "None"
                }
            }
```

STEP: 19 — Header Counter Note
DESCRIPTION: defaultCountMode is only supported in SAP Fiori elements for OData V2. Ensure your service and app are OData V2 if you require header counting behavior.
LANGUAGE: (explanatory)

sap.ovp
list card
manifest.json
KPI
DataPoint
PresentationVariant
SelectionVariant
tabs
header
annotations
CDS
CAP
XML
JSON