**TITLE**: Adding and Removing Object Page Subpages (manifest.json)

**INTRODUCTION**: Instructions to add or remove subpages (object page detail subpages) in SAP Fiori Elements apps by editing manifest.json manually and using SAP Fiori tools. Includes examples for OData V2 (sap.ui.generic.app) and OData V4 (sap.ui5 routing/targets). Use these actionable steps to implement navigation and component loading for subpages or to remove them.

**TAGS**: fiori-elements, manifest.json, subpage, object-page, OData V2, OData V4, routing, targets, sap.ui.generic.app, sap.ui5, SAP Fiori tools, SAP Business Application Studio

STEP: 1 — Recommended Tooling (Page Map)
DESCRIPTION: Use SAP Fiori tools (extensions for SAP Business Application Studio or VS Code) Page Map to add, remove, and configure pages visually. Recommended for most users; manual manifest edits are still possible.
LANGUAGE: Text
CODE:
```text
Tool: SAP Fiori tools -> Page Map
Docs: https://help.sap.com/viewer/product/SAP_FIORI_tools/Latest/en-US
Note: SAP Web IDE is deprecated for trial SAP BTP accounts; prefer SAP Business Application Studio.
```

STEP: 2 — Manual: General note for manifest.json
DESCRIPTION: You can add further subpages manually by editing manifest.json after app generation. For OData V2, add entries under "sap.ui.generic.app"."pages". For OData V4, add a route in "sap.ui5"."routing" and a corresponding target in "sap.ui5"."routing"."targets". To remove a subpage, delete the added manifest entries.
LANGUAGE: Text
CODE:
```text
File to edit: manifest.json
For OData V2: sap.ui.generic.app -> pages
For OData V4: sap.ui5 -> routing -> routes + sap.ui5 -> routing -> targets
```

STEP: 3 — OData V2: Add Subpage via sap.ui.generic.app
DESCRIPTION: Express a 1:n association subpage under sap.ui.generic.app.pages. Add nested "pages" entries to render the subpage (as a table or object page). Example below shows root list report -> object page -> subpage entity (navigationProperty).
LANGUAGE: JSON
CODE:
```json
"sap.ui.generic.app":{
   "pages":{
      "entitySet":"SEPMRA_I_ProductWithDraft",
      "component":{
         "name":"sap.suite.ui.generic.template.ListReport",
         "list":true
      },
      "pages":{
         "entitySet":"SEPMRA_I_ProductWithDraft",
         "component":{
            "name":"sap.suite.ui.generic.template.ObjectPage"
         },
         "pages":{
            "entitySet":"SEPMRA_I_ProductTextWithDraft",
            "navigationProperty":"to_ProductText",
            "component":{
               "name":"sap.suite.ui.generic.template.ObjectPage"
            }
         }
      }
   }
},
```

STEP: 4 — OData V2: Remove Subpage
DESCRIPTION: To delete the subpage and its link from the object page, remove the corresponding "pages" subtree (entitySet/navigationProperty/component) from "sap.ui.generic.app" in manifest.json.
LANGUAGE: Text
CODE:
```text
Action: Remove the nested "pages" block for the subpage under "sap.ui.generic.app" in manifest.json
Result: Subpage and navigation link removed
```

STEP: 5 — OData V4: Add Subpage via routing (route + target)
DESCRIPTION: For OData V4, add two objects to manifest.json:
1) A route in sap.ui5.routing.routes specifying pattern, name, and target.
2) A target in sap.ui5.routing.targets specifying type Component, id, name (e.g., "sap.fe.templates.ObjectPage") and options.settings.contextPath. The example below shows route pattern and target configuration needed to add a SalesOrder Item object page as a subpage.
LANGUAGE: JSON
CODE:
```json
"sap.ui5": {
        ...
        "routing": {
                ...
                {
                    "pattern": "SalesOrderManage({key})/_Item({key2}):?query:",
                    "name": "SalesOrderItemObjectPage",
                    "target": "SalesOrderItemObjectPage"
                }
            ],
            "targets": {
                "SalesOrderItemObjectPage": {
                    "type": "Component",
                    "id": "SalesOrderItemObjectPage",
                    "name": "sap.fe.templates.ObjectPage",
                    "options": {
                        "settings": {
                            "contextPath": "/SalesOrderItem",
                            ...
                        }
                    }
                }
            }
        }
    }
```

STEP: 6 — OData V4: Remove Subpage
DESCRIPTION: To remove the subpage, delete both the route entry in sap.ui5.routing.routes and the corresponding target entry in sap.ui5.routing.targets from manifest.json.
LANGUAGE: Text
CODE:
```text
Action: Remove route (e.g., "SalesOrderItemObjectPage") from sap.ui5.routing.routes and remove "SalesOrderItemObjectPage" from sap.ui5.routing.targets
Result: Subpage route and component target removed
```

STEP: 7 — Caution about SAP Web IDE availability
DESCRIPTION: SAP Web IDE is not available from SAP BTP trial accounts. Only relevant if you have a productive SAP BTP account with SAP Web IDE access. Prefer SAP Business Application Studio as the alternative for Page Map tooling.
LANGUAGE: Text
CODE:
```text
Caution: SAP Web IDE deprecated for trial BTP accounts. Use SAP Business Application Studio instead.
Reference: App Development Using SAP Business Application Studio
```

STEP: 8 — Related Links
DESCRIPTION: Reference for intent-based navigation and changing navigation to object page.
LANGUAGE: Text
CODE:
```text
Related doc: Changing Navigation to Object Page
Path: ../05_Developing_Apps/changing-navigation-to-object-page-8bd546e.md
```

fiori-elements
manifest.json
subpage
object-page
OData V2
OData V4
routing
targets
sap.ui.generic.app
sap.ui5
SAP Fiori tools
SAP Business Application Studio


**TITLE**: Adding the AI Icon to Action Buttons (SAP Fiori elements, OData V4)

**INTRODUCTION**: This guide shows how to mark action buttons as AI operations so the SAP Fiori "AI" icon (SAP-icons-V5: AI) appears before button text. Applicable to SAP Fiori elements for OData V4. Provide transparency when AI processes personal data. Use either the manifest.json controlConfiguration or local annotations. manifest.json settings override local annotations. To add the icon to buttons inside UI.DataFieldForActionGroup, use local annotations and mark each child action.

**TAGS**: fiori-elements-framework, SAP, UI.IsAIOperation, isAIOperation, manifest.json, annotations, OData V4, UI.DataFieldForAction, UI.DataFieldForActionGroup, CAP, ABAP, XML, JSON

STEP: 1 — Prerequisites and restrictions

DESCRIPTION: Ensure you are on SAP Fiori elements for OData V4. Include the SAP icons CSS in your app if not already present. Understand these restrictions:
- Only use the AI icon for buttons created by UI.DataFieldForAction or UI.DataFieldForActionGroup.
- Inline action buttons do not support the AI icon.
- Use the SAP-icons-V5 "AI" icon and set UI.IsAIOperation / isAIOperation = true.
- manifest.json controlConfiguration overrides local annotations.
- To add the icon for actions inside UI.DataFieldForActionGroup, mark each child action as a DataFieldForAction and indicate UI.IsAIOperation (use local annotations for groups).

LANGUAGE: HTML

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

STEP: 2 — Add AI icon using manifest.json (controlConfiguration)

DESCRIPTION: To display the AI icon on a button configured via the application's manifest, set isAIOperation to true for the action under controlConfiguration (LineItem actions example). Place this in your manifest.json under sap.ui5 -> routing -> targets -> <YourTarget> -> options -> settings -> controlConfiguration -> @com.sap.vocabularies.UI.v1.LineItem -> actions -> <YourAction>.

LANGUAGE: JSON

CODE:
```json
{
    ...
    "sap.ui5": {
        ...
        "routing": {
            "targets": {
                "ListReportExample": {
                    "type": "Component",
                    "name": "sap.fe.templates.ListReport",
                    "id": "ListReportExample",
                    "options": {
                        "settings": {
                            ...
                            "controlConfiguration": {
                                "@com.sap.vocabularies.UI.v1.LineItem": {
                                    "actions": {
                                        "TableCustomAction": {
                                            "text": "Custom Action",
                                            "press": "sap.fe.core.ActionAllAreas.AnnotationUnboundAction",
                                            "isAIOperation": true
                                        }
                                    }
                                }
                            }
                            ...
                        }
                    }
                }
            }
        }
        ...
    }
}
```

STEP: 3 — Add AI icon using local annotations (XML annotation)

DESCRIPTION: For local metadata annotations, annotate the action target with UI.IsAIOperation = true. Use XML annotations for OData V4. ABAP CDS does not support UI.IsAIOperation (use local XML instead). For CAP, set @UI.IsAIOperation : true on the action in CDS (example below). For actions inside UI.DataFieldForActionGroup, mark each child DataFieldForAction / action with UI.IsAIOperation = true in local annotations.

LANGUAGE: XML

CODE:
```xml
<Action Name="AIUnboundAction" IsBound="false">
    <ReturnType Type="com.c_salesordermanage_sd_aggregate.SalesOrderManage" />
</Action>

<Annotations Target="com.c_salesordermanage_sd_aggregate.AIUnboundAction()">
    <Annotation Term="UI.IsAIOperation" Bool="true" />
</Annotations>
```

STEP: 4 — ABAP CDS note and CAP CDS example

DESCRIPTION: ABAP CDS does not support UI.IsAIOperation — use the local XML annotation above. For CAP projects, annotate the action in CDS with @UI.IsAIOperation : true.

LANGUAGE: CDS

CODE:
```
namespace sap.fe.core;

service ActionAllAreas {
  @odata.draft.enabled
  entity RootElement as projection on core.RootElement actions {
                          @cds.odata.bindingparameter.name: 'self'
                          @UI.IsAIOperation               : true
                          action AnnotationAction()                   returns RootElement;
                        }
}
```

fiori-elements-framework
SAP
UI.IsAIOperation
isAIOperation
manifest.json
annotations
OData V4
UI.DataFieldForAction
UI.DataFieldForActionGroup
CAP
ABAP
XML
JSON


**TITLE**: Enable OData $select for OVP Cards via manifest.json

**INTRODUCTION**: Add the OData $select parameter to OVP list or table cards by setting the addODataSelect property in the card's settings inside manifest.json. Use this when your OData service (for example Smart Business services) requires explicit selected properties—such as aggregated values—to be returned. Note: $select is not added automatically for list/table cards because it can affect navigation behavior.

**TAGS**: fiori-elements-framework, OData, manifest.json, sap.ovp, select, list-cards, table-cards, Smart-Business

**STEP**: 1 — Add addODataSelect to the card settings

**DESCRIPTION**: Edit the application's manifest.json and set "addODataSelect": true in the specific card's settings under "sap.ovp" -> "cards" -> "<cardId>" -> "settings". This instructs the OVP runtime to include the OData $select parameter for that card's requests.

**LANGUAGE**: JSON

**CODE**:
```json
"sap.ovp": {
    "globalFilterModel": "salesOrder",
    "globalFilterEntityType": "GlobalFilters", //Deprecated since SAPUI5 1.54
    "globalFilterEntitySet": "GlobalFilters",  //Available from SAPUI5 1.54
    "cards": {
      "card00": {
        "model": "salesOrder",
        "template": "sap.ovp.cards.list",
        "settings": {
          "entitySet": "SalesOrderSet",
          "category": "Sales Orders with filters",
          "listType": "extended",
          "addODataSelect": true
        }
      }
    }
}
```

**STEP**: 2 — Guidance and caveats

**DESCRIPTION**: Use the setting only when necessary and for the specific card(s) that require explicit property selection.

**LANGUAGE**: Text

