**TITLE**: Adding a Custom Section to an Object Page (SAP Fiori Elements — OData V2 & V4)

**INTRODUCTION**: Step-by-step, code-focused instructions to add custom sections (facets) to an Object Page in SAP Fiori Elements applications. Covers both OData V2 (viewExtension method) and OData V4 (template method), including fragment creation, i18n entries, manifest changes, and merging section titles with control titles using the extensionAPI. Keep app-extension usage constrained to the official extensionAPI.

**TAGS**: fiori-elements-framework, sap-ui5, object-page, custom-section, manifest.json, extensionAPI, odata-v2, odata-v4, i18n, fragment, viewExtension, template

STEP: Add a Custom Section Using SAP Fiori Tools (quick GUI flow)
DESCRIPTION: Use the SAP Fiori Tools Page Map / Page Editor to add a custom section quickly (GUI). This is the shortest path if you prefer tooling over manual file edits.
LANGUAGE: N/A
CODE:
```text
1. Launch the Page Map (e.g., right-click project folder -> Show Page Map).
2. Launch Page Editor for your Object Page (click the Edit/pencil icon next to Object Page).
3. Click the Add icon next to Sections.
4. Click Add Custom Section.
5. Provide a unique Title.
6. Provide a unique Fragment Name.
7. Select an Anchor Section.
8. Click Add.
9. Preview the app (see Previewing an Application).
```

STEP: Important Caution About App Extensions
DESCRIPTION: Use app extensions only when necessary. Integrate only via the official SAP Fiori elements extensionAPI. Do not manipulate internal framework controls, properties, or models directly from extensions.
LANGUAGE: N/A
CODE:
```text
Caution:
- Use app extensions only if manifest settings or annotations cannot satisfy requirements.
- Use only the extensionAPI of SAP Fiori elements.
- After creating an app extension, the app is responsible for display and system behavior.
- Don't access/manipulate framework internals (controls, properties, models).
```

STEP: OData V2 — Step 1: Create Fragment for the New Facet
DESCRIPTION: Create an XML view fragment under webapp/ext/view. Define the fragment (example shows a TextArea bound to a navigation property). File path and name: webapp/ext/view/DescriptionBreakout.view.xml.
LANGUAGE: XML
CODE:
```xml
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
  <VBox>
    <TextArea
      id="DescriptionTextArea"
      value="{to_ProductTextInOriginalLang/Description}"
      width="30%"
      editable="false"
    />
  </VBox>
</mvc:View>
```

STEP: OData V2 — Step 2: Add Section Title to the i18n File
DESCRIPTION: Add a translatable title entry to your resource bundle so the section title is localized. Typical i18n file path: webapp/i18n/i18n.properties.
LANGUAGE: TEXT
CODE:
```text
#This is the resource bundle for Manage Products

# XTIT: Title of a facet within an object page if not needed in local/annotations.xml
ProductDescription=Product Description
```

STEP: OData V2 — Step 3: Add Extension Definition to manifest.json using viewExtension
DESCRIPTION: Add a view extension under "extends" -> "extensions" -> "sap.ui.viewExtensions" to insert the custom view into the Object Page details view. Example places the custom facet AFTER the GeneralInformation facet. Path: webapp/manifest.json (fragment).
LANGUAGE: JSON
CODE:
```json
"extends": {
  "extensions": {
    "sap.ui.viewExtensions": {
      "sap.suite.ui.generic.template.ObjectPage.view.Details": {
        "AfterFacet|SEPMRA_C_PD_Product|GeneralInformation": {
          "className": "sap.ui.core.mvc.View",
          "viewName": "ManageProducts.ext.view.DescriptionBreakout",
          "type": "XML",
          "sap.ui.generic.app": {
            "title": "{{ProductDescription}}"
          }
        }
      }
    }
  }
}
```

STEP: OData V2 — Example: Add Multiple Sections with Keys
DESCRIPTION: To add multiple instances or control ordering, include a key in the extension name and in sap.ui.generic.app.key when required. Example shows multiple BeforeFacet and AfterFacet entries and how to include a numeric key.
LANGUAGE: JSON
CODE:
```json
"extends": {
  "extensions": {
    "sap.ui.viewExtensions": {
      "sap.suite.ui.generic.template.ObjectPage.view.Details": {
        "BeforeFacet|SEPMRA_C_PD_Product|to_ProductText::com.sap.vocabularies.UI.v1.LineItem": {
          "className": "sap.ui.core.mvc.View",
          "viewName": "ManageProducts.ext.view.BeforeFacetTest",
          "type": "XML",
          "sap.ui.generic.app": {
            "title": "Facet Breakout before Product Text LineItem"
          }
        },
        "BeforeFacet|SEPMRA_C_PD_Product|to_ProductText::com.sap.vocabularies.UI.v1.LineItem|1": {
          "className": "sap.ui.core.mvc.View",
          "viewName": "ManageProducts.ext.view.BeforeFacetTestNew",
          "type": "XML",
          "sap.ui.generic.app": {
            "title": "Facet Breakout before Product Text LineItem",
            "key": "1"
          }
        },
        "AfterFacet|SEPMRA_C_PD_Product|to_Supplier::com.sap.vocabularies.UI.v1.Identification": {
          "className": "sap.ui.core.mvc.View",
          "viewName": "ManageProducts.ext.view.AfterFacetTest",
          "type": "XML",
          "sap.ui.generic.app": {
            "title": "Facet Breakout after Supplier Identification"
          }
        },
        "AfterFacet|SEPMRA_C_PD_Product|to_Supplier::com.sap.vocabularies.UI.v1.Identification|1": {
          "className": "sap.ui.core.mvc.View",
          "viewName": "ManageProducts.ext.view.AfterFacetTest",
          "type": "XML",
          "sap.ui.generic.app": {
            "title": "Facet Breakout after Supplier Identification",
            "key": 1
          }
        }
      }
    }
  }
}
```

STEP: OData V2 — Step 4: Set Section Title to Control within Custom Section (setAsTitleOwner)
DESCRIPTION: If you want the control title to replace the section title, call the extensionAPI.setAsTitleOwner from the control's initialise event. Example shows using a SmartTable initialise event and controller implementation using extensionAPI.
LANGUAGE: XML
CODE:
```xml
<st:SmartTable id="SalesPriceFacetID" initialise="SalesPriceInitialise"/>
```
LANGUAGE: JavaScript
CODE:
```javascript
SalesPriceInitialise: function(oEvent) {
	var oSmartTable = oEvent.getSource();
	var oExtensionAPI = extensionAPI.getExtensionAPI(oSmartTable);
	oExtensionAPI.setAsTitleOwner(oSmartTable);
}
```

STEP: OData V4 — Step 1: Create Fragment for the New Section
DESCRIPTION: Create an XML fragment under webapp/ext (file webapp/ext/CustomSection.fragment.xml). Define core:FragmentDefinition and include controls/layouts. If a custom handler is required, define it via core:require and implement the handler module.
LANGUAGE: XML
CODE:
```xml
<core:FragmentDefinition
  xmlns:core="sap.ui.core"
  xmlns="sap.m"
  xmlns:l="sap.ui.layout">

  <l:VerticalLayout core:require="{handler: 'SalesOrder/ext/CustomColumn'}">
    <Button text="Custom Button" press="handler.buttonPressed" />
  </l:VerticalLayout>

</core:FragmentDefinition>
```
LANGUAGE: JavaScript
CODE:
```javascript
sap.ui.define(["sap/m/MessageBox"], function (MessageBox) {
  "use strict";

  return {
    buttonPressed: function () {
      MessageBox.show("Button pressed!");
    }
  };
});
```

STEP: OData V4 — Step 2: Add Section Title to the i18n File
DESCRIPTION: Add a translatable title entry to your i18n file (e.g., webapp/i18n/i18n.properties).
LANGUAGE: TEXT
CODE:
```text
#This is the resource bundle

# XTIT: Title of a facet within an object page
customSection=Custom Section
```

STEP: OData V4 — Step 3: Add Extension Definition to manifest.json using template
DESCRIPTION: Use the routing.targets -> options -> settings -> content -> body -> sections structure to add custom sections. Define template, title (use i18n binding), and position (placement + anchor). Multiple subsections require unique IDs (keys) which become control IDs at runtime. Example fragment for SalesOrderManageObjectPage.
LANGUAGE: JSON
CODE:
```json
{
   "sap.ui5": {
      "routing": {
         "targets": {
            "SalesOrderManageObjectPage": {
               "options": {
                  "settings": {
                     "content": {
                        "body": {
                           "sections": {
                              "customSection": {
                                 "template": "SalesOrder.custom.CustomSection",
                                 "title": "{i18n>customSection}",
                                 "position": {
                                    "placement": "Before",
                                    "anchor": "SalesOrderItems"
                                 }
                              },
                              "anotherCustomSection": {
                                 "title": "Multiple Subsections",
                                 "subSections": {
                                     "firstSubSectionKey": {
                                         "title": "First Subsection",
                                         "template": "SalesOrder.custom.CustomFieldForm"
                                     },
                                     "secondSubSectionKey": {
                                         "title": "Second Subsection",
                                         "template": "SalesOrder.custom.CustomFieldForm2",
                                         "position": {
                                             "placement": "After",
                                             "anchor": "firstSubSectionKey"
                                         }
                                     }
                                 }
                                 "position": {
                                    "placement": "After",
                                    "anchor": "customSection"
                                 }
                              }
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   }
}
```

STEP: OData V4 — Tip: Add Multiple Sections
DESCRIPTION: Each custom section entry in "sections" needs an ID (key). Those keys map to control IDs within the application. Provide title, template name, and position to control placement and ordering.

STEP: OData V4 — Step 4: Merge Section Title with Control Title (setAsSectionTitleOwner)
DESCRIPTION: For Page layout mode, to merge the section title with a control title when the section contains a building block within a layout, add onSectionLoaded in manifest to call a controller method that invokes setAsSectionTitleOwner. Ensure you pass the correct control reference.
LANGUAGE: JSON
CODE:
```json
"routing": {
  "targets": {
    "SalesOrderManageObjectPage": {
      "options": {
        "settings": {
          "sectionLayout": "Page",
          "content": {
            "body": {
              "sections": {
                "customSectionTableHBox": {
                  "template": "SalesOrder.custom.CustomSectionBuildingBlockTableHBox",
                  "title": "HBox Table",
                  "onSectionLoaded": "SalesOrder.custom.CustomSection.callShowSectionTitle"
                }
              }
            }
          }
        }
      }
    }
  }
}
```
LANGUAGE: JavaScript
CODE:
```javascript
callShowSectionTitle(section){
   const control = section.getSubSections()[0].getBlocks()[0].getContent().getItems()[0];
   this.setAsSectionTitleOwner(control);
}
```

STEP: Results / Verification
DESCRIPTION: After implementing the fragment, i18n, and manifest changes (and optional title-owner logic), build and run the app. The Object Page should display the new custom section in the specified position and with localized title behavior. Use the Fiori preview or deploy to test.


**TITLE**: Add Micro Charts to Table Columns (SAP Fiori Elements)

**INTRODUCTION**: This guide shows how to add micro charts (area, bullet, etc.) into a responsive table column using UI.LineItem and UI.DataFieldForAnnotation. Includes XML, ABAP CDS, CAP CDS, and manifest.json configuration examples, plus DataPoint, Chart, and PresentationVariant annotations required to render and sort micro charts inside table columns.

