**TITLE**: Line Micro Chart — UI.Chart and UI.DataPoint Annotations (XML, ABAP CDS, CAP CDS)

**INTRODUCTION**: Short, action-oriented guide showing required annotations and sample code for implementing a Line Micro Chart in SAP Fiori Elements (OData V4). Includes XML, ABAP CDS, and CAP CDS examples for UI.Chart and UI.DataPoint, mandatory constraints, and support for string-based dimension fields annotated as calendar values.

**TAGS**: fiori-elements-framework, ui.chart, line-micro-chart, ui.datapoint, annotations, abap-cds, cap-cds, xml

**STEP**: 1 — Preconditions and quick rules

**DESCRIPTION**: Ensure chart data model and types meet these preconditions before adding annotations:
- Dimensions and measures cannot come from the same entity; they must be from a 1:n navigation entity.
- Dimension values must have float-based fields or be castable to float; string-based dimension fields are allowed only when annotated as calendar values (see step for calendar annotations).
- For semantic coloring only the `Criticality` annotation is supported. If `Criticality` resolves to a fixed enum, the entire line is colored accordingly. If it is a path, the last data point's criticality defines the line color.
- Units of measure must be consistent across all data points.
- Recommended measures: use 1 measure, max 3 measures if needed.
- Measure display: the smallest measure value at the first dimension value shows top-left; the largest measure value at the last dimension value shows top-right.

**LANGUAGE**: text

**CODE**:
```text
Preconditions:
- Dimensions and measures must come from a 1:n navigation entity.
- Dimension values must be float or castable to float (string allowed when annotated as calendar).
- Semantic coloring uses UI.DataPoint Criticality only.
- Units must be consistent across data points.
- Recommend 1 measure, max 3 measures.
- When multiple measures are plotted, top-left shows smallest measure at first dimension value; top-right shows largest at last dimension value.
```

**STEP**: 2 — Required annotations checklist

**DESCRIPTION**: These annotations are mandatory for a Line micro chart to be displayed and plotted correctly. Verify presence of each item when authoring metadata.

**LANGUAGE**: text

**CODE**:
```text
Mandatory annotations:
- UI.Chart → ChartType: "Line"
- UI.Chart → Dimensions
- UI.Chart → Measures
- UI.Chart → MeasureAttributes → DataPoint (each MeasureAttribute that should be plotted must reference a DataPoint)
- UI.DataPoint → Value
Notes:
- If using multiple measures, the first measure must have both UI.Chart → Measure and UI.Chart → MeasureAttribute with a DataPoint. Missing this for the first measure prevents display of the chart.
- Subsequent measures also require a Measure and MeasureAttribute with DataPoint to be plotted.
```

**STEP**: 3 — UI.Chart: XML Annotation example

**DESCRIPTION**: Use this XML UI.Chart annotation for a Line chart. Title maps to UI.Chart Title; Description maps to UI.Chart Description. Measures, Dimensions, and MeasureAttributes must be defined. Keep MeasureAttributes DataPoint references to link UI.DataPoint annotations.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="UI.Chart" Qualifier="SpecificationWidthLineChart">
    <Record Type="UI.ChartDefinitionType">
        <PropertyValue Property="Title" String="Product Width Specification Line Chart"/>
        <PropertyValue Property="Description" String="Describe Line Chart"/>
        <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Line"/>
        <PropertyValue Property="Measures">
            <Collection>
                <PropertyPath>Width</PropertyPath>
                <PropertyPath>Depth</PropertyPath>
            </Collection>
        </PropertyValue>
        <PropertyValue Property="Dimensions">
            <Collection>
                <PropertyPath>Day</PropertyPath>
            </Collection>
        </PropertyValue>
        <PropertyValue Property="MeasureAttributes">
             <Collection>
                  <Record Type="UI.ChartMeasureAttributeType">
                       <PropertyValue Property="Measure" PropertyPath="Width"/>
                       <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis2"/>
                       <PropertyValue Property="DataPoint" AnnotationPath="@UI.DataPoint#Width"/>
                  </Record>
                  <Record Type="UI.ChartMeasureAttributeType">
                      <PropertyValue Property="Measure" PropertyPath="Depth"/>
                      <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis2"/>
                      <PropertyValue Property="DataPoint" AnnotationPath="@UI.DataPoint#Depth"/>
                  </Record>
              </Collection>
         </PropertyValue>
    </Record>
</Annotation>
```

**STEP**: 4 — UI.Chart: ABAP CDS Annotation example

**DESCRIPTION**: ABAP CDS syntax to define the same UI.Chart configuration. Use `qualifier` to identify the chart. Include measures, dimensions, and measureAttributes with asDataPoint true to link to UI.DataPoint.

**LANGUAGE**: ABAP CDS

**CODE**:
```abap
@UI.Chart: [
  {
    title: 'Product Width Specification Line Chart',
    description: 'Describe Line Chart',
    chartType: #LINE,
    measures: [
      'WIDTH',
      'DEPTH'
    ],
    dimensions: [
      'DAY',
      'DAY'
    ],
    measureAttributes: [
      {
        measure: 'Width',
        role: #AXIS_2,
        asDataPoint: true
      },
      {
        measure: 'Depth',
        role: #AXIS_2,
        asDataPoint: true
      }
    ],
    qualifier: 'SpecificationWidthtLineChart'
  }
]
annotate view STTA_C_MP_PRODUCT with {

}
```

**STEP**: 5 — UI.Chart: CAP CDS Annotation example

**DESCRIPTION**: CAP CDS (service.cds) definition of UI.Chart. Use $Type fields and DataPoint annotation references where required.

**LANGUAGE**: CAP CDS

**CODE**:
```cap
UI.Chart #SpecificationWidthLineChart : {
    $Type : 'UI.ChartDefinitionType',
    Title : 'Product Width Specification Line Chart',
    Description : 'Describe Line Chart',
    ChartType : #Line,
    Measures : [
        Width,
        Depth
    ],
    Dimensions : [
        Day,
        Day
    ],
    MeasureAttributes : [
        {
            $Type : 'UI.ChartMeasureAttributeType',
            Measure : Width,
            Role : #Axis2,
            DataPoint : '@UI.DataPoint#Width'
        },
        {
            $Type : 'UI.ChartMeasureAttributeType',
            Measure : Depth,
            Role : #Axis2,
            DataPoint : '@UI.DataPoint#Depth'
        }
    ]
}
```

**STEP**: 6 — UI.DataPoint: XML examples

**DESCRIPTION**: Define UI.DataPoint annotations that provide Value and Criticality. Criticality can be a path (dynamic coloring based on last datapoint) or a fixed enum (entire line colored). Provide one DataPoint per measured property and reference them from UI.Chart MeasureAttributes.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="UI.DataPoint" Qualifier="Width">
    <Record>
        <PropertyValue Property="Value" Path="Width"/>
        <PropertyValue Property="Criticality" Path="criticalityValue"/>
    </Record>
</Annotation>

<Annotation Term="UI.DataPoint" Qualifier="Depth">
    <Record>
        <PropertyValue Property="Value" Path="Depth"/>
        <PropertyValue Property="Criticality" Path="criticalityValue"/>
    </Record>
</Annotation>
```

**STEP**: 7 — UI.DataPoint: ABAP CDS example

**DESCRIPTION**: ABAP CDS style UI.DataPoint mapping. Use @UI.dataPoint to annotate elements; include criticality and targetValueElement as needed.

**LANGUAGE**: ABAP CDS

**CODE**:
```abap
@UI.dataPoint: {
  targetValueElement: 'Weight',
  criticality: 'criticalityValue'
}
Width;

@UI.dataPoint: {
  criticality: 'criticalityValue'
}
Depth;
```

**STEP**: 8 — UI.DataPoint: CAP CDS example

**DESCRIPTION**: CAP CDS syntax for UI.DataPoint definitions. Reference these DataPoints in UI.Chart MeasureAttributes (DataPoint: '@UI.DataPoint#...').

**LANGUAGE**: CAP CDS

**CODE**:
```cap
UI.DataPoint #Width : {
    Value : Width,
    Criticality : criticalityValue
},

UI.DataPoint #Depth : {
    Value : Depth,
    Criticality : criticalityValue
}
```

**STEP**: 9 — Support for string-based dimension fields annotated as calendar values

**DESCRIPTION**: If your dimension is string-based but represents calendar/time (year, quarter, month, week, yearmonth, date), annotate the dimension field with the appropriate Common.IsCalendar* annotation and ensure values follow the required format/regex.

- Common.IsCalendarYear — format yyyy
- Common.IsCalendarQuarter — format Q (1-4)
- Common.IsCalendarMonth — format MM (01-12)
- Common.IsCalendarWeek — format ww (01-53)
- Common.IsCalendarYearMonth — format yyyyMM (valid year+month)
- Common.IsCalendarDate — format yyyyMMdd (valid date)

Examples below show XML, ABAP CDS, and CAP CDS for Common.IsCalendarYear.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="com.c_salesordermanage_sd_aggregate.SalesOrderItem/OrderYear">
	<Annotation Term="Common.IsCalendarYear" Bool="true" />
</Annotations>
```

**LANGUAGE**: ABAP CDS

**CODE**:
```abap
annotate view C_SALESORDERMANAGE_SD_AGGREGATE.SALESORDERITEM with {
 @Semantics.calendar.year: true
 OrderYear
}
```

**LANGUAGE**: CAP CDS

**CODE**:
```cap
OrderYear : String(4) @(Common.IsCalendarYear : true);
```

**STEP**: 10 — References and sample visualization

**DESCRIPTION**: For UI5 component reference and sample visual behavior, consult the official LineMicroChart samples on UI5. Use these samples to verify chart rendering and measure label positions.

**LANGUAGE**: text

**CODE**:
```text
Reference:
- UI5 LineMicroChart samples: https://ui5.sap.com/1.82.5/#/entity/sap.suite.ui.microchart.LineMicroChart
- Additional Fiori Elements sample: "Additional Features in SAP Fiori Elements for OData V4" (see Line Micro Chart section)
```

fiori-elements-framework ui.chart line-micro-chart ui.datapoint annotations abap-cds cap-cds xml


**TITLE**: Link List Cards — manifest.json configuration for SAP Fiori Elements OVP

**INTRODUCTION**: Practical, code-focused guidance to configure Link List Cards (static and dynamic) in the SAP OVP manifest.json. Includes how to add title/subtitle, staticContent, layout flavors (standard/carousel), sorting, annotations, and the OData V4 template change. Use these examples directly in your manifest.json card definitions.

**TAGS**: fiori-elements, ovp, linklist, sap.ovp, manifest.json, manifest, cards, carousel, standard, static-content, OData, SmartLink, QuickView

**STEP**: 1 — Supported features & navigation types

**DESCRIPTION**: Link List Cards support QuickView (contact annotation info), SmartLink (semantic object navigation), and three navigation types: Quick view links, Cross app (intent-based) links, and External URL links. Use appropriate properties in card item definitions to enable these behaviors.

**LANGUAGE**: text

**CODE**:
```text
Supported features:
- Quick view to display contact annotation information.
- SmartLink control to display semantic object information.