**CODE**:
```
- Purpose: Adds an OData $select parameter to the card's requests so only required properties (including aggregated values returned by Smart Business OData services) are fetched.
- Where to set: manifest.json -> sap.ovp -> cards -> <cardId> -> settings -> addODataSelect (boolean).
- Default behavior: List and table cards do NOT add $select automatically (to avoid unintended navigation changes).
- When to enable: When your OData service requires selected properties to be returned (e.g., aggregated fields needed by the card).
- Caution: Enabling $select can impact navigation behavior—test navigation and data returned thoroughly after enabling.
```

fiori-elements-framework OData manifest.json sap.ovp select list-cards table-cards Smart-Business


**TITLE**: Adding Titles to Object Page Tables

**INTRODUCTION**: This document shows how to add a title to an Object Page table by supplying a string (or i18n key) to the UI.HeaderInfo.TypeNamePlural annotation on the entity type associated with the table. Includes XML, ABAP CDS, and CAP CDS examples and important rules to follow.

**TAGS**: fiori-elements-framework, annotations, UI.HeaderInfo, TypeNamePlural, i18n, CDS, ABAP, CAP, XML, object-page, table-title

**STEP**: 1 — Add UI.HeaderInfo.TypeNamePlural (XML Annotation)

**DESCRIPTION**: For OData metadata annotations (XML), add a UI.HeaderInfo record on the entity type and set TypeNamePlural to the desired title string or an i18n key (mandatory). Ensure the annotation target is the entity type associated with the table.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="STTA_PROD_MAN.STTA_C_MP_ProductTextType">
      <Annotation Term="UI.HeaderInfo">
          <Record>
              <PropertyValue Property="TypeName" String="Product Text" />
              <PropertyValue Property="TypeNamePlural" String="{@i18n>@TableTitle}" />
              <PropertyValue Property="Title">
                    <Record Type="UI.DataField">
                           <PropertyValue Property="Value" Path="Name" />
                    </Record>
              </PropertyValue>
             <PropertyValue Property="Description">
                    <Record Type="UI.DataField">
                        <PropertyValue Property="Value" Path="Language" />
                    </Record>
             </PropertyValue>
       </Record>
 </Annotation>
```

**STEP**: 2 — Add UI.headerInfo (ABAP CDS Annotation)

**DESCRIPTION**: In ABAP CDS, annotate the view with @UI.headerInfo and set typeNamePlural. Use an i18n key or literal string. This header info is required for the table title to be displayed.

**LANGUAGE**: ABAP CDS

**CODE**:
```
@UI.headerInfo: {
  typeName: 'Product Text',
  typeNamePlural: '{@i18n>@TableTitle}',
  title: {
    value: 'NAME',
    type: #STANDARD
  },
  description: {
    value: 'LANGUAGE',
    type: #STANDARD
  }
}
annotate view STTA_C_MP_PRODUCTTEXT with {

}
```

**STEP**: 3 — Add UI.HeaderInfo (CAP CDS Annotation)

**DESCRIPTION**: In CAP (CDS for CAP) use the UI.HeaderInfo annotation on the entity and set TypeNamePlural. Use $Type UI.DataField for Title/Description values if required.

**LANGUAGE**: CDS

**CODE**:
```
annotate STTA_PROD_MAN.STTA_C_MP_ProductType @(
  UI.HeaderInfo : {
    TypeName : 'Product Text',
    TypeNamePlural : '{@i18n>@TableTitle}',
    Title : {
        $Type : 'UI.DataField',
        Value : Name
    },
    Description : {
        $Type : 'UI.DataField',
        Value : Language
    }
  }
);
```

**STEP**: 4 — Rules, Requirements, and Best Practices

**DESCRIPTION**: Follow these actionable rules when adding table titles:
- TypeNamePlural is mandatory: always provide a value (literal or i18n key) for UI.HeaderInfo.TypeNamePlural on the entity type.
- UI.HeaderInfo required: if the UI.HeaderInfo annotation is missing, the Object Page table title will not be displayed.
- Avoid duplicate section titles: if the same string is used for the section title and TypeNamePlural, ensure appropriate section titles are provided so UX is clear.
- Use i18n keys for translatable labels: e.g., '{@i18n>@TableTitle}'.
- If a section/subsection contains only one control (table or chart), the section title is hidden and set as the control title automatically — account for this when designing section and control titles.

**LANGUAGE**: N/A

**CODE**:
```text
- TypeNamePlural is mandatory.
- If UI.HeaderInfo is not present, table title will not be displayed.
- Provide appropriate section titles if TypeNamePlural duplicates section/subsection strings.
- Use i18n keys for localization: '{@i18n>@TableTitle}'.
```

**STEP**: 5 — Result Preview and Related Resources

**DESCRIPTION**: The table title will appear in the Object Page section when UI.HeaderInfo.TypeNamePlural is defined. Example image file path (retain for documentation or assets): images/Adding_Titles_to_Object_page_8920264.png

Related docs:
- Placing Reuse Component Instances on the Object Page: placing-reuse-component-instances-on-the-object-page-1ba7f88.md
- Adding a Custom Section to an Object Page: adding-a-custom-section-to-an-object-page-a357047.md

**LANGUAGE**: N/A

**CODE**:
```text
Result preview image: images/Adding_Titles_to_Object_page_8920264.png

Notes:
- If a section/subsection has only one control (table or chart), the section title is hidden and used as the control title.
- Sections with tables/charts (custom or embedded) can choose to hide the section title and set it as the control title.
```

Adding Titles to Object Page Tables

fiori-elements-framework annotations UI.HeaderInfo TypeNamePlural i18n CDS ABAP CAP XML object-page table-title


**TITLE**: Adding Two Tables in a Subsection (SAP Fiori elements — OData V2)

**INTRODUCTION**: Add two tables adjacent to each other inside a subsection of an object page by using a UI.CollectionFacet containing two UI.ReferenceFacet annotations. This approach is applicable only to SAP Fiori elements for OData V2. Use the ReferenceFacet properties Label, ID, and Target (AnnotationPath pointing to the @UI.LineItem of the related navigation property) and optionally set UI.Importance.

**TAGS**: fiori-elements-framework, odata-v2, annotations, CollectionFacet, ReferenceFacet, UI.LineItem, responsive

**STEP**: 1 — Add the CollectionFacet with two ReferenceFacet annotations

**DESCRIPTION**: Insert a UI.CollectionFacet record that defines two UI.ReferenceFacet entries. Each ReferenceFacet must include:
- PropertyValue Property="Label" — visible label for the table
- PropertyValue Property="ID" — unique ID for the facet
- PropertyValue Property="Target" AnnotationPath — path to the navigation property's @UI.LineItem (use the correct qualifier if needed, e.g., #SalesOrderItem)
- Optional Annotation Term="UI.Importance" — set importance (e.g., High) to influence rendering priority

Place this XML in your OData V2 annotations file used by the Fiori elements app (for example, in the annotations XML file referenced by the manifest).

**LANGUAGE**: XML

**CODE**:
```xml
<Record Type="UI.CollectionFacet">
   <PropertyValue Property="Label" String="Single Section Multiple Tables" />
   <PropertyValue Property="ID" String="MultiTable" />
   <PropertyValue Property="Facets">
      <Collection>
         <Record Type="UI.ReferenceFacet">
            <PropertyValue Property="Label" String="Sales Order Items" />
            <PropertyValue Property="ID" String="SalesOrderItemsID" />
            <PropertyValue Property="Target" AnnotationPath="to_Item/@UI.LineItem#SalesOrderItem" />
            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High" />
         </Record>
         <Record Type="UI.ReferenceFacet">
            <PropertyValue Property="Label" String="Contacts" />
            <PropertyValue Property="ID" String="ContactsID" />
          <PropertyValue Property="Target" AnnotationPath="to_BPAContact/@UI.LineItem" />
            <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High" />
         </Record>
      </Collection>
   </PropertyValue>
</Record>
```

**STEP**: 2 — Understand responsive space allocation for the two tables

**DESCRIPTION**: The two tables adjust their widths automatically depending on the container/screen size. Use these rules to anticipate layout and to design column visibility or priorities accordingly.

**LANGUAGE**: Text

**CODE**:
```
- For extra large (XL) container/screen size (large desktops):
  - First table occupies 75%
  - Second table occupies 25%
  - Image: images/Extra_Large_XL_Containers_Screen_Size_287b6ce.png

- For large (L) container/screen size (desktops):
  - First table occupies 66.66%
  - Second table occupies 33.33%
  - Image: images/Large_L_Containers_Screen_Size_88b89fc.png

- For medium (M) container/screen size (tablets):
  - First and second tables occupy 50% each
  - Image: images/Medium_M_Containers_Screen_Sizes_43b4b66.png

- For small (S) container/screen size (mobiles):
  - Tables appear stacked one below the other
  - Image: images/Small_S_Containers_Screen_Sizes_d94126e.png
```

fiori-elements-framework odata-v2 annotations CollectionFacet ReferenceFacet UI.LineItem responsive


**TITLE**: Address Facet in Sections (UI.ReferenceFacet -> Communication.Address)

**INTRODUCTION**: Use a UI.ReferenceFacet that points to an address annotation to render a formatted address in object page sections or quick view popovers. Only the Label property of the address annotation is rendered (use "\n" for new lines). Applicable to SAP Fiori elements for OData V2.

**TAGS**: fiori-elements-framework, odata-v2, ui.referencefacet, address-annotation, xml, abap-cds, cap-cds, quick-view, object-page

STEP: Overview / Rules to follow
DESCRIPTION:
- Use a UI.ReferenceFacet (or DataFieldForAnnotation referencing Communication.Address) to show an address.
- Only the Label property of the address annotation is interpreted and rendered. Put the full formatted address in the Label, using "\n" for new lines (escaped as \\n where required).
- Applicable only for SAP Fiori elements for OData V2.
- Example Label value: "Mail Drop: TNE QB\\n123 Main Street\\nAny Town, CA 91921-1234\\nU.S.A."
LANGUAGE: Text
CODE:
```text
Notes:
- Only the 'Label' property of the address annotation is interpreted and rendered.
- Use '\n' for new lines in the Label (escaped as \\n in XML/JSON where necessary).
- This behavior applies to SAP Fiori elements for OData V2 only.
Example Label value:
"Mail Drop: TNE QB\n123 Main Street\nAny Town, CA 91921-1234\nU.S.A."
```

STEP: Add an Address Facet as a separate section (Object Page)
DESCRIPTION: Add a UI.ReferenceFacet record pointing to the Communication.Address annotation. Ensure the facet Label is the displayed section title and the address annotation's Label contains the formatted address (use "\n" for line breaks).
LANGUAGE: XML
CODE:
```xml
<Record Type="UI.ReferenceFacet">
   <PropertyValue Property="Label" String="Communication Address" />
   <PropertyValue Property="Target" AnnotationPath="to_Address/@Communication.Address" />
</Record>
```

STEP: Add an Address Facet as a separate section (ABAP CDS)
DESCRIPTION: In ABAP CDS, define a UI.facet using type #ADDRESS_REFERENCE, set targetElement to the address element. The facet label becomes the section title; put the formatted address in the address annotation label.
LANGUAGE: ABAP CDS
CODE:
```
@UI.facet: [
 {
  label: 'Communication Address',
  type: #ADDRESS_REFERENCE,
  targetElement: '_Address',
  purpose: #STANDARD
 }
]
```

STEP: Add an Address Facet as a separate section (CAP CDS / JSON-style)
DESCRIPTION: In CAP CDS (manifest or annotation file), define a UI.ReferenceFacet with Label and Target referencing the Communication.Address.
LANGUAGE: CAP CDS
CODE:
```
{
    $Type : 'UI.ReferenceFacet',
    Label : 'Communication Address',
    Target : 'to_Address/@Communication.Address'
}
```

STEP: Add Address inside a Field Group within a Section (FieldGroup -> Quick View / Smart Link)
DESCRIPTION: To show the address inside a field group (and enable quick view popover usage with smart link navigation), use a DataFieldForAnnotation referencing Communication.Address inside a UI.FieldGroup. The field group's Label is the group/section label; the DataFieldForAnnotation Label is the address title shown in the group or quick view. Ensure the address annotation's Label contains the formatted address with "\n".
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.FieldGroup" Qualifier="GeneralInformation">
   <Record>
      <PropertyValue Property="Data">
         <Collection>
            <Record Type="UI.DataFieldForAnnotation">
               <PropertyValue Property="Label" String="Communication Address" />
               <PropertyValue Property="Target" AnnotationPath="to_Address/@Communication.Address"/>
            </Record>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="Label" String="Product Information"/>
   </Record>
</Annotation>
```