**TAGS**: fiori-elements, micro-chart, responsive-table, UI.LineItem, UI.Chart, UI.DataPoint, CDS, CAP, ABAP, manifest.json

STEP: Add a micro chart to a table column using UI.LineItem and UI.DataFieldForAnnotation

DESCRIPTION: Include a DataFieldForAnnotation entry in the UI.LineItem collection. The DataFieldForAnnotation.Target points to a UI.Chart qualifier or Chart annotation. Use Label for the table column header text. Example includes XML annotation and CAP CDS annotation versions.

LANGUAGE: XML
CODE:
```xml
<Annotations Target="STTA_PROD_MAN.STTA_C_MP_ProductType">
  <Annotation Term="UI.LineItem">
    <Collection>
      <Record Type="UI.DataFieldForAction">
        <PropertyValue Property="Label" String="Copy with new Supplier"/>
        <PropertyValue Property="Action" String="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductCopywithparams"/>
        <Annotation Term="UI.OperationGrouping" EnumMember="UI.OperationGroupingType/Isolated"/>
      </Record>
      <Record Type="UI.DataFieldForAction">
        <PropertyValue Property="Label" String="Activate"/>
        <PropertyValue Property="Action" String="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductActivation"/>
        <PropertyValue Property="Determining" Bool="true"/>
        <Annotation Term="UI.OperationGrouping" EnumMember="UI.OperationGroupingType/ChangeSet"/>
      </Record>
      <Record Type="UI.DataField">
        <PropertyValue Property="Value" Path="Product"/>
        <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
      </Record>
      <Record Type="UI.DataField">
        <PropertyValue Property="Value" Path="ProductCategory"/>
        <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
      </Record>
      <Record Type="UI.DataField">
        <PropertyValue Property="Value" Path="to_Supplier/CompanyName"/>
        <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
      </Record>
      <Record Type="UI.DataField">
        <PropertyValue Property="Criticality" Path="to_StockAvailability/StockAvailability"/>
        <PropertyValue Property="Value" Path="to_StockAvailability/StockAvailability"/>
        <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
      </Record>
      <Record Type="UI.DataField">
        <PropertyValue Property="Value" Path="Price"/>
        <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
      </Record>
      <Record Type="UI.DataFieldForAction">
        <PropertyValue Property="Label" String="Copy"/>
        <PropertyValue Property="IconUrl" String="sap-icon://copy"/>
        <PropertyValue Property="Action" String="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductCopy"/>
        <PropertyValue Property="Inline" Bool="true"/>
        <PropertyValue Property="Determining" Bool="true"/>
        ABAP CDS
                    Annotation
<<Annotation Term="UI.OperationGrouping" EnumMember="UI.OperationGroupingType/Isolated"/>Annotations Target="STTA_PROD_MAN.STTA_C_MP_ProductType">

  <</Record>Annotation Term="UI.LineItem">

    <<Record Type="UI.DataFieldForIntentBasedNavigation">Collection>

      <<PropertyValue Property="Label" String="Manage Products (ST)"/>Record Type="UI.DataFieldForAction">

        <<PropertyValue Property="SemanticObject" String="EPMProduct"/>PropertyValue Property="Label" String="Copy with new Supplier"/>

        <<PropertyValue Property="Action" String="manage_st"/>PropertyValue Property="Action" String="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductCopywithparams"/>

        <<PropertyValue Property="Inline" Bool="true"/>Annotation Term="UI.OperationGrouping" EnumMember="UI.OperationGroupingType/Isolated"/>

      <<PropertyValue Property="Determining" Bool="true"/>/Record>

      <</Record>Record Type="UI.DataFieldForAction">

        <<Record Type="UI.DataFieldForAnnotation">PropertyValue Property="Label" String="Activate"/>

        <<PropertyValue Property="Label" String="Rating"/>PropertyValue Property="Action" String="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductActivation"/>

        <<PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Rating"/>PropertyValue Property="Determining" Bool="true"/>

        <</Record>Annotation Term="UI.OperationGrouping" EnumMember="UI.OperationGroupingType/ChangeSet"/>

      <<Record Type="UI.DataFieldForAnnotation">/Record>

      <<PropertyValue Property="Label" String="Progress"/>Record Type="UI.DataField">

        <<PropertyValue Property="Criticality" Path="to_StockAvailability/Quantity"/>PropertyValue Property="Value" Path="Product"/>

        <<PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Progress"/>Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>

      </Record>
      <</Record>Record Type="UI.DataFieldForAnnotation">

        <<Record Type="UI.DataField">PropertyValue Property="Label" String="Sales"/>

        <<PropertyValue Property="Value" Path="ProductCategory"/>PropertyValue Property="Target" AnnotationPath="to_ProductSalesPrice/@UI.Chart#AreaChartQualifier"/>

      <<Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>/Record>

      <</Record>Record Type="UI.DataFieldForAnnotation">

        <<Record Type="UI.DataField">PropertyValue Property="Label" String="Revenue"/>

        <<PropertyValue Property="Target" AnnotationPath="to_ProductSalesRevenue/@UI.Chart#BulletChartQualifier"/>PropertyValue Property="Value" Path="to_Supplier/CompanyName"/>

        <</Record>Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>

      <</Collection>/Record>

      <</AnRecord Type="UI.DataField">notation>

<<PropertyValue Property="Criticality" Path="to_StockAvailability/StockAvailability"/>/Annotations>

```

LANGUAGE: CAP CDS
CODE:
```c
@Consumption.semanticObject: 'EPMProduct'
annotate view STTA_C_MP_PRODUCTTYPE with {
@UI.lineItem: [
  {
    label: 'Copy with new Supplier',
    dataAction: 'PUSHDOWN:STTA_C_MP_ProductCopywithparams',
    type: #FOR_ACTION,
    position: 10
  },
  {
    label: 'Activate',
    dataAction: 'PUSHDOWN:STTA_C_MP_ProductActivation',
    type: #FOR_ACTION,
    position: 20
  },
  {
    label: 'Copy',
    iconUrl: 'sap-icon:,//copy'
    dataAction: 'PUSHDOWN:STTA_C_MP_ProductCopy',
    type: #FOR_ACTION,
    position: 80
  },
  {
    label: 'Manage Products (ST)',
    semanticObjectAction: 'manage_st',
    type: #FOR_INTENT_BASED_NAVIGATION,
    position: 90
  },
  {
    label: 'Rating',
    valueQualifier: 'Rating',
    type: #AS_DATAPOINT,
    position: 100
  },
  {
    label: 'Progress',
    criticality: 'TO_STOCKAVAILABILITY/QUANTITY',
    valueQualifier: 'Progress',
    type: #AS_DATAPOINT,
    position: 110
  },
  {
    label: 'Sales',
    valueQualifier: 'AreaChartQualifier',
    value: '_PRODUCTSALESPRICE',
    type: #AS_CHART,
    position: 120
  },
  {
    label: 'Revenue',
    valueQualifier: 'BulletChartQualifier',
    value: '_PRODUCTSALESREVENUE',
    type: #AS_CHART,
    position: 130
  },
  {
    importance: #HIGH,
    position: 30
  }
]
product;

@UI.lineItem: [
  {
    importance: #HIGH,
    position: 40
  }
]
productcategory;

@UI.lineItem: [
  {
    importance: #HIGH,
    value: '_SUPPLIER.COMPANYNAME',
    type: #STANDARD,
    position: 50
  }
]
_supplier;

@UI.lineItem: [
  {
    importance: #HIGH,
    criticality: '_STOCKAVAILABILITY.STOCKAVAILABILITY',
    value: '_STOCKAVAILABILITY.STOCKAVAILABILITY',
    type: #STANDARD,
    position: 60
  }
]
_stockavailability;

@UI.lineItem: [
  {
    importance: #HIGH,UI.Chart Annotations
]
price;
}
```

STEP: Define an Area micro chart (XML)

DESCRIPTION: Annotate a UI.Chart with ChartType = Area; set dimensions, measures, and measureAttributes referencing a UI.DataPoint via AnnotationPath.

LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.Chart" Qualifier="AreaChartQualifier">
    <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: Define an Area micro chart (ABAP CDS)

DESCRIPTION: ABAP CDS representation of the Area chart qualifier to be used as a micro chart. Use qualifier 'AreaChartQualifier'.

LANGUAGE: ABAP CDS
CODE:
```abap
@UI.Chart: [
  {
    title: 'Sales Price',
    description: 'Area Micro Chart',
    chartType: #AREA,
    dimensions: [
      'PRICEDAY'
    ],
    measures: [
      'AREACHARTPRICE'
    ],
    measureAttributes: [
      {
        measure: 'AreaChartPrice',
        role: #AXIS_1,
        asDataPoint: true
      }
    ],
    qualifier: 'AreaChartQualifier'
  }
]
annotate view ITEM with {

}
```

STEP: Define a Bullet micro chart (XML)

DESCRIPTION: Annotate a UI.Chart with ChartType = Bullet; set measures and measureAttributes referencing a UI.DataPoint via AnnotationPath.

LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.Chart" Qualifier="BulletChartQualifier">
    <Record Type="UI.ChartDefinitionType">
        <PropertyValue Property="Title" String="Sales Revenue" />
        <PropertyValue Property="Description" String="Bullet Micro Chart" />
        <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Bullet" />
        <PropertyValue Property="Measures">
            <Collection>
                <PropertyPath>BulletChartRevenue</PropertyPath>
            </Collection>
        </PropertyValue>
        <PropertyValue Property="MeasureAttributes">
            <Collection>
                <Record Type="UI.ChartMeasureAttributeType">
                    <PropertyValue Property="Measure" PropertyPath="BulletChartRevenue" />
                    <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
                    <PropertyValue Property="DataPoint" AnnotationPath="@UI.DataPoint#BulletChartRevenue" />
                </Record>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>
```

STEP: Define a Bullet micro chart (ABAP CDS)

DESCRIPTION: ABAP CDS representation for the Bullet micro chart qualifier.

LANGUAGE: ABAP CDS
CODE:
```abap
@UI.Chart: [
  {
    title: 'Sales Revenue',
    description: 'Bullet Micro Chart',
    chartType: #BULLET,
    measures: [
      'BULLETCHARTREVENUE'
    ],
    measureAttributes: [
      {
        measure: 'BulletChartRevenue',
        role: #AXIS_1,
        asDataPoint: true
      }
    ],
    qualifier: 'BulletChartQualifier'
  }
]
annotate view ITEM with {

}
```

STEP: Define UI.DataPoint for Area micro chart (XML)

DESCRIPTION: Define the DataPoint referenced from Chart.MeasureAttributes.DataPoint. Include Value, TargetValue, and CriticalityCalculation to drive SmartMicroChart criticality behavior.

LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.DataPoint" Qualifier="AreaChartPrice">
    <Record>
        <PropertyValue Property="Title" String="Sales Price" />
        <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: Define UI.DataPoint for Area micro chart (ABAP CDS)

DESCRIPTION: ABAP CDS DataPoint with criticalityCalculation for Area micro chart mapping.

LANGUAGE: ABAP CDS
CODE:
```abap
@UI.dataPoint: {
  title: 'Sales Price',
  targetValueElement: 'TargetPrice',
  criticalityCalculation: {
    improvementDirection: #TARGET,
    deviationRangeHighValueElement: 'DeviationUpperBoundPrice',
    deviationRangeLowValueElement: 'DeviationLowerBoundPrice',
    toleranceRangeHighValueElement: 'ToleranceUpperBoundPrice',
    toleranceRangeLowValueElement: 'ToleranceLowerBoundPrice'
  }
}
AreaChartPrice;
```

STEP: Define UI.DataPoint for Bullet micro chart (XML)

DESCRIPTION: Define DataPoint with Value, TargetValue, ForecastValue, Min/Max, and Criticality used by SmartMicroChart.

LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.DataPoint" Qualifier="BulletChartRevenue">
    <Record>
        <PropertyValue Property="Title" String="Sales Revenue" />
        <PropertyValue Property="Value" Path="BulletChartRevenue" />
        <PropertyValue Property="TargetValue" Path="TargetRevenue" />
        <PropertyValue Property="ForecastValue" Path="ForecastRevenue" />
        <PropertyValue Property="MinimumValue" Decimal="100" />
        <PropertyValue Property="MaximumValue" Decimal="300" />
        <PropertyValue Property="Criticality" Path="Criticality" />
    </Record>
</Annotation>
```