Supported navigation types:
- Quick view link: contact info from a collection.
- Cross app link: intent-based navigation to related apps.
- External URL link: links to external web pages or resources.
```

**STEP**: 2 — Add card title (manifest.json)

**DESCRIPTION**: Add a "title" property under the specific card's settings in sap.ovp.cards to display the card title on top of the Link List Card.

**LANGUAGE**: JSON

**CODE**:
```json
"sap.ovp": {
    "globalFilterModel": "salesOrder",
    "globalFilterEntityType": "GlobalFilters", // Deprecated since SAPUI5 1.54.
    "globalFilterEntitySet": "GlobalFilters",  // Available from SAPUI5 1.54.
    ...
    "cards": {
        "card005_RecentContacts": {
            "model": "purchaseOrder",
            "template": "sap.ovp.cards.linklist",
            "settings": {
                "title": "Recent Contacts",
                "entitySet": "SalesShare",
                ...
            }
        }
    }
}
```

**STEP**: 3 — Add card subtitle and header link (manifest.json)

**DESCRIPTION**: Add "subTitle" to display a subtitle under the title. Use "targetUri" in settings to make the header a clickable link.

**LANGUAGE**: JSON

**CODE**:
```json
"sap.ovp": {
    "globalFilterModel": "salesOrder",
    "globalFilterEntityType": "GlobalFilters", // Deprecated since SAPUI5 1.54
    "globalFilterEntitySet": "GlobalFilters", // Available from SAPUI5 1.54
    ...
    "cards": {
        "card005_RecentContacts": {
            "model": "purchaseOrder",
            "template": "sap.ovp.cards.linklist",
            "settings": {
                "title": "Recent Contacts",
                "targetUri": "https://en.abc.org/wiki/abc_2", // Link list card header link URI
                "subTitle": "by Importance of Interaction",
                "entitySet": "SalesShare",
                ...
            }
        }
    }
}
```

**STEP**: 4 — Configure staticContent (static link list card)

**DESCRIPTION**: For a static link list card, provide an array "staticContent" in settings. Each item must include properties such as title, subTitle, imageUri, imageAltText, targetUri, and openInNewWindow. The example also includes card sizing via "defaultSpan" and list configuration properties (listFlavor, sortBy, sortOrder).

**LANGUAGE**: JSON

**CODE**:
```json
"sap.ovp": {
    "globalFilterModel": "salesOrder",
    "globalFilterEntityType": "GlobalFilters", //Deprecated since SAPUI5 1.54
    "globalFilterEntitySet": "GlobalFilters",  //Available from SAPUI5 1.54
    ...
    "cards": {
        "card005_RecentContacts": {
            "model": "purchaseOrder",
            "template": "sap.ovp.cards.linklist",
            "settings": {
                "title": "Recent Contacts",
                "targetUri": "https://en.wikipedia.org/wiki/Mangalyaan_2",
                "subTitle": "by Importance of Interaction",
                "listFlavor": "standard",
                "sortBy": "Employee",
                "entitySet": "Zme_Overdue",
                "sortOrder": "ascending",
                "defaultSpan": {
                    "rows": 24,
                    "cols": 2,
                    "showOnlyHeader": true
                },
                "staticContent": [
                    {
                        "title": "Jim Smith",
                        "subTitle": "Sales",
                        "imageUri": "img/JD.png",
                        "imageAltText": "Jim Smith",
                        "targetUri": "https://google.com",
                        "openInNewWindow": true
                    },
                    {
                        "title": "Alice Wilson",
                        "subTitle": "Sales",
                        "imageUri": "img/AW.png",
                        "imageAltText": "Alice Wilson",
                        "targetUri": "https://google.com",
                        "openInNewWindow": true
                    },
                    {
                        "title": "Daniel Quote",
                        "subTitle": "Production",
                        "imageUri": "img/DQ.png",
                        "imageAltText": "Daniel Quote",
                        "targetUri": "https://google.com",
                        "openInNewWindow": true
                    },
                    {
                        "title": "Kate Holly",
                        "subTitle": "Sales",
                        "imageUri": "img/Kate.png",
                        "imageAltText": "Kate Holly",
                        "targetUri": "https://google.com",
                        "openInNewWindow": true
                    },
                    {
                        "title": "Aurora Smith",
                        "subTitle": "HR",
                        "imageUri": "img/KJ.png",
                        "imageAltText": "Aurora Smith",
                        "targetUri": "https://google.com",
                        "openInNewWindow": true
                    },
                    {
                        "title": "Wong Lee",
                        "subTitle": "Management",
                        "imageUri": "img/YM.png",
                        "imageAltText": "Wong Lee",
                        "targetUri": "https://google.com",
                        "openInNewWindow": true
                    }
                ]
            }
        }
    }
}
```

**STEP**: 5 — Configure a standard dynamic Link List Card (listFlavor: standard)

**DESCRIPTION**: For dynamic data, set "listFlavor" to "standard", configure "entitySet", "sortBy", and "sortOrder". Optionally include annotation-based paths like headerAnnotationPath and identificationAnnotationPath.

**LANGUAGE**: JSON

**CODE**:
```json
"card20": {
    "model": "salesOrder",
    "template": "sap.ovp.cards.linklist",
    "settings": {
        "title": "Dynamic Linklist Card",
        "targetUri": "https://en.abc.org/wiki/A_2",
        "subtitle": "NEW CARD",
        "listFlavor": "standard",
        "sortBy": "Name",
        "entitySet": "ProductSet",
        "sortOrder": "ascending",
        "headerAnnotationPath": "com.sap.vocabularies.UI.v1.HeaderInfo#header1",
        "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#identify1",
    }
}
```

**STEP**: 6 — Configure a carousel Link List Card (listFlavor: carousel)

**DESCRIPTION**: Use "listFlavor": "carousel" to prioritize images and create a carousel-like card. Configure entitySet, sortBy, and sortOrder. Carousel supports one- or two-line items, text-only, text with icon (image control), or text with image (avatar control).

**LANGUAGE**: JSON

**CODE**:
```json
"card_20": {
    "model": "HEPM_OVP_TECH_VAL",
    "template": "sap.ovp.cards.linklist",
    "settings": {
        "title": "{{card20_title}}",
        "entitySet": "Hepmra_C_OFT_Employee",
        "listFlavor": "carousel",
        "sortBy": "Employee",
        "sortOrder": "ascending",
    }
```

**STEP**: 7 — Card types: static vs dynamic

**DESCRIPTION**: Choose card type:
- Static link list card: Provide the item list directly in manifest.json via "staticContent".
- Dynamic link list card: Bind to back-end data using "entitySet" and optional annotation paths. Use listFlavor to control layout.

**LANGUAGE**: text

**CODE**:
```text
Types:
- Static link list card: staticContent array in manifest.json.
- Dynamic link list card: reads links, images, icons from back end via entitySet.
```

**STEP**: 8 — OData V4 template note

**DESCRIPTION**: If using SAP Fiori elements with OData V4, switch the template value to "sap.ovp.cards.v4.linklist". All other manifest settings remain the same.

**LANGUAGE**: text

**CODE**:
```text
Note:
- OData V4: set template to "sap.ovp.cards.v4.linklist" instead of "sap.ovp.cards.linklist".
- All other settings in manifest.json remain the same as for OData V2.
```

fiori-elements ovp linklist sap.ovp manifest.json manifest cards carousel standard static-content OData SmartLink QuickView


**TITLE**: List Cards — Configuration and Annotations for SAP Fiori Elements OVP

**INTRODUCTION**: This guide shows how to configure list cards in the application manifest and how to provide UI annotations (LineItem / DataField / DataPoint) so list cards render correctly. It covers manifest settings (including qualifiers and image support), runtime mapping/sorting, and the four list variants: Condensed/Extended × Standard/Bar. Includes manifest and annotation code examples (JSON, XML, ABAP CDS, CAP CDS).

**TAGS**: sap.fiori, ovp, list-card, LineItem, DataField, DataPoint, annotationPath, manifest, ODataV4, imageSupported

**STEP**: 1 — Configure a list card in the manifest (basic example)

**DESCRIPTION**: Add a list card entry under "sap.ovp"."cards" in your application manifest. Set the model, template, entitySet and optional settings such as sortBy, sortOrder, listFlavor and annotationPath. Use the annotationPath to point to a LineItem with a qualifier (e.g., #bar) if you need a specific annotation collection.

**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",
                "category": "{{card04_category}}",
                "entitySet": "Products"
            }
        },
        ...
    }
}
```

**STEP**: 2 — Use OData V4 template

**DESCRIPTION**: When using SAP Fiori elements with OData V4, change the template value to sap.ovp.cards.v4.list. All other manifest settings remain the same as for OData V2.

**LANGUAGE**: JSON

**CODE**:
```json
"template": "sap.ovp.cards.v4.list"
```

**STEP**: 3 — Use annotationPath qualifiers to select different LineItem collections

**DESCRIPTION**: Map fields to a specific collection of DataFieldAbstract (LineItem) by setting annotationPath in the card settings. Use qualifiers to reuse different LineItem annotations for the same entity type. Example: com.sap.vocabularies.UI.v1.LineItem#Qualifier1.

**LANGUAGE**: JSON

**CODE**:
```json
"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#Qualifier1"
```

**STEP**: 4 — Field mapping and runtime sorting behavior

**DESCRIPTION**: By default the card maps to com.sap.vocabularies.UI.v1.LineItem (a collection of DataFieldAbstract). At runtime:
- If DataFieldForAnnotation with a DataPoint target exists, the DataPoint is rendered (top-right or bar depending on flavor).
- DataField records are displayed left side (or where DataPoints aren’t available).
- Entries are sorted by the UI Importance annotation (com.sap.vocabularies.UI.v1.ImportanceType) and then by their annotation order.
- Up to 6 fields may be shown per list item (depending on type/flavor).

**LANGUAGE**: JSON

**CODE**:
```json
/* No additional code required — runtime behavior is based on LineItem and DataPoint annotations. */
```

**STEP**: 5 — Condensed List Type — Standard Flavor

**DESCRIPTION**: Use this flavor when you need compact items with up to three fields.
- Layout: first two DataField records displayed top-left and bottom-left.
- If a DataFieldForAnnotation targets a DataPoint, the DataPoint displays top-right and may be highlighted by criticality; otherwise the next DataField is shown top-right.
- Number of list items displayed: up to 3.

**LANGUAGE**: JSON

**CODE**:
```json
/* Set in manifest: listFlavor can be "standard" (default) and list type is "condensed" via template/config */
"settings": {
  "listFlavor": "standard",
  /* annotationPath and other settings as needed */
}
```

**STEP**: 6 — Extended List Type — Standard Flavor

**DESCRIPTION**: Use this flavor for richer items with up to six fields.
- Layout: DataField records render on the left; DataPoint records render on the right.
- If fewer than three DataPoint records exist, DataField records fill the right side.
- Number of list items displayed: up to 6.

**LANGUAGE**: JSON

**CODE**:
```json
/* Set in manifest: listFlavor "standard" and use an extended configuration via annotations for more fields */
"settings": {
  "listFlavor": "standard",
  /* annotationPath and other settings as needed */
}
```

**STEP**: 7 — Condensed List Type — Bar Flavor

**DESCRIPTION**: Use when showing a bar visualization (DataPoint) inside a condensed item.
- Layout per item: title (first DataField) top-left; first DataPoint renders as a bar beneath the title and numeric value to the right of the bar. A second DataPoint may display to the right.
- The bar can represent a percentage or any numeric value.
- Number of list items displayed: up to 3.

**LANGUAGE**: JSON

**CODE**:
```json
/* Enable bar flavor in manifest */
"settings": {
  "listFlavor": "bar",
  "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#bar",
  /* other settings */
}
```

**STEP**: 8 — Extended List Type — Bar Flavor

**DESCRIPTION**: Use when showing a bar with additional DataPoints in a larger item.
- Layout per item: first DataField as title top-left; optional second DataField under the title; first DataPoint is shown as a bar beneath DataFields and numeric value to the right at the bottom; up to two additional DataPoint records can show to the right stacked vertically.
- If multiple DataPoint criticality annotations exist, only one will be highlighted by order of display.
- Number of list items displayed: up to 5.

**LANGUAGE**: JSON

**CODE**:
```json
/* Enable extended bar layout in manifest */
"settings": {
  "listFlavor": "bar",
  /* ensure your LineItem annotation provides appropriate DataField and DataPoint records */
}
```

**STEP**: 9 — Condensed List Card with Images or Icons (manifest setting + annotation examples)

**DESCRIPTION**: To render images or icons inside a condensed list card:
- Set "imageSupported": true in the card settings in the manifest.
- In the LineItem annotation, provide a DataField with IconUrl (XML) or IconUrl property (CDS) bound to an image field (for example web_address).
- In the list card, an image control is used instead of an avatar.

Examples below show three annotation formats (XML, ABAP CDS, CAP CDS). Use the same annotationPath referenced in the manifest.

**LANGUAGE**: JSON

**CODE**:
```json
/* Example: add imageSupported to manifest card settings */
"sap.ovp": {
  ...
  "cards": {
    "card04": {
      "model": "ZCD204_EPM_DEMO_SRV",
      "template": "sap.ovp.cards.list",
      "settings": {
        "imageSupported": true,
        "annotationPath": "com.sap.vocabularies.UI.v1.LineItem#WithImage",
        "entitySet": "Products"
      }
    }
  }
}
```

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.LineItem">
  <Collection>
    <Record Type="com.sap.vocabularies.UI.v1.DataField">
      <PropertyValue Property="IconUrl" Path="web_address"/>
      <PropertyValue Property="Value" Path="MaterialName"/>
    </Record>
  </Collection>
</Annotation>
```

**LANGUAGE**: ABAP CDS

**CODE**:
```
@UI.lineItem: [{ value: 'MATERIALNAME' }]
MATERIALNAME;
```

**LANGUAGE**: CAP CDS

**CODE**:
```
UI.LineItem : [
    {
        $Type : 'com.sap.vocabularies.UI.v1.DataField',
        IconUrl : web_address,
        Value : MaterialName
    }
]
```

sap.fiori ovp list-card LineItem DataField DataPoint annotationPath manifest ODataV4 imageSupported


**TITLE**: List Report + Object Page (Fiori elements, OData V2)

**INTRODUCTION**: This document gives concise, actionable configuration and code examples to create a Fiori elements app that uses the List Report and Object Page generic templates (OData V2 / Smart Templates). Use this to scaffold, configure, and connect the list report to its object page and optionally switch to the Analytical List Page.

**TAGS**: fiori-elements, odata-v2, list-report, object-page, manifest.json, annotations, sap.suite.ui.generic.template

**STEP**: 1 — Purpose and when to use
**DESCRIPTION**: Use a List Report to present and filter collections of business objects (tables or lists). Use an Object Page to display, edit, or create a single business object. Implement them together when your app needs an overview (LR) and a detail/edit screen (OP). For analytical scenarios use the Analytical List Page (ALP) instead of LR.
**LANGUAGE**: Text
**CODE**:
```text
Use List Report (sap.suite.ui.generic.template.ListReport) for sets of objects.
Use Object Page (sap.suite.ui.generic.template.ObjectPage) for working with a single object.
For analytical scenarios use Analytical List Page (sap.suite.ui.generic.template.AnalyticalListPage).
```

**STEP**: 2 — Minimal manifest configuration (webapp/manifest.json)
**DESCRIPTION**: Add the generic template pages and the OData v2 service configuration in manifest.json. The example below shows a pair of pages using the same entity set "Products". Place this snippet in webapp/manifest.json replacing your service URI and entitySet names as needed.
**LANGUAGE**: JSON
**CODE**:
```json
{
  "sap.app": {
    "id": "com.example.products",
    "applicationVersion": { "version": "1.0.0" }
  },
  "sap.ui5": {
    "models": {
      "": {
        "dataSource": "mainService",
        "preload": true
      }
    }
  },
  "sap.ui.generic.app": {
    "pages": [
      {
        "entitySet": "Products",
        "component": {
          "name": "sap.suite.ui.generic.template.ListReport",
          "list": true
        }
      },
      {
        "entitySet": "Products",
        "component": {
          "name": "sap.suite.ui.generic.template.ObjectPage"
        }
      }
    ]
  },
  "dataSources": {
    "mainService": {
      "uri": "/sap/opu/odata/sap/ZI_SERVICE_SRV/",
      "type": "OData",
      "settings": {
        "odataVersion": "2.0"
      }
    }
  }
}
```

**STEP**: 3 — Configure navigation from List Report to Object Page (annotations / manifest)
**DESCRIPTION**: Navigation from the List Report to the Object Page is typically driven by annotations (UI/LineItem with navigation intent) or by the entity key being passed by the framework. Ensure your entity has a navigation/key configuration in your OData metadata and provide UI annotations that define the intent-based navigation or navigation property. If using the annotation file, reference it from the manifest (local or remote). Example: reference an annotations file in manifest and ensure the service is OData v2.
**LANGUAGE**: JSON
**CODE**:
```json
{
  "sap.app": { "id": "com.example.products" },
  "sap.ui5": {
    "models": {
      "": { "dataSource": "mainService" },
      "annotations": {
        "dataSource": "annotations"
      }
    }
  },
  "dataSources": {
    "mainService": {
      "uri": "/sap/opu/odata/sap/ZI_SERVICE_SRV/",
      "type": "OData",
      "settings": { "odataVersion": "2.0" }
    },
    "annotations": {
      "uri": "localService/annotations.xml",
      "type": "ODataAnnotation"
    }
  }
}
```

**STEP**: 4 — Example annotation fragment to enable navigation (webapp/localService/annotations.xml)
**DESCRIPTION**: Provide UI annotations so the framework knows how to display line items and perform navigation. Below is a minimal UI.LineItem with a DataFieldForIntentBasedNavigation example — adapt Target and properties to your model and semantic objects. Keep this file referenced from the manifest (see previous step).
**LANGUAGE**: XML
**CODE**:
```xml
<annotations xmlns="http://docs.oasis-open.org/odata/ns/edm"
             xmlns:edm="http://docs.oasis-open.org/odata/ns/edm"
             xmlns:ui="http://docs.oasis-open.org/odata/ns/edm">
  <Annotation Term="UI.LineItem">
    <Collection>
      <Record Type="UI.DataFieldForIntentBasedNavigation">
        <PropertyValue Property="Label" String="Product"/>
        <PropertyValue Property="SemanticObject" String="Product"/>
        <PropertyValue Property="Action" String="display"/>
      </Record>
    </Collection>
  </Annotation>
</annotations>
```

**STEP**: 5 — Switch to Analytical List Page (if analytical use case)
**DESCRIPTION**: For analytical scenarios, replace the ListReport template with the AnalyticalListPage template in the manifest pages config. The ALP uses the same entitySet but requires an analytical model/annotations (measures/dimensions).
**LANGUAGE**: JSON
**CODE**:
```json
{
  "sap.ui.generic.app": {
    "pages": [
      {
        "entitySet": "Products",
        "component": {
          "name": "sap.suite.ui.generic.template.AnalyticalListPage",
          "list": true
        }
      },
      {
        "entitySet": "Products",
        "component": {
          "name": "sap.suite.ui.generic.template.ObjectPage"
        }
      }
    ]
  }
}
```

**STEP**: 6 — Implementation checklist for code generation
**DESCRIPTION**: Ensure these items before generating code or building the app:
- webapp/manifest.json contains sap.ui.generic.app pages for ListReport/ObjectPage (or ALP/ObjectPage).
- dataSources/mainService points to an OData V2 service (odataVersion: "2.0").
- Annotations (local or remote) are referenced in manifest and include UI.LineItem and navigation (DataFieldForIntentBasedNavigation or navigation property).
- EntitySet names in manifest match OData metadata.
- Provide UI5 & Fiori libraries compatible with Smart Templates (include sap.suite.ui.generic.template resources).
**LANGUAGE**: Text
**CODE**:
```text
Checklist:
- manifest.json: sap.ui.generic.app.pages configured
- dataSources: OData v2 service configured (odataVersion: "2.0")
- annotations referenced (localService/annotations.xml or remote)
- EntitySet names consistent with service metadata
- Add necessary libraries for smart templates in index.html / UI5 bootstrap
```


**TITLE**: List Report Elements

**INTRODUCTION**: The List Report presents large lists of items with filtering and multiple display modes (table, chart, or both). Use this reference to identify UI elements to implement or configure when generating a Fiori Elements List Report view or its supporting metadata.

**TAGS**: fiori-elements-framework, list-report, SAP Fiori, UI5, design, header-toolbar, variant-management

**STEP**: 1 — Main elements overview

**DESCRIPTION**: Identify and implement the primary UI regions and components for a List Report. Use these element names and roles when mapping UI5 controls, generating manifest entries, or producing view/controller code.

- Application header: global app shell/header
- Variant Management: saved filter/variant control (filter bar)
- Header Toolbar: contains share menu and action buttons
- Content area: hosts table, chart, or both

Use these names consistently in code generation templates and in manifest/navigation documentation.

**LANGUAGE**: text

**CODE**:
```text
MainElements:
- Application header
- Variant Management
- Header Toolbar (contains Share menu)
- Content area (table | chart | table+chart)
```

**STEP**: 2 — Header Toolbar: Share menu actions

**DESCRIPTION**: Implement the header toolbar's generic Share menu with the following actions. When generating menu items, map each action to the corresponding shell service or navigation intent.

- Send Email
- Share in SAP Jam
- Save as Tile
- Share: Microsoft Teams
- Share: Collaboration Manager

Use these action keys/labels to create consistent IDs and i18n keys in generated code (e.g., share.sendEmail, share.sapJam, share.saveAsTile, share.teams, share.collabManager).

**LANGUAGE**: JSON

**CODE**:
```json
{
  "shareMenu": [
    { "id": "share.sendEmail", "label_i18n": "SHARE_SEND_EMAIL" },
    { "id": "share.sapJam", "label_i18n": "SHARE_SAP_JAM" },
    { "id": "share.saveAsTile", "label_i18n": "SHARE_SAVE_AS_TILE" },
    { "id": "share.teams", "label_i18n": "SHARE_TEAMS" },
    { "id": "share.collabManager", "label_i18n": "SHARE_COLLAB_MANAGER" }
  ]
}
```

**STEP**: 3 — Content area display modes

**DESCRIPTION**: Generate code or configuration to support the three content modes. Provide a selectable configuration option and generated UI bindings for each mode:

- Table only
- Chart only
- Table + Chart (split or toggle)

When producing manifest or view templates, expose a contentMode property and branch generation accordingly.

**LANGUAGE**: JSON

**CODE**:
```json
{
  "listReport": {
    "contentMode": "table", // allowed values: "table", "chart", "table+chart"
    "table": { "type": "ResponsiveTable | AnalyticalTable | GridTable", "settings": {} },
    "chart": { "type": "VizFrame | Chart", "settings": {} }
  }
}
```

**STEP**: 4 — Related documentation links and files

**DESCRIPTION**: Reference the related documentation files for further feature and behavior configuration. Use these file paths when linking help or inserting documentation references in generated projects.

- Configuring List Report Features: configuring-list-report-features-3af1d03.md
- Configuring Further Common Features: configuring-further-common-features-a4d3c46.md
- Loading Behavior of Data on Initial Launch of the Application: loading-behavior-of-data-on-initial-launch-of-the-application-9f4e119.md

Include these links in README or help sections generated for the List Report module.

**LANGUAGE**: text

**CODE**:
```text
RelatedFiles:
- ./configuring-list-report-features-3af1d03.md
- ./configuring-further-common-features-a4d3c46.md
- ./loading-behavior-of-data-on-initial-launch-of-the-application-9f4e119.md
```

List Report Elements

fiori-elements-framework
list-report
SAP Fiori
UI5
design
header-toolbar
variant-management


**TITLE**: Configure Initial Data Loading Behavior for SAP Fiori Elements Apps

**INTRODUCTION**: This guide documents how to control initial data loading on application launch for SAP Fiori Elements (OData V2 and V4). It explains default behaviors, interactions with navigation context and variants, and manifest settings to force or prevent automatic data requests. Use these settings in manifest.json or component configuration to ensure charts and tables load according to business requirements.

**TAGS**: fiori-elements-framework, manifest.json, loadDataOnAppLaunch, initialLoad, OData V2, OData V4, ListReport, AnalyticalListPage, quickVariantSelectionX, enableAutoBinding

**STEP**: 1 - Loading behavior basics and recommended practice

**DESCRIPTION**: Understand when data is loaded automatically on app start and the recommended default values for filters.

- Data is loaded automatically on initial launch if a navigation context is present (including when context is added to the target URL in the SAP Fiori launchpad target mapping).
- When launched from a tile without a navigation context or only default launchpad user-specific settings:
  - If a default variant exists, that variant is launched; initial load depends on the variant's "Apply Automatically" setting.
  - If no default variant exists, the Standard variant is launched; initial load depends on manifest configuration (see V2 and V4 sections).
- Recommendation: provide default values for filter fields to avoid empty charts and tables on launch.

**LANGUAGE**: Text

**CODE**:
```text
Note:
We recommend providing default values for filter fields to avoid loading empty charts and tables when you launch the application.
```

**STEP**: 2 - OData V2: Configure loadDataOnAppLaunch in manifest.json

**DESCRIPTION**: For OData V2 ListReport apps, set the "loadDataOnAppLaunch" property under dataLoadSettings in the page/component settings of manifest.json to change initial loading behavior for the Standard variant. This setting applies to single- and multi-view apps. If a mandatory filter is missing, data load is prevented regardless of other settings and the "Apply Automatically" checkbox is deselected.

- Values:
  - "always": always load data for the Standard variant (end users may deselect Apply Automatically).
  - "never": do not load automatically; user must click Go (end users may select Apply Automatically).
  - undefined or "ifAnyFilterExist": load only if default filter values exist; default for newly generated apps.

**LANGUAGE**: JSON

**CODE**:
```json
"pages": {
                   "ListReport | < EntitySet > ": {
                                      "entitySet": < EntitySet > ,
                                       "component": {
                                                            "name": "sap.suite.ui.generic.template.ListReport",
                                                            "list": true,
                                                             "settings": {
                                                                              "dataLoadSettings": {
                                                                            "loadDataOnAppLaunch": "always" / "never"/ "ifAnyFilterExist"
                                                         }
                                       }
                   }
}
```

**STEP**: 3 - OData V2: Alternative for multi-view - enableAutoBinding (quickVariantSelectionX)

**DESCRIPTION**: For multi-view (quick variant) scenarios there is an alternative manifest setting: quickVariantSelectionX.enableAutoBinding (true/false). SAP recommends using loadDataOnAppLaunch instead, but enableAutoBinding can be used if desired.

**LANGUAGE**: JSON

**CODE**:
```json
"pages": {
          "ListReport|<EntitySet> ": {
                  "entitySet": <EntitySet>,
                  "component": {
                  "name": "sap.suite.ui.generic.template.ListReport",
                  "settings": {
                              "quickVariantSelectionX": {
                                      "enableAutoBinding":  false
                               }
                   }
             }
          }
}
```

**STEP**: 4 - OData V4: Configure initialLoad in component/options/settings

**DESCRIPTION**: For OData V4 (SAP Fiori elements FE) apps (e.g., AnalyticalListPage), set initialLoad under options.settings of the component configuration. Values:
- "Auto" (default): load only if predefined filter values exist. Apply Automatically checkbox text: "If predefined filter values are available, the content loads automatically." End users may deselect Apply Automatically.
- "Disabled": do not load on start; user must click Go (end users may select Apply Automatically).
- "Enabled": always load on start; end users may deselect Apply Automatically.

These settings apply to Standard variant launches for single- and multi-view apps.

**LANGUAGE**: JSON

**CODE**:
```json
"SalesOrderManageList": {
     "type": "Component",
     "id": "SalesOrderManageList",
     "name": "sap.fe.templates.AnalyticalListPage",
     "options": {
          "settings": {
               "contextPath": "/SalesOrderManage",
               "initialLoad": "Enabled"
          }
     }
}
```

fiori-elements-framework
manifest.json
loadDataOnAppLaunch
initialLoad
OData V2
OData V4
ListReport
AnalyticalListPage
quickVariantSelectionX
enableAutoBinding


**TITLE**: Localization of UI Texts for SAP Fiori Elements (OData V2 & V4)

**INTRODUCTION**: Practical, code-focused guide to override and enhance standard UI texts in SAP Fiori Elements apps. Covers: where to place i18n resource files, how to reference i18n keys in annotations, how to configure resource models and manifest.json (including enhanceI18), and how to structure and name keys for app-specific overrides.

**TAGS**: fiori-elements-framework, i18n, localization, manifest.json, annotations, SAPUI5, SAP Fiori elements, OData V2, OData V4

STEP: 1 - Basic workflow to replace standard UI texts

DESCRIPTION:
Follow these four actions to replace framework-provided UI texts in your application:
- Locate or create a resource file (i18n properties) in your app.
- Find the framework key you want to change (see lists of overridable keys).
- Copy the exact key into your app's i18n properties file.
- Edit the value text to your desired custom text and save.

LANGUAGE: Text

CODE:
```text
1. Find or add a resource file to your application (e.g. webapp/i18n/i18n.properties).
2. Search for the text that you would like to change (use the keys listed in the Fiori elements docs).
3. Copy the corresponding key and text to your resource file.
4. Adapt the text as required.
```

STEP: 2 - Override texts referenced from annotations (XML / ABAP CDS / CAP CDS)

DESCRIPTION:
When an annotation uses an i18n reference, ensure the annotation uses an i18n key string and the application defines the @i18n resource model in manifest.json. Example annotations below show direct string and i18n key usage. Copy the key used (e.g. CopyActionText) into your application's i18n file and define the @i18n model.

LANGUAGE: XML

CODE:
```xml
<Annotation Term="UI.LineItem">
   <Collection>
      <Record Type="UI.DataFieldForAction">
         <PropertyValue Property="Label" String="Add random item"/>
         <PropertyValue Property="Action"
            String="com.c_salesordermanage_sd.AddRandomItem"/>
      </Record>
      <Record Type="UI.DataFieldForAction">
         <PropertyValue Property="Label" String="{@i18n>CopyActionText}"/>
         <PropertyValue Property="Action"
            String="com.c_salesordermanage_sd.CopyItem"/>
      </Record>
   </Collection>
</Annotation>
```

LANGUAGE: ABAP CDS

CODE:
```abap
@UI.lineItem: [
  {
    label: 'Add random item',
    dataAction: 'PUSHDOWN:com.c_salesordermanage_sd.AddRandomItem',
    type: #FOR_ACTION,
    position: 1
  },
  {
    label: '{@i18n>CopyActionText}',
    dataAction: 'PUSHDOWN:com.c_salesordermanage_sd.CopyItem',
    type: #FOR_ACTION,
    position: 2
  }
];
```

LANGUAGE: CAP CDS

CODE:
```javascript
LineItem                               : [
    {
        $Type  : 'UI.DataFieldForAction',
        Label  : 'Add random item',
        Action : 'com.c_salesordermanage_sd.AddRandomItem'
    },
    {
        $Type  : 'UI.DataFieldForAction',
        Label  : '{@i18n>CopyActionText}',       //i18n key referred here
        Action : 'com.c_salesordermanage_sd.CopyItem'
    },
    .
    .
    .
]
```

STEP: 3 - Define the @i18n resource model in manifest.json

DESCRIPTION:
Add a resource model entry to your app manifest.json so that the annotation i18n reference resolves. The model name must be "@i18n" and must point to the correct i18n properties file (e.g. webapp/i18n/i18n.properties). Example manifest.json snippet below.

LANGUAGE: JSON

CODE:
```json
"models": {
               …
               …
               "@i18n": {
                              "type": "sap.ui.model.resource.ResourceModel",
              "uri": "i18n/i18n.properties"
               },
               …
               …
}
```

STEP: 4 - Default folder structure and resource model mapping (file paths)

DESCRIPTION:
Standard Fiori generator creates a webapp/i18n folder and i18n.properties. You can create additional i18n files per template and entity to override template-specific keys. Map those files in manifest.json models using the naming pattern i18n|<template>|<EntitySet> to scope overrides.

LANGUAGE: text

CODE:
```text
Default generated structure:
<root-folder>
|-- webapp
|---- i18n
|----- i18n.properties

Recommended structure for scoped overrides:
- i18n/i18n.properties
- i18n/ListReport/<EntitySet>/i18n.properties
- i18n/ObjectPage/<EntitySet>/i18n.properties
- i18n/ObjectPage/<SubEntitySet>/i18n.properties
```

STEP: 5 - Example sap.ui5 models configuration mapping template-specific resource bundles

DESCRIPTION:
Register template-specific i18n resource models in manifest.json under "sap.ui5". Each model name uses pipes to identify the template and entity set — the URI points to the corresponding properties file. Add entries for ListReport and ObjectPage where you need overrides.

LANGUAGE: JSON

CODE:
```json
"sap.ui5": {

        ...
    "models": {
        "i18n": {
            "type": "sap.ui.model.resource.ResourceModel",
            "uri": "i18n/i18n.properties"
      },

        "i18n|sap.suite.ui.generic.template.ListReport|POHeaders": {
            "type": "sap.ui.model.resource.ResourceModel",
            "uri": "i18n/ListReport/POHeaders/i18n.properties"
              },
        "i18n|sap.suite.ui.generic.template.ObjectPage|POHeaders": {
                    "type": "sap.ui.model.resource.ResourceModel",
                    "uri": "i18n/ObjectPage/POHeaders/i18n.properties"
              },
        "i18n|sap.suite.ui.generic.template.ObjectPage|POItems": {
                    "type": "sap.ui.model.resource.ResourceModel",
                    "uri": "i18n/ObjectPage/POItems/i18n.properties"
```

STEP: 6 - Override keys allowed for OData V2 (ListReport/ObjectPage examples)

DESCRIPTION:
Use the custom i18n file approach to override keys listed in the Fiori elements templates (examples include delete confirmations, create labels, no-data illustrated messages). Add only the keys you need to minimize translation scope. See the long lists in the Fiori elements docs for the full set; below are representative keys and where they are used (copy exact key names into your i18n file).

LANGUAGE: properties

CODE:
```properties
# Examples of keys you can override (List Report / Object Page)
ST_GENERIC_UNSAVED_CHANGES_CHECKBOX=Also delete objects with unsaved changes.
ST_GENERIC_DELETE_SELECTED_PLURAL=Delete the selected objects?
ST_GENERIC_DELETE_UNSAVED_CHANGES=Another user edited this object without saving the changes: {1} Delete anyway?
ST_GENERIC_DELETE_LOCKED=This object cannot be deleted. It is currently locked by {1}.
CREATE_OBJECT=Create
CREATE_DIALOG_TITLE=New Object
DIALOG_TITLE_NEW_ACTION_FOR_CREATE=Create Object
OBJECT_SAVED=Your changes have been saved
ITEM_CREATED=Item created
WAITING_SMARTTABLE=Please wait while the data is loading...
```

STEP: 7 - Illustrated messages (SAPUI5 >= 1.142) — deprecated no-data keys

DESCRIPTION:
Starting from SAPUI5 1.142, no-data keys are replaced by illustrated message title and description keys. Replace deprecated keys with their new illustrated equivalents in custom i18n files.

LANGUAGE: text

CODE:
```text
Deprecated -> New keys mapping (examples)
NOITEMS_LR_SMARTTABLE ->
  NOITEMS_LR_SMARTTABLE_ILLUSTRATION_TITLE
  NOITEMS_LR_SMARTTABLE_ILLUSTRATION_DESCRIPTION

NOITEMS_SMARTTABLE ->
  NOITEMS_SMARTTABLE_ILLUSTRATION_TITLE
  NOITEMS_SMARTTABLE_ILLUSTRATION_DESCRIPTION
```

STEP: 8 - Provide custom texts in application properties file (example)

DESCRIPTION:
Add the same key used by SAP Fiori elements into your custom resource bundle and change the value. For actions or entity-specific messages you can append entity and action qualifiers to the key (format details in next step). Example shows default keys vs application custom resource file.

LANGUAGE: properties

CODE:
```properties
# SAP Fiori elements default values (resource bundle of SAP Fiori elements):
C_OPERATIONS_ACTION_CONFIRM_MESSAGE=Confirm this action?
C_TRANSACTION_HELPER_OBJECT_PAGE_CONFIRM_DELETE_WITH_OBJECTTITLE_PLURAL=Delete the selected objects?
C_TRANSACTION_HELPER_OBJECT_PAGE_CONFIRM_DELETE_WITH_OBJECTTITLE_SINGULAR=Delete this object?

# Text values from i18n/customSalesOrderLR.properties (custom resource bundle of the application):
C_OPERATIONS_ACTION_CONFIRM_MESSAGE|SalesOrderManage|ReturnInProcess=Confirm the returns?
C_TRANSACTION_HELPER_OBJECT_PAGE_CONFIRM_DELETE_WITH_OBJECTTITLE_PLURAL|SalesOrderManage=Delete the selected Sales Orders?
C_TRANSACTION_HELPER_OBJECT_PAGE_CONFIRM_DELETE_WITH_OBJECTTITLE_SINGULAR|SalesOrderManage=Delete this Sales Order?
```

STEP: 9 - Add enhanceI18 to manifest target to enable Fiori elements to pick your custom bundle

DESCRIPTION:
When using Fiori elements templates, add the enhanceI18 setting under the target component settings to point to your custom properties file. This tells Fiori elements which custom resource bundle to load for overrides.

LANGUAGE: JSON

CODE:
```json
{
   ...
   ...
   "targets": {
    "SalesOrderManageList": {
        "type": "Component",
        "id": "SalesOrderManageList",
        "name": "sap.fe.templates.ListReport",
        "options": {
            "settings": {
                "contextPath": "/SalesOrderManage",
                "enhanceI18n": "i18n/customSalesOrderLR.properties", // This is the line to be added - it provides Fiori elements with the name of the custom resource bundle
                ...
                ...
                ...
            }
        }
    }
   }
   ...
   ...
}
```

STEP: 10 - Format rules for custom keys (global, scoped by entity, action-specific)

DESCRIPTION:
Follow these key naming rules to scope custom texts:
- Global override: use the key as-is for text shared across app (no suffix).
- Entity-scoped override: append |<EntitySet> or |<NavigationProperty> (for navigation entities) to restrict the key to that entity set.
- Action-scoped override: append |<EntityName>|<ActionName>. This is mandatory for action parameter/confirmation overrides.

LANGUAGE: text

CODE:
```text
# Global override example:
C_COMMON_DIALOG_OK=Okie?   <- overrides OK globally

# Entity-scoped example (navigation property _Items used for navigation entity sets):
C_TRANSACTION_HELPER_OBJECT_PAGE_CONFIRM_DELETE_WITH_OBJECTTITLE_SINGULAR|_Items=Delete this Sales Order Item?

# Action-scoped example (mandatory for action parameter or confirm text):
C_OPERATIONS_ACTION_CONFIRM_MESSAGE|SalesOrderManage|ReturnInProcess=Confirm the returns?
# or for navigation entity set:
C_OPERATIONS_ACTION_CONFIRM_MESSAGE|_Items|ReturnInProcess=Confirm the returns for the selected items?
```

STEP: 11 - Recommended practices and notes (action-oriented)

DESCRIPTION:
- Only copy keys you need into your custom i18n file to reduce translation workload.
- Use entity/action suffixes to scope messages and avoid unintended global replacements.
- When using curly braces & single quotes in message text, escape per UI5 formatMessage rules (use two single quotes). See UI5 API reference formatting if message formatting is needed.
- If an annotation segment is missing in the back-end, apply overrides in local annotation files and reference i18n keys there.
- For OData V4 apps, use sap.fe.templates scope and the same enhanceI18 approach.

LANGUAGE: text

CODE:
```text
Best practices summary:
- Keep custom i18n files minimal: only include keys you change.
- Use scoped keys (|Entity|Action) for action-specific or entity-specific messages.
- Add @i18n resource model entry to manifest.json for annotation-based references.
- Add enhanceI18 under the component target to register your custom bundle with Fiori elements.
- Use illustrated message title + description keys instead of deprecated no-data keys (SAPUI5 >= 1.142).
```

fiori-elements-framework
i18n
localization
manifest.json
annotations
SAPUI5
SAP Fiori elements
OData V2
OData V4


**TITLE**: Override Standard Chart Texts via i18n (SAP Fiori elements — Charts)

**INTRODUCTION**: This guide shows how to override the default UI texts that appear when charts have no data (object pages, list reports, analytical list pages). Add or change keys in your app's i18n file (typically webapp/i18n/i18n.properties) to customize messages for SAP Fiori elements for OData V2 and OData V4.

**TAGS**: fiori-elements-framework, i18n, smartchart, localization, ODataV2, ODataV4, charts

STEP: 1 — Review default texts (reference)
DESCRIPTION: Default messages shown by the framework (preserve these texts if you want to keep current wording or use them as a baseline for overrides).
LANGUAGE: Text
CODE:
```Text
SAP Fiori elements for OData V2:
- When no filters are applied and no data is found:
  Object page chart: "No data found."
  List report chart: "To start, set the relevant filters and choose \"Go\"."

- When filters are applied and the search shows no results:
  Object page chart: "No data found. Try adjusting the search or filter parameters."
  List report chart: "There is no data for the selected filter criteria and chart view."

SAP Fiori elements for OData V4:
- Opening a list report without autoload:
  Title: "Let’s get some results"
  Description: "Start by providing your search or filter criteria."

- No filters applied and no data on list report:
  Title: "No results found"
  Description: "Start by providing your search or filter criteria."

- Filters applied and no results:
  Title: "No results found"
  Description: "Try changing your filter criteria."

- Chart used in multi-view mode and no data:
  Title: "No no results found"
  Description: "Try changing the view or filter criteria."

- Object page with no search nor filters and no data:
  Title: "No items available"
  Description: "When there are, you'll find them here."
```

STEP: 2 — Override messages for SAP Fiori elements (OData V2)
DESCRIPTION: Add the following keys to your app i18n file (webapp/i18n/i18n.properties). Use the values shown or replace them with your custom wording. The keys listed are the supported keys for SmartChart messages in OData V2 apps.
LANGUAGE: Properties
CODE:
```Properties
# File: webapp/i18n/i18n.properties

# Object page chart: no filters applied and no data found
NOITEMS_SMARTCHART=No data found.

# Object page chart: filters applied and search shows no results
NOITEMS_SMARTCHART_WITH_FILTER=No data found. Try adjusting the search or filter parameters.

# List report chart: message(s) shown in list report chart (override default wording for list report chart)
# Replace the value with your custom instruction for list report charts.
NOITEMS_LR_SMARTCHART=To start, set the relevant filters and choose "Go".
```

STEP: 3 — Override illustrated message texts for SAP Fiori elements (OData V4)
DESCRIPTION: OData V4 uses illustrated messages with title + description. The exact i18n keys are listed on the Localization of UI Texts page. Add the appropriate keys to webapp/i18n/i18n.properties and set your custom title and description values. Example template (replace the placeholder keys with the actual keys from Localization of UI Texts):
LANGUAGE: Properties
CODE:
```Properties
# File: webapp/i18n/i18n.properties
# Example placeholders — replace the keys below with exact keys from the
# "Localization of UI Texts" reference for OData V4 list report/object page charts.

# Example: List report - opening without autoload
LISTREPORT_NOAUTLOAD_TITLE=Let’s get some results
LISTREPORT_NOAUTLOAD_DESCRIPTION=Start by providing your search or filter criteria.

# Example: List report - no filters applied and no data
LISTREPORT_NORESULTS_TITLE=No results found
LISTREPORT_NORESULTS_DESCRIPTION=Start by providing your search or filter criteria.

# Example: List report - filters applied and no results
LISTREPORT_FILTER_NORESULTS_TITLE=No results found
LISTREPORT_FILTER_NORESULTS_DESCRIPTION=Try changing your filter criteria.

# Example: Multi-view mode - no data
CHART_MULTIVIEW_NORESULTS_TITLE=No no results found
CHART_MULTIVIEW_NORESULTS_DESCRIPTION=Try changing the view or filter criteria.

# Example: Object page - no search nor filters and no data
OBJECTPAGE_NOITEMS_TITLE=No items available
OBJECTPAGE_NOITEMS_DESCRIPTION=When there are, you'll find them here.
```

STEP: 4 — Implementation and verification
DESCRIPTION: Steps to apply and test the changes.
LANGUAGE: Text
CODE:
```Text
1. Open the i18n file in your app: webapp/i18n/i18n.properties
2. Add or modify the keys as shown above.
3. Save the file and rebuild / redeploy your UI (if required by your project setup).
4. Test the scenarios in the app:
   - Open list reports with/without autoload.
   - Apply filters that return no results.
   - View charts in object pages and multi-view modes.
5. If some texts did not change, consult the "Localization of UI Texts" reference for the exact key names used by your Fiori Elements version and component.
```

STEP: 5 — Reference and related information
DESCRIPTION: Links and topics to consult for full key lists and related components.
LANGUAGE: Text
CODE:
```Text
- Localization keys reference: localization-of-ui-texts-b8cb649.md
- Related topic: configuring-tables-f4eb70f.md
- i18n file typical location: webapp/i18n/i18n.properties
```


**TITLE**: Maintaining Standard Texts for Tables (Fiori elements)

**INTRODUCTION**: Override the framework's default texts for tables on List Report and Object Page by adding localization keys to the page i18n file(s). This document shows where to place overrides, example i18n entries, and how to handle language variants. Use the Localization of UI Texts and Displaying An Illustrated Message When No Data Is Found documents for the exact key names the framework expects.

**TAGS**: fiori-elements-framework, i18n, localization, tables, list-report, object-page

**STEP**: 1 — Locate the i18n files

**DESCRIPTION**: Find the i18n properties files used by your Fiori elements app. Typical locations:
- webapp/i18n/i18n.properties (default)
- webapp/i18n/i18n_de.properties (German)
- webapp/i18n/i18n_en.properties (English)
If your app uses a different structure (multiapps, modules), locate the i18n file referenced by your manifest.json.

**LANGUAGE**: Text / Paths

**CODE**:
```text
# Typical file locations
webapp/i18n/i18n.properties
webapp/i18n/i18n_de.properties
webapp/i18n/i18n_en.properties
```

**STEP**: 2 — Add/override keys in the i18n file

**DESCRIPTION**: Insert keys and translated values into the i18n properties file for the List Report or Object Page. The framework will use these values instead of defaults for table messages. Replace placeholder KEY_NAME with the exact key from the Localization of UI Texts documentation when available. Keep comments to explain usage.

**LANGUAGE**: Properties

**CODE**:
```properties
# Example overrides for table-related messages
# Replace KEY_NAME_* with the exact keys defined in the SAP Fiori elements localization docs.

# Generic example: title when a table has no data
KEY_NAME_TABLE_NO_DATA_TITLE=No items available

# Generic example: description or help text when a table has no data
KEY_NAME_TABLE_NO_DATA_DESCRIPTION=There are no entries that match your current filters. Try removing a filter or changing search criteria.

# Example: text for an action button shown in the no-data state
KEY_NAME_TABLE_NO_DATA_ACTION=Create new item

# Example: illustrated message title and description (if supported by the framework)
KEY_NAME_ILLUSTRATED_NO_DATA_TITLE=No results found
KEY_NAME_ILLUSTRATED_NO_DATA_DESCRIPTION=We could not find any data. Adjust filters or create a new record.
```

**STEP**: 3 — Add language-specific translations

**DESCRIPTION**: For each supported language, add translated entries to the corresponding i18n_<lang>.properties file (e.g., i18n_de.properties). Keep the same keys; only change the values.

**LANGUAGE**: Properties

**CODE**:
```properties
# webapp/i18n/i18n_de.properties (German translations)
KEY_NAME_TABLE_NO_DATA_TITLE=Keine Elemente vorhanden
KEY_NAME_TABLE_NO_DATA_DESCRIPTION=Es sind keine Einträge vorhanden, die Ihren aktuellen Filtern entsprechen. Entfernen Sie einen Filter oder ändern Sie die Suchkriterien.
KEY_NAME_TABLE_NO_DATA_ACTION=Neues Element erstellen
KEY_NAME_ILLUSTRATED_NO_DATA_TITLE=Keine Ergebnisse gefunden
KEY_NAME_ILLUSTRATED_NO_DATA_DESCRIPTION=Es konnten keine Daten gefunden werden. Passen Sie die Filter an oder erstellen Sie einen neuen Eintrag.
```

**STEP**: 4 — Verify and test in the app

**DESCRIPTION**: Rebuild/serve the app and navigate to the List Report and Object Page. Trigger the table no-data condition (e.g., apply filters that return zero rows) and verify that the overridden texts display correctly. If you do not see changes, confirm the key names match the framework's expected keys and that the i18n file is correctly referenced in manifest.json.

**LANGUAGE**: Text / Checklist

**CODE**:
```text
Checklist:
- Confirm i18n file path is correct.
- Confirm keys match those listed in "Localization of UI Texts".
- Rebuild and serve the app (npm run start / ui5 serve / ui5 build).
- Navigate to the page and reproduce the no-data scenario.
- Check browser console/network for loaded i18n resource bundle and values.
```

**STEP**: 5 — Reference related documentation

**DESCRIPTION**: For the exact key names and additional message types (illustrated messages, message strip texts, etc.), consult:
- Displaying An Illustrated Message When No Data Is Found
- Localization of UI Texts
- Configuring Tables

**LANGUAGE**: Text

**CODE**:
```text
Related docs:
- Displaying An Illustrated Message When No Data Is Found
- Localization of UI Texts
- Configuring Tables
```

fiori-elements-framework i18n localization tables list-report object-page


**TITLE**: Managing Variants in SAP Fiori Elements (Page-level vs Control-level)

**INTRODUCTION**: This document explains how to manage and configure variants (views) in SAP Fiori Elements for list reports, analytical list pages, object pages, and worklists. It covers the functional differences between page-level and control-level variant management, initial-load behavior, and the manifest.json settings for OData V2 and OData V4 applications. Use these steps to decide the correct variant scope and to enable or change variant management in the manifest.

**TAGS**: sapui5, fiori-elements, variants, manifest.json, odata-v2, odata-v4, smartVariantManagement, variantManagement

**STEP**: 1 — Understand variant levels and behavior

**DESCRIPTION**: Choose between page-level and control-level variant management based on the scope of personalization you need. Do not enable both simultaneously for the same page (this confuses end users). Use control-level variant management to create separate variants for filters and individual controls (table/chart). Use page-level variant management to capture the overall page state including filter selection and mode, view mode, auto-hide icon (eye icon) state, chart/table configuration (measures/dimensions), sort order, and grouping.

Key functional points to follow:
- Control-level variant management: stores filter area selections and filter mode together; can be used on list report and object page; cannot be combined with page-level management.
- Page-level variant management: captures global page settings listed above; enabled by default for many templates.
- Analytical List Page (ALP) and other templates may have different defaults—confirm manifest settings.

**LANGUAGE**: Text

**CODE**:
```text
Control-level variant management stores filter area selections and the filter mode. When you load the stored variant, both the filter area selection and filter mode appear. It is not possible to use control-level variant management and page-level variant management together.

Page-level variant management captures filter selection, filter mode, view mode, auto-hide icon state (eye-icon), chart, and table configuration (measures and dimensions), sort order, and grouping.
```

**STEP**: 2 — Initial-load behavior for which variant is applied

**DESCRIPTION**: Implement handling and expectations for which variant is loaded when the application opens:
- For table and chart control variants: always load the variant marked as the user's default.
- For the filter control variant or page variant:
  - If the app is launched via external navigation with a navigation context (URL parameters or xAppState), apply the incoming navigation context. This will override the filter values from the user's default variant; the filter bar shows the variant name as Standard* (asterisk indicates a non-clean state). Table/chart personalizations from the default variant are retained.
  - If navigation to the list report occurs with no navigation context, load the user's default variant (if configured); otherwise use the standard variant. In this fallback case, FLP user-default values are applied.

Follow these rules when designing navigation and variant initialization logic.

**LANGUAGE**: Text

**CODE**:
```text
- Table/chart controls: load the end user's default variant.
- Filter/page variant with external navigation context: apply incoming context; default filter values overridden; display "Standard*".
- No navigation context: load end user's default variant (if exists), otherwise standard variant and apply FLP user-default values.
```

**STEP**: 3 — Configure variant management for OData V2 (manifest.json)

**DESCRIPTION**: For OData V2-based Fiori Elements apps (list report, object page, worklist), the smartVariantManagement setting in manifest.json controls whether page-level or control-level variant management is used:
- smartVariantManagement: true → page-level variant enabled.
- smartVariantManagement: false → control-level variant enabled.
- If undefined → default is false (control-level).

Modify the manifest.json pages/component/settings section to change defaults. The SAP Fiori generator sets defaults: list report/object page/worklist = true; analytical list page = false (you can override).

Keep the provided code snippet intact when applying changes.

**LANGUAGE**: JavaScript

**CODE**:
```js
"sap.ui.generic.app": {
        "_version":"1.1.0",
        "pages": [You can change these default settings in the manifest.json file, as shown in the following sample code:
            {
                "entitySet": "XXXXXX_Product",
                "component": {
                    "name": "sap.suite.ui.generic.template.ListReport",
                    "list": true,
                    "settings" : {
                        "gridTable" : false,
                        "multiSelect": false,
                        "smartVariantManagement": true
```

**STEP**: 4 — Configure variant management for OData V4 (manifest.json)

**DESCRIPTION**: For OData V4-based Fiori Elements apps, control the variant management via the VariantManagement setting under routing target options → settings in manifest.json. Default is "Page". Change to "None" or other valid values to disable or alter page-level variant management for a specific target.

Edit the routing targets/options/settings/variantManagement value per target in manifest.json. You can also modify this via the Page Editor.

Preserve the JSON structure when applying changes.

**LANGUAGE**: JSON

**CODE**:
```json
{
    "sap.ui5": {
        "routing": {
            "targets": {
                "SalesOrderManageList": {
                    "options": {
                        "settings": {
                            "variantManagement": "Page"
                        }
                    }
                },
                "SalesOrderManageObject": {
                    "options": {
                        "settings": {
                            "variantManagement": "None"
                        }
                    }
                }
            }
        }
    }
}
```

**STEP**: 5 — Quick actionable checklist & references

**DESCRIPTION**: Use this checklist when implementing or troubleshooting variant management:
- Decide scope: page-level (global page state) vs control-level (filter/control-specific).
- Ensure you do not enable both page-level and control-level variant management concurrently on the same page.
- For OData V2: set smartVariantManagement in sap.ui.generic.app → pages → component → settings.
- For OData V4: set variantManagement in sap.ui5 → routing → targets → <target> → options → settings.
- Confirm defaults: generator sets smartVariantManagement true for list report/object page/worklist and false for analytical list page (OData V2). OData V4 default VariantManagement = Page.
- Use Page Editor to change settings if you prefer a UI instead of editing manifest.json.

References:
- Loading Behavior of Data on Initial Launch of the Application
- Enabling Variant Management on the Object Page
- Page Editor: Configure Page Elements (SAP Fiori tools documentation)

**LANGUAGE**: Text

**CODE**:
```text
Checklist:
- Choose page-level vs control-level and implement only one per page.
- Modify manifest.json in the appropriate location (OData V2: sap.ui.generic.app -> pages -> component -> settings -> smartVariantManagement; OData V4: sap.ui5 -> routing -> targets -> <target> -> options -> settings -> variantManagement).
- Validate initial-load behavior for incoming navigation contexts and default variants.
- Use Page Editor to change variant settings if preferred.
```


**TITLE**: Micro Chart Facet — Annotations and Examples for Fiori Elements

**INTRODUCTION**: This document shows how to add a MicroChart control as a header facet on an object page in SAP Fiori Elements. It contains actionable annotation examples (XML, CDS for ABAP and CAP), guidance on mapping UI.Chart and UI.DataPoint properties, unit-of-measure annotations, sorting via PresentationVariant, and OData V2/V4 limitations. Use these snippets in your local annotations file or CDS views to create header micro charts.

**TAGS**: fiori-elements-framework, micro-chart, UI.Chart, UI.HeaderFacets, UI.DataPoint, Measures.ISOCurrency, PresentationVariant, ODataV2, ODataV4, CDS, XML, ABAP, CAP

STEP: 1 — Add a MicroChart Facet (XML Annotation, ABAP CDS, CAP CDS)

DESCRIPTION: Create a UI.Chart annotation (qualifier) for the entity that contains measures/dimensions and reference it from the header view using UI.HeaderFacets / UI.ReferenceFacet. The UI.DataPoint should be referenced in the Chart.MeasureAttributes via AnnotationPath. Use these examples (XML, ABAP CDS and CAP CDS) as templates—replace entity/field names (Booking, FlightPrice, FlightDate, TravelType, etc.) with your model names.

LANGUAGE: XML
CODE:
```xml
<Annotations Target="SAP__self.BookingType">
    <Annotation Term="SAP__UI.DataPoint" Qualifier="FlightPrice">
        <Record>
            <PropertyValue Property="Value" Path="FlightPrice"/>
        </Record>
    </Annotation>
    <Annotation Term="SAP__UI.Chart" Qualifier="FlightPrice">
        <Record Type="SAP__UI.ChartDefinitionType">
            <PropertyValue Property="ChartType" EnumMember="SAP__UI.ChartType/Column"/>
            <PropertyValue Property="Title" String="Flight Price"/>
            <PropertyValue Property="Measures">
                <Collection>
                    <PropertyPath>FlightPrice</PropertyPath>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="MeasureAttributes">
                <Collection>
                    <Record Type="SAP__UI.ChartMeasureAttributeType">
                        <PropertyValue Property="DataPoint" AnnotationPath="@SAP__UI.DataPoint#FlightPrice"/>
                        <PropertyValue Property="Role" EnumMember="SAP__UI.ChartMeasureRoleType/Axis1"/>
                        <PropertyValue Property="Measure" PropertyPath="FlightPrice"/>
                    </Record>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="Dimensions">
                <Collection>
                    <PropertyPath>FlightDate</PropertyPath>
                </Collection>
            </PropertyValue>
        </Record>
    </Annotation>
</Annotations>

<Annotations Target="SAP__self.TravelType">
    <Annotation Term="SAP__UI.HeaderFacets">
        <Collection>
            <Record Type="SAP__UI.ReferenceFacet">
                <PropertyValue Property="ID" String="FlightPrice"/>
                <PropertyValue Property="Target" AnnotationPath="_Booking/@SAP__UI.Chart#FlightPrice"/>
            </Record>
        </Collection>
    </Annotation>
</Annotations>
```

LANGUAGE: CDS
CODE:
```cds
//@Scope: [VIEW] ("TRAVEL")
annotate view VIEWNAME with
{
  @UI.facet: [ {
    targetElement: '_Booking',
    targetQualifier: 'FlightPrice',
    type: #CHART_REFERENCE,
    purpose: #HEADER
  } ]
  ...
}

//@Scope: [ENTITY] ("BOOKING")
@UI: {
  chart: [ {
    title: 'Flight Price',
    qualifier: 'FlightPrice',
    chartType: #COLUMN,
    measures: [
      'FlightPrice'
    ],
    measureAttributes: [
      {
        measure: 'FlightPrice',
        role: #AXIS_1,
        asDataPoint: true
      }
    ],
    dimensions: [
      'FlightDate'
    ]
  } ]
}

//@Scope: [VIEW] ("BOOKING")
annotate view VIEWNAME with
{
  ...
  @UI.dataPoint: {
    title: 'Flight Price'
  }
  FlightPrice;
  ...
}
```

LANGUAGE: CDS
CODE:
```cds
  annotate Booking with @(UI: {
    DataPoint #FlightPrice: {Value: FlightPrice},

    Chart #FlightPrice    : {
      $Type            : 'UI.ChartDefinitionType',
      Title            : 'Flight Price',
      ChartType        : #Column,
      Measures         : [FlightPrice],
      Dimensions       : [FlightDate],
      MeasureAttributes: [{
        $Type    : 'UI.ChartMeasureAttributeType',
        Measure  : FlightPrice,
        Role     : #Axis1,
        DataPoint: '@UI.DataPoint#FlightPrice'
      }]
    },

  });

  annotate Travel with @(UI: {HeaderFacets: [{
    $Type : 'UI.ReferenceFacet',
    ID    : 'FlightPrice',
    Target: '_Booking/@UI.Chart#FlightPrice'
  }]});
```

STEP: 2 — UI.HeaderFacets and UI.ReferenceFacet (Reference example)

DESCRIPTION: When adding a header facet in local annotations, use UI.HeaderFacets with UI.ReferenceFacet and set Target to the Chart annotation path (AnnotationPath to a UI.Chart or UI.PresentationVariant). Use these XML and CDS examples to reference the chart defined on a related entity/navigation (replace targets accordingly).

LANGUAGE: XML
CODE:
```xml
<Annotations Target="STTA_PROD_MAN.STTA_C_MP_ProductType">
    <Annotation Term="UI.HeaderFacets">
        <Collection>
            <Record Type="UI.ReferenceFacet">
                <PropertyValue Property="Target" AnnotationPath="to_ProductSalesPrice/@UI.Chart"/>
            </Record>
        </Collection>
    </Annotation>
</Annotations>
```

LANGUAGE: CDS
CODE:
```cds
annotate view STTA_C_MP_PRODUCT with {
@UI.Facet: [
  {
    targetElement: 'TO_PRODUCTSALESPRICE',
    type: #CHART_REFERENCE,
    purpose: #HEADER
  }
]

product;
}
```

LANGUAGE: CDS
CODE:
```cds
annotate STTA_PROD_MAN.STTA_C_MP_ProductType with @(
  UI.HeaderFacets : [
    {
        $Type : 'UI.ReferenceFacet',
        Target : 'to_ProductSalesPrice/@UI.Chart'
    }
  ]
);
```

STEP: 3 — UI.Chart and UI.DataPoint mapping (Field mapping and criticality)

DESCRIPTION: Map chart title and subtitle to UI.Chart.Title and UI.Chart.Description respectively. Within UI.Chart.MeasureAttributes, set DataPoint via AnnotationPath to the UI.DataPoint annotation for that measure. Micro charts support both UI.DataPoint Criticality and CriticalityCalculation. See area and bullet micro chart docs for examples.

LANGUAGE: text
CODE:
```text
Mapping:
- UI.Chart.Title  -> Chart title
- UI.Chart.Description -> Chart subtitle
- Chart.MeasureAttributes[].DataPoint -> AnnotationPath to @UI.DataPoint#Qualifier
- UI.DataPoint supports: Criticality, CriticalityCalculation

See:
- Area Micro Chart: area-micro-chart-1467f2b.md
- Bullet Micro Chart: bullet-micro-chart-b915166.md
```

STEP: 4 — Unit of Measure (Footer) Annotations

DESCRIPTION: To display unit of measure in the micro chart footer, annotate the value property with Measures.ISOCurrency (OData EDM XML) or use Semantics in CDS. Examples below annotate AreaChartPrice and Currency.

LANGUAGE: XML
CODE:
```xml
<Annotations xmlns="http://docs.oasis-open.org/odata/ns/edm" Target="STTA_PROD_MAN.STTA_C_MP_ProductSalesPriceType/AreaChartPrice">
     <Annotation Term="Measures.ISOCurrency" Path="Currency"/>
</Annotations>
```

LANGUAGE: CDS
CODE:
```cds
@Semantics.amount.currencyCode: 'Currency'
AreaChartPrice;
@Semantics.currencyCode:true
Currency;
```

LANGUAGE: CDS
CODE:
```cds
annotate STTA_PROD_MAN.STTA_C_MP_ProductSalesPriceType with {
	@Measures.ISOCurrency : Currency
	AreaChartPrice
```

STEP: 5 — OData V2 Limitation (Navigation properties)

DESCRIPTION: For SAP Fiori Elements for OData V2, the template does not support navigation properties in the UI.Chart term for micro charts. If your setup uses navigation properties in Chart definitions, the micro chart facet will not work with the V2 template.

LANGUAGE: text
CODE:
```text
Note: Template doesn't support the use of navigation properties in UI.Chart for micro charts.
Referenced image: images/Chart_Limitation_02debb6.png
```

STEP: 6 — OData V4 Features & Restrictions

DESCRIPTION: In OData V4:
- You can enable in-page and external navigation from the micro chart title (see navigation-from-header-facet-title-fa0ca22.md).
- Comparison micro charts are supported.
- Restriction: micro charts require the back end to provide aggregated data. The client will not perform aggregation for micro chart facets; ensure the service returns aggregated records (e.g., one record per grouping key).

LANGUAGE: text
CODE:
```text
OData V4 notes:
- Navigation from header facet title: navigation-from-header-facet-title-fa0ca22.md
- File reference (image): images/Navigation_Property_d2168a4.png
- Restriction: Back end must return aggregated data for micro charts; client-side aggregation is not performed.
```

STEP: 7 — Apply Sort Order to Micro Charts (PresentationVariant examples)

DESCRIPTION: Apply UI.PresentationVariant.SortOrder to the Chart via ReferenceFacet to sort micro chart data. Micro charts consider only SortOrderType (property + descending flag) and ignore other PresentationVariant properties. Use the examples below to define SortOrder and reference the PresentationVariant from the header facet.

LANGUAGE: XML
CODE:
```xml
<Annotations Target="SAP__self.BookingType">
    <Annotation Term="SAP__UI.DataPoint" Qualifier="FlightPrice">
        <Record>
            <PropertyValue Property="Value" Path="FlightPrice"/>
        </Record>
    </Annotation>
    <Annotation Term="SAP__UI.Chart" Qualifier="FlightPrice">
        <Record Type="SAP__UI.ChartDefinitionType">
            <PropertyValue Property="ChartType" EnumMember="SAP__UI.ChartType/Column"/>
            <PropertyValue Property="Title" String="Flight Price"/>
            <PropertyValue Property="Measures">
                <Collection>
                    <PropertyPath>FlightPrice</PropertyPath>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="MeasureAttributes">
                <Collection>
                    <Record Type="SAP__UI.ChartMeasureAttributeType">
                        <PropertyValue Property="DataPoint" AnnotationPath="@SAP__UI.DataPoint#FlightPrice"/>
                        <PropertyValue Property="Role" EnumMember="SAP__UI.ChartMeasureRoleType/Axis1"/>
                        <PropertyValue Property="Measure" PropertyPath="FlightPrice"/>
                    </Record>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="Dimensions">
                <Collection>
                    <PropertyPath>FlightDate</PropertyPath>
                </Collection>
            </PropertyValue>
        </Record>
    </Annotation>
    <Annotation Term="SAP__UI.PresentationVariant">
        <Record Type="SAP__UI.PresentationVariantType">
            <PropertyValue Property="SortOrder">
                <Collection>
                    <Record Type="SAP__Common.SortOrderType">
                        <PropertyValue Property="Property" PropertyPath="FlightPrice" />
                        <PropertyValue Property="Descending" Bool="false" />
                    </Record>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="Visualizations">
                <Collection>
                    <AnnotationPath>@SAP__UI.Chart#FlightPrice</AnnotationPath>
                </Collection>
            </PropertyValue>
        </Record>
    </Annotation>
</Annotations>
<Annotations Target="SAP__self.TravelType">
    <Annotation Term="SAP__UI.HeaderFacets">
        <Collection>
            <Record Type="SAP__UI.ReferenceFacet">
                <PropertyValue Property="ID" String="FlightPrice"/>
                <PropertyValue Property="Target" AnnotationPath="_Booking/@SAP__UI.PresentationVariant"/>
            </Record>
        </Collection>
    </Annotation>
</Annotations>
```

LANGUAGE: CDS
CODE:
```cds
//@Scope: [VIEW] ("TRAVEL")
annotate view VIEWNAME with
{
  @UI.facet: [ {
    targetElement: '_Booking',
    type: #PRESENTATIONVARIANT_REFERENCE,
    purpose: #HEADER
  } ]
  ...
}

//@Scope: [ENTITY] ("BOOKING")
@UI: {
  presentationVariant: [ {
    sortOrder: [ {
      by: 'FlightPrice',
      direction: #ASC
    } ],
    visualizations: [ {
      type: #AS_CHART,
      qualifier: 'FlightPrice'
    } ]
  } ],
  chart: [ {
    title: 'Flight Price',
    qualifier: 'FlightPrice',
    chartType: #COLUMN,
    measures: [
      'FlightPrice'
    ],
    measureAttributes: [
      {
        measure: 'FlightPrice',
        role: #AXIS_1,
        asDataPoint: true
      }
    ],
    dimensions: [
      'FlightDate'
    ]
  } ]
}

//@Scope: [VIEW] ("BOOKING")
annotate view VIEWNAME with
{
  ...
  @UI.dataPoint: {
    title: 'Flight Price'
  }
  FlightPrice;
  ...
}
```

LANGUAGE: CDS
CODE:
```cds
  annotate Booking with @(UI: {
    DataPoint #FlightPrice: {Value: FlightPrice},

    Chart #FlightPrice    : {
      $Type            : 'UI.ChartDefinitionType',
      Title            : 'Flight Price',
      ChartType        : #Column,
      Measures         : [FlightPrice],
      Dimensions       : [FlightDate],
      MeasureAttributes: [{
        $Type    : 'UI.ChartMeasureAttributeType',
        Measure  : FlightPrice,
        Role     : #Axis1,
        DataPoint: '@UI.DataPoint#FlightPrice'
      }]
    },

    PresentationVariant   : {
      Visualizations: ['@UI.Chart#FlightPrice'],
      SortOrder     : [{
        Property  : FlightPrice,
        Descending: false
      }],
    }
  });

  annotate Travel with @(UI: {HeaderFacets: [{
    $Type : 'UI.ReferenceFacet',
    ID    : 'FlightPrice',
    Target: '_Booking/@UI.PresentationVariant'
  }]});
```

STEP: 8 — Related Resources

DESCRIPTION: Quick links to related micro chart types and additional docs for reference.

LANGUAGE: text
CODE:
```text
Related docs:
- Area Micro Chart: area-micro-chart-1467f2b.md
- Bullet Micro Chart: bullet-micro-chart-b915166.md
- Radial Micro Chart: radial-micro-chart-51eb569.md
- Line Micro Chart: line-micro-chart-e5cb2af.md
- Column Micro Chart: column-micro-chart-1a4ecb8.md
- Harvey Micro Chart: harvey-micro-chart-de4f8bf.md
- Stacked Bar Micro Chart: stacked-bar-micro-chart-9c93837.md
- Comparison Micro Chart: comparison-micro-chart-9d126f1.md
Images referenced in this topic:
- images/Micro_Chart_Facet_7e0b23a.png
- images/Chart_Limitation_02debb6.png
- images/Navigation_Property_d2168a4.png
```


**TITLE**: Migrate SAP Fiori Projects from SAP Web IDE to SAP Business Application Studio or Visual Studio Code

**INTRODUCTION**: Step-by-step, action-oriented instructions to migrate SAP Fiori projects created in SAP Web IDE so they can be opened, developed, and run in SAP Business Application Studio (BAS) or Visual Studio Code (VS Code). Includes prerequisites, export/import actions, and verification steps. Use this with existing SAP Fiori projects created in SAP Web IDE.

**TAGS**: fiori-elements-framework, migration, sap-web-ide, sap-business-application-studio, visual-studio-code, sap-fiori-tools

**STEP**: 1 — Confirm access and read migration guidance

**DESCRIPTION**: Verify whether you still have access to SAP Web IDE. If you only have a trial SAP BTP account, SAP Web IDE is no longer available; consider SAP Business Application Studio instead. Read the official migration guidance before proceeding.

**LANGUAGE**: Plain text

**CODE**:
```text
References:
- Official migration guide: https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/70d41f3ee29d453a90efab3ce025d450.html
- BAS development guide (relative doc): ../05_Developing_Apps/app-development-using-sap-business-application-studio-6bbad66.md

Caution:
- SAP Web IDE is not available on SAP BTP trial accounts.
- Only proceed if you have access to SAP Web IDE via a productive SAP BTP account.
```

**STEP**: 2 — Export project from SAP Web IDE

**DESCRIPTION**: Export the project from SAP Web IDE into a local archive (ZIP) or clone the repository if the project is stored in Git. Use the Web IDE UI: Project -> Export -> Download as ZIP, or use the project's Git URL to clone.

**LANGUAGE**: Shell

**CODE**:
```bash
# If using Web IDE UI: use Project -> Export -> Download as ZIP
# After downloading, on your local machine:
unzip ~/Downloads/my-fiori-project.zip -d ~/projects/my-fiori-project

# If the project is in Git:
git clone <git-repository-url> ~/projects/my-fiori-project
```

**STEP**: 3 — Import project into SAP Business Application Studio

**DESCRIPTION**: Open BAS, create or open a workspace, and import the exported project. Options: upload the ZIP via BAS import dialog or push the project folder into the BAS workspace. After import, install dependencies and open the project in the BAS terminal/editor.

**LANGUAGE**: Shell

**CODE**:
```bash
# Example local prep before uploading to BAS (run locally):
cd ~/projects/my-fiori-project

# Ensure package manifest exists (if a Node-based project)
ls -la package.json

# In BAS: File -> Import -> Local File System -> Upload my-fiori-project.zip
# OR connect to your Git repo in BAS and clone it via the BAS terminal:
# In BAS terminal (after opening workspace):
git clone <git-repository-url> ~/workspace/my-fiori-project
cd ~/workspace/my-fiori-project
# Install dependencies
npm install
```

**STEP**: 4 — Open project in Visual Studio Code

**DESCRIPTION**: For local development in VS Code, open the exported project folder. Install recommended extensions (e.g., SAP Fiori tools, UI5 support). Install dependencies and run local development tasks as defined in the project (npm, UI5 tooling, or configured scripts).

**LANGUAGE**: Shell

**CODE**:
```bash
# Open project in VS Code (local machine)
code ~/projects/my-fiori-project

# Inside project folder, install dependencies
cd ~/projects/my-fiori-project
npm install

# Typical dev/start commands (adjust to your project's package.json scripts)
# For UI5 Tooling based projects:
npm run start    # or: npx ui5 serve --config=ui5.yaml
# For generic Node-based projects:
npm run dev
```

**STEP**: 5 — Verify project runs and validate functionality

**DESCRIPTION**: Start the project locally, open the application in a browser, and verify that routes, OData services, and UI behavior match the original Web IDE project. Fix environment-specific configurations (e.g., destinations, proxy, neo/CF settings) and update any Web IDE-specific metadata.

**LANGUAGE**: Plain text

**CODE**:
```text
Verification checklist:
- Start application (see package.json scripts)
- Open localhost URL provided by dev server (e.g., http://localhost:8080)
- Validate OData/service connectivity and required destinations (configure proxy or local mock server)
- Check linter/build tasks and debug configuration in VS Code or BAS
- Remove or adapt any SAP Web IDE-specific configuration files if present
```

**STEP**: 6 — References and next steps

**DESCRIPTION**: Use the official SAP migration documentation and BAS development guide for deeper details and troubleshooting. After migration, consider switching continuous integration and deployment flows to tools supported by BAS or your CI system.

**LANGUAGE**: Plain text

**CODE**:
```text
Further reading:
- SAP Fiori tools migration guide:
  https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/70d41f3ee29d453a90efab3ce025d450.html

- BAS app development doc (relative doc in repo):
  ../05_Developing_Apps/app-development-using-sap-business-application-studio-6bbad66.md
```

fiori-elements-framework migration sap-web-ide sap-business-application-studio visual-studio-code sap-fiori-tools


**TITLE**: Migrating from registerControllerExtensions API (SAPUI5 / Fiori elements OData V2)

**INTRODUCTION**: This guide shows how to migrate existing controller-extension setups that used the deprecated extensionAPI.registerControllerExtensions API to the manifest-registered controllerExtensions approach available in SAPUI5 1.120+ and required from SAPUI5 version 2.0. Target: SAP Fiori elements for OData V2. Keep child controller files, remove parent registration and adapt manifest and controller code, event handler references, and access to extensionAPI.

**TAGS**: fiori-elements-framework, SAPUI5, migration, OData V2, controllerExtensions, manifest.json, ControllerExtension

STEP: Current setup
DESCRIPTION: Identify current files and roles before migration. Typical example for an Object Page with three controller extension files.
LANGUAGE: text
CODE:
```
- DetailsExtension.controller.js
  The parent controller that invokes extensionAPI.registerControllerExtensions and registers the remaining two child controllers.

- SalesOrderExtension.controller.js
  One child controller for the Sales Order view (bound to entity set C_STTA_SalesOrder_WD_20).

- SalesOrderItemExtension.controller.js
  One child controller for the Sales Order Item view (bound to entity set C_STTA_SalesOrderItem_WD_20).
```

STEP: Step 1 — Changes required in manifest.json
DESCRIPTION: Register each child controller under sap.ui.controllerExtensions using the key format <FLOOR_PLAN_NAME>#<STABLE_ID_OF_VIEW>. Copy header/section actions and other parent content into the corresponding child controller extension entries. Remove the parent controller extension entry from sap.ui.controllerExtensions.
LANGUAGE: JSON
CODE:
```json
"sap.ui.controllerExtensions": {
    ...
    "sap.suite.ui.generic.template.ObjectPage.view.Details#STTASOWD20::sap.suite.ui.generic.template.ObjectPage.view.Details::C_STTA_SalesOrder_WD_20": {
        "controllerName": "STTASOWD20.ext.controller.SalesOrderExtension",
        "sap.ui.generic.app": {
            "C_STTA_SalesOrder_WD_20": {
                "EntitySet": "C_STTA_SalesOrder_WD_20",
                "Header": {
                    "Actions": {
                       ...
                    }
                },
                "Sections": {
                    "Actions": {
                       ...
                    }
                }
            }
        }
    }
}
```

STEP: Step 2 — Controller extension implementation changes
DESCRIPTION: Remove the parent controller extension file. Ensure each child controller extends sap.ui.core.mvc.ControllerExtension. Place all SAPUI5-provided and framework extension methods (e.g., onInit, adaptNavigationParameterExtension, beforeSaveExtension) inside the override section. Place custom helper methods after override. Examples below show structure and placement.
LANGUAGE: JavaScript
CODE:
```javascript
sap.ui.define([
    "sap/ui/core/mvc/ControllerExtension"
], function (ControllerExtension) {
    'use strict';
    return ControllerExtension.extend("STTASOWD20.ext.controller.SalesOrderExtension", {
        override: {
            // Overridden methods
        },
        // Custom methods
    });
});
```

LANGUAGE: JavaScript
CODE:
```javascript
sap.ui.define([
    "sap/ui/core/mvc/ControllerExtension"
], function (ControllerExtension) {
    'use strict';

    return ControllerExtension.extend("STTASOWD20.ext.controller.SalesOrderExtension", {
        override: {
            onInit: function(){
            },
            adaptNavigationParameterExtension: function (oSelectionVariant, oObjectInfo) {},
            onBeforeRendering: function () {},
            beforeDeleteExtension: function () {},
            beforeSaveExtension: function () {}
        },
        onObjectPage1CustomAction: function () {
        },
        onSalesOrderInfo: function () {},
        onSalesOrderItemInfo: function () {}
    });
});
```

STEP: Step 3 — Update manifest declarations for press/event handlers
DESCRIPTION: Previously, custom action press handlers referenced methods by name (e.g., "onObjectPage1CustomAction"). Update these to reference the controller extension module and method using the extension.<CONTROLLER_MODULE_NAME>.<METHOD_NAME> format (note the leading dot before "extension"). Apply same format in manifest, XML views, and fragments.
LANGUAGE: JSON
CODE:
```json
"sap.ui.generic.app": {
    "C_STTA_SalesOrder_WD_20": {
        "EntitySet": "C_STTA_SalesOrder_WD_20",
        "Header": {
            "Actions": {
                "ObjectPageCustomAction": {
                    "id": "ObjectPageCustomAction",
                    "text": "Custom Action 1",
                    "press": "onObjectPage1CustomAction",
                    "determining": true,
                    "applicablePath": "IsActiveEntity"
                }
            }
        }
    }
}
```

LANGUAGE: JSON
CODE:
```json
"sap.ui.generic.app": {
    "C_STTA_SalesOrder_WD_20": {
        "EntitySet": "C_STTA_SalesOrder_WD_20",
        "Header": {
            "Actions": {
                "ObjectPageCustomAction": {
                    "id": "ObjectPageCustomAction",
                    "text": "Custom Action 1",
                    "press": ".extension.STTASOWD20.ext.controller.SalesOrderExtension.onObjectPage1CustomAction",
                    "determining": true,
                    "applicablePath": "IsActiveEntity"
                }
            }
        }
    }
}
```

LANGUAGE: XML
CODE:
```xml
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
       <Button id="previousMemoBtn" text="{i18n>yes}"
              press=".extension.SSTASOWD20.ext.controller.SalesOrderExtension.onPressPreviousMemo" />
</core:FragmentDefinition>
```

STEP: Additional changes — Accessing extensionAPI from ControllerExtension
DESCRIPTION: Inside ControllerExtension methods, obtain the extensionAPI instance from the view controller via this.getView().getController().extensionAPI. Initialize it (for reuse) in onInit override and call extensionAPI methods from custom methods.
LANGUAGE: JavaScript
CODE:
```javascript
sap.ui.define([
    "sap/ui/core/mvc/ControllerExtension"
], function (ControllerExtension) {
    'use strict';

    return ControllerExtension.extend("STTASOWD20.ext.controller.SalesOrderExtension", {
        override: {
            onInit: function () {
                // Initializing extensionAPI
                this.extensionAPI = this.getView().getController().extensionAPI;
            }
        },
        onSalesOrderInfo: function () {
            // Using extensionAPI
            var aSelectedContexts = this.extensionAPI.getSelectedContexts("SalesOrderItemsID::responsiveTable");
        }
    });
});
```

fiori-elements-framework
SAPUI5
migration
OData V2
controllerExtensions
manifest.json
ControllerExtension