STEP: Add Address inside a Field Group within a Section (ABAP CDS)
DESCRIPTION: In ABAP CDS, define a UI.fieldGroup with type #AS_ADDRESS (or appropriate address type), assign qualifier and groupLabel. The field group's Data entry maps to the address element; the address annotation's Label must contain the formatted address text.
LANGUAGE: ABAP CDS
CODE:
```
@UI.fieldGroup: [
  {
    label: 'Communication Address',
    value: '_ADDRESS',
    type: #AS_ADDRESS,
    qualifier: 'GeneralInformation',
    groupLabel: 'Product Information'
  }
]
_ADDRESS;
```

STEP: Add Address inside a Field Group within a Section (CAP CDS / JSON-style)
DESCRIPTION: In CAP CDS (UI annotations), define a UI.FieldGroup with Data containing a UI.DataFieldForAnnotation that targets the Communication.Address. Use Label values as needed and put the formatted address into the address annotation's Label.
LANGUAGE: CAP CDS
CODE:
```
UI.FieldGroup #GeneralInformation : {
    Data : [
        {
            $Type : 'UI.DataFieldForAnnotation',
            Label : 'Communication Address',
            Target : 'to_Address/@Communication.Address'
        }
    ],
    Label : 'Product Information'
}
```

STEP: Related resources
DESCRIPTION: For enabling quick views and enriching popovers for link navigation (useful for quick view display of addresses), consult the enabling quick views documentation.
LANGUAGE: Text
CODE:
```text
Related: Enabling Quick Views for Link Navigation (enabling-quick-views-for-link-navigation-307ced1.md)
```

fiori-elements-framework odata-v2 ui.referencefacet address-annotation xml abap-cds cap-cds quick-view object-page


**TITLE**: Address Facet in the Object Page Header

**INTRODUCTION**: Shows how to add an address facet to an Object Page header using a UI.ReferenceFacet that points to an address annotation. Only the label property of the address annotation is rendered (it must contain the full formatted address using \n for line breaks). Use these snippets to generate or modify annotations in XML, ABAP CDS, or CAP CDS.

**TAGS**: fiori-elements-framework, UI.ReferenceFacet, address, object-page, header, annotation, CDS, XML, CAP, ABAP

STEP: Behavior and formatting requirements

DESCRIPTION: The Object Page header displays the ReferenceFacet label and, underneath, only the address annotation's label property. Other address annotation properties are ignored. The label string must contain the entire formatted address using literal backslash-n sequences (\n) for new lines.

LANGUAGE: text

CODE:
```text
Example label value (must include \n for new lines):
"Mail Drop: TNE QB\n123 Main Street\nAny Town, CA 91921-1234\nU.S.A."
```

STEP: XML Annotation sample

DESCRIPTION: Add a UI.ReferenceFacet XML annotation in the metadata (annotation file) that targets an address annotation. The ReferenceFacet Label is displayed in the header; Target points to the address annotation path.

LANGUAGE: XML

CODE:
```xml
<Record Type="UI.ReferenceFacet">
    <PropertyValue Property="Label" String="Shipping Address"/>
    <PropertyValue AnnotationPath="@Communication.Address" Property="Target"/>
</Record>
```

STEP: ABAP CDS Annotation sample

DESCRIPTION: Define a UI facet in ABAP CDS with type #AS_ADDRESS to mark the field as an address facet. The facet label will appear in the Object Page header; ensure the referenced address annotation's label contains the formatted address with \n.

LANGUAGE: CDS

CODE:
```
@UI.facet: [
 {
  label: 'Shipping Address',
  type:         #AS_ADDRESS,
  purpose: #STANDARD
 }
]
product;
```

STEP: CAP CDS (JSON-like) Annotation sample

DESCRIPTION: CAP-style annotation for a UI.ReferenceFacet targeting an address annotation. Use this in service or annotation JSON files; the Label is shown in the header and the Target points to the address annotation.

LANGUAGE: JSON

CODE:
```json
{
    $Type : "UI.ReferenceFacet",
    Label : "Shipping Address",
    Target : "@Communication.Address"
}
```

Address Facet in the Object Page Header

fiori-elements-framework UI.ReferenceFacet address object-page header annotation CDS XML CAP ABAP


**TITLE**: Analytical Cards — Annotations and Manifest Configuration for Charts

**INTRODUCTION**: This document collects the essential annotation and manifest code snippets to configure analytical cards (header KPI + chart) in SAP Fiori elements / OVP. Use these steps to: limit fetched chart items, control axis scaling, set fixed axis ranges via DataPoint, enable chart interactivity parameters, and configure cards in manifest.json. Keep snippets intact and apply them to your annotation files, CDS definitions or manifest.json as shown.

**TAGS**: analytical-cards, UI.PresentationVariant, UI.Chart, UI.DataPoint, AxisScaling, manifest.json, OData, CDS, CAP, ABAP, SAPUI5, OVP

STEP: 1 — Limit records rendered in charts (PresentationVariant — XML)
DESCRIPTION: Use UI.PresentationVariant.MaxItems to limit number of records fetched/rendered in the chart for responsiveness. Add this XML annotation to your annotation file and reference it from the card presentationAnnotationPath.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.PresentationVariant" Qualifier="Column_Eval_by_Country_123">
    <Record>
          <PropertyValue Property="MaxItems" Int="5" />
    </Record>
</Annotation>
```

STEP: 2 — Limit records rendered in charts (PresentationVariant — ABAP CDS)
DESCRIPTION: ABAP CDS equivalent for setting MaxItems. Add to the view or CDS definition and reference via qualifier.
LANGUAGE: ABAP CDS
CODE:
```
@UI.PresentationVariant: [
  {
    maxItems: 5,
    qualifier: 'Column_Eval_by_Country_123'
  }
]
annotate view VIEWNAME with { }
```

STEP: 3 — Limit records rendered in charts (PresentationVariant — CAP CDS)
DESCRIPTION: CAP CDS syntax to define PresentationVariant with MaxItems. Use the qualifier referenced by the card.
LANGUAGE: CAP CDS
CODE:
```
UI.PresentationVariant #Column_Eval_by_Country_123 : {
    MaxItems : 5
}
```

STEP: 4 — Tip: show only top records (use SortOrder)
DESCRIPTION: If you want the chart to display top records rather than arbitrary set, apply UI.PresentationVariant.SortOrder in addition to MaxItems. This focuses the chart on top results for easier selection of data points.
LANGUAGE: text
CODE:
```
Use UI.PresentationVariant.SortOrder together with MaxItems to fetch and render only the top N records.
```

STEP: 5 — Chart interactivity: URL parameter payload when selecting a data point
DESCRIPTION: When users select a data point, the card passes technical IDs (keys) not display names. Example: pass "RegionID=001" (technical key) rather than "Region=EMEA" (display).
LANGUAGE: text
CODE:
```
Selected data point payload example (query string):
RegionID=001  // technical key for target app filtering
```

STEP: 6 — Axis scaling: ZeroAlwaysVisible (XML)
DESCRIPTION: To always include zero in axis range, set AxisScaling.AutoScaleBehavior.ZeroAlwaysVisible = true in UI.Chart annotation (XML).
LANGUAGE: XML
CODE:
```xml
<PropertyValue Property="AxisScaling">
   <Record Type="UI.ChartAxisScalingType">
       <PropertyValue Property="AutoScaleBehavior">
           <Record Type="UI.ChartAxisAutoScaleBehaviorType">
               <PropertyValue Property="ZeroAlwaysVisible" Bool="true"/>
           </Record>
       </PropertyValue>
   </Record>
 </PropertyValue>
```

STEP: 7 — Axis scaling: ZeroAlwaysVisible (CAP CDS)
DESCRIPTION: CAP CDS equivalent to enable ZeroAlwaysVisible auto-scaling behavior.
LANGUAGE: CAP CDS
CODE:
```
AxisScaling : {
     $Type : 'UI.ChartAxisScalingType',
     AutoScaleBehavior: {
        $Type: 'UI.ChartAxisAutoScaleBehaviorType',
        ZeroAlwaysVisible: true
        }
  }
```

STEP: 8 — Axis scaling: DataScope (XML)
DESCRIPTION: Use DataScope auto-scale behavior to calculate min/max from the entire dataset (automatic scaling).
LANGUAGE: XML
CODE:
```xml
<PropertyValue Property="AxisScaling">
   <Record Type="UI.ChartAxisScalingType">
       <PropertyValue Property="AutoScaleBehavior">
           <Record Type="UI.ChartAxisAutoScaleBehaviorType">
               <PropertyValue Property="DataScope" EnumMember="DataSet"/>
           </Record>
       </PropertyValue>
   </Record>
 </PropertyValue>>
```

STEP: 9 — Axis scaling: DataScope (CAP CDS)
DESCRIPTION: CAP CDS equivalent for DataScope auto-scaling behavior.
LANGUAGE: CAP CDS
CODE:
```
 AxisScaling : {
     $Type : 'UI.ChartAxisScalingType',
     AutoScaleBehavior: {
        $Type: 'UI.ChartAxisAutoScaleBehaviorType',
        DataScope: 'DataSet'
        }
  }
```

STEP: 10 — Axis scaling: FixedScale (XML)
DESCRIPTION: Use FixedScale to apply fixed min/max ranges. FixedScale uses DataPoint MinimumValue and MaximumValue by default unless overridden.
LANGUAGE: XML
CODE:
```xml
<PropertyValue Property="AxisScaling">
   <Record Type="UI.ChartAxisScalingType">
       <PropertyValue Property="ScaleBehavior" EnumMember="UI.ChartAxisScaleBehaviorType/FixedScale"/>
   </Record>
 </PropertyValue>
```

STEP: 11 — Axis scaling: FixedScale (CAP CDS)
DESCRIPTION: CAP CDS equivalent to set ScaleBehavior to FixedScale.
LANGUAGE: CAP CDS
CODE:
```
AxisScaling : {
     $Type : 'UI.ChartAxisScalingType',
     ScaleBehavior: #FixedScale
  }
```

STEP: 12 — Define DataPoint minimum and maximum (XML)
DESCRIPTION: For FixedScale, define UI.DataPoint MinimumValue and MaximumValue (and ValueFormat) in an annotation qualifier referenced by dataPointAnnotationPath.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.DataPoint" Qualifier="DataPoint_Qualifier">
  <Record Type="UI.DataPointType">
    <PropertyValue Property="MinimumValue" Decimal="1" />
    <PropertyValue Property="MaximumValue" Decimal="5" />
    <PropertyValue Property="ValueFormat">
      <Record>
        .......
      </Record>
    </PropertyValue>
  </Record>
</Annotation>
```

STEP: 13 — Define DataPoint minimum and maximum (ABAP CDS)
DESCRIPTION: ABAP CDS syntax to set data point min/max and number format. Reference this property in your annotations.
LANGUAGE: ABAP CDS
CODE:
```
@UI.dataPoint: {
    minimumValue: 1,
    maximumValue: 2,
	valueFormat: { }
}
property_name;
```