STEP: Define UI.DataPoint for Bullet micro chart (ABAP CDS)

DESCRIPTION: ABAP CDS DataPoint for Bullet micro chart.

LANGUAGE: ABAP CDS
CODE:
```abap
@UI.dataPoint: {
  title: 'Sales Revenue',
  targetValueElement: 'TargetRevenue',
  forecastValue: 'ForecastRevenue',
  minimumValue: 100,
  maximumValue: 300,
  criticality: 'Criticality'
}
BulletChartRevenue;
```

STEP: CDS annotation definitions for UI.Chart (reference)

DESCRIPTION: Use this CDS structure reference when authoring Chart annotations in CDS. Also includes sample @UI.chart usage for Area and Bullet micro charts.

LANGUAGE: CDS
CODE:
```
chart : array of
{
    qualifier : String(120);
    @LanguageDependency.maxLength : 40
    title : String(60);
    @LanguageDependency.maxLength : 80
    description : String(120);
    chartType : String enum
    {
       COLUMN;
       COLUMN_STACKED;
       COLUMN_STACKED_100;
       COLUMN_DUAL;
       COLUMN_STACKED_DUAL;
       COLUMN_STACKED_DUAL_100;
       BAR;
       BAR_STACKED;
       BAR_STACKED_100;
       BAR_DUAL;
       BAR_STACKED_DUAL;
       BAR_STACKED_DUAL_100;
       AREA;
       AREA_STACKED;
       AREA_STACKED_100;
       HORIZONTAL_AREA;
       HORIZONTAL_AREA_STACKED;
       HORIZONTAL_AREA_STACKED_100;
       LINE;
       LINE_DUAL;
       COMBINATION;
       COMBINATION_STACKED;
       COMBINATION_STACKED_DUAL;
       HORIZONTAL_COMBINATION_STACKED;
       HORIZONTAL_COMBINATION_STACKED_DUAL;
       PIE;
       DONUT;
       SCATTER;
       BUBBLE;
       RADAR;
       HEAT_MAP;
       TREE_MAP;
       WATERFALL;
       BULLET;
       VERTICAL_BULLET;
    };
    dimensions : array of elementRef;
    measures : array of elementRef;
    dimensionAttributes : array of
    {
       dimension : elementRef;
       role : String(10) enum
       {
           CATEGORY;
           SERIES;
       };
    };
    measureAttributes : array of
    {
       measure : elementRef;
       role : String(10) enum
       {
           AXIS_1;
           AXIS_2;
           AXIS_3;
       };
       asDataPoint : Boolean default true;
    };
}
```

LANGUAGE: 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 }
  ],
  qualifier: 'AreaChartQualifier'
}]
```

LANGUAGE: CDS
CODE:
```
@UI.chart:[{
  title:'Sales Revenue',
  description: 'Bullet Micro Chart',
  chartType: #BULLET,
  measures:['BulletChartRevenue'],
  measureAttributes: [
    { measure: 'BulletChartRevenue', role: #AXIS_1, asDataPoint: true }
  ],
  qualifier: 'BulletChartQualifier'
}]
```

STEP: CDS annotation definition for UI.DataPoint (reference)

DESCRIPTION: Use this CDS structure to define DataPoint properties such as targetValueElement, forecastValue, criticality, and criticalityCalculation.

LANGUAGE: CDS
CODE:
```
dataPoint
{
    @LanguageDependency.maxLength : 40
    title : String(60);
    @LanguageDependency.maxLength : 80
    description : String(120);
    @LanguageDependency.maxLength : 190
    longDescription : String(250);
    targetValue : DecimalFloat;
    targetValueElement : elementRef;
    forecastValue : elementRef;
    minimumValue : DecimalFloat;
    maximumValue : DecimalFloat;
    visualization : String enum
    {
        NUMBER;
        BULLET_CHART;
        DONUT;
        PROGRESS;
        RATING;
    };
    valueFormat
    {
        scaleFactor : DecimalFloat;
        numberOfFractionalDigits : Integer;
    };
    referencePeriod
    {
        @LanguageDependency.maxLength : 80
        description : String(120);
        start : elementRef;
        end : elementRef;
    };
    criticality : elementRef;
    criticalityCalculation
    {
        improvementDirection : String enum { MINIMIZE; TARGET; MAXIMIZE; };
        toleranceRangeLowValue : DecimalFloat;
        toleranceRangeLowValueElement : elementRef;
        toleranceRangeHighValue : DecimalFloat;
        toleranceRangeHighValueElement : elementRef;
        deviationRangeLowValue : DecimalFloat;
        deviationRangeLowValueElement : elementRef;
        deviationRangeHighValue : DecimalFloat;
        deviationRangeHighValueElement : elementRef;
    };
    trend : elementRef;
    trendCalculation
    {
        referenceValue : elementRef;
        isRelativeDifference : Boolean default false;
        upDifference : DecimalFloat;
        upDifferenceElement : elementRef;
        strongUpDifference : DecimalFloat;
        strongUpDifferenceElement : elementRef;
        downDifference : DecimalFloat;
        downDifferenceElement : elementRef;
        strongDownDifference : DecimalFloat;
        strongDownDifferenceElement : elementRef;
    };
    responsible : elementRef;
    responsibleName : String(120);
};
```

STEP: Use UI.DataFieldForAnnotation in UI.LineItem for OData V4 (XML)

DESCRIPTION: For OData V4, a DataFieldForAnnotation entry in LineItem should reference the Chart via Target AnnotationPath. This example links a chart qualifier via Target and sets the Label.

LANGUAGE: XML
CODE:
```xml
<Record Type="UI.DataFieldForAnnotation">
    <PropertyValue Property="Target" AnnotationPath="_CreditLimitDetails/@com.sap.vocabularies.UI.v1.Chart#RadialCriticalityPathHidden" />
    <PropertyValue Property="Label" String="Credit Limit Details" />
</Record>
```

LANGUAGE: ABAP CDS
CODE:
```
{
label: 'Credit Limit Details',
type: #AS_CHART, valueQualifier: 'RadialCriticalityPathHidden', value: '_ CreditLimitDetails'
}
```

LANGUAGE: CAP CDS
CODE:
```
{
            $Type             : 'UI.DataFieldForAnnotation',
            Target            : '_CreditLimitDetails/@com.sap.vocabularies.UI.v1.Chart#RadialCriticalityPathHidden',
            Label             : 'Credit Limit Details'
}
```

STEP: Configure micro chart size and label visibility in manifest.json

DESCRIPTION: Set microChartSize (default XS) and showMicroChartLabel (default false) under controlConfiguration -> @com.sap.vocabularies.UI.v1.LineItem -> columns -> DataFieldForAnnotation::_<ChartPath> for ResponsiveTable. Example sets size M and enables labels.

LANGUAGE: JSON
CODE:
```json
"options":{
    "settings":{
        "controlConfiguration": {
            "@com.sap.vocabularies.UI.v1.LineItem": {
                "actions":{},
                "tableSettings":{
                    "type": "ResponsiveTable"
                },
                "columns" : {
                        "DataFieldForAnnotation::_CreditLimitDetails::Chart::RadialCriticalityPathHidden ": {
                            "settings" : {
                                " microChartSize": "M",
                                " showMicroChartLabel ": true
                            }
                        }
                }
            }
        }
    }
}
```

STEP: Enable sorting of micro chart data using UI.PresentationVariant (XML)

DESCRIPTION: To sort micro chart data inside responsive tables, link UI.DataFieldForAnnotation.Target to a UI.PresentationVariant qualifier that contains SortOrder and Visualizations that reference the UI.Chart qualifier. Only SortOrder.SortOrderType is considered; other PresentationVariant properties are ignored for micro chart sorting.

LANGUAGE: XML
CODE:
```xml
<Annotations Target="com.c_salesordermanage_sd.SalesOrderItem">
<Annotation Term="UI.LineItem">
   <Collection>
      ………
      ………
      <Record Type="UI.DataFieldForAnnotation">
         <PropertyValue Property="Target" AnnotationPath=”_Item/@com.sap.vocabularies.UI.v1.PresentationVariant#AreaMaxPath” />
         <PropertyValue Property="Label" String="Credit Limit Details"/>
         <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/Low"/>
      </Record>
   </Collection>
</Annotation>

<Annotation Term="UI.PresentationVariant" Qualifier="AreaMaxPath">
   <Record Type="UI.PresentationVariantType">
      <PropertyValue Property="Visualizations">
         <Collection>
            <AnnotationPath>@UI.Chart#AreaMaxPath</AnnotationPath>
         </Collection>
      </PropertyValue>
      <PropertyValue Property="SortOrder">
        <Collection>
            <Record Type="Common.SortOrderType">
               <PropertyValue Property="Property" PropertyPath="NetAmount"/>
               <PropertyValue Property="Descending" Bool="true"/>
            </Record>
         </Collection>
      </PropertyValue>
   </Record>
</Annotation>

<Annotation Term="UI.Chart" Qualifier="AreaMaxPath">
   ………
   ………
</Annotation>
</Annotations>
```

LANGUAGE: CAP CDS
CODE:
```c
LineItem: [
      ………
      ………
      {
        $Type            : 'UI.DataFieldForAnnotation',
        Target           :'_Item/@com.sap.vocabularies.UI.v1.PresentationVariant#AreaMaxPath',
        Label            : 'Credit Limit Details',
        ![@UI.Importance]: #Low
      }
    ]
  },