STEP: 14 — Define DataPoint minimum and maximum (CAP CDS)
DESCRIPTION: CAP CDS variant for UI.DataPoint with MinimumValue and MaximumValue. Use qualifier name referenced by card configuration.
LANGUAGE: CAP CDS
CODE:
```
UI.DataPoint #DataPointQualifier : {
    $Type : 'UI.DataPointType',
    MinimumValue : 1,
    MaximumValue : 5,
    NumberFormat : { }
},
```

STEP: 15 — Manifest configuration sample (manifest.json)
DESCRIPTION: Example manifest.json snippet showing dataSources and sap.ovp.cards settings for analytical cards. Use template "sap.ovp.cards.charts.analytical" for OData V2; for OData V4 use "sap.ovp.cards.v4.charts.analytical".
LANGUAGE: JSON
CODE:
```
{
  "sap.app": {
    "_version": "1.1.0",
    "id": "sap.ovp.demo",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "1.2.2"
    },
    "title": "{{app_title}}",
    "description": "{{app_description}}",
    "dataSources": {
      "salesShare": {
        "uri": "https://abc.com/SalesShare.xsodata",
        "type": "OData",
        "settings": {
          "odataVersion": "2.0",
          "annotations": [
            "salesShareAnno"
          ]
        }
      },
      "salesShareAnno": {
        "uri": "data/salesshare/annotations.xml",
        "type": "ODataAnnotation",
        "settings": {}
      }
    }
  },
  "sap.ovp": {
    "globalFilterModel": "salesShare",
    "globalFilterEntityType": "GlobalFilters", //Deprecated since SAPUI5 1.54.
    "globalFilterEntitySet": "GlobalFilters",  //Available from SAPUI5 1.54.
    "cards": {
      "cardBubble": {
        "model": "salesShare",
        "template": "sap.ovp.cards.charts.analytical",
        "settings": {
          "entitySet": "SalesShare",
          "selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#Eval_by_CtryCurr",
          "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#Eval_by_CtryCurr",
          "presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#Eval_by_CtryCurr",
          "dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#Eval_by_CtryCurr",
          "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#Eval_by_CtryCurr"
        }
      },
      "cardchartsline": {
        "model": "salesShare",
        "template": "sap.ovp.cards.charts.analytical",
        "settings": {
          "entitySet": "SalesShare",
          "selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#Eval_by_Country",
          "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#Eval_by_Country",
          "presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#Eval_by_Country",
          "dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#Eval_by_Country",
          "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#Eval_by_Country"
        }
      },
      "cardchartsdonut": {
        "model": "salesShare",
        "template": "sap.ovp.cards.charts.analytical",
        "settings": {
          "entitySet": "SalesShare",
          "selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#Eval_by_Currency",
          "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#Eval_by_Currency",
          "presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#Eval_by_Currency",
          "dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#Eval_by_Currency",
          "identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification#Eval_by_Currency"
        }
      }
    }
  }
}
```

STEP: 16 — Chart title behavior and axis descriptions
DESCRIPTION: If you configure a chart title, axis descriptions (x- and y-axis) are not displayed in the card (exception: bubble charts). Keep chart titles concise because they replace axis labels in the card UI.
LANGUAGE: text
CODE:
```
Example: Chart title "Net Sales by Days Payable" -- the card will not display separate x/y axis descriptions (y-axis inferred as Net Sales, x-axis as Days Payable). Bubble charts still show axis descriptions.
```

STEP: 17 — Further reference
DESCRIPTION: For additional chart configuration options (chart types, feeds, formatters) refer to the Configuring Charts guide.
LANGUAGE: text
CODE:
```
See: Configuring Charts (configuring-charts-c7c5a82.md)
```


**TITLE**: Analytical List Page (ALP) — Configuration Reference for Code Generation

**INTRODUCTION**: This guide provides actionable, code-focused steps to configure an SAP Fiori Elements Analytical List Page (ALP). Use it to set up the manifest entry, define required OData annotations (chart and table), enable visual filters and KPI tags, and extend/navigation points. Links point to the original reference files for deeper details.

**TAGS**: fiori-elements, analytical-list-page, ALP, manifest.json, annotations, UI.Chart, UI.LineItem, visual-filter, KPI, ODataV4

**STEP**: 1 — Configure the ALP in manifest.json

**DESCRIPTION**: Add a page entry in manifest.json to use the Analytical List Page template. Provide the component name, the entitySet for the main content, and the annotationPath (annotations file/namespace). This minimal skeleton is suitable for code generation tools to fill with actual entity and annotation names.

**LANGUAGE**: JSON

**CODE**:
```json
{
  "sap.ui5": {
    "models": {
      "": {
        "dataSource": "mainService",
        "settings": {
          "synchronizationMode": "None"
        }
      }
    }
  },
  "sap.ui.generic.app": {
    "pages": [
      {
        "component": {
          "name": "sap.suite.ui.generic.template.AnalyticalListPage",
          "list": true,
          "settings": {
            "entitySet": "YourMainEntitySet",            // <-- replace with your entity set
            "annotationPath": "YourService.YourAnnotations" // <-- replace with your annotation path
          }
        }
      }
    ]
  }
}
```

**STEP**: 2 — Provide UI.Chart and UI.LineItem annotations (annotations/Annotations.xml)

**DESCRIPTION**: ALP requires chart and table annotations on the main entity type. Define UI.Chart for the chart area and UI.LineItem for the table area. Place these annotations in your annotation XML (or CDS/JSON annotations) file referenced by annotationPath in manifest.json. Use the placeholder fields to map measures, dimensions, and line items.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="YourService.YourEntityType">
  <!-- Line item annotation: defines table columns -->
  <Annotation Term="UI.LineItem">
    <Collection>
      <Record Type="UI.DataField">
        <PropertyValue Property="Value" Path="Property1"/>
      </Record>
      <Record Type="UI.DataField">
        <PropertyValue Property="Value" Path="Property2"/>
      </Record>
      <!-- Add additional DataField records for the table columns -->
    </Collection>
  </Annotation>

  <!-- Chart annotation: defines the chart visualization used in ALP -->
  <Annotation Term="UI.Chart" Qualifier="MainChart">
    <Record>
      <PropertyValue Property="Title" String="Sales Chart"/>
      <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>
      <PropertyValue Property="MeasureAttributes">
        <Collection>
          <Record>
            <PropertyValue Property="PropertyPath" Path="SalesAmount"/>
            <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRole/Axis1"/>
          </Record>
        </Collection>
      </PropertyValue>
      <PropertyValue Property="Dimensions">
        <Collection>
          <Record>
            <PropertyValue Property="PropertyPath" Path="SalesRegion"/>
          </Record>
        </Collection>
      </PropertyValue>
    </Record>
  </Annotation>
</Annotations>
```

**STEP**: 3 — Configure the Visual Filter Bar (UI.Facets / Visual Filters)

**DESCRIPTION**: Define visual filters using UI.Facets or Facet annotations in your annotations file. Visual filters are connected to facets/annotations and allow end users to pick values via charts/tiles. For OData V4, visual filters have restrictions — verify compatibility with your service. Reference the Visual Filter Bar configuration for advanced options.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="YourService.YourEntityType">
  <!-- Example: Facet collection for visual filters -->
  <Annotation Term="UI.Facets">
    <Collection>
      <Record Type="UI.CollectionFacet">
        <PropertyValue Property="Label" String="Visual Filters"/>
        <PropertyValue Property="Facets">
          <Collection>
            <!-- Each ReferenceFacet can point to a Chart annotation (visual filter) -->
            <Record Type="UI.ReferenceFacet">
              <PropertyValue Property="Label" String="Sales by Region"/>
              <PropertyValue Property="Target">
                <Record Type="UI.DataFieldForAnnotation">
                  <PropertyValue Property="AnnotationPath" String="@UI.Chart#MainChart"/>
                </Record>
              </PropertyValue>
            </Record>
            <!-- Add additional facets for other visual filters -->
          </Collection>
        </PropertyValue>
      </Record>
    </Collection>
  </Annotation>
</Annotations>
```

**STEP**: 4 — Configure Title Area and KPI Tags

**DESCRIPTION**: Add KPI tags and header content via header/title annotations. KPI tags enable progressive disclosure and KPI cards (KPI navigation). Configure header annotations (Title Area) in the annotation file and wire any KPI cards to navigation targets (apps or pages). Consult the Title Area configuration for exact annotation terms and properties.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="YourService.YourEntityType">
  <!-- Header info / title area (skeleton) -->
  <Annotation Term="UI.HeaderInfo">
    <Record>
      <PropertyValue Property="TypeName" String="Sales Overview"/>
      <PropertyValue Property="Title" Path="SalesOrderID"/>
      <!-- Add more header properties as required -->
    </Record>
  </Annotation>

  <!-- Example KPI tag as a simple DataField (replace with proper KPI annotation if used) -->
  <Annotation Term="com.sap.vocabularies.UI.v1.KPI">
    <!-- KPI definition goes here. Use KPI annotations per implementation guide. -->
  </Annotation>
</Annotations>
```

**STEP**: 5 — Enable Navigation from Content and KPI Cards

**DESCRIPTION**: Define navigations using NavigationPropertyPath within annotation DataField or via manifest routing to link table rows or KPI cards to target apps/pages. Use NavigationProperty on entity associations or use semanticObject/action intent-based navigation in the manifest or annotation extensions.

**LANGUAGE**: JSON

**CODE**:
```json
{
  "sap.app": { /* app descriptor entries */ },
  "sap.ui5": {
    "routing": {
      "routes": [
        {
          "name": "detail",
          "pattern": "detail/{key}",
          "target": "detail"
        }
      ],
      "targets": {
        "detail": {
          "viewName": "Detail",
          "viewLevel": 2
        }
      }
    }
  }
}
```

**STEP**: 6 — Customize and Share Page Variants (Personalization)

**DESCRIPTION**: ALP supports variant management (save/restore of filters, layouts). Use built-in variant management and configure page variants in manifest settings or via annotations and extensions. Implement extension points for advanced personalization where needed.

**LANGUAGE**: JSON

**CODE**:
```json
{
  "sap.ui.generic.app": {
    "pages": [
      {
        "component": {
          "settings": {
            "enableListReportsV2": false,
            "flexibleColumnLayout": false,
            "saveAsTile": true,
            "pageVariant": { "enabled": true }
          }
        }
      }
    ]
  }
}
```

**STEP**: 7 — OData V4 Restrictions for Visual Filters

**DESCRIPTION**: If using SAP Fiori Elements with OData V4, visual filters are supported but with restrictions. Verify that your service supports the required annotation patterns and features. Consult "Restrictions for SAP Fiori Elements for OData V4" before implementing advanced visual filter scenarios.

**LANGUAGE**: TEXT

**CODE**:
```text
Note: Visual filters are supported with restrictions in SAP Fiori Elements for OData V4.
Refer to "Restrictions for SAP Fiori Elements for OData V4" and test the visual filter behavior against your OData V4 service.
```

Related files and references:
- Configuring the Manifest for the Analytical List Page: configuring-the-manifest-for-the-analytical-list-page-2a9df06.md (manifest.json application configuration)
- Configuring the Title Area: configuring-the-title-area-ebdb5da.md (dynamic title area and KPI tags)
- Configuring the Visual Filter Bar: configuring-the-visual-filter-bar-33f3d80.md (visual filter bar usage and options)
- Configuring the Content Area: configuring-the-content-area-fc7d73c.md (UI.Chart and UI.LineItem usage)
- Configuring Analytical List Page App Extensions: configuring-analytical-list-page-app-extensions-9504fb4.md (advanced extensions)

Image reference (for UI layout preview): images/ALP_Screenshot_182e040.png


**TITLE**: Overview Page Annotations Reference (XML / ABAP CDS / CAP CDS)

**INTRODUCTION**: Concise, code-focused reference of annotations used in Fiori Elements Overview Pages. For each annotation term, find an action-oriented description and exact sample code in XML, ABAP CDS, and CAP CDS where available. Use these snippets directly to implement UI annotations for Overview Page cards, KPIs, lists, facets, charts, and sensitivity tagging.

**TAGS**: fiori-elements-framework, annotations, overview-page, UI, CDS, CAP, XML, ABAP, KPI, Chart

**STEP**: HeaderInfo (com.sap.vocabularies.UI.v1.HeaderInfo)

**DESCRIPTION**: Configure card header metadata: type names, title, description and image URL. When referencing manifest.json, dynamicSubtitleAnnotationPath is derived from the path property. Use the following XML / ABAP CDS / CAP CDS snippets to annotate entity types or views.

**LANGUAGE**: XML
```xml
<Annotation
	    Term="com.sap.vocabularies.UI.v1.HeaderInfo"
    	Qualifier="dynamicSubtitle">
		<Record>
        	<PropertyValue Property="TypeName" String="Product"/>
        	<PropertyValue Property="TypeNamePlural" String="Products"/>
        	<PropertyValue Property="Title">
            	<Record Type="com.sap.vocabularies.UI.v1.DataField">
                	<PropertyValue Property="Value" Path="Name"></PropertyValue>
            	</Record>
        	</PropertyValue>
        	<PropertyValue Property="Description">
            	<Record Type="com.sap.vocabularies.UI.v1.DataField">
                	<PropertyValue Path="Description" Property="Value"/>
            	 </Record>
        	</PropertyValue>
        	<PropertyValue Property="ImageUrl" Path="ProductPicUrl"/>
    	</Record>
	</Annotation>
```

**LANGUAGE**: ABAP CDS
```abap
@UI.headerInfo: {
  typeName: 'Product',
  typeNamePlural: 'Products',
  title: {
    value: 'NAME',
    type: #STANDARD
  },
  description: {
    value: 'DESCRIPTION',
    type: #STANDARD
  },
  imageUrl: 'PRODUCTPICURL'
}
annotate view VIEWNAME with {

}
```

**LANGUAGE**: CAP CDS
```yaml
UI.HeaderInfo #dynamicSubtitle : {
    TypeName : 'Product',
    TypeNamePlural : 'Products',
    Title : {
        $Type : 'UI.DataField',
        Value : Name
    },
    Description : {
        $Type : 'UI.DataField',
        Value : Description
    },
    ImageUrl : ProductPicUrl
}
```

**STEP**: DataField (com.sap.vocabularies.UI.v1.DataField)

**DESCRIPTION**: Display simple text fields. Set Label and Value (typically a metadata path). Use the samples to define line items, fieldgroup data entries, or identification fields.

**LANGUAGE**: XML
```xml
<Record Type="com.sap.vocabularies.UI.v1.DataField">
    <PropertyValue Property="Label" String="Total Sum"/>
    <PropertyValue Property="Value" Path="TotalSum"/>
</Record>
```

**LANGUAGE**: ABAP CDS
```abap
{ label: 'Total Sum' }
  TOTALSUM;
```

**LANGUAGE**: CAP CDS
```yaml
{
    $Type : 'UI.DataField',
    Label : 'Total Sum',
    Value : TotalSum
}
```

**STEP**: DataFieldForAnnotation (com.sap.vocabularies.UI.v1.DataFieldForAnnotation)

**DESCRIPTION**: Reference another annotation by Target (AnnotationPath). Use to render data points or other annotated terms inside line items or lists.

**LANGUAGE**: XML
```xml
<Record Type="com.sap.vocabularies.UI.v1.DataFieldForAnnotation" Qualifier="WeightMeasure">
    <PropertyValue Property="Label" String="Weight Measure"/>
    <PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.DataPoint#WeightMeasure"/>
</Record>
```

**LANGUAGE**: ABAP CDS
```abap
  {
    label: 'Weight Measure',
    valueQualifier: 'WeightMeasure',
    type: #AS_DATAPOINT
  }
  Weight;
```

**LANGUAGE**: CAP CDS
```yaml
{
    $Type : 'UI.DataFieldForAnnotation',
    Label : 'Weight Measure',
    Target : '@UI.DataPoint#WeightMeasure'
}
```

**STEP**: DataFieldForAction (com.sap.vocabularies.UI.v1.DataFieldForAction)

**DESCRIPTION**: Add action buttons pointing to OData FunctionImport actions. Use Action property with fully-qualified action name and set Label and Importance as needed.

**LANGUAGE**: XML
```xml
<Record Type="com.sap.vocabularies.UI.v1.DataFieldForAction">
    <Annotation Term="com.sap.vocabularies.UI.v1.Importance" EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/Medium" />
    <PropertyValue Property="Label" String="Confirm" />
    <PropertyValue Property="Action" String="GWSAMPLE_BASIC.GWSAMPLE_BASIC_Entities/SalesOrder_Confirm" />
</Record>
```

**LANGUAGE**: ABAP CDS
```abap
  {
    importance: #MEDIUM,
    label: 'Confirm',
    dataAction: 'GWSAMPLE_BASIC.GWSAMPLE_BASIC_Entities/SalesOrder_Confirm',
    type: #FOR_ACTION
  }
```

**LANGUAGE**: CAP CDS
```yaml
{
    $Type : 'UI.DataFieldForAction',
    Label : 'Confirm',
    Action : 'GWSAMPLE_BASIC.GWSAMPLE_BASIC_Entities/SalesOrder_Confirm',
    ![@UI.Importance] : #Medium
}
```

**STEP**: DataFieldForIntentBasedNavigation (com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation)

**DESCRIPTION**: Declare intent navigation (semantic object + action) for cards. Include Label and set Importance if required. Use for quick view footer and card navigation actions.

**LANGUAGE**: XML
```xml
<Record Type="com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation">
    <PropertyValue Property="SemanticObject" String="SemanticObject1"/>
    <PropertyValue Property="Action" String="Action1"/>
     can also contain an intent based navigation with
     route (static or dynamic with arguments).<PropertyValue Property="Label" String="App1"/>
    <Annotation Term="com.sap.vocabularies.UI.v1.Importance" EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/Medium"/>
</Record><Record Type="com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation"
```

**LANGUAGE**: ABAP CDS
```abap
@Consumption.semanticObject: 'SemanticObject1'
annotate view VIEWNAME with {

 @UI.lineItem: [
 {
    importance: #MEDIUM,
    semanticObjectAction: 'Action1',
    label: 'App1',
    type: #FOR_INTENT_BASED_NAVIGATION
  },
  {
    type: #FOR_INTENT_BASED_NAVIGATION
  }
 ]
 property_name;

}
```

**LANGUAGE**: CAP CDS
```yaml
{
    $Type : 'UI.DataFieldForIntentBasedNavigation',
    SemanticObject : 'SemanticObject1',
    Action : 'Action1',
    Label : 'App1',
    ![@UI.Importance] : #Medium
}
```

**STEP**: DataFieldWithUrl (com.sap.vocabularies.UI.v1.DataFieldWithUrl)

**DESCRIPTION**: Configure external or intent-based URLs for navigation. Use Url with odata.fillUriTemplate and odata.uriEncode for dynamic URL templates. Set Value and Label for display.

**LANGUAGE**: XML
```xml
<Record Type="com.sap.vocabularies.UI.v1.DataFieldWithUrl">
    <PropertyValue Property="Label" String="Link to"/>
    <PropertyValue Property="Value" String="Google Maps"/>
    <PropertyValue Property="Url">
        <Apply Function="odata.fillUriTemplate">
            <String>https://www.google.de/maps/place/{street},{city}</String>
            <LabeledElement Name="street">
                <Apply Function="odata.uriEncode">
                    <Path>Address/Street</Path>
                </Apply>
            </LabeledElement>
            <LabeledElement Name="city">
                <Apply Function="odata.uriEncode">
                    <Path>Address/City</Path>
                </Apply>
            </LabeledElement>
        </Apply>
    </PropertyValue>
</Record>
```

**LANGUAGE**: ABAP CDS
```abap
  {
    label: 'Link to',
    type: #WITH_URL
  }
```

**LANGUAGE**: CAP CDS
```yaml
{
  $Type : 'UI.DataFieldWithUrl',
  Value : 'Google Maps',
  Label : 'Link to',
  Url   : {
             $edmJson : {
              $Apply: [
                'https://www.google.de/maps/place/{street},{city}',
                {
                  $LabeledElement : {
                      $Apply    : [{$Path : 'Address/Street'}],
                      $Function : 'odata.uriEncode'
                   },
                   $Name           : 'street'
                },
                {
                  $LabeledElement : {
                     $Apply    : [{$Path : 'Address/City'}],
                     $Function : 'odata.uriEncode'
                  },
                  $Name           : 'city'
                },
            ],
            $Function : 'odata.fillUriTemplate'
           }
         }
}
```

**STEP**: DataPoint (com.sap.vocabularies.UI.v1.DataPoint)

**DESCRIPTION**: Render formatted numeric or trend-aware KPI values. Set Title, Value, Number/ValueFormat, Criticality, CriticalityCalculation, TargetValue and TrendCalculation. Use number and criticality properties to control colors and formatting.

**LANGUAGE**: XML
```xml
<Annotation Term="UI.DataPoint" Qualifier="Eval_by_Country">
	<Record Type="UI.DataPointType">
		<PropertyValue Property="Title" String="Sales India - Line Card" />
		<PropertyValue Property="Value" Path="Sales" />
		<PropertyValue Property="NumberValueFormat">
			<Record>
				<PropertyValue Property="ScaleFactor" IntDecimal="0" />
				<PropertyValue Property="NumberOfFractionalDigits"
					Int="3" />
			</Record>
		</PropertyValue>
		<PropertyValue Property="CriticalityCalculation">
			<Record>
				<PropertyValue Property="ImprovementDirection"
					EnumMember="UI.ImprovementDirectionType/Minimizinge" />
				<PropertyValue Property="DeviationRangeHighValue"
					String="7300" />
				<PropertyValue Property="ToleranceRangeHighValue"
					String="7200" />
			</Record>
		</PropertyValue>
		<PropertyValue Property="TargetValue" String="2.000 " />
		<PropertyValue Property="TrendCalculation">
			<Record>
				<PropertyValue Property="ReferenceValue" String="5201680" />
				<PropertyValue Property="DownDifference" IntDecimal="10000000.0" />
			</Record>
		</PropertyValue>
	</Record>
</Annotation>
```

**LANGUAGE**: ABAP CDS
```abap
@UI.dataPoint: {
	 title: 'Sales India - Line Card',
	 valueFormat: { scaleFactor: 0,
	 numberOfFractionalDigits: 3 },
	 criticalityCalculation: {
	   improvementDirection: #MINIMIZE,
	   deviationRangeHighValue: 7300,
	   toleranceRangeHighValue: 7200
	 },
	 targetValue: 2.000,
	 trendCalculation: {
	 referenceValue: 'refValElement',
	 downDifference: 10000000.0 }
}
Sales;
```

**LANGUAGE**: CAP CDS
```yaml
UI.DataPoint #Eval_by_Country : {
    $Type : 'UI.DataPointType',
    Title : 'Sales India - Line Card',
    Value : Sales,
    NumberFormat : {
        ScaleFactor : 0,
        NumberOfFractionalDigits : 3
    },
    CriticalityCalculation : {
        ImprovementDirection : #Minimizing,
        DeviationRangeHighValue : '7300',
        ToleranceRangeHighValue : '7200'
    },
    TargetValue : '2.000 ',
    TrendCalculation : {
        ReferenceValue : '5201680',
        DownDifference : 10000000.0
    }
}
```

**STEP**: Identification (com.sap.vocabularies.UI.v1.Identification)

**DESCRIPTION**: Container for card actions (intent navigation, actions, URL links) and simple identification fields. Add collections of DataFieldForIntentBasedNavigation, DataField, or DataFieldWithUrl.

**LANGUAGE**: XML
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.Identification">
    <Collection>
        <Record Type="com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation">
            <PropertyValue Property="SemanticObject" String="Action"/>
            <PropertyValue Property="Action" String="toappnavsample"/>
            <PropertyValue Property="Label" String="SO Navigation (M)"/>
            <Annotation Term="com.sap.vocabularies.UI.v1.Importance" EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/Medium"/>
        </Record>
        <Record Type="com.sap.vocabularies.UI.v1.DataField">
            <PropertyValue Property="Label" String="Sales Order ID"/>
            <PropertyValue Property="Value" Path="SalesOrderID"/>
        </Record>
    </Collection>
</Annotation>
```