annotate c_salesordermanage_sd.SalesOrderItem with @(UI: {
  PresentationVariant #AreaMaxPath: {
     Visualizations: ['@UI.Chart#AreaMaxPath'],
     SortOrder     : [{
        Property  : 'NetAmount',
        Descending: true
     }]
  },
  Chart #AreaMaxPath: {
     ………
     ………
  },
  ………
  ………
});
```

STEP: Notes and restrictions (quick reference)

DESCRIPTION: Keep these constraints in mind when implementing micro charts:
- Micro charts in table columns render as XS by default (unless overridden in manifest.json).
- Sorting/filtering: measures/dimensions inside micro charts cannot be sorted/filtered from column header; they are available via Settings -> Sorting and Filtering only if they are direct properties of the table entity.
- UI.Chart should not use navigation properties in the Chart term for templates — this is unsupported for micro charts in the template.
- SmartMicroChart uses UI.DataPoint Criticality and CriticalityCalculation; Title is required in UI.DataPoint though micro chart does not display it.
- A micro chart may not render if backend data retrieval fails or returns no data.


**TITLE**: Add a Progress Indicator to a Table (Fiori Elements)

**INTRODUCTION**: This guide shows how to add a progress indicator visualization to a table in Fiori Elements using annotations. Examples cover XML annotations, ABAP CDS annotations, and CAP CDS annotations. Also includes how to change progress bar color using a criticality property.

**TAGS**: fiori-elements-framework, annotations, progress-indicator, UI.DataPoint, UI.LineItem, XML, CDS, CAP, ABAP

**STEP**: 1 — XML Annotation: Add a Progress DataPoint and Reference It from LineItem

**DESCRIPTION**: Define a UI.DataPoint annotation with a Qualifier (e.g., "Progress") that specifies Value, TargetValue, and Visualization set to UI.VisualizationType/Progress. Reference this DataPoint from UI.LineItem using AnnotationPath="@UI.DataPoint#<Qualifier>" (e.g., "@UI.DataPoint#Progress") by adding a UI.DataFieldForAnnotation record with Target pointing to the DataPoint qualifier.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="STTA_PROD_MAN.STTA_C_MP_ProductType">
    <Annotation Term="UI.DataPoint" Qualifier="Progress">
        <Record>
            <PropertyValue Property="Value" Path="to_StockAvailability/Quantity" />
            <PropertyValue Property="TargetValue" Decimal="100" />
            <PropertyValue Property="Visualization" EnumMember="UI.VisualizationType/Progress" />
        </Record>
    </Annotation>
    <Annotation Term="UI.LineItem">
        <Collection>
            <Record Type="UI.DataFieldForAnnotation">
                <PropertyValue Property="Label" String="Progress" />
                <PropertyValue Property="Criticality" Path="to_StockAvailability/Quantity" />
                <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Progress" />
            </Record>
        <Collection>
    </Annotation>
</Annotations>
```

**STEP**: 2 — ABAP CDS Annotation: Add DataPoint and Reference in LineItem

**DESCRIPTION**: In ABAP CDS view annotations, annotate the view field (e.g., Quantity) with @UI.dataPoint specifying targetValue and visualization = #PROGRESS. Then include a UI.lineItem entry using type #AS_DATAPOINT and valueQualifier to reference the DataPoint.

**LANGUAGE**: ABAP CDS

**CODE**:
```
annotate view STTA_C_MP_StockAvailability with {
  @UI.dataPoint: { targetValue: 100, visualization: #PROGRESS }
  Quantity;
}

@UI.lineItem: [
  {
    label: 'Progress',
    criticality: 'TO_STOCKAVAILABILITY/QUANTITY',
    valueQualifier: 'Progress',
    type: #AS_DATAPOINT
  }
]
progress;
```

**STEP**: 3 — CAP CDS Annotation: DataPoint and LineItem Reference