**LANGUAGE**: ABAP CDS
```abap
@UI.identification: [
  {
    importance: #MEDIUM,
    semanticObjectAction: 'toappnavsample',
    label: 'SO Navigation (M)',
    type: #FOR_INTENT_BASED_NAVIGATION,
    position: 10
  }
]
PROPERT_NAME;

@UI.identification: [
  {
    label: 'Sales Order ID',
    position: 20
  }
]
SALESORDERID;

@Consumption.semanticObject: 'Action'
annotate view VIEWNAME with {

}
```

**LANGUAGE**: CAP CDS
```yaml
UI.Identification : [
    {
        $Type : 'UI.DataFieldForIntentBasedNavigation',
        SemanticObject : 'Action',
        Action : 'toappnavsample',
        Label : 'SO Navigation (M)',
        ![@UI.Importance] : #Medium
    },
    {
        $Type : 'UI.DataField',
        Label : 'Sales Order ID',
        Value : SalesOrderID
    }
]
```

**STEP**: LineItem (com.sap.vocabularies.UI.v1.LineItem)

**DESCRIPTION**: Define list/table columns or list card fields. Compose a collection of DataField, DataFieldForAnnotation, DataFieldForIntentBasedNavigation, and DataFieldWithUrl. Use qualifiers for datapoint references.

**LANGUAGE**: XML
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.LineItem">
    <Collection>
        <Record Type="com.sap.vocabularies.UI.v1.DataField">
            <PropertyValue Property="Label" String="Sales Order ID"/>
            <PropertyValue Property="Value" Path="SalesOrderID"/>
        </Record>
        <Record Type="com.sap.vocabularies.UI.v1.DataField">
            <PropertyValue Property="Label" String="Customer Name"/>
            <PropertyValue Property="Value" Path="CustomerName"/>
        </Record>
        <Record Type="com.sap.vocabularies.UI.v1.DataField">
            <PropertyValue Property="Label" String="Status"/>
            <PropertyValue Property="Value" Path="Status"/>
        </Record>
        <Record Type="com.sap.vocabularies.UI.v1.DataField">
            <PropertyValue Property="Label" String="Note"/>
            <PropertyValue Property="Value" Path="Note"/>
        </Record>
        <Record Type="com.sap.vocabularies.UI.v1.DataFieldForAnnotation" Qualifier="TotalSum">
            <PropertyValue Property="Label" String="Total Sum"/>
            <PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.DataPoint#TotalSum"/>
        </Record>
        <Record Type="com.sap.vocabularies.UI.v1.DataFieldForAnnotation" Qualifier="NetSum">
            <PropertyValue Property="Label" String="Net Sum"/>
            <PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.DataPoint#NetSum"/>
        </Record>
        <Record Type="com.sap.vocabularies.UI.v1.DataFieldForAnnotation" Qualifier="Tax">
            <PropertyValue Property="Label" String="Tax"/>
            <PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.DataPoint#Tax"/>
        </Record>
        <Record Type="com.sap.vocabularies.UI.v1.DataFieldForIntentBasedNavigation">
            <PropertyValue Property="SemanticObject" String="Action"/>
            <PropertyValue Property="Action" String="toappnavsample2"/>
            <PropertyValue Property="Label" String="SO Navigation (M)"/>
            <Annotation Term="com.sap.vocabularies.UI.v1.Importance" EnumMember="com.sap.vocabularies.UI.v1.ImportanceType/Medium"/>
        </Record>
    </Collection>
</Annotation>
```

**LANGUAGE**: ABAP CDS
```abap
@UI.lineItem: [
  {
    label: 'Sales Order ID',
    position: 10
  }
]
SALESORDERID;

@UI.lineItem: [
  {
    label: 'Customer Name',
    position: 20
  }
]
CUSTOMERNAME;

@UI.lineItem: [
  {
    label: 'Status',
    position: 30
  }
]
STATUS;

@UI.lineItem: [
  {
    label: 'Note',
    position: 40
  }
]
NOTE;

@UI.lineItem: [
  {
    label: 'Total Sum',
    valueQualifier: 'TotalSum',
    type: #AS_DATAPOINT,
    position: 50
  },
  {
    label: 'Net Sum',
    valueQualifier: 'NetSum',
    type: #AS_DATAPOINT,
    position: 60
  },
  {
    label: 'Tax',
    valueQualifier: 'Tax',
    type: #AS_DATAPOINT,
    position: 70
  },
  {
    importance: #MEDIUM,
    semanticObjectAction: 'toappnavsample2',
    label: 'SO Navigation (M)',
    type: #FOR_INTENT_BASED_NAVIGATION,
    position: 80
  }
]
PROPERT_NAME;

@Consumption.semanticObject: 'Action'
annotate view VIEWNAME with { }
```

**LANGUAGE**: CAP CDS
```yaml
UI.LineItem : [
    {
        $Type : 'UI.DataField',
        Label : 'Sales Order ID',
        Value : SalesOrderID
    },
    {
        $Type : 'UI.DataField',
        Label : 'Customer Name',
        Value : CustomerName
    },
    {
        $Type : 'UI.DataField',
        Label : 'Status',
        Value : Status
    },
    {
        $Type : 'UI.DataField',
        Label : 'Note',
        Value : Note
    },
    {
        $Type : 'UI.DataFieldForAnnotation',
        Label : 'Total Sum',
        Target : '@UI.DataPoint#TotalSum'
    },
    {
        $Type : 'UI.DataFieldForAnnotation',
        Label : 'Net Sum',
        Target : '@UI.DataPoint#NetSum'
    },
    {
        $Type : 'UI.DataFieldForAnnotation',
        Label : 'Tax',
        Target : '@UI.DataPoint#Tax'
    },
    {
        $Type : 'UI.DataFieldForIntentBasedNavigation',
        SemanticObject : 'Action',
        Action : 'toappnavsample2',
        Label : 'SO Navigation (M)',
        ![@UI.Importance] : #Medium
    }
]
```

**STEP**: Facets (com.sap.vocabularies.UI.v1.Facets)

**DESCRIPTION**: Define the Overview Page facets collection. Overview Page supports ReferenceFacet only. Use ReferenceFacet to point to FieldGroup qualifiers and mark IsSummary where needed.

**LANGUAGE**: XML
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.Facets">
    <Collection>
        <Record Type="com.sap.vocabularies.UI.v1.ReferenceFacet">
            <Annotation Term="com.sap.vocabularies.UI.v1.IsSummary"/>
            <PropertyValue Property="Label" String="Amounts"/>
            <PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.FieldGroup#Amounts"/>
        </Record>
        <Record Type="com.sap.vocabularies.UI.v1.ReferenceFacet">
            <Annotation Term="com.sap.vocabularies.UI.v1.IsSummary"/>
            <PropertyValue Property="Label" String="Note1"/>
            <PropertyValue Property="Target" AnnotationPath="@com.sap.vocabularies.UI.v1.FieldGroup#Status"/>
        </Record>
    </Collection>
</Annotation>
```

**LANGUAGE**: ABAP CDS
```abap
@UI.Facet: [
  {
    isSummary: true,
    label: 'Amounts',
    targetQualifier: 'Amounts',
    type: #FIELDGROUP_REFERENCE,
    purpose: #STANDARD
  },
  {
    isSummary: true,
    label: 'Note1',
    targetQualifier: 'Status',
    type: #FIELDGROUP_REFERENCE,
    purpose: #STANDARD
  }
]
PROPERT_NAME;
```

**LANGUAGE**: CAP CDS
```yaml
UI.Facets : [
    {
        $Type : 'UI.ReferenceFacet',
        Label : 'Amounts',
        Target : '@UI.FieldGroup#Amounts',
        ![@UI.IsSummary]
    },
    {
        $Type : 'UI.ReferenceFacet',
        Label : 'Note1',
        Target : '@UI.FieldGroup#Status',
        ![@UI.IsSummary]
    }
]
```

**STEP**: FieldGroup (com.sap.vocabularies.UI.v1.FieldGroup)

**DESCRIPTION**: Group related DataField entries under a label (FieldGroup). Use in ReferenceFacet target to render grouped content inside cards.

**LANGUAGE**: XML
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.FieldGroup" Qualifier="Amounts">
    <Record Type="com.sap.vocabularies.UI.v1.FieldGroupType">
        <PropertyValue Property="Label" String="Amounts"/>
        <PropertyValue Property="Data">
            <Collection>
                <Record Type="com.sap.vocabularies.UI.v1.DataField">
                    <PropertyValue Property="Label" String="Total Sum"/>
                    <PropertyValue Property="Value" Path="TotalSum"/>
                </Record>
                <Record Type="com.sap.vocabularies.UI.v1.DataField">
                    <PropertyValue Property="Label" String="Net Sum"/>
                    <PropertyValue Property="Value" Path="NetSum"/>
                </Record>
                <Record Type="com.sap.vocabularies.UI.v1.DataField">
                    <PropertyValue Property="Label" String="Tax"/>
                    <PropertyValue Property="Value" Path="Tax"/>
                </Record>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>
```

**LANGUAGE**: ABAP CDS
```abap
@UI.fieldGroup: [
  {
    label: 'Total Sum',
    position: 10,
    qualifier: 'Amounts',
    groupLabel: 'Amounts'
  }
]
TOTALSUM;

@UI.fieldGroup: [
  {
    label: 'Net Sum',
    position: 20,
    qualifier: 'Amounts'
  }
]
NETSUM;

@UI.fieldGroup: [
  {
    label: 'Tax',
    position: 30,
    qualifier: 'Amounts'
  }
]
TAX;
```

**LANGUAGE**: CAP CDS
```yaml
UI.FieldGroup #Amounts : {
    $Type : 'UI.FieldGroupType',
    Label : 'Amounts',
    Data : [
        {
            $Type : 'UI.DataField',
            Label : 'Total Sum',
            Value : TotalSum
        },
        {
            $Type : 'UI.DataField',
            Label : 'Net Sum',
            Value : NetSum
        },
        {
            $Type : 'UI.DataField',
            Label : 'Tax',
            Value : Tax
        }
    ]
}
```

**STEP**: SelectionVariant (com.sap.vocabularies.UI.v1.SelectionVariant)

**DESCRIPTION**: Define query filters and parameters (SelectOptions and Parameters) as reusable selection variants. Use with SelectionPresentationVariant or standalone. Provide ID/Text for external references.

**LANGUAGE**: XML
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.SelectionVariant">
   <Record>
      <PropertyValue Property="SelectOptions">
         <Collection>
            <Record>
               <PropertyValue Property="PropertyName" PropertyPath="TotalSum" />
               <PropertyValue Property="Ranges">
                  <Collection>
                     <Record>
                        <PropertyValue Property="Sign"
                           EnumMember="com.sap.vocabularies.UI.v1.SelectionRangeSignType/I" />
                        <PropertyValue Property="Option"
                           EnumMember="com.sap.vocabularies.UI.v1.SelectionRangeOptionType/BT" />
                        <PropertyValue Property="Low" String="0" />
                        <PropertyValue Property="High" String="8000" />
                     </Record>
                  </Collection>
               </PropertyValue>
            </Record>
         </Collection>
      </PropertyValue>
   </Record>
</Annotation>
```

**LANGUAGE**: CAP CDS
```yaml
UI.SelectionVariant : {
    SelectOptions : [
        {
            PropertyName : TotalSum,
            Ranges : [
                {
                    Sign : #I,
                    Option : #BT,
                    Low : '0',
                    High : '8000'
                }
            ]
        }
    ]
}
```

**STEP**: PresentationVariant (com.sap.vocabularies.UI.v1.PresentationVariant)

**DESCRIPTION**: Control display (GroupBy, SortOrder, RequestAtLeast, Visualizations, MaxItems). Use with SelectionPresentationVariant to combine selection + presentation. Avoid adding too many requestAtLeast fields in aggregated services.

**LANGUAGE**: XML
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.PresentationVariant">
   <Record>
      <PropertyValue Property="GroupBy">
         <Collection>
            <PropertyPath>Status</PropertyPath>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="SortOrder">
         <Collection>
            <Record>
               <PropertyValue Property="Property" PropertyPath="TotalSum" />
               <PropertyValue Property="Descending" Bool="true" />
            </Record>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="RequestAtLeast">
          <Collection>
             <Record>
                <PropertyPath>CustomerID</PropertyPath>
             </Record>
          </Collection>
       </PropertyValue>
   </Record>
</Annotation>
```

**LANGUAGE**: ABAP CDS
```abap
@UI.PresentationVariant: [
  {
    groupBy: [
      'STATUS'
    ],
    sortOrder: [
      {
        by: 'TOTALSUM',
        direction: #DESC
      }
    ],
 	requestAtLeast: ['CustomerID'],

  }
]
annotate view VIEWNAME with {

}
```

**LANGUAGE**: CAP CDS
```yaml
UI.PresentationVariant : {
    GroupBy : [
        Status
    ],
    SortOrder : [
        {
            Property : TotalSum,
            Descending : true
        },
    ],
    RequestAtLeast : [
        {
            CustomerID
        }
    ]
}
```

**STEP**: SelectionPresentationVariant (com.sap.vocabularies.UI.v1.SelectionPresentationVariant)

**DESCRIPTION**: Combine SelectionVariant and PresentationVariant by referencing their annotation paths. Use qualifiers to reference existing SelectionVariant and PresentationVariant definitions.

**LANGUAGE**: XML
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.SelectionPresentationVariant" Qualifier="BothSelectionAndPresentation">
    <Record>
        <PropertyValue Property="SelectionVariant" Path="@UI.SelectionVariant#SP2"/>
        <PropertyValue Property="PresentationVariant" Path="@UI.PresentationVariant#customer"/>
    </Record>
</Annotation>
```

**LANGUAGE**: ABAP CDS
```abap
@UI.SelectionPresentationVariant: [
  {
    selectionvariantqualifier: 'SP2',
    presentationvariantqualifier: 'customer',
    qualifier: 'BothSelectionAndPresentation'
  }
]
annotate view VIEWNAME with {

}
```

**LANGUAGE**: CAP CDS
```yaml
UI.SelectionPresentationVariant #BothSelectionAndPresentation : {
    SelectionVariant : ![@UI.SelectionVariant#SP2],
    PresentationVariant : ![@UI.PresentationVariant#customer]
},
```

**STEP**: Chart (com.sap.vocabularies.UI.v1.Chart)

**DESCRIPTION**: Define chart visualizations: Title, ChartType, Dimensions, Measures, and their attribute collections. Ensure measures and dimensions in attribute collections also appear in Measures / Dimensions lists.

**LANGUAGE**: XML
```xml
<Annotation Term="com.sap.vocabularies.UI.v1.Chart">
   <Record Type="com.sap.vocabularies.UI.v1.ChartDefinitionType">
      <PropertyValue Property="Title" String="View1" />
      <PropertyValue Property="MeasureAttributes">
         <Collection>
            <Record Type="com.sap.vocabularies.UI.v1.ChartMeasureAttributeType">
               <PropertyValue Property="Measure" PropertyPath="TotalSum" />
               <PropertyValue Property="Role" EnumMember="com.sap.vocabularies.UI.v1.ChartMeasureRoleType/Axis1" />
            </Record>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="DimensionAttributes">
         <Collection>
            <Record Type="com.sap.vocabularies.UI.v1.ChartDimensionAttributeType">
               <PropertyValue Property="Dimension" PropertyPath="Status" />
               <PropertyValue Property="Role" EnumMember="com.sap.vocabularies.UI.v1.ChartDimensionRoleType/Series" />
            </Record>
         </Collection>
      </PropertyValue>
   </Record>
</Annotation>
```

**LANGUAGE**: ABAP CDS
```abap
@UI.Chart: [
  {
    title: 'View1',
    measureAttributes: [
      {
        measure: 'TotalSum',
        role: #AXIS_1
      }
    ],
    dimensionAttributes: [
      {
        dimension: 'Status',
        role: #SERIES
      }
    ]
  }
]
annotate view VIEWNAME with { }
```

**LANGUAGE**: CAP CDS
```yaml
UI.Chart : {
    $Type : 'UI.ChartDefinitionType',
    Title : 'View1',
    MeasureAttributes : [
        {
            $Type : 'UI.ChartMeasureAttributeType',
            Measure : TotalSum,
            Role : #Axis1
        },
    ],
    DimensionAttributes : [
        {
            $Type : 'UI.ChartDimensionAttributeType',
            Dimension : Status,
            Role : #Series
        }
    ]
}
```

**STEP**: KPI (UI.KPI)

**DESCRIPTION**: Create KPI tags for Overview Page cards. KPI combines SelectionVariant, PresentationVariant, and DataPoint with navigation properties (SemanticObject, Action). Use Detail block to reference presentation variants and set SelectionVariantQualifier and DataPoint path.

**LANGUAGE**: XML
```xml
<Annotation Term="UI.KPI" Qualifier="Eval_by_Country_-Generic">
    <Record>
        <PropertyValue Property="DataPoint" Path="@UI.DataPoint#Eval_by_Country_-Generic" />
        <PropertyValue Property="Detail">
            <Record Type="UI.KPIDetailType">
                <PropertyValue Property="DefaultPresentationVariant" Path="@UI.PresentationVariant#Eval_by_Currency1" />
                <PropertyValue Property="AlternativePresentationVariants">
                    <Collection>
                        <Path>@UI.PresentationVariant#Eval_by_Currency_Column</Path>
                    </Collection>
                </PropertyValue>
                <PropertyValue String="Action" Property="SemanticObject" />
                <PropertyValue String="toappnavsample" Property="Action" />
            </Record>
        </PropertyValue>
        <PropertyValue String="String for KPI Annotation" Property="ID" />
        <PropertyValue Property="SelectionVariantQualifier" Path="@UI.SelectionVariant#Eval_by_Currency_1" />
    </Record>
</Annotation>
<Annotation Term="UI.DataPoint" Qualifier="Eval_by_Country_-Generic">
    <Record>
        <PropertyValue Property="Value" Path="Currency" />
        <PropertyValue String="test" Property="Title" />
    </Record>
</Annotation>
```

**LANGUAGE**: ABAP CDS
```abap
@UI.KPI: [
  {
    detail: {
      defaultPresentationVariantQualifier: 'Eval_by_Currency1',
      alternativePresentationVariantQualifiers: [
        'Eval_by_Currency_Column'
      ],
      semanticObject: 'Action',
      semanticObjectAction: 'toappnavsample'
    },
    selectionVariantQualifier: 'Eval_by_Currency_1',
    id: 'String for KPI Annotation',
    qualifier: 'Eval_by_Country-Generic',
    dataPoint.title: 'test'
  }
]
Eval_by_Country-Generic;
```

**LANGUAGE**: CAP CDS
```yaml
UI.KPI #AllActualCosts : {
    $Type : 'UI.KPIType',
    Detail : {
        $Type : 'UI.KPIDetailType',
        DefaultPresentationVariant : ![@UI.PresentationVariant#Eval_by_Currency1],
        AlternativePresentationVariants : [
            ![@UI.PresentationVariant#Eval_by_Currency_Column],
        ],
        SemanticObject : 'Action',
        Action : 'toappnavsample',
    },
    SelectionVariant : ![@UI.SelectionVariant#Eval_by_Currency_1],
    DataPoint : ![@UI.DataPoint#Eval_by_Country-Generic],
    ID : 'String for KPI Annotation'
},
```

**STEP**: Text Arrangement (com.sap.vocabularies.Common.v1.Text / UI.TextArrangement)

**DESCRIPTION**: Control how text and IDs are displayed (TextLast, TextFirst, TextOnly). Annotate properties with Common.Text and UI.TextArrangement. Use these snippets to place text localization or adjust formatting in forms and lists.

**LANGUAGE**: XML
```xml
<Annotations xmlns="http://docs.oasis-open.org/odata/ns/edm" Target="GWSAMPLE_BASIC.SalesOrder/CustomerID">
    <Annotation Term="com.sap.vocabularies.Common.v1.Text" Path="Supplier_Name"/>
    <Annotation Term="com.sap.vocabularies.UI.v1.TextArrangement" EnumMember="com.sap.vocabularies.UI.v1.TextArrangementType/TextLast" />
</Annotations>
```

**LANGUAGE**: ABAP CDS
```abap
annotate view SALESORDER with {
  @UI.TextArrangement: #TEXT_LAST
  customerid;
}
```

**LANGUAGE**: CAP CDS
```yaml
annotate GWSAMPLE_BASIC.SalesOrder with {
  @Common.Text : Supplier_Name
  @UI.TextArrangement : #TextLast
  CustomerID
};
```

**STEP**: Potentially Sensitive Personal Data (com.sap.vocabularies.PersonalData.v1)

**DESCRIPTION**: Mark properties as potentially sensitive to support privacy handling. Annotate the target property with PersonalData.IsPotentiallySensitive in XML, ABAP CDS, or CAP CDS.

**LANGUAGE**: XML
```xml
<Annotations Target="SEPMRA_OVW.SEPMRA_C_OVW_SalesOrderType/CompanyCode">
           <Annotation Term="com.sap.vocabularies.PersonalData.v1.IsPotentiallySensitive"/>
</Annotations>
```

**LANGUAGE**: ABAP CDS
```abap
@Semantics.personalData.isPotentiallySensitive: true
CompanyCode;
```

**LANGUAGE**: CAP CDS
```yaml
annotate SEPMRA_OVW.SEPMRA_C_OVW_SalesOrderType with {
  @PersonalData.IsPotentiallySensitive
  CompanyCode
};
```

fiori-elements-framework annotations overview-page UI CDS CAP XML ABAP KPI Chart


**TITLE**: Area Micro Chart — UI.Chart and UI.DataPoint Annotations (fiori-elements-framework)

**INTRODUCTION**: Use these annotations to render an Area Micro Chart (trend chart) in Fiori Elements. The chart shows a single measure with threshold semantics (error, warning, acceptance, good) and requires CriticalityCalculation. Dimensions and measures must come from a 1:n navigation (not the same entity). This document collects XML, ABAP CDS, and CAP CDS annotation examples and the mandatory annotation checklist for code generation.

**TAGS**: fiori-elements-framework, AreaMicroChart, UI.Chart, UI.DataPoint, CriticalityCalculation, CDS, CAP, ABAP, XML