**DESCRIPTION**: For CAP (SAP Cloud Application Programming) CDS annotations, annotate the entity with UI.DataPoint using a qualifier (e.g., #Progress). Set Value, TargetValue, and Visualization. Reference the DataPoint in UI.LineItem using Target: '@UI.DataPoint#Progress' inside a UI.DataFieldForAnnotation entry.

**LANGUAGE**: CDS

**CODE**:
```
annotate STTA_PROD_MAN.STTA_C_MP_ProductType @(
  UI.DataPoint #Progress : {
    Value : to_StockAvailability.Quantity,
    TargetValue : 100,
    Visualization : #Progress
  },
  UI.LineItem : [
    {
        $Type : 'UI.DataFieldForAnnotation',
        Label : 'Progress',
        Criticality : to_StockAvailability.Quantity,
        Target : '@UI.DataPoint#Progress',
    }
  ]
);
```

**STEP**: 4 — Change Progress Bar Color by Setting Criticality (XML)

**DESCRIPTION**: To make the progress bar color reflect state (e.g., success, warning, error), add a Criticality property to the UI.DataPoint that points to a property determining state (for example, StockAvailability). The example below shows properties for Value, Title, Description, TargetValue, Visualization and Criticality in an XML DataPoint annotation.

**LANGUAGE**: XML

**CODE**:
```
<Annotation Term="UI.DataPoint" Qualifier="Quantity">
               <Record>
                       <PropertyValue Property="Value" Path="Quantity"/>
                       <PropertyValue Property="Title" String="{@i18n>@Availability}"/>
                       <PropertyValue Property="Description" String="Progress Indicator"/>
                       <PropertyValue Property="TargetValue" Decimal="150"/>
                       <PropertyValue Property="Visualization" EnumMember="UI.VisualizationType/Progress"/>
                       <PropertyValue Property="Criticality" Path="StockAvailability"/>
               </Record>
        </Annotation>
```

fiori-elements-framework annotations progress-indicator UI.DataPoint UI.LineItem XML CDS CAP ABAP


**TITLE**: Add a Read-Only Rating Indicator (Stars) to a Fiori Elements Table

**INTRODUCTION**: This guide shows how to add a read-only rating indicator (star visualization) to a Fiori Elements table. The rating indicator maps a backend numeric field to a star-based visualization. Decimal values are rounded (x.25–x.74 → half star). Configure the maximum number of stars with the TargetValue (default is 5).

**TAGS**: fiori-elements-framework, annotations, UI.DataPoint, rating, stars, CDS, ABAP, CAP, OData V2

**STEP**: 1 — XML Annotation: Add a UI.DataPoint and reference it in the LineItem
**DESCRIPTION**: Add a UI.DataPoint annotation with Value (path to backend field), TargetValue (maximum number of stars), and Visualization set to Rating. Then reference this DataPoint in the LineItem via UI.DataFieldForAnnotation and AnnotationPath to display the rating in the table.
**LANGUAGE**: XML
**CODE**:
```xml
<Annotations Target="STTA_PROD_MAN.STTA_C_MP_ProductType">
  <Annotation Term="UI.DataPoint" Qualifier="Rating">
    <Record>
      <PropertyValue Property="Value" Path="to_StockAvailability/StockAvailability" />
      <PropertyValue Property="TargetValue" Decimal="4" />
      <PropertyValue Property="Visualization" EnumMember="UI.VisualizationType/Rating" />
    </Record>
  </Annotation>

  <Annotation Term="UI.LineItem">
    <Collection>
      <Record Type="UI.DataFieldForAnnotation">
        <PropertyValue Property="Label" String="Rating" />
        <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Rating" />
      </Record>
      ...
    </Collection>
   ...
  </Annotation>
...
</Annotations>
```

**STEP**: 2 — ABAP CDS Annotation: Annotate view with UI.DataPoint and LineItem entry
**DESCRIPTION**: In ABAP CDS, annotate the view to expose the field in the LineItem as a DataPoint (type #AS_DATAPOINT) and configure the UI.dataPoint with targetValue and visualization set to #RATING. Include the field (navigation path) at the end of the annotate block.
**LANGUAGE**: ABAP
**CODE**:
```
annotate view STTA_C_MP_PRODUCT with
{
  @UI.lineItem: [
    {
      label: 'Rating',
      valueQualifier: 'Rating',
      type: #AS_DATAPOINT,
      position: 1
    }
  ]
  @UI.dataPoint: {
    targetValue: 4,
    visualization: #RATING
  }
  to_stockavailability/stockavailability;
}
```

**STEP**: 3 — CAP CDS Annotation: Annotate entity with UI.DataPoint and UI.LineItem
**DESCRIPTION**: In CAP CDS, add a qualified UI.DataPoint (#Rating) mapping Value to the backend path, set TargetValue and Visualization, and add a UI.LineItem entry that references the DataPoint qualifier.
**LANGUAGE**: CDS
**CODE**:
```
annotate STTA_PROD_MAN.STTA_C_MP_ProductType with
  @(
    UI.DataPoint #Rating : {
      Value         : to_StockAvailability.StockAvailability,
      TargetValue   : 4,
      Visualization : #Rating
    },
    UI.LineItem : [
      {
        $Type  : 'UI.DataFieldForAnnotation',
        Label  : 'Rating',
        Target : '@UI.DataPoint#Rating'
      }
    ]
  );
```

**STEP**: 4 — OData V2 / Generic Annotation Syntax: Enable rating indicator in LineItem
**DESCRIPTION**: For OData V2 annotations (UI annotations in metadata/annotation files), mark the LineItem entry with type #AS_DATAPOINT and add an @UI.dataPoint with visualization #RATING for the property to render as a read-only rating indicator in the table.
**LANGUAGE**: CDS
**CODE**:
```xml
@UI.lineItem: {
  position: 30,
  type: #AS_DATAPOINT
}

@UI.dataPoint: {
  visualization: #RATING
}

Product.Rating,
```

**STEP**: 5 — OData V2 / Define Maximum Number of Stars
**DESCRIPTION**: Change the default maximum number of stars (default = 5) by setting targetValue in the @UI.dataPoint annotation. Example shows targetValue = 4 (max 4 stars).
**LANGUAGE**: CDS
**CODE**:
```xml
@UI.lineItem: {
  position: 30,
  type: #AS_DATAPOINT
}

@UI.dataPoint: {
  targetValue: 4,
  visualization: #RATING
}

Product.Rating,
```

**NOTE**: TargetValue defines the maximum number of stars displayed. Decimal values are rounded; values between x.25 and x.74 display a half star. Use these annotations in your XML annotation files, ABAP CDS, or CAP CDS files depending on your project setup.

fiori-elements-framework
annotations
UI.DataPoint
rating
stars
CDS
ABAP
CAP
OData V2


**TITLE**: Adding a Section to an Object Page Using SAP Fiori Tools

**INTRODUCTION**: Step-by-step, action-oriented instructions for adding a section and adding fields to that section on an Object Page using SAP Fiori tools (SAP Fiori elements for OData V4). Includes UI actions, file references, and links to official documentation for context and validation.

**TAGS**: fiori-elements-framework, sap-fiori-tools, object-page, section, fields, odata-v4, business-application-studio

**STEP**: 0 — Required HTML header and anchors (preserve for project docs)
**DESCRIPTION**: Include project-level stylesheet and preserve HTML anchors/comments used by documentation generators or tooling. Add these lines to the appropriate documentation or HTML header files when you maintain the sample project.
**LANGUAGE**: HTML
**CODE**:
```html
<!-- loio9940cf0b191743f9a421d14bf02ff889 -->

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

<a name="loio9940cf0b191743f9a421d14bf02ff889__task_jbc_r22_3cc"></a>
```

**STEP**: 1 — Add a New Section to an Object Page
**DESCRIPTION**: Use SAP Fiori Tools (Page Map and Page Editor) to add a new Section to an Object Page. These are UI-driven actions inside Business Application Studio or VS Code with Fiori Tools. Follow the sequence exactly to ensure the section is registered and configured in the page definition.
**LANGUAGE**: text
**CODE**:
```
1. Launch the Page Map.
   - Example: Right-click the project folder and select "Show Page Map".
   - Reference: Define Application Structure (https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/bae38e6216754a76896b926a3d6ac3a9.html)

2. Launch the Page Editor for your Object Page.
   - Click the :pencil2: (Edit) icon next to "Object Page".

3. Add a new Section.
   - Click the :heavy_plus_sign: (Add) icon next to "Sections".
   - Select the type of section you want to add.
   - Enter a name for the section.
   - Select the "Value Source" from the dropdown.
   - Click "Add".

3.a Verify or re-open the page definition in the Page Editor to confirm the new section appears in the outline/tree.

Documentation for section types and behavior:
- Sections (https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/2953503145dd428194c6dff252744ac1.html)
```

**STEP**: 2 — Expand Sections Node and Add Fields to a Section
**DESCRIPTION**: After creating the section, add fields (basic fields) to it using the Page Editor outline tree. Expand the Sections node, navigate into the newly created section, and add fields from the entity properties exposed by your OData V4 service.
**LANGUAGE**: text
**CODE**:
```
1. Expand the "Sections" node in the outline tree.
   - Click the Arrow icon next to the section to reveal child nodes.
   - The outline screenshot reference: images/Fiori_Tools_-_Business_Application_Studio_-_Sections_Dropdown_3f19523.png

2. Add fields to the section.
   - Click the :heavy_plus_sign: (Add) icon next to "Fields".
   - Click "Add Basic Fields".
   - Select the fields you wish to add from the dropdown (these map to OData V4 entity properties).
   - Click "Add".

3. Preview the page.
   - Use Previewing an Application to validate layout and data binding:
     https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/b962685bdf9246f6bced1d1cc1d9ba1c.html

Additional reference for basic field behavior:
- Basic Fields (https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/2953503145dd428194c6dff252744ac1.html)
```

**STEP**: 3 — Notes and Compatibility
**DESCRIPTION**: Important constraints and references to keep in mind when implementing sections and fields.
**LANGUAGE**: text
**CODE**:
```
- This topic is only applicable to SAP Fiori elements for OData V4.
- Use the Page Map and Page Editor inside SAP Business Application Studio or VS Code with SAP Fiori Tools extensions for interactive editing.
- Preserve image and documentation links for reference and onboarding:
  - Outline screenshot: images/Fiori_Tools_-_Business_Application_Studio_-_Sections_Dropdown_3f19523.png
  - Main docs: https://help.sap.com/docs/SAP_FIORI_tools
```

fiori-elements-framework sap-fiori-tools object-page section fields odata-v4 business-application-studio


**TITLE**: Adding Action Buttons to Forms in Sections

**INTRODUCTION**: This guide shows how to add action buttons to forms inside object page sections (FieldGroup) in SAP Fiori elements. It includes annotation examples for XML annotation files, ABAP CDS, and CAP CDS. Use these steps to add function-call actions (DataFieldForAction) and intent-based navigation (DataFieldForIntentBasedNavigation), place actions inline inside the form toolbar, control visibility/enablement, pass context, and emphasize primary form actions.

**TAGS**: fiori-elements-framework, annotations, FieldGroup, DataFieldForAction, DataFieldForIntentBasedNavigation, UI.ReferenceFacet, UI.Identification, UI.StatusInfo, inline, UI.Emphasized, OperationAvailable

**STEP**: 1 — Add action buttons to a FieldGroup (form)
**DESCRIPTION**: Insert DataFieldForAction and DataFieldForIntentBasedNavigation entries into the FieldGroup Data collection. These buttons are rendered in the section toolbar (default) or in the form toolbar when Inline is set to true. Use the XML, ABAP CDS, or CAP CDS snippet matching your project to declare the form fields and actions.
**LANGUAGE**: XML
**CODE**:
```xml
<Annotation Term="UI.FieldGroup" Qualifier="TechnicalData">
    <Record>
        <PropertyValue Property="Data">
            <Collection>
                <Record Type="UI.DataField">
                    <PropertyValue Property="Value" Path="Width"/>
                    <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/Medium"/>
                </Record>
                <Record Type="UI.DataField">
                    <PropertyValue Property="Value" Path="Depth"/>
                    <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/Medium"/>
                </Record>
                ...
                <Record Type="UI.DataFieldForAction">
                    <PropertyValue Property="Label" String="Copy"/>
                    <PropertyValue Property="Action" String="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductCopy"/>
                </Record>
                <Record Type="UI.DataFieldForIntentBasedNavigation">
                    <PropertyValue Property="Label" String="Manage Products (ST)" />
                    <PropertyValue Property="SemanticObject" String="EPMProduct" />
                </Record>
            </Collection>
        </PropertyValue>
        <PropertyValue Property="Label" String="Technical Data"/>
    </Record>
</Annotation>
```

**LANGUAGE**: ABAP
**CODE**:
```abap
@UI.fieldGroup: [
  {
    importance: #MEDIUM,
    position: 10,
    qualifier: 'TechnicalData',
    groupLabel: 'Technical Data'
  }
]
WIDTH;

@UI.fieldGroup: [
  {
    importance: #MEDIUM,
    position: 20,
    qualifier: 'TechnicalData'
  }
]
DEPTH;

@UI.fieldGroup: [
  {
    label: 'Copy',
    dataAction: 'STTA_C_MP_ProductCopy',
    type: #FOR_ACTION,
    position: 30,
    qualifier: 'TechnicalData'
  },
  {
    label: 'Manage Products (ST)',
    type: #FOR_INTENT_BASED_NAVIGATION,
    position: 40,
    qualifier: 'TechnicalData'
  }
]

@Consumption.semanticObject: 'EPMProduct'
product;
```

**LANGUAGE**: CAP CDS
**CODE**:
```cap
UI.FieldGroup #TechnicalData : {
    Data : [
        {
            $Type : 'UI.DataField',
            Value : Width,
            ![@UI.Importance] : #Medium
        },
        {
            $Type : 'UI.DataField',
            Value : Depth,
            ![@UI.Importance] : #Medium
        },
        {
            $Type : 'UI.DataFieldForAction',
            Label : 'Copy',
            Action : 'STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductCopy'
        },
        {
            $Type : 'UI.DataFieldForIntentBasedNavigation',
            Label : 'Manage Products (ST)',
            SemanticObject : 'EPMProduct'
        }
    ],
    Label : 'Technical Data'
}
```

**STEP**: 2 — Link FieldGroup to a ReferenceFacet (render the form on the object page)
**DESCRIPTION**: Reference the FieldGroup via UI.ReferenceFacet so the form appears as a facet on the object page. Use AnnotationPath '@UI.FieldGroup#Qualifier'.
**LANGUAGE**: XML
**CODE**:
```xml
<Annotation Term="UI.Facets">
    <Collection>
    ....
        <Record Type="UI.ReferenceFacet">
            <PropertyValue Property="Label" String="Technical Data"/>
            <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#TechnicalData"/>
        </Record>
    ....
    </Collection>
</Annotation>
```

**LANGUAGE**: ABAP
**CODE**:
```abap
@UI.Facet: [
  {
    label: 'Technical Data',
    targetQualifier: 'TechnicalData',
    type: #FIELDGROUP_REFERENCE,
    purpose: #STANDARD
 }
]
```

**LANGUAGE**: CAP CDS
**CODE**:
```cap
{
   $Type             : 'UI.ReferenceFacet',
   Label             : 'Technical Data',
   ID                : 'TechnicalData',
   Target            : '@UI.FieldGroup#TechnicalData'
},
```

**STEP**: 3 — Add form actions via UI.Identification or UI.StatusInfo (OData V4 alternative)
**DESCRIPTION**: For OData V4 pages you can add DataFieldForAction entries inside UI.Identification or UI.StatusInfo and then reference that identification/status facet via UI.ReferenceFacet. DataFieldForAction entries in an unqualified UI.Identification become global actions unless marked as determining.
**LANGUAGE**: XML (ReferenceFacet to Identification)
**CODE**:
```xml
<Annotation Term="UI.Facets">
    <Collection>
    ....
        <Record Type="UI.ReferenceFacet">
            <PropertyValue Property="Label" String="Technical Data"/>
            <PropertyValue Property="Target" AnnotationPath="@UI.Identification#ID"/>
        </Record>
    ....
    </Collection>
</Annotation>
```

**LANGUAGE**: ABAP (ReferenceFacet to Identification)
**CODE**:
```abap
@UI.Facet: [
  {
    label: 'Technical Data',
    targetQualifier: 'ID',
    type: #IDENTIFICATION_REFERENCE,
    purpose: #STANDARD
  }
]
```

**LANGUAGE**: CAP CDS (ReferenceFacet to Identification)
**CODE**:
```cap
  {
        $Type  : 'UI.ReferenceFacet',
        Label  : 'Technical Data',
        Target : '@UI.Identification#ID'
    },
```

**LANGUAGE**: XML (DataFieldForAction in UI.Identification)
**CODE**:
```xml
<Annotation Term="UI.Identification" Qualifier="ID">
    <Collection>
        ....
        <Record Type="UI.DataFieldForAction">
            <PropertyValue Property="Label" String="Break Up" />
            <PropertyValue Property="Action" String="com.sap.gateway.srvd.sadl_gw_appmusicdr_definition.v0001.BREAK_UP" />
        </Record>
        ....
    </Collection>
</Annotation>
```

**LANGUAGE**: ABAP (DataFieldForAction in UI.identification)
**CODE**:
```abap
@UI.identification: [
  {
    label: 'Break Up',
    dataAction: 'com.sap.gateway.srvd.sadl_gw_appmusicdr_definition.v0001.BREAK_UP',
    type: #FOR_ACTION,
    qualifier: 'ID'
  }
]
```

**LANGUAGE**: CAP CDS (DataFieldForAction in UI.Identification)
**CODE**:
```cap
    UI.Identification #ID : [{
        $Type  : 'UI.DataFieldForAction',
        Label  : 'Break Up',
        Action : ' com.sap.gateway.srvd.sadl_gw_appmusicdr_definition.v0001.BREAK_UP'
    }],
```

**LANGUAGE**: XML (DataFieldForAction in UI.StatusInfo)
**CODE**:
```xml
<Annotation Term="UI.StatusInfo" Qualifier="SI">
    <Collection>
        ....
        <Record Type="UI.DataFieldForAction">
            <PropertyValue Property="Label" String="Move Country" />
            <PropertyValue Property="Action" String="com.sap.gateway.srvd.sadl_gw_appmusicdr_definition.v0001.MOVE_COUNTRY" />
        </Record>
        ....
    </Collection>
</Annotation>
```

**LANGUAGE**: ABAP (UI.statusInfo)
**CODE**:
```abap
@UI.statusInfo: [
  {
    label: 'Move Country',
    dataAction: 'com.sap.gateway.srvd.sadl_gw_appmusicdr_definition.v0001.MOVE_COUNTRY',
    type: #FOR_ACTION,
    qualifier: 'SI'
  }
]
```

**LANGUAGE**: CAP CDS (UI.StatusInfo)
**CODE**:
```cap
    UI.StatusInfo #SI : [{
        $Type  : 'UI.DataFieldForAction',
        Label  : 'Move Country',
        Action : ' com.sap.gateway.srvd.sadl_gw_appmusicdr_definition.v0001.MOVE_COUNTRY'
    }],
```

**STEP**: 4 — Place form actions inside the form toolbar (inline=true)
**DESCRIPTION**: To render a FieldGroup action inside the form toolbar (instead of the section toolbar) set Inline to true on the DataFieldForAction. Use the example below and match format to your annotation source.
**LANGUAGE**: XML
**CODE**:
```xml
<Annotation Term="UI.FieldGroup" Qualifier="OrderData">
    <Record Type="UI.FieldGroupType">
        <PropertyValue Property="Data">
            <Collection>
                <Record Type="UI.DataFieldForAction">
                    <PropertyValue Property="Label" String="Facet Form Action" />
                    <PropertyValue Property="Action" String="com.c_salesordermanage_sd.FacetFormAction" />
                    <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High" />
                </Record>
                <Record Type="UI.DataFieldForAction">
                    <PropertyValue Property="Label" String="Facet Form Action at Form Level" />
                    <PropertyValue Property="Action" String="com.c_salesordermanage_sd.FacetFormAction2" />
                    <PropertyValue Property="Inline" Bool="true" />
                    <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High" />
                </Record>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>
```

**LANGUAGE**: ABAP
**CODE**:
```abap
@UI.fieldGroup: [
  {
    importance: #HIGH,
    label: 'Facet Form Action',
    dataAction: 'com.c_salesordermanage_sd.FacetFormAction',
    type: #FOR_ACTION,
    position: 1 ,
    qualifier: 'OrderData'
  },
  {
    importance: #HIGH,
    label: 'Facet Form Action at Form Level',
    dataAction: 'com.c_salesordermanage_sd.FacetFormAction2',
    type: #FOR_ACTION,
    position: 2 ,
    qualifier: 'OrderData'
  }
]
```

**LANGUAGE**: CAP CDS
**CODE**:
```cap
FieldGroup #OrderData: {Data : [
    {
        $Type             : 'UI.DataFieldForAction',
        Label             : 'Facet Form Action',
        Action            : 'com.c_salesordermanage_sd.FacetFormAction',
        ![@UI.Importance] : #High
    },{
        $Type             : 'UI.DataFieldForAction',
        Label             : 'Facet Form Action at Form Level',
        Action            : 'com.c_salesordermanage_sd.FacetFormAction2',
        Inline            : true,
        ![@UI.Importance] : #High
    }
]}
```

**STEP**: 5 — Visibility and enablement rules for form actions
**DESCRIPTION**: Control rendering and enablement:
- Use UI.Hidden to hide the action button entirely.
- Use Core.OperationAvailable:
  - If OperationAvailable is a static false value, the action is not rendered.
  - If OperationAvailable is true or omitted (or only the term is provided), the button is enabled.
  - If OperationAvailable is path-bound, the button is enabled when the path evaluates to true and disabled when false.
- For DataFieldForIntentBasedNavigation: RequiresContext must be false to pass page context; true will error for form buttons.
(See also the inline example and contextual passing in next steps.)
**LANGUAGE**: XML
**CODE**:
```xml
<!-- Example reference to Core.OperationAvailable usage (term-only example) -->
<Annotation Term="Core.OperationAvailable"/>
```

**STEP**: 6 — Passing context on invocation
**DESCRIPTION**: When the action is a bound OData action, the current page context (the entity) is passed to the action. For unbound actions, no context is passed. For intent-based navigation (DataFieldForIntentBasedNavigation), set RequiresContext to false to pass the page context for a form action; RequiresContext=true is invalid for form buttons.

**STEP**: 7 — Emphasize the most important form action (UI.Emphasized)
**DESCRIPTION**: Mark the primary form action to make it visually prominent using UI.Emphasized. Emphasized can be a static true, an annotation-term-only, or a path expression. Examples below show different emphasis variants and an intent-based navigation emphasis.
**LANGUAGE**: XML
**CODE**:
```xml
<Record Type="UI.DataFieldForAction">
    <PropertyValue Property="Label" String="Static Action" />
    <PropertyValue Property="Action" String="com.c_salesordermanage_sd.DummyStaticAction" />
    <Annotation Term="UI.Emphasized" />
</Record>
<Record Type="UI.DataFieldForAction">
    <PropertyValue Property="Label" String="Static Action" />
    <PropertyValue Property="Action" String="com.c_salesordermanage_sd.DummyStaticAction" />
    <Annotation Term="UI.Emphasized" Bool="true" />
</Record>
<Record Type="UI.DataFieldForAction">
    <PropertyValue Property="Label" String="Static Action" />
    <PropertyValue Property="Action" String="com.c_salesordermanage_sd.DummyStaticAction" />
    <Annotation Term="UI.Emphasized" Path="…" />
</Record>
```

**LANGUAGE**: XML
**CODE**:
```xml
<Annotation Term="UI.LineItem">
<Collection>
<Record Type="UI.DataFieldForIntentBasedNavigation" >
     <PropertyValue Property="Label" String="IBN"/>
     <PropertyValue Property="SemanticObject" String="SalesOrder"/>
     <PropertyValue Property="Action" String="manageInline"/>
     <PropertyValue Property="RequiresContext" Bool="false"/>
     <Annotation Term="UI.Emphasized" Bool="true" />
</Record>
</Collection>
</Annotation>
```

**LANGUAGE**: ABAP
**CODE**:
```abap
@UI.lineItem: [{
  label: 'IBN',
  type: #FOR_INTENT_BASED_NAVIGATION,
  emphasized: true,
  requiresContext: true,
  semanticObjectAction: 'manageInline',
  semanticObject: 'SalesOrder'
}]
```

**LANGUAGE**: CAP CDS
**CODE**:
```cap
{
    $Type               : 'UI.DataFieldForAction',
    Label               : 'Static Action',
    Action              : 'com.c_salesordermanage_sd.DummyStaticAction',
    ![@UI.Emphasized]   : <<Path>>
}

{
    $Type               : 'UI.DataFieldForIntentBasedNavigation',
    SemanticObject      : 'SalesOrder',
    Action              : 'manageInline',
    Label               : 'IBN',
    RequiresContext     : false,
    ![@UI.Emphasized]   : true
}
```

**STEP**: 8 — Additional notes and references
**DESCRIPTION**:
- For OData V2: form action button styles can be changed via UI adaptations.
- Best practice: place the most important action as far left as possible. See Action Placement: https://experience.sap.com/fiori-design-web/action-placement/
- For external navigation configuration see configuring-external-navigation-1d4a0f9.md.
- To trigger actions connected to a field value on a form, see Adding Actions to Tables: adding-actions-to-tables-b623e0b.md.

**LANGUAGE**: Markdown
**CODE**:
```markdown
Image used in documentation: images/Placing_Form_Actions_Inside_the_Form_Toolbar_d513ccf.png
References:
- configuring-external-navigation-1d4a0f9.md
- adding-actions-to-tables-b623e0b.md
- Action placement guidance: https://experience.sap.com/fiori-design-web/action-placement/
```


**TITLE**: Adding Actions to Tables (Fiori Elements) — Action & Annotation Recipes

**INTRODUCTION**: Practical, code-focused recipes for enabling and controlling table actions (Create, Delete, custom actions, inline actions, navigation actions) in SAP Fiori elements. Includes XML annotation, ABAP CDS, and CAP CDS examples plus manifest.json settings. Use these snippets directly in metadata/annotations or manifest to enable behavior in list reports and object pages.

**TAGS**: fiori-elements, annotations, OData, UI.LineItem, NavigationRestrictions, InsertRestrictions, DeleteRestrictions, manifest.json, CAP, ABAP CDS, XML

STEP: 1 — Enable Create via NavigationRestrictions (XML)
DESCRIPTION: Use Org.OData.Capabilities.V1.NavigationRestrictions with InsertRestrictions for a navigation property. When Insertable=true on the parent navigation restriction, the related entity set is insertable (Create button enabled).
LANGUAGE: XML
CODE:
```xml
<Annotations Target="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_Product">
  <Annotation Term="Capabilities.NavigationRestrictions">
    <Record>
        <PropertyValue Property="RestrictedProperties">
          <Collection>
            <Record>
               <PropertyValue Property="NavigationProperty" NavigationPropertyPath="to_ProductText"/>
               <PropertyValue Property="InsertRestrictions">
                  <Record>
                     <PropertyValue Property="Insertable" Bool="true"/>
                     <!--Example with Boolean value for InsertRestriction-->
                     <!-- <PropertyValue Property="Insertable" Path="Insertable"/>-->
                     <!--Example with path for InsertRestriction-->
                  </Record>
               </PropertyValue>
           </Record>
          </Collection>
          </PropertyValue>
      </Record>
    </Annotation>
</Annotations>
```

STEP: 2 — Enable Create via Behavior Definition (ABAP CDS)
DESCRIPTION: In RAP behavior definitions, enable create/delete/update for an entity and for its association. No separate ABAP CDS metadata annotation is required when behavior defines insertability.
LANGUAGE: ABAP CDS
CODE:
```
define behavior for STTA_C_MP_Product
{
  create;
  delete;
  update;

  association _ProductText
  { create;  }
};
```

STEP: 3 — Enable Insert via InsertRestrictions (XML)
DESCRIPTION: Use Capabilities.InsertRestrictions on the table entity set directly to enable/disable Create if NavigationRestrictions is not present or does not take precedence.
LANGUAGE: XML
CODE:
```xml
<Annotations Target="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductText">
  <Annotation Term="Capabilities.InsertRestrictions">
    <Record>
       <PropertyValue Property="Insertable" Bool="true" />
                    <!--Example with Boolean value for InsertRestriction-->

    </Record>
  </Annotation>
</Annotations>
```

STEP: 4 — Enable Insert via CAP CDS (InsertRestrictions)
DESCRIPTION: CAP CDS annotation form of InsertRestrictions when using CAP. Use annotate block to set Insertable true for the entity.
LANGUAGE: CAP CDS
CODE:
```
annotate STTA_PROD_MAN.STTA_C_MP_ProductText with @(
  Capabilities.InsertRestrictions : {
    Insertable : true,
  }
);
```

STEP: 5 — Disable Delete Button (XML DeleteRestrictions example)
DESCRIPTION: Use Capabilities.DeleteRestrictions on an entity set to disable Delete (Deletable=false). If not provided, Delete is shown by default.
LANGUAGE: XML
CODE:
```xml
<Annotations Target="SAP__self.Container/SalesOrderManage">
   <Annotation Term="SAP__capabilities.DeleteRestrictions">
      <Record>
         <PropertyValue Property="Deletable" Bool="false"/>
      </Record>
   </Annotation>
</Annotations>
```

STEP: 6 — Prevent Delete via NavigationRestrictions (XML)
DESCRIPTION: NavigationRestrictions on the parent entity set can override child Delete behavior. If NavigationRestrictions sets Deletable=false, the child Delete button is never visible.
LANGUAGE: XML
CODE:
```xml
<Annotations Target="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_Product">
  <Annotation Term="Capabilities.NavigationRestrictions">
    <Record>
        <PropertyValue Property="RestrictedProperties">
          <Collection>
            <Record>
               <PropertyValue Property="NavigationProperty" NavigationPropertyPath="to_ProductText"/>
               <PropertyValue Property="DeleteRestrictions">
                  <Record>
                     <PropertyValue Property="Deletable" Bool="false"/>
                  </Record>
               </PropertyValue>
           </Record>
          </Collection>
          </PropertyValue>
      </Record>
    </Annotation>
</Annotations>
```

STEP: 7 — Conditional Delete with deletable-path (XML)
DESCRIPTION: Use Org.OData.Capabilities.V1.DeleteRestrictions with Deletable Path to enable/disable Delete per entity instance based on a boolean property (e.g., Delete_mc). Do not use sap:deletable when using deletable-path.
LANGUAGE: XML
CODE:
```xml
<Annotations Target="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_Product">
    <Annotation Term="Org.OData.Capabilities.V1.DeleteRestrictions">
        <Record>
            <PropertyValue Property="Deletable" Path="Delete_mc"/>
        </Record>
    </Annotation>
</Annotations>
```

STEP: 8 — Conditional Delete with deletable-path (CAP CDS)
DESCRIPTION: CAP CDS form that maps Deletable to a property (Delete_mc) for the entity.
LANGUAGE: CAP CDS
CODE:
```
annotate STTA_C_MP_Product with @(
    Capabilities.DeleteRestrictions : {
        Deletable : Delete_mc
    }
);
```

STEP: 9 — App-Specific Custom Actions via manifest.json (ordering & custom actions)
DESCRIPTION: Define custom table toolbar actions or reposition standard actions in manifest.json using controlConfiguration for the target route. Use anchor/placement to position actions relative to standard actions like StandardAction::Create.
LANGUAGE: JSON
CODE:
```
{ "sap.ui5": {
     "routing": {
        "targets": {
            "SalesOrderManageList": {
                "options": {
                    "settings": {
                        "controlConfiguration": {
                            "@com.sap.vocabularies.UI.v1.LineItem": {
                                "actions": { "StandardAction::Delete": {
                                    "position": {
                                        "anchor": "StandardAction::Create",
                                        "placement": "Before"
                                        }
                                    },
                                    "CustomAction": {
                                        "press": "SalesOrder.custom.CustomActions.CustomAction1",
                                        "enabled": true, "text": "Custom Action",
                                        "command": "COMMON", "position": {
                                            "anchor": "StandardAction::Create",
                                            "placement": "After"
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
```

STEP: 10 — Enable Inline Delete for Table Rows (manifest tableSettings)
DESCRIPTION: Enable inline deletion buttons at the end of each responsive table row using tableSettings.inlineDelete: true. Note: inlineDelete works only for responsive tables and cannot be combined with multiselect.
LANGUAGE: JSON
CODE:
```
"tableSettings": {
     "inlineDelete": true
}
```

STEP: 11 — Define Annotation-Based Actions (UI.LineItem XML)
DESCRIPTION: Create toolbar and inline row actions using UI.LineItem records. Use UI.DataFieldForAction for OData-bound actions and UI.DataFieldForIntentBasedNavigation for outbound navigation. Set Inline = true to render action as a per-row column.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="UI.LineItem">
   <Collection>
      <Record Type="UI.DataFieldForAction">
         <PropertyValue Property="Label" String="Copy with new Supplier"/>
         <PropertyValue Property="Action"
            String="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductCopywithparams"/>
         <PropertyValue Property="InvocationGrouping"
            EnumMember="UI.OperationGroupingType/Isolated"/>
      </Record>
      <Record Type="UI.DataFieldForAction">
         <PropertyValue Property="Label" String="Activate"/>
         <PropertyValue Property="Action"
            String="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductActivation"/>
         <PropertyValue Property="InvocationGrouping"
            EnumMember="UI.OperationGroupingType/ChangeSet"/>
      </Record>
      <Record Type="UI.DataField">
         <PropertyValue Property="Value" Path="Product"/>
         <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
      </Record>
      <Record Type="UI.DataField">
         <PropertyValue Property="Value" Path="ProductCategory"/>
         <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
      </Record>
      <Record Type="UI.DataField">
         <PropertyValue Property="Value" Path="to_Supplier/CompanyName"/>
         <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
      </Record>
      <Record Type="UI.DataField">
         <PropertyValue Property="Criticality" Path="to_StockAvailability/StockAvailability"/>
         <PropertyValue Property="Value" Path="to_StockAvailability/StockAvailability"/>
         <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
      </Record>
      <Record Type="UI.DataField">
         <PropertyValue Property="Value" Path="Price"/>
         <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
      </Record>
      <Record Type="UI.DataFieldForAction">
         <PropertyValue Property="Label" String="Copy"/>
         <PropertyValue Property="Action"
            String="STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductCopy"/>
         <PropertyValue Property="Inline" Bool="true"/>
         <PropertyValue Property="InvocationGrouping"
            EnumMember="UI.OperationGroupingType/Isolated"/>
      </Record>
      <Record Type="UI.DataFieldForIntentBasedNavigation">
         <PropertyValue Property="Label" String="Manage Products (ST)"/>
         <PropertyValue Property="SemanticObject" String="EPMProduct"/>
         <PropertyValue Property="Action" String="manage_st"/>
         <PropertyValue Property="Inline" Bool="true"/>
      </Record>

      <Record Type="UI.DataFieldWithIntentBasedNavigation">
         < PropertyValue Property ="Label" String ="Weight (with IBN)" />
         < PropertyValue Property ="Action" String ="manage_st_test" />
         <PropertyValue Property="Value" Path="Weight"/>
         <PropertyValue Property="SemanticObject" String="EPMProduct" />
          <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
      </Record>
    </Collection>
</Annotation>
```

STEP: 12 — UI.LineItem (ABAP CDS example)
DESCRIPTION: ABAP CDS form of UI.lineItem for the same toolbar/inline actions. Use positions, types (#FOR_ACTION, #STANDARD) and invocationGrouping.
LANGUAGE: ABAP CDS
CODE:
```
@UI.lineItem: [
  {
    label: 'Copy with new Supplier',
    dataAction: 'PUSHDOWN:STTA_C_MP_ProductCopywithparams',
    invocationGrouping: #ISOLATED,
    type: #FOR_ACTION,
    position: 1
  },
  {
    label: 'Activate',
    dataAction: 'PUSHDOWN:STTA_C_MP_ProductActivation',
    invocationGrouping: #CHANGE_SET,
    type: #FOR_ACTION,
    position: 2
  },
  {
    label: 'Product',
    importance: #HIGH,
    value: 'PRODUCT',
    type: #STANDARD,
    position: 3
  },
  {
    label: 'Copy',
    dataAction: 'PUSHDOWN:STTA_C_MP_ProductCopy',
    invocationGrouping: #ISOLATED,
    type: #FOR_ACTION,
    position: 8
  }
]
```

STEP: 13 — UI.LineItem (CAP CDS example)
DESCRIPTION: CAP CDS JSON-like annotation for UI.LineItem. Use $Type to distinguish action types, Inline true to render per-row.
LANGUAGE: CAP CDS
CODE:
```
UI.LineItem : [
    {
        $Type : 'UI.DataFieldForAction',
        Label : 'Copy with new Supplier',
        Action : 'STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductCopywithparams',
        InvocationGrouping : #Isolated
    },
    {
        $Type : 'UI.DataFieldForAction',
        Label : 'Activate',
        Action : 'STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductActivation',
        InvocationGrouping : #ChangeSet
    },
    {
        $Type : 'UI.DataField',
        Value : Product,
        ![@UI.Importance] : #High
    },
    {
        $Type : 'UI.DataField',
        Value : ProductCategory,
        ![@UI.Importance] : #High
    },
    {
        $Type : 'UI.DataField',
        Value : to_Supplier.CompanyName,
        ![@UI.Importance] : #High
    },
    {
        $Type : 'UI.DataField',
        Criticality : to_StockAvailability.StockAvailability,
        Value : to_StockAvailability.StockAvailability,
        ![@UI.Importance] : #High
    },
    {
        $Type : 'UI.DataField',
        Value : Price,
        ![@UI.Importance] : #High
    },
    {
        $Type : 'UI.DataFieldForAction',
        Label : 'Copy',
        Action : 'STTA_PROD_MAN.STTA_PROD_MAN_Entities/STTA_C_MP_ProductCopy',
        Inline : true,
        InvocationGrouping : #Isolated
    },
    {
        $Type : 'UI.DataFieldForIntentBasedNavigation',
        Label : 'Manage Products (ST)',
        SemanticObject : 'EPMProduct',
        Action : 'manage_st',
        Inline : true
    },
    {
        $Type : 'UI.DataFieldWithIntentBasedNavigation',
        Label : 'Weight (with IBN)',
        Value : Weight,
        SemanticObject : 'EPMProduct',
        Action : 'manage_st'
    }
]
```

STEP: 14 — Render Inline Action as Icon (DataFieldForAction, XML)
DESCRIPTION: Replace inline action text with an icon via IconUrl. Icon label becomes tooltip. Note: Criticality is ignored for icon inline actions.
LANGUAGE: XML
CODE:
```
<Record Type="UI.DataFieldForAction">
    <PropertyValue Property="Label" String="Navigate via Action"/>
    <PropertyValue Property="Action" String="com.c_salesordermanage_sd.ActionNavigation"/>
    <PropertyValue Property="Inline" Bool="true"/>
    <PropertyValue Property="IconUrl" String="sap-icon://arrow-right"/>
</Record>
```

STEP: 15 — Intent-Based Inline Action with Icon (XML)
DESCRIPTION: Inline intent-based navigation button with icon (IconUrl). Use RequiresContext true if the intent needs the current row context.
LANGUAGE: XML
CODE:
```xml
<Record Type="UI.DataFieldForIntentBasedNavigation">
    <PropertyValue Property="SemanticObject" String="v4Freestyle"/>
    <PropertyValue Property="Action" String="Inbound"/>
    <PropertyValue Property="Label" String="IBN Inline"/>
    <PropertyValue Property="RequiresContext" Bool="true"/>
    <PropertyValue Property="Inline" Bool="true"/>
    <PropertyValue Property=" IconUrl" String="sap-icon://arrow-left"/>
</Record>
```

STEP: 16 — Enable/Disable Field Editing (UpdateRestrictions XML)
DESCRIPTION: Use Capabilities.UpdateRestrictions.Updatable with a Path boolean property to control editability of records/fields shown in the table.
LANGUAGE: XML
CODE:
```xml
<Annotations Target="com.c_salesordermanage_sd.EntityContainer/Material">
    <Annotation Term="Capabilities.UpdateRestrictions">
        <Record Type="Capabilities.UpdateRestrictionsType">
            <PropertyValue Property="Updatable" Path="owner.isUpdatable"/>
        </Record>
    </Annotation>
</Annotations>
```

STEP: 17 — Control Delete via DeleteRestrictions Path (XML)
DESCRIPTION: Apply Capabilities.DeleteRestrictions with Deletable Path to control delete availability per entity via owner.isDeletable.
LANGUAGE: XML
CODE:
```xml
<Annotations Target="com.c_salesordermanage_sd.EntityContainer/Material">
    <Annotation Term="Capabilities.DeleteRestrictions">
        <Record Type="Capabilities.DeleteRestrictionsType">
            <PropertyValue Property="Deletable" Path="owner.isDeletable"/>
        </Record>
    </Annotation>
</Annotations>
```

STEP: 18 — deletable-path / Capabilities in CDS (example)
DESCRIPTION: Example CAP/annotation snippet showing how to set Insertable/Deletable/Updatable flags inline for an entity (deletable-path style).
LANGUAGE: CAP CDS
CODE:
```
annotate com.c_salesordermanage_sd.SalesOrderManagewith @Capabilities: {Insertable: false, Deletable:'isDeletable', Updatable: true}
```

STEP: 19 — Enable Single-Select for Bound Action (manifest enableOnSelect)
DESCRIPTION: Configure annotation-based actions to enable only on single selection by setting enableOnSelect: "single" in manifest controlConfiguration for the LineItem/Chart action key.
LANGUAGE: JSON
CODE:
```
"@com.sap.vocabularies.UI.v1.LineItem": {
    "actions": {
        "DataFieldForAction::com.c_salesordermanage_sd.CreateWithSalesOrderType": {
            "enableOnSelect": "single" // Possible values: "single", "multi" (default)
        }
    }
}
```

STEP: 20 — POST-Based Create Dialog: Computed Default Value (XML)
DESCRIPTION: If POST-based create requires values for non-computed key fields or computed GUID key with text association, annotate with Core.ComputedDefaultValue to render dialog for entering key/defaults.
LANGUAGE: XML
CODE:
```xml
<Annotations Target="com.c_salesordermanage_sd.SalesOrderManage/ID">
    <Annotation Term="Common.Text" String="SalesOrder">
        <Annotation Term="UI.TextArrangement" EnumMember="UI.TextArrangementType/TextOnly" />
    </Annotation>
    <Annotation Term="Common.Label" String="Sales Order" />
    <Annotation Term="Core.ComputedDefaultValue" Bool="true" />
</Annotations>
```

STEP: 21 — POST-Based Create Dialog: ComputedDefaultValue (CAP CDS)
DESCRIPTION: CAP entity definition with Core.ComputedDefaultValue on a UUID key to trigger creation dialog for key entry when using POST-based create.
LANGUAGE: CAP CDS
CODE:
```
entity SalesOrderManage @(
    title        : 'Manage Sales Order'
) {
    key ID : UUID @(
            title         : 'Sales Order',
            Common        : {
                Text            : SalesOrder,
                TextArrangement : #TextOnly
            },
            Core.ComputedDefaultValue : true
        );
    .....
    .....
}
```

STEP: 22 — InsertRestrictions RequiredProperties (XML)
DESCRIPTION: Use InsertRestrictions.RequiredProperties to list properties that are required for create; these force dialog fields when using POST-based create.
LANGUAGE: XML
CODE:
```xml
<Annotation Term="Capabilities.InsertRestrictions">
    <Record Type="Capabilities.InsertRestrictionsType">
        <PropertyValue Property="Insertable" Bool="true"/>
        <PropertyValue Property="RequiredProperties">
            <Collection>
                <PropertyPath>PurchaseOrderByCustomer</PropertyPath>
            </Collection>
        </PropertyValue>
    </Record>
</Annotation>
```

STEP: 23 — InsertRestrictions RequiredProperties (CAP CDS)
DESCRIPTION: CAP CDS form of InsertRestrictions including RequiredProperties.
LANGUAGE: CAP CDS
CODE:
```
InsertRestrictions     : {
  Insertable         : true,
  RequiredProperties : [PurchaseOrderByCustomer]
}
```

STEP: 24 — Trigger Action from Field Value (DataFieldWithAction XML)
DESCRIPTION: Render a value as a link and trigger a bound action when clicked. Use UI.ParameterDefaultValue to pass the field to the action parameter (see next step).
LANGUAGE: XML
CODE:
```xml
<Record Type="UI.DataFieldWithAction">
    <PropertyValue Property="Value" Path="PurchaseOrderByCustomer"/>
    <PropertyValue Property="Action" String="com.c_salesordermanage_sd.ActionDataFieldWith"/>
    <PropertyValue Property="Label" String="Customer Reference"/>
</Record>
```

STEP: 25 — Pass Field Value to Action Parameter (ParameterDefaultValue XML)
DESCRIPTION: Use UI.ParameterDefaultValue annotation on the action parameter binding target to set a parameter by path (_it/<Property>).
LANGUAGE: XML
CODE:
```xml
<Annotations Target="com.c_salesordermanage_sd.ActionDataFieldWith(com.c_salesordermanage_sd.SalesOrderManage)/PurchaseOrderByCustomer">
    <Annotation Term="UI.ParameterDefaultValue" Path="_it/PurchaseOrderByCustomer"/>
    <Annotation Term="Common.Label" String="Customer Reference"/>
</Annotations>
```

STEP: 26 — Notes & Behavior Summary (short actionable reminders)
DESCRIPTION: Quick actionable rules to follow when implementing actions and restrictions:
- NavigationRestrictions on parent entity set take precedence over direct Insert/DeleteRestrictions on child entity sets.
- For deletable-path use a boolean property path and do not set sap:deletable in static annotations.
- Inline actions: set Inline = true in UI.DataFieldForAction or UI.DataFieldForIntentBasedNavigation; inline actions cannot use enableOnSelect and are row-context-only.
- Inline deletion requires responsive table type; inlineDelete cannot be enabled with multiselect.
- Delete action is transactional: if deletion of any selected record fails, no selected record is deleted.

fiori-elements
annotations
OData
UI.LineItem
NavigationRestrictions
InsertRestrictions
DeleteRestrictions
manifest.json
CAP
ABAP CDS
XML


**TITLE**: Add Confirmation Popovers to Actions with IsActionCritical Annotation

**INTRODUCTION**: Add a confirmation popover that appears when a user triggers an action. This is supported only for actions without an action parameter dialog. Use the IsActionCritical annotation on the action to enable the confirmation popover. Examples shown for XML annotations and CAP CDS annotations. Localize dialog text per app localization guidelines.

**TAGS**: fiori-elements, annotations, IsActionCritical, confirmation, CDS, XML, CAP

**STEP**: 1 — Verify action has no parameter dialog

**DESCRIPTION**: Confirm the target action does not use an action parameter dialog. The confirmation popover is supported only for actions without parameters. If the action has parameters, remove the parameter dialog or implement confirmation in a custom handler.

**LANGUAGE**: Notes

**CODE**:
```text
(Validation step — no code required)
```

**STEP**: 2 — Add XML annotation (local annotation file)

**DESCRIPTION**: Add the com.sap.vocabularies.Common.v1.IsActionCritical annotation with Bool="true" to the action in your local XML annotation file to enable the confirmation popover.

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="GWSAMPLE_BASIC.GWSAMPLE_BASIC_Entities/RegenerateAllData">
        <Annotation Term="com.sap.vocabularies.Common.v1.IsActionCritical" Bool="true"/>
</Annotations>
```

**STEP**: 3 — Add CAP CDS annotation (if using CAP)

**DESCRIPTION**: If using CAP, add the Common.IsActionCritical annotation to the action in your CDS model. Use the following snippet in your CAP CDS annotations.

**LANGUAGE**: CDS

**CODE**:
```

annotate GWSAMPLE_BASIC.RegenerateAllData with @(
    Common.IsActionCritical : true
); CDS
				Annotation
```

**STEP**: 4 — ABAP CDS note

**DESCRIPTION**: There is no ABAP CDS sample available for this annotation in this documentation. Use the local XML annotation approach for ABAP-based projects.

**LANGUAGE**: ABAP CDS

**CODE**:
```text
No ABAP CDS annotation sample is available. Please use the local XML annotation.
```

**STEP**: 5 — Add action-specific messages and localize

**DESCRIPTION**: Apps can provide action-specific texts for the confirmation dialog. Implement localization according to your app’s localization setup. See the project localization documentation for details.

**LANGUAGE**: Notes

**CODE**:
```text
See Localization of UI Texts: localization-of-ui-texts-b8cb649.md
```

fiori-elements annotations IsActionCritical confirmation CDS XML CAP


**TITLE**: Adding ConnectedFields to a Table (SAP Fiori elements, OData V4)

**INTRODUCTION**: This guide shows how to represent two semantically related properties in a single table column while keeping each field individually editable by adding UI.ConnectedFields. Includes XML annotation, ABAP CDS, and CAP CDS examples. Applicable only to SAP Fiori elements for OData V4.

**TAGS**: fiori-elements-framework, OData V4, annotations, UI.ConnectedFields, CDS, ABAP, CAP, XML

**STEP**: 1 — Prerequisites and purpose

**DESCRIPTION**: Ensure your app is SAP Fiori elements for OData V4. ConnectedFields group multiple DataField annotations into a single annotated column with a template and a label. Use a qualifier to reference the connected field set in UI.LineItem.

**LANGUAGE**: TEXT

**CODE**:
```text
No code for this step. Prerequisite: SAP Fiori elements for OData V4.
```

**STEP**: 2 — XML Annotation: Define UI.ConnectedFields and expose it as a table column

**DESCRIPTION**: Add a UI.ConnectedFields annotation on the target entity. Provide Label, Template and Data mapping for each field using Core.Dictionary. Then reference the connected fields from UI.LineItem using UI.DataFieldForAnnotation and Target="@UI.ConnectedFields#<Qualifier>".

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="TravelService.Travel">
	<Annotation Term="UI.ConnectedFields" Qualifier="TripDates">
		<Record Type="UI.ConnectedFieldsType">
			<PropertyValue Property="Label" String="Business Trip Dates"/>
			<PropertyValue Property="Template" String="{BeginDate}/{EndDate}"/>
			<PropertyValue Property="Data">
				<Record Type="Core.Dictionary">
					<PropertyValue Property="BeginDate">
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="BeginDate"/>
						</Record>
					</PropertyValue>
					<PropertyValue Property="EndDate">
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="EndDate"/>
						</Record>
					</PropertyValue>
				</Record>
			</PropertyValue>
		</Record>
	</Annotation>
	<Annotation Term="UI.LineItem">
		<Collection>
			<Record Type="UI.DataFieldForAnnotation">
				<PropertyValue Property="Target" AnnotationPath="@UI.ConnectedFields#TripDates"/>
			</Record>
		</Collection>
	</Annotation>
</Annotations>
```

**STEP**: 3 — ABAP CDS Annotation: connected fields and line item entry

**DESCRIPTION**: In ABAP CDS, annotate the view (e.g., view Travel). Use @UI.connectedField (array) with name, qualifier, template, and groupLabel. Add @UI.lineItem entry of type #AS_CONNECTED_FIELDS referencing the valueQualifier to display the connected fields as a single column in the table.

**LANGUAGE**: ABAP

**CODE**:
```
annotate view Travel with {
    @UI.connectedField : [
        {
           name: 'Dates',
           qualifier: 'TripDates',
           template: '{BeginDate} / {EndDate}',
           groupLabel: 'Business Trip Dates'
        }
    ]

    @UI.lineItem: [
        {
            type: #AS_CONNECTED_FIELDS,
            valueQualifier: 'TripDates'
        }
    ]
}
```

**STEP**: 4 — CAP CDS Annotation: service-level annotation for ConnectedFields

**DESCRIPTION**: For CAP model annotation, annotate the service (e.g., service.Travel). Use UI.ConnectedFields with qualifier (#TripDates) containing Label, Template and Data where each field is a UI.DataField with Value. Then add UI.LineItem with a DataFieldForAnnotation Target referencing the connected fields.

**LANGUAGE**: CDS

**CODE**:
```
annotate service.Travel @(
    UI.ConnectedFields #TripDates: {
          Label: 'Business Trip Dates',
          Template: '{BeginDate} / {EndDate}',
          Data: {
              BeginDate: {
                  $Type: 'UI.DataField',
                  Value: BeginDate

              },
              EndDate: {
                  $Type: 'UI.DataField',
                  Value: EndDate}
          }
      },

    UI.LineItem: [
        {
          $Type: 'UI.DataFieldForAnnotation',
          Target: '@UI.ConnectedFields#TripDates'
        }
    ]
)
```

**STEP**: 5 — Display behavior and horizontal alignment override

**DESCRIPTION**: By default, the content of the connected-fields column is left-aligned. You can override horizontal alignment using manifest settings for annotation-based table columns. See the referenced documentation for manifest configuration details.

**LANGUAGE**: TEXT

**CODE**:
```text
Default behavior: content is left-aligned.
Override method: use manifest settings to change horizontal alignment for annotation-based table columns (see "Overriding the Horizontal Alignment of Annotation-Based Table Columns").
```

**STEP**: 6 — Semantic key and editing status notes

**DESCRIPTION**: Adding a semantic key to connected fields does not affect editing status. See documentation on Editing Status and Handling Semantic Key Fields for behavior details when working with semantic key fields.

**LANGUAGE**: TEXT

**CODE**:
```text
Note: Adding a semantic key to connected fields does not affect editing status.
Refer to: "Editing Status" and "Handling Semantic Key Fields" for details.
```

fiori-elements-framework
OData V4
annotations
UI.ConnectedFields
CDS
ABAP
CAP
XML