STEP: UI.Chart Annotation — XML
DESCRIPTION: Define the chart as an Area chart, provide Title and Description, specify Dimensions and Measures, and bind MeasureAttributes (including DataPoint annotation reference). Use this XML snippet inside your OData Vocab annotation file.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.Chart">
    <Record Type="UI.ChartDefinitionType">
        <PropertyValue Property="Title" String="Sales Price" />
        <PropertyValue Property="Description" String="Area Micro Chart" />
        <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Area" />
        <PropertyValue Property="Dimensions">
            <Collection>
                <PropertyPath>PriceDay</PropertyPath>
            </Collection>
        </PropertyValue>
        <PropertyValue Property="Measures">
            <Collection>
                <PropertyPath>AreaChartPrice</PropertyPath>
            </Collection>
        </PropertyValue>
        <PropertyValue Property="MeasureAttributes">
            <Collection>
                <Record Type="UI.ChartMeasureAttributeType">
                    <PropertyValue Property="Measure" PropertyPath="AreaChartPrice" />
                    <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
                    <PropertyValue Property="DataPoint" AnnotationPath="@UI.DataPoint#AreaChartPrice" />
                </Record>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>
```

STEP: UI.Chart Annotation — ABAP CDS
DESCRIPTION: Equivalent ABAP CDS annotation used in CDS view source. It sets chartType to #AREA, assigns dimensions and measures, and defines a measure attribute that maps to a DataPoint.
LANGUAGE: ABAP CDS
CODE:
```
@UI.Chart: [
  {
    title: 'Sales Price',
    description: 'Area Micro Chart',
    chartType: #AREA,
    dimensions: [
      'PRICEDAY'
    ],
    measures: [
      'AREACHARTPRICE'
    ],
    measureAttributes: [
      {
        measure: 'AreaChartPrice',
        role: #AXIS_1,
        asDataPoint: true
      }
    ]
  }
]
annotate view STTA_C_MP_PRODUCT with {

}
```

STEP: UI.Chart Annotation — CAP CDS
DESCRIPTION: CAP CDS annotation example. Use $Type UI.ChartDefinitionType, set ChartType to #Area, include Dimensions, Measures and MeasureAttributes referencing DataPoint.
LANGUAGE: CDS
CODE:
```
UI.Chart : {
    $Type : 'UI.ChartDefinitionType',
    Title : 'Sales Price',
    Description : 'Area Micro Chart',
    ChartType : #Area,
    Dimensions : [
        PriceDay
    ],
    Measures : [
        AreaChartPrice
    ],
    MeasureAttributes : [
        {
            $Type : 'UI.ChartMeasureAttributeType',
            Measure : AreaChartPrice,
            Role : #Axis1,
            DataPoint : '@UI.DataPoint#AreaChartPrice'
        }
    ]
}
```

STEP: UI.DataPoint Annotation — XML
DESCRIPTION: Define DataPoint with Value, TargetValue and CriticalityCalculation (ImprovementDirection, Deviation/Tolerance ranges). Reference DataPoint qualifier in UI.Chart/MeasureAttributes.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.DataPoint" Qualifier="AreaChartPrice">
    <Record>
        <PropertyValue Property="Value" Path="AreaChartPrice" />
        <PropertyValue Property="TargetValue" Path="TargetPrice" />
        <PropertyValue Property="CriticalityCalculation">
            <Record>
                <PropertyValue Property="ImprovementDirection" EnumMember="UI.ImprovementDirectionType/Target" />
                <PropertyValue Property="DeviationRangeHighValue" Path="DeviationUpperBoundPrice" />
                <PropertyValue Property="DeviationRangeLowValue" Path="DeviationLowerBoundPrice" />
                <PropertyValue Property="ToleranceRangeHighValue" Path="ToleranceUpperBoundPrice" />
                <PropertyValue Property="ToleranceRangeLowValue" Path="ToleranceLowerBoundPrice" />
            </Record>
        </PropertyValue>
    </Record>
</Annotation>
```

STEP: UI.DataPoint Annotation — ABAP CDS
DESCRIPTION: ABAP CDS syntax for the same DataPoint definition. Ensure targetValueElement and criticality calculation element names match your entity properties.
LANGUAGE: ABAP CDS
CODE:
```
@UI.dataPoint: {
  targetValueElement: 'TargetPrice',
  criticalityCalculation: {
    improvementDirection: #TARGET,
    deviationRangeHighValueElement: 'DeviationUpperBoundPrice',
    deviationRangeLowValueElement: 'DeviationLowerBoundPrice',
    toleranceRangeHighValueElement: 'ToleranceUpperBoundPrice',
    toleranceRangeLowValueElement: 'ToleranceLowerBoundPrice'
  }
}
AreaChartPrice;
```

STEP: UI.DataPoint Annotation — CAP CDS
DESCRIPTION: CAP CDS syntax for DataPoint. Use the qualifier (#AreaChartPrice) referenced from UI.Chart.MeasureAttributes.DataPoint.
LANGUAGE: CDS
CODE:
```
UI.DataPoint #AreaChartPrice : {
    Value : AreaChartPrice,
    TargetValue : TargetPrice,
    CriticalityCalculation : {
        ImprovementDirection : #Target,
        DeviationRangeHighValue : DeviationUpperBoundPrice,
        DeviationRangeLowValue : DeviationLowerBoundPrice,
        ToleranceRangeHighValue : ToleranceUpperBoundPrice,
        ToleranceRangeLowValue : ToleranceLowerBoundPrice
    }
}
```

STEP: Constraints, Behavior Notes, and Validation Checklist
DESCRIPTION: Keep these constraints and UI behaviors in mind when generating code and validation logic.
LANGUAGE: text
CODE:
```
- Dimensions and measures must NOT be from the same entity: they must come from a 1:n navigation entity (dimension from parent, measure from child list).
- Ensure unit-of-measure consistency across all data points (e.g., currency or unit).
- The first and last measure values become the top-left and top-right labels of the micro chart.
- The first and last dimension values become the bottom-left and bottom-right labels of the micro chart.
- Semantic coloring is mandatory: include UI.DataPoint -> CriticalityCalculation and specify ImprovementDirection.
```

STEP: Mandatory Annotations Checklist
DESCRIPTION: Ensure all listed annotations/properties are present for Area Micro Chart to render correctly.
LANGUAGE: text
CODE:
```
Mandatory:
- UI.Chart -> ChartType: "Area"
- UI.Chart -> Dimensions
- UI.Chart -> Measures
- UI.Chart -> MeasureAttributes -> DataPoint (reference to UI.DataPoint qualifier)
- UI.DataPoint -> Value
- UI.DataPoint -> CriticalityCalculation
- UI.DataPoint -> CriticalityCalculation/ImprovementDirection
```

fiori-elements-framework AreaMicroChart UI.Chart UI.DataPoint CriticalityCalculation CDS CAP ABAP XML


**TITLE**: Bar Chart Card (UI.Chart) Annotation for Fiori Elements

**INTRODUCTION**: Configure a Bar Chart Card using UI.Chart annotations. This guide explains how to define measures, dimensions, measure attributes, and enable semantic coloring via DataPoint/Threshold values. Use this when displaying column or horizontal bar charts (one column per measure) in Fiori Elements analytical cards.

**TAGS**: fiori-elements-framework, UI.Chart, Bar Chart, annotation, semantic-coloring, data-point, measures, thresholds

STEP: 1 — Define the Bar Chart Annotation (Measures, Dimensions, MeasureAttributes, DimensionAttributes)

DESCRIPTION: Create a UI.Chart annotation specifying ChartType/Bar, Title, Measures collection, Dimensions collection, and attribute records. Use MeasureAttributes to link each measure to a DataPoint annotation (for semantic coloring) and to assign a role (Axis1). Use DimensionAttributes to mark the category/dimension role. The number of columns equals the number of measures.

LANGUAGE: XML

CODE:
```xml
<Annotation Term="UI.Chart" Qualifier="Eval_by_Currency_Bar">
   <Record Type="UI.ChartDefinitionType">
      <PropertyValue Property="Title" String="Sales by Product" />
      <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Bar" />
      <PropertyValue Property="Measures">
         <Collection>
            <PropertyPath>Sales</PropertyPath>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="Dimensions">
         <Collection>
            <PropertyPath>Product</PropertyPath>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="MeasureAttributes">
         <Collection>
            <Record Type="UI.ChartMeasureAttributeType">
               <PropertyValue Property="Measure" PropertyPath="Sales" />
               <PropertyValue Property="DataPoint">
                  <AnnotationPath>@UI.DataPoint#Column_Eval_by_Country_123</AnnotationPath>
               </PropertyValue>
               <PropertyValue Property="Role"
                  EnumMember="UI.ChartMeasureRoleType/Axis1" />
            </Record>

         </Collection>
      </PropertyValue>
      <PropertyValue Property="DimensionAttributes">
         <Collection>
            <Record Type="UI.ChartDimensionAttributeType">
               <PropertyValue Property="Dimension" PropertyPath="Product" />
               <PropertyValue Property="Role"
                  EnumMember="UI.ChartDimensionRoleType/Category" />
            </Record>
         </Collection>
      </PropertyValue>
   </Record>
</Annotation>
```

STEP: 2 — Enable Semantic Coloring via DataPoint and Threshold Properties

DESCRIPTION: Link each measure in MeasureAttributes to a UI.DataPoint annotation that includes threshold and improvement direction properties. Semantic coloring is driven by these DataPoint properties:
- ToleranceRangeLowValue
- ToleranceRangeHighValue
- DeviationRangeLowValue
- DeviationRangeHighValue
- ImprovementDirection
Additionally, threshold values referenced as ThresholdValues.* (e.g., ThresholdValues.ToleranceRangeLowValue) determine color boundaries.

Recommendation: Use only one measure in a chart when you need semantic coloring for clear legends and thresholds.

Notes:
- When semantic coloring is enabled, threshold values influencing color are displayed in the legend.
- If multiple measures are used, the legend shows only Good / Bad / Neutral, not specific threshold numbers.
- The DataPoint requires a Measure Value (the value evaluated against the thresholds) and an ImprovementDirection indicating maximizing, minimizing, or target behavior.

STEP: 3 — Determine Measure Type and Apply Threshold Logic

DESCRIPTION: Set ImprovementDirection in the DataPoint to indicate how to interpret thresholds for color semantics. Use the following mapping of measure type to threshold evaluation rules.

Maximizing measure (higher is better; example: sales)
- Negative to Critical: measure value >= ThresholdValues.DeviationRangeLowValue
- Critical to Positive: measure value >= ThresholdValues.ToleranceRangeLowValue

Minimizing measure (lower is better; example: cost)
- Positive to Critical: measure value > ThresholdValues.ToleranceRangeHighValue
- Critical to Negative: measure value > ThresholdValues.DeviationRangeHighValue

Target measure (preferred within a range; example: temperature)
- Negative to Critical: measure value >= ThresholdValues.DeviationRangeLowValue
- Critical to Positive: measure value >= ThresholdValues.ToleranceRangeLowValue
- Positive to Critical: measure value > ThresholdValues.ToleranceRangeHighValue
- Critical to Negative: measure value > ThresholdValues.DeviationRangeHighValue

STEP: 4 — UI and Visual Notes (Images and Examples)

DESCRIPTION: Example image paths and visual references from the source documentation:
- Horizontal Bar Chart example: images/Example_of_a_Horizontal_Bar_Chart_Card_51ba955.png
- Bar Chart with Semantic Coloring: images/Example_of_a_Bar_Chart_Card_with_Semantic_Coloring_e9cc5d1.png
- Maximizing Measure example: images/Example_of_a_Maximizing_Measure_3a30047.png
- Minimizing Measure example: images/Example_of_a_Minimizing_Measure_9bef69b.png
- Target Measure example: images/Example_of_a_Target_Measure_7626b9d.png

Use these visual references when validating rendering and legend behavior in the UI.

fiori-elements-framework
UI.Chart
Bar Chart
annotation
semantic-coloring
data-point
measures
thresholds