### Install Dependencies

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/INDEX.md

Installs all necessary project dependencies. Run this before starting the development server.

```bash
npm install
```

--------------------------------

### Navigate to Core Reference Files

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/README.md

This section outlines the structure of the documentation, guiding users through the core reference files in a recommended order, starting with the index for quick navigation.

```markdown
# SAP Fiori Elements Feature Showcase - Technical Reference Documentation

## What is This?

Complete technical reference documentation for the **SAP Fiori Elements Feature Showcase** project—a production-ready demonstration of List Report and Object Page floorplan capabilities built with CAP (Cloud Application Programming) and SAP Fiori elements v4.

This reference documents:
- ✅ Every exported function, class, method, and module
- ✅ Complete entity and type definitions with field details
- ✅ All service endpoints and action signatures
- ✅ Configuration options and manifest settings
- ✅ Annotation vocabulary and metadata definitions
- ✅ Extension points and controller hooks
- ✅ Code patterns and implementation examples
- ✅ Application structure and data flow

**No marketing copy, no tutorials—only precise technical facts.**

---

## Documentation Structure

### Core Reference Files (Read in Order)

1. **[INDEX.md](./INDEX.md)** ⭐ **START HERE**
   - Quick navigation to all topics
   - Use case index ("I need to...")
   - Key entities and actions at a glance
   - Quick reference by architecture layer

2. **[01-services-api.md](./01-services-api.md)**
   - OData service contract (LROPODataService)
   - 12 exported entities with properties
   - 6 bound and unbound actions with signatures
   - Service handlers and their behavior
   - Code examples for common patterns

3. **[02-data-entities-schema.md](./02-data-entities-schema.md)**
   - Complete entity hierarchy diagram
   - 13 entity definitions with all fields
   - Field types, defaults, and constraints
   - Associations and compositions
   - Code lists and reference entities

4. **[03-controller-extensions.md](./03-controller-extensions.md)**
   - RootEntityLRExtension (List Report) - 9 methods
   - RootEntityOPExtension (Object Page) - 5 methods
   - Tree table extension hooks
   - Method signatures and parameters
   - Integration with manifest

5. **[04-configuration-manifest.md](./04-configuration-manifest.md)**
   - manifest.json complete structure
   - 4 route definitions
   - Control configuration for tables and filters
   - Data source and model binding
   - Cross-navigation setup
   - i18n and environment configuration

6. **[05-annotations-vocabulary.md](./05-annotations-vocabulary.md)**
   - UI annotations (LineItem, Facets, Chart, DataPoint)
   - Common annotations (ValueList, Text, SemanticObject)
   - Capability annotations (FilterRestrictions, UpdateRestrictions)
   - Field control annotations (Hidden, Importance)
   - Complete annotation examples from codebase

7. **[06-application-components.md](./06-application-components.md)**
   - 3 Fiori application structure (LROP, Worklist, Deliveries)
   - Component modules and configuration
   - Extension architecture
   - Data flow architecture diagram
   - Development server and deployment setup

8. **[07-code-patterns-examples.md](./07-code-patterns-examples.md)**
   - Service handler patterns (5 patterns)
   - Extension controller patterns (4 patterns)
   - Annotation patterns (5 patterns)
   - Manifest configuration patterns (4 patterns)
   - Utility functions and optimization techniques

---

```

--------------------------------

### Start Development Server

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/INDEX.md

Starts the development server, typically on ports 4004 and 4008. Use this for local development and testing.

```bash
cds watch
```

--------------------------------

### Custom Action Example in Manifest

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/03-controller-extensions.md

An example of a custom action configuration in the manifest.json, demonstrating how to specify the 'press' and 'enabled' methods from an extension controller.

```json
"CustomActionLR": {
  "press": ".extension.sap.fe.showcase.lrop.ext.controller.RootEntityLRExtension.messageBox",
  "enabled": ".extension.sap.fe.showcase.lrop.ext.controller.RootEntityLRExtension.enabledForSingleSelect",
  "visible": true,
  "text": "{i18n>CustomActionLR}"
}
```

--------------------------------

### Code Patterns and Examples

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/README.md

Presents various code patterns and implementation examples for services, controllers, annotations, and manifest configurations.

```APIDOC
## Code Patterns and Examples

### Description
This section provides practical code patterns and implementation examples for various aspects of the application, aiding developers in understanding and applying best practices.

### Patterns Covered
- **Service Handler Patterns**: 5 common patterns.
- **Extension Controller Patterns**: 4 common patterns.
- **Annotation Patterns**: 5 common patterns.
- **Manifest Configuration Patterns**: 4 common patterns.

### Additional Content
- **Utility Functions**: Examples of useful utility functions.
- **Optimization Techniques**: Techniques for optimizing application performance.
```

--------------------------------

### Fetch Specific Columns for Reduced Overhead

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/07-code-patterns-examples.md

This example demonstrates fetching only the necessary columns from a database table to minimize network and memory usage.

```typescript
const contact = await SELECT.one
  .from(Contacts, response.contact.ID)
  .columns((contact) => {
    contact.ID;
    contact.building;
    contact.street;
    // Only fetch needed columns
  });
```

--------------------------------

### i18n Keys Usage Examples

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/06-application-components.md

Demonstrates common patterns for using i18n keys within application templates. Keys are resolved at runtime from .properties files using the ResourceModel.

```json
"title": "{{appTitle}}",
"label": "{i18n>labelKey}",
"parameter": "@(title: '{i18n>parameterTitle}')"
```

--------------------------------

### Annotations and Vocabulary

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/README.md

Explains the UI, common, capability, and field control annotations used within the application, with complete examples.

```APIDOC
## Annotations and Vocabulary

### Description
This section covers the annotation vocabulary used to define the UI and behavior of Fiori Elements applications, including various types of annotations and their usage.

### Annotation Types
- **UI Annotations**: Includes LineItem, Facets, Chart, and DataPoint.
- **Common Annotations**: Covers ValueList, Text, and SemanticObject.
- **Capability Annotations**: Details FilterRestrictions and UpdateRestrictions.
- **Field Control Annotations**: Explains Hidden, Importance, and other field-level controls.

### Examples
Provides complete annotation examples derived from the codebase.
```

--------------------------------

### Singleton READ Handler Response

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/01-services-api.md

Example JSON response for a singleton READ handler, indicating feature control states.

```json
{
  "createHidden": false,
  "enabled": true
}
```

--------------------------------

### Define Custom Action in manifest.json

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Configure custom front-end actions in the manifest.json file. This example shows how to define a custom action with properties for press, enabled, visible, and text.

```json
"CustomActionSection" : {
    "press": "sap.fe.showcase.lrop.ext.CustomActions.messageBox",
    "enabled": "{= ${ui>/editMode} !== 'Editable'}",
    "visible" : true,
    "text": "{i18n>CustomActionSection}"
}
```

--------------------------------

### Custom i18n Property Example

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Example of a custom i18n property file entry for overriding UI texts. This specific entry customizes the cancel button text for the RootEntities.

```properties
C_COMMON_ACTION_PARAMETER_DIALOG_CANCEL|RootEntities = Custom cancel text
```

--------------------------------

### Configure Micro Chart Data Point with Criticality

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Configure a data point intended for a micro chart, including 'Value', 'MinimumValue', 'MaximumValue', and 'Criticality'. This setup is essential for charts that display criticality.

```cds
annotate srv.ChartDataEntities @(
    UI.DataPoint #lineChartWidth : {
        Value : integerValueWithUoM,
        MinimumValue : 0,
        MaximumValue : 100,
        Criticality : criticality_code,
    },
);
```

--------------------------------

### Custom Action Controller Implementation

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Implement custom action logic in a controller extension. This example shows a message box function and functions to control action enablement.

```typescript
... 
export default class RootEntityLRExtension extends ControllerExtension<ExtensionAPI> {
    messageBox() {
        MessageBox.alert("Button pressed");
    }
    enabled() {
        return true;
    }
    enabledForSingleSelect(oBindingContext: ODataContextBinding, aSelectedContexts: [Context]) {
        if (aSelectedContexts && aSelectedContexts.length === 1) {
            return true;
        }
        return false;
    }
}
```

--------------------------------

### Configure Link Target Behavior

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Control how a link opens by annotating the 'Value' property with @HTML5.LinkTarget. For example, setting it to '_blank' will open the link in a new tab.

```cds
annotate srv.RootEntities with {
    fieldWithURLtext @HTML5.LinkTarget : '_blank';
}
```

--------------------------------

### Run CAP Application in Watch Mode

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/06-application-components.md

Starts the CAP application in watch mode, enabling hot reloading for services and UI5 apps. It also specifies the default ports for OData services and the launchpad.

```bash
cds watch
# Starts:
# - OData service at http://localhost:4004/srv1
# - Launchpad at http://localhost:4008/$launchpad
# - UI5 apps (served)
```

--------------------------------

### Dependent Filtering for Multi-Input Value Help

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Annotate the region property to enable dependent filtering in a multi-input value help. This example uses a reference to the root entity's country to filter regions.

```cds
annotate schema.AssignedRegions with {
    region @(Common : {
        Text            : region.name,
        TextArrangement : #TextFirst,
        ValueListWithFixedValues: true,
        ValueList       : {
            Label          : '{i18n>Region}',
            CollectionPath : 'Regions',
            Parameters     : [
                {
                    $Type               : 'Common.ValueListParameterInOut',
                    ValueListProperty   : 'code',
                    LocalDataProperty   : region_code
                },
                {
                    $Type               : 'Common.ValueListParameterIn',
                    LocalDataProperty   : root.country_code,
                    ValueListProperty   : 'country_code',
                },

            ]
        }
    });
}
```

--------------------------------

### Format Code

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/INDEX.md

Formats the project's code according to Prettier standards. Run this to maintain consistent code style.

```bash
npm run prettier
```

--------------------------------

### Configure Header Information for Quick View

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Annotates the entity with header information, including title, description, and image URLs, to enhance the quick view's appearance.

```cds
annotate srv.Orders with @(
    UI.HeaderInfo :{
        TypeName : '{i18n>Order}',
        TypeNamePlural : '{i18n>Order.typeNamePlural}',
        Title          : {
            $Type : 'UI.DataField',
            Value : '{i18n>Order}',
        },
        Description    : {
            $Type : 'UI.DataField',
            Value : field,
        },
        ImageUrl : '',
        TypeImageUrl : 'sap-icon://blank-tag',
    },
);
```

--------------------------------

### Configuration and Manifest

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/README.md

Details the structure and configuration options within the manifest.json file, covering routes, controls, data sources, and navigation.

```APIDOC
## Configuration and Manifest

### Description
This section provides a detailed breakdown of the `manifest.json` file, explaining its structure and the various configuration options available for the application.

### Manifest Structure
- **Routes**: 4 route definitions are documented.
- **Control Configuration**: Configuration details for tables, filters, and other UI controls.
- **Data Binding**: Information on data source and model binding.
- **Navigation**: Setup for cross-navigation.
- **Environment**: Details on i18n and environment configuration.
```

--------------------------------

### QuickInfo Annotation for Tooltips

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/05-annotations-vocabulary.md

Provides tooltip text for elements. Use to offer additional information on hover.

```cds
property @Common.QuickInfo: 'Tooltip text'
```

--------------------------------

### Define Address Label for Communication Address

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

This snippet demonstrates how to define the label for a Communication.Address annotation. The label can be generated dynamically, for example, through a CAP function in the service.js file.

```cds
annotate srv.Contacts with @(
    ...
    Communication.Address : {
        ...
        label : addressLabel,
        ...
    }
);
```

--------------------------------

### Inbound Navigation Configuration

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/04-configuration-manifest.md

Defines how the application can be launched from the Fiori launchpad using a semantic object and action. Allows for additional unmapped parameters.

```json
"crossNavigation": {
  "inbounds": {
    "feature-showcase": {
      "signature": {
        "parameters": {},
        "additionalParameters": "allowed"
      },
      "semanticObject": "FeatureShowcase",
      "action": "manage",
      "title": "List Report and Object Page",
      "subTitle": "SAP Fiori elements V4 CAP"
    }
  },
  "outbounds": {
    "ExternalNavigation": {
      "semanticObject": "FeatureShowcaseOrder",
      "action": "manage"
    }
  }
}
```

--------------------------------

### Enable Full Screen Mode for Tables

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Set 'enableFullScreen' to true in the manifest.json file to add a button for viewing tables in full-screen mode.

```json
"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "childEntities1/@com.sap.vocabularies.UI.v1.LineItem": {
                    "tableSettings": {
                        ...
                        "enableFullScreen": true,
                        ...
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
},
```

--------------------------------

### Worklist Application File Structure

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/06-application-components.md

Illustrates the directory structure for the Worklist application, including webapp, i18n, and configuration files.

```text
app/worklist/
├── webapp/
│   ├── Component.ts
│   ├── manifest.json
│   └── i18n/
│       └── i18n.properties
├── package.json
├── tsconfig.json
├── annotations.cds
└── README.md
```

--------------------------------

### Value Help as Radio Buttons

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Use `@Common.ValueListWithFixedValues` and `@Common.ValueListShowValuesImmediately` to render value helps as radio buttons. This is suitable for smaller collections of possible values.

```cds
annotate schema.RootEntities with{
    criticality_code @(Common : {
        ValueListWithFixedValues,
        ValueListWithFixedValues.@Common.ValueListShowValuesImmediately,
    });
};
```

--------------------------------

### Define Mandatory Filter Fields

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Configure mandatory filter fields using `@Capabilities.FilterRestrictions.RequiredProperties`. This ensures users must provide input for specified fields in the filter bar. Example shown in `capabilities.cds`.

```cds
annotate srv.RootEntities with @(
    ... 
    Capabilities.FilterRestrictions : {
        ... 
        RequiredProperties : [
            stringProperty
        ],

    },
);
```

--------------------------------

### CAP Application Configuration

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/06-application-components.md

Configures CAP application features, launchpad version, and service requirements for different environments (production and development). It also enables integrations with destinations, HTML5 repository, and Workzone.

```json
"cds": {
  "features": {
    "assert_integrity": "db"
  },
  "launchpad": {
    "version": "1.145.0"
  },
  "requires": {
    "[production]": {
      "auth": "xsuaa",
      "db": "hana"
    },
    "[development]": {
      "auth": "dummy"
    },
    "destinations": true,
    "html5-repo": true,
    "workzone": true
  }
}
```

--------------------------------

### Value Help for Action Parameter

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Annotate an action parameter with Common.ValueList to provide a value help. The annotation must be inline with the parameter definition.

```cds
entity RootEntities as select from persistence.RootEntities actions {
    ...
    action changeCriticality (
        @( 
            title         : '{i18n>newCriticality}',
            UI.ParameterDefaultValue : 0,
            Common        : {
                ValueListWithFixedValues : true,
                ValueList : {
                    Label          : '{i18n>Criticality}',
                    CollectionPath : 'Criticality',
                    Parameters     : [
                    {
                        $Type             : 'Common.ValueListParameterInOut',
                        ValueListProperty : 'code',
                        LocalDataProperty : newCriticality
                    },
                    {
                        $Type             : 'Common.ValueListParameterDisplayOnly',
                        ValueListProperty : 'name'
                    },
                    ]
                }
            }
        )
        newCriticality : Integer);
    ...
};
```

--------------------------------

### Invoke CAP Action from Custom Action

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Use the SAP Fiori elements Edit-flow API's 'invokeAction' function to call CAP actions from a JavaScript function within a custom action. This example invokes the 'changeCriticality' action.

```typescript
... 
export default class RootEntityOPExtension extends ControllerExtension<ExtensionAPI> {
    ... 

    //Search-Term: #EditFlowAPI
    onChangeCriticality(oEvent: Button$PressEvent) {
        let sActionName = "LROPODataService.changeCriticality";
        this.base.getExtensionAPI().getEditFlow().invokeAction(sActionName, {
            contexts: oEvent.getSource().getBindingContext()! as Context,
            model: oEvent.getSource().getModel() as ODataModel,
            label: 'Confirm',
            invocationGrouping: "ChangeSet"
        }); //SAP Fiori elements EditFlow API
    }
}
```

--------------------------------

### Enable Live Mode in manifest.json

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Enable live mode to directly apply filters and search queries without a 'GO' button. This simplifies the user experience by removing the need for explicit submission.

```json
"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            "liveMode": true,
            ...
        }
    }
}
```

--------------------------------

### Invoke CAP Action with ChangeSet

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/03-controller-extensions.md

Invokes a CAP action ('changeCriticality') through the EditFlow API, grouping changes within a ChangeSet. Requires a button press event to get context and model. Displays an action parameter dialog if the action has parameters.

```typescript
onChangeCriticality(oEvent: Button$PressEvent) {
  const sActionName = "LROPODataService.changeCriticality";

  this.base
    .getExtensionAPI()
    .getEditFlow()
    .invokeAction(sActionName, {
      contexts: oEvent.getSource().getBindingContext()! as Context,
      model: oEvent.getSource().getModel() as ODataModel,
      label: "Confirm",
      invocationGrouping: "ChangeSet"
    });
}
```

--------------------------------

### Configure Multi-line Text Options in manifest.json

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Configure multi-line text display and edit behavior, including the number of lines and character limits, using `formatOptions` within the `manifest.json` file.

```json
"RootEntityObjectReport": {
    ... 
    "options": {
        "settings": {
            ... 
            "controlConfiguration": {
                ... 
                "@com.sap.vocabularies.UI.v1.FieldGroup#Section": {
                    "fields": {
                        "DataField::description": {
                            "formatOptions": {
                                "textLinesDisplay": 1,
                                "textLinesEdit": 3
                            }
                        },
                        "DataField::description_customGrowing": {
                            "formatOptions": {
                                "textMaxLines": "5",
                                "textMaxCharactersDisplay": 400,
                                "textExpandBehaviorDisplay" : "Popover"
                            }
                        }
                    }, 
                    ... 
                },
                ... 
            },
            ... 
        }
    }
},
```

--------------------------------

### Configure Custom i18n File

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Replace standard UI texts by referencing a custom i18n file in the manifest.json. This allows for localized text replacements.

```json
"RootEntityListReport": {
    "...": "...",
    "options": {
        "settings": {
            "...": "...",
            "enhanceI18n": "i18n/customI18N.properties",
            "...": "..."
        }
    }
},
```

--------------------------------

### Project Structure Overview

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/INDEX.md

This snippet displays the directory structure of the Fiori Elements Feature Showcase project. It highlights the organization of backend services, data models, and application components.

```tree
/workspace/home/fiori-elements-feature-showcase/ 
├── srv/                          # Backend services 
│   ├── list-report-srv.cds      # Service definition 
│   ├── list-report-srv.ts       # Service implementation 
│   └── worklist-srv.cds         # Worklist service 
├── db/                           # Data model 
│   ├── schema.cds               # Entity definitions 
│   └── common.cds               # Reusable types 
├── app/ 
│   ├── listreport-objectpage/   # LROP App 
│   │   ├── webapp/ 
│   │   │   ├── Component.ts 
│   │   │   ├── manifest.json 
│   │   │   └── ext/ 
│   │   │       ├── controller/  # Extension controllers 
│   │   │       └── fragment/    # Custom XML 
│   │   └── [8x layouts_*.cds]   # Annotations 
│   ├── worklist/                # Worklist App 
│   └── deliveries/              # Deliveries App 
├── package.json                 # Root dependencies 
└── tsconfig.json               # TypeScript config 
```

--------------------------------

### Application Version Configuration

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/04-configuration-manifest.md

Defines the version of the application. This is a standard JSON object within the manifest.

```json
"applicationVersion": {
  "version": "1.0.0"
}
```

--------------------------------

### Configure Cross Navigation in manifest.json

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Sets up the cross-navigation configuration in the application's manifest.json file. This defines the semantic object, action, and title for navigating to the application.

```json
"sap.app" : {
    ...
    "crossNavigation": {
        "inbounds": {
            "feature-showcase-worklist": {
                "signature": {
                    "parameters": {
                        "ID": {
                            "required": false
                        },
                        "field3": {
                            "required": false
                        },
                        "integerProperty": {
                            "required": false
                        }
                    },
                    "additionalParameters": "ignored"
                },
                "semanticObject": "FeatureShowcaseOrder",
                "action": "manage",
                "title": "Work List",
                "subTitle": "Manage"
            }
        }
    }
}
```

--------------------------------

### Action Menu with Bound and Unbound Actions Configuration

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/07-code-patterns-examples.md

Configure an action menu that groups both bound and unbound actions. This pattern renders as a dropdown button, supporting actions with single context, entity set level, or confirmation dialogs.

```json
{
  "actions": {
    "MoreActions": {
      "text": "{i18n>MoreActions}",
      "menu": [
        "DataFieldForAction::LROPODataService.changeCriticality",
        "DataFieldForAction::LROPODataService.EntityContainer.unboundAction",
        "DataFieldForAction::LROPODataService.criticalAction"
      ]
    }
  }
}
```

--------------------------------

### Configure Harvey Micro Chart DataPoint

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Sets up the DataPoint for the Harvey Micro Chart, defining the Value, MaximumValue, and Criticality.

```cds
annotate srv.RootEntities with @(
    ...
    UI.DataPoint #harveyChart : {
        Value : fieldWithPrice,
        MaximumValue : fieldWithUoM,
        Criticality : criticality_code
    },
    ...
);
```

--------------------------------

### Configure Progress Indicator Data Point

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Configure a data point to be displayed as a progress bar. 'Value' is the current progress, 'TargetValue' is the maximum. 'Visualization' must be '#Progress'. Optionally, 'Criticality' can define the bar color.

```cds
annotate srv.RootEntities with @(
    UI.DataPoint #progressIndicator : {
        Value : integerValue,
        TargetValue : 100,
        Visualization : #Progress,
        Title : '{i18n>progressIndicator}',
        Criticality: criticality,
    },
);
```

--------------------------------

### Implement Contact Quick View

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Define the Communication.Contact annotation for an entity to enable contact quick view functionality. Supports properties like name, phone, and address.

```cds
annotate srv.Contacts with @(
    Communication.Contact : {
        fn   : name, //full name
        kind : #org,
        tel  : [{
            uri  : phone,
            type : #preferred
        }],
        adr  : [{
            building : building,
            country  : country.name,
            street   : street,
            locality : city,
            code     : postCode,
            type     : #preferred
        }],
    }
);
```

--------------------------------

### Configure Header and Anchor Bar Visibility

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Control the visibility of the Object Page header and anchor bar by setting boolean values in the manifest.json. This configuration is typically done using SAP Fiori tools.

```json
"RootEntityObjectReport": {
    "...": "...",
    "options": {
        "settings": {
            "...": "...",
            "content": {
                "header": {
                    "anchorBarVisible": true,
                    "visible": true,
                    "...": "..."
                },
                "...": "..."
            }
        }
    }
},

```

--------------------------------

### Test Service Handler with In-Memory DB

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/07-code-patterns-examples.md

This pseudo-code demonstrates how to test service handlers using an in-memory database, simulating data creation and verifying auto-generated entities.

```typescript
const { expect } = require("chai");
const cds = require("@sap/cds");

describe("LROPODataService", () => {
  let request, db;

  before(async () => {
    cds.model = await cds.load("./db");
    cds.services = cds.build(cds.model);
  });

  it("should populate chart entities on create", async () => {
    const result = await INSERT.into(RootEntities).entries({
      ID: "test-id",
      stringProperty: "test",
    });
    // Verify chartEntities were auto-created
    expect(result.chartEntities).to.have.length(10);
  });
});
```

--------------------------------

### Registering Controller Extensions

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/06-application-components.md

Defines how to register custom controller logic for a specific Fiori Elements component in the manifest.json file.

```json
"sap.ui.controllerExtensions": {
  "sap.fe.templates.ListReport.ListReportController#namespace::RootEntityListReport": {
    "controllerName": "sap.fe.showcase.lrop.ext.controller.RootEntityLRExtension"
  }
}
```

--------------------------------

### Enable Inline Creation of Table Entries

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Configure 'creationMode' in manifest.json to enable inline creation of table entries. Set 'name' to 'Inline' and 'createAtEnd' to true to add new rows at the end of the table.

```json
"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "childEntities1/@com.sap.vocabularies.UI.v1.LineItem": {
                    "tableSettings": {
                        ...
                        "creationMode": {
                            "name": "Inline",
                            "createAtEnd": true
                        },
                        ...
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
},
```

--------------------------------

### Configure Line Micro Chart DataPoints

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Sets up DataPoints for the Line Micro Chart, defining the Value and Criticality for each measure. Criticality path determines the color of the line.

```cds
annotate service.ChartDataEntities with @(
    ...
    UI.DataPoint #lineChartWidth : {
        Value : integerValueWithUoM,
        Criticality : criticality_code,
    },
    UI.DataPoint #lineChartDepth : {
        Value : targetValue,
        Criticality : criticality_code,
    },
    ...
);
```

--------------------------------

### Configure Column Micro Chart DataPoint

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Sets up the DataPoint for the Column Micro Chart, specifying the Value and Criticality.

```cds
annotate service.ChartDataEntities with @(
    ...
    UI.DataPoint #dataPointForChart : {
        Value : integerValue,
        Criticality : criticality_code
    },
);
```

--------------------------------

### Deliveries Application File Structure

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/06-application-components.md

Shows the file organization for the Deliveries application, detailing the webapp directory and other project files.

```text
app/deliveries/
├── webapp/
│   ├── Component.ts
│   ├── manifest.json
│   └── i18n/
│       └── i18n.properties
├── package.json
├── tsconfig.json
├── annotations.cds
└── README.md
```

--------------------------------

### Action Dropdown Menu Configuration

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Configure a dropdown menu for actions in the manifest.json file under control configuration for the List Report. This groups related actions under a single menu button.

```json
"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "@com.sap.vocabularies.UI.v1.LineItem": {
                    "actions": {
                        "MenuActions": {
                            "text": "{i18n>MenuButton}",
                            "menu": [
                                "DataFieldForAction::LROPODataService.changeCriticality",
                                "DataFieldForAction::LROPODataService.EntityContainer::unboundAction"
                            ]
                        }
                    },
                    ...
                },
                ...
            }
        }
    }
},
```

--------------------------------

### Configure Value Help for Associations

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Annotate an entity with `@Common.ValueList` to provide a value help for associations. Specify the `CollectionPath` for the value source and optionally configure `Parameters` for complex scenarios.

```cds
annotate schema.RootEntities with{
    contact @(Common : {
        Text            : contact.name,
        TextArrangement : #TextOnly,
        ValueList       : {
            Label          : '{i18n>customer}',
            CollectionPath : 'Contacts',
            Parameters     : [
                {
                    $Type             : 'Common.ValueListParameterInOut',
                    ValueListProperty : 'ID',
                    LocalDataProperty : contact_ID
                },
                {
                    $Type: 'Common.ValueListParameterDisplayOnly',
                    ValueListProperty: 'country_code',
                },
                {
                    $Type: 'Common.ValueListParameterDisplayOnly',
                    ValueListProperty: 'city',
                }

            ]
        }
    });
};
```

--------------------------------

### SemanticObject and SemanticKey Annotations

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/05-annotations-vocabulary.md

Enables intent-based navigation and identifies key fields for semantic understanding. Use SemanticObject for navigation targets and SemanticKey for unique identification.

```cds
entity @Common.SemanticObject: 'SalesOrder'
property @Common.SemanticKey: true
```

--------------------------------

### ValueList Annotation for Input Fields

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/05-annotations-vocabulary.md

Enables value help (dropdown or dialog) for input fields. Configure collection path, label, and parameter mappings for value selection.

```cds
propertyName @(
  Common: {
    ValueList: {
      Label: '{i18n>label}',
      CollectionPath: 'CodeListEntity',
      Parameters: [
        {
          $Type: 'Common.ValueListParameterInOut',
          ValueListProperty: 'code',
          LocalDataProperty: localProperty
        },
        {
          $Type: 'Common.ValueListParameterDisplayOnly',
          ValueListProperty: 'name'
        },
        {
          $Type: 'Common.ValueListParameterIn',
          ValueListProperty: 'country_code',
          LocalDataProperty: country_code
        },
        {
          $Type: 'Common.ValueListParameterConstant',
          ValueListProperty: 'country_code',
          Constant: 'DE'
        }
      ]
    },
    ValueListWithFixedValues: true,
    ValueListWithFixedValues.@Common.ValueListShowValuesImmediately
  }
);
```

--------------------------------

### List Report Navigation Configuration

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/04-configuration-manifest.md

Configures navigation from a list report to a detail view, specifying the target route.

```json
"navigation": {
  "RootEntities": {
    "detail": {
      "route": "RootEntityObjectReport"
    }
  }
}
```

--------------------------------

### Enable Multi-line Text Display

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Annotate string properties with `@UI.MultiLineText` to enable display across multiple lines. Further configuration for line limits and display behavior can be set in `manifest.json`.

```cds
annotate schema.RootEntities with{
    ... 
    description             @title : '{i18n>description}'                    @UI.MultiLineText;
    ... 
};
```

--------------------------------

### Main OData Service Data Source Configuration

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/04-configuration-manifest.md

Configures the primary OData service for the application, specifying its root path and OData version.

```json
"dataSources": {
  "mainService": {
    "uri": "/srv1/",
    "type": "OData",
    "settings": {
      "odataVersion": "4.0"
    }
  }
}
```

--------------------------------

### Application Components

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/README.md

Describes the structure of the Fiori applications, including component modules, extension architecture, and data flow.

```APIDOC
## Application Components

### Description
This section details the structure and architecture of the Fiori applications within the showcase project, explaining how different components interact.

### Application Structure
- **Fiori Apps**: Documentation for 3 Fiori applications (LROP, Worklist, Deliveries).
- **Component Modules**: Overview of component modules and their configuration.
- **Extension Architecture**: Explanation of the extension architecture.
- **Data Flow**: Includes an architecture diagram illustrating data flow.
- **Development & Deployment**: Information on the development server and deployment setup.
```

--------------------------------

### Configure Navigation Property Availability

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Configure the availability of a navigation property to 'Adaptation' in the manifest.json file for personalization.

```json
"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "@com.sap.vocabularies.UI.v1.LineItem": {
                    ...
                    "columns": {
                        "DataField::association2one::country_code": {
                            "availability": "Adaptation"
                        }
                    }
                },
                ...
            },
            ...
        }
    }
}
```

--------------------------------

### Configure ResponsiveTable in manifest.json

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Set the table type to 'ResponsiveTable' in the manifest.json file for List Report applications. This is a common configuration for displaying tabular data.

```json
"RootEntityListReport": {
    "...": "...",
    "options": {
        "settings": {
            "...": "...",
            "controlConfiguration": {
                "@com.sap.vocabularies.UI.v1.LineItem": {
                    "...": "...",
                    "tableSettings": {
                        "type": "ResponsiveTable",
                        "...": "..."
                    },
                    "...": "..."
                },
                "...": "..."
            },
            "...": "..."
        }
    }
},
```

--------------------------------

### Object Page Target Configuration

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/04-configuration-manifest.md

Defines the configuration for an object page route target, specifying the context path and control configurations.

```json
"RootEntityObjectReport": {
  "type": "Component",
  "id": "RootEntityObjectReport",
  "name": "sap.fe.templates.ObjectPage",
  "options": {
    "settings": {
      "contextPath": "/RootEntities",
      "controlConfiguration": { ... }
    }
  }
}
```

--------------------------------

### Display Bound Action Inline with Icon

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Configure a bound action to display inline with an icon by setting 'Inline : true' and providing 'IconUrl'.

```cds
annotate srv.RootEntities with @(
    UI.LineItem : [
        ...
        {
            $Type : 'UI.DataFieldForAction',
            Action : 'LROPODataService.changeProgress',
            Label : '{i18n>changeProgess}',
            IconUrl : 'sap-icon://status-critical',
            Inline : true
        },
        ...
    ]
);
```

--------------------------------

### Minimum UI5 Version Dependency

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/04-configuration-manifest.md

Specifies the minimum required UI5 version and lists the essential libraries for the application.

```json
"dependencies": {
  "minUI5Version": "1.141.0",
  "libs": {
    "sap.ui.core": {},
    "sap.fe.templates": {}
  }
}
```

--------------------------------

### Configure Key Value Data Point

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Configure a default data point for displaying a key value. This is used when no specific 'Visualization' property is provided.

```cds
annotate srv.RootEntities with @(
    ...
    UI.DataPoint #fieldWithPrice : {
        Value : fieldWithPrice,
        Title : '{i18n>fieldWithPrice}',
    },
);
```

--------------------------------

### BEFORE READ Handler Logic - OrganizationalUnits

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/01-services-api.md

Logic for the BEFORE READ handler of OrganizationalUnits to ensure category navigation properties are included.

```javascript
If `category` is expanded but `category_code` is not selected, automatically adds `category_code` to column selection.
```

--------------------------------

### Before New Handler with Data Generation

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/07-code-patterns-examples.md

Pre-populates fields when creating a new entity, ensuring referential integrity and providing sample data for nested compositions.

```typescript
this.before("NEW", RootEntities.drafts, async (req) => {
  req.data.contact_ID = (await SELECT.one.from(Contacts).columns("ID")).ID;
  
  req.data.chartEntities = [];
  for (let i = 1; i <= 10; i++) {
    req.data.chartEntities.push({
      ID: cds.utils.uuid(),
      parent_ID: req.data.ID,
      uom_code: "EA",
      dimensions: i,
      integerValue: i + 30,
      criticality_code: i % 4,
      // ... more fields
    });
  }
});
```

--------------------------------

### Multiple Table Views with Tab Bar Configuration

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/07-code-patterns-examples.md

Configure multiple table views accessible via a tab bar. This pattern allows switching between different data sets or filtered views and can disable counts for performance.

```json
{
  "views": {
    "paths": [
      {
        "key": "activeOnly",
        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#activeEntities"
      },
      {
        "key": "allEntities",
        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#allEntities"
      },
      {
        "key": "alternateEntity",
        "entitySet": "AlternateEntity",
        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#defaultView"
      }
    ],
    "showCounts": false
  }
}
```

--------------------------------

### Outbound Navigation Configuration

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/04-configuration-manifest.md

Configures navigation from this application to an external application, such as the Orders app, using a semantic object and action.

```json
"outbounds": {
  "ExternalNavigation": {
    "semanticObject": "FeatureShowcaseOrder",
    "action": "manage"
  }
}
```

--------------------------------

### OData Model Configuration

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/04-configuration-manifest.md

Configures the main OData model, binding it to a data source and setting performance-related settings like preload and operation mode.

```json
"": {
  "dataSource": "mainService",
  "preload": true,
  "settings": {
    "synchronizationMode": "None",
    "operationMode": "Server",
    "autoExpandSelect": true,
    "earlyRequests": true
  }
}
```

--------------------------------

### Configure Multiple Table Mode in manifest.json

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Defines different views for a table, each with its own configuration and annotation path. Use 'entitySet' to specify a different entity for a view.

```json
"RootEntityListReport": {
    "...": "...",
    "options": {
        "settings": {
            "...": "...",
            "views": {
                "paths": [
                    {
                        "key": "tab1",
                        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant1"
                    },
                    {
                        "key": "tab2",
                        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionPresentationVariant#SelectionPresentationVariant"
                    },
                    {
                        "key": "tab3",
                        "entitySet": "OrganizationalUnits",
                        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#activeOrgUnits"
                    }
                ],
                "showCounts": false
            },
            "...": "..."
        }
    }
}
```

--------------------------------

### Configure Table Personalization Options

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Customize personalization settings for tables, including column visibility, sorting, and filtering, within the manifest.json file.

```json
"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "childEntities1/@com.sap.vocabularies.UI.v1.LineItem": {
                    "tableSettings": {
                        ...
                        "personalization": {
                            "column": true,
                            "sort": false,
                            "filter": true
                        },
                        ...
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
}
```

--------------------------------

### Unbound Actions: unboundAction

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/01-services-api.md

Demonstrates an unbound action that returns an information message containing the user-provided input. Its availability is controlled by the `/Singleton/enabled` property.

```APIDOC
## unboundAction(input: String)

### Description
Demonstrates unbound action invocation returning information message.

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **input** (String) - Required - Title: i18n key `inputValue`

### Request Example
```json
{
  "input": "User provided text"
}
```

### Response
#### Success Response (200)
- **message** (String) - An information message containing the user input.

#### Response Example
```json
{
  "message": "INPUT: User provided text"
}
```

### Availability
Controlled by `/Singleton/enabled` property via `@Core.OperationAvailable` annotation.
```

--------------------------------

### Configure Smart Micro Chart in UI.Chart

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Reference the DataPoint in a UI.Chart annotation. Use '#Donut' for ChartType and ensure Measures and MeasureAttributes are provided.

```cds
annotate srv.RootEntities with @(
    ... 
    UI.Chart #radialChart : {
        Title : '{i18n>radialChart}',
        Description : '{i18n>ThisIsAMicroChart}',
        ChartType : #Donut,
        Measures : [integerValue],
        MeasureAttributes : [{
                $Type : 'UI.ChartMeasureAttributeType',
                Measure : integerValue,
                Role : #Axis1,
                DataPoint : '@UI.DataPoint#radialChart',
        }]
    },
    ...
);
```

--------------------------------

### Configure UI Device Support

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/04-configuration-manifest.md

Specifies the device types supported by the Fiori Elements application. Set to true for desktop, tablet, and phone to enable responsive design across all devices.

```json
"sap.ui": {
  "technology": "UI5",
  "deviceTypes": {
    "desktop": true,
    "tablet": true,
    "phone": true
  }
}
```

--------------------------------

### Add Navigation Property to Personalization

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Use the 'Adaptation' availability in manifest.json to make a navigation property available only in personalization settings.

```cds
@UI.LineItem : [
    {
        //Search-Term: #NavPropInAdaptability
        Label : 'Navigation field only available via settings',
        Value : association2one.country_code,
    }
]
```

--------------------------------

### Define Date and Time Properties

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Define properties with `Date`, `DateTime`, `Time`, or `Timestamp` data types for out-of-the-box display and editing support. No specific annotations are needed for basic functionality.

```cds
aspect rootBasis : {
    ... 
    validFrom   : Date;
    validTo     : DateTime;
    time        : Time;
    timeStamp   : Timestamp;
    ... 
};
```

--------------------------------

### Configure Column Micro Chart

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Defines a Column Micro Chart using UI.Chart annotation. Supports Criticality and CriticalityCalculation, with Criticality taking precedence.

```cds
annotate service.ChartDataEntities with @(
    ...
    UI.Chart #columnChart : {
        Title : '{i18n>columnChart}',
        Description : '{i18n>ThisIsAMicroChart}',
        ChartType : #Column,
        Measures : [
            integerValue
        ],
        Dimensions : [
            dimensions
        ],
        MeasureAttributes : [
            {
                $Type : 'UI.ChartMeasureAttributeType',
                Measure : integerValue,
                Role : #Axis1,
                DataPoint : '@UI.DataPoint#dataPointForChart',
            }
        ]
    },
    ...
);
```

--------------------------------

### Configure Segmented Buttons for Table Toolbar

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Use 'quickVariantSelection' in manifest.json to configure segmented buttons for switching table views. The number of views determines if a segmented button or a dropdown is displayed.

```json
"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "childEntities1/@com.sap.vocabularies.UI.v1.LineItem": {
                    "tableSettings": {
                        ...
                        "quickVariantSelection": {
                            "paths": [
                                {
                                    "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant1"
                                },
                                {
                                    "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant2"
                                },
                                {
                                    "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant3"
                                },
                                {
                                    "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant4"
                                }
                            ],
                            "hideTableTitle": false,
                            "showCounts": true
                        },
                        ...
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
},
```

--------------------------------

### Constant Filtering with Value Help

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Configures a value help for 'regionWithConstantValueHelp' that statically filters the 'country_code' to 'DE' using Common.ValueListParameterConstant. This ensures that only regions associated with the country code 'DE' are displayed in the value help.

```cds
annotate schema.RootEntities with {
    regionWithConstantValueHelp @(Common : {
        Text            : regionWithConstantValueHelp.name,
        TextArrangement : #TextFirst,
        ValueListWithFixedValues: true,
        ValueList       : {
            Label          : '{i18n>region}',
            CollectionPath : 'Regions',
            Parameters     : [
                {
                    $Type               : 'Common.ValueListParameterInOut',
                    ValueListProperty   : 'code',
                    LocalDataProperty   : region_code
                },
                {
                    $Type               : 'Common.ValueListParameterConstant',
                    ValueListProperty   : 'country_code',
                    Constant : 'DE',
                },
            ]
        }
    });
}
```

--------------------------------

### Display Contact Quick View in Table

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Reference the contact annotation using DataFieldForAnnotation within the UI.LineItem annotation to show a contact quick view in a table.

```cds
annotate srv.RootEntities with @(
    UI.LineItem : [
        ... 
        {
            $Type : 'UI.DataFieldForAnnotation',
            Target : 'contact/@Communication.Contact',
            Label : '{i18n>contactQuickView}'
        },
        ...
    ],
);
```

--------------------------------

### Show Side Content with Controller Extension

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/README.md

Provides functions to show side content using the ExtensionAPI. The key parameter corresponds to the section qualifier.

```typescript
... 
export default class RootEntityOPExtension extends ControllerExtension<ExtensionAPI> {
    ...
    toggleSideContent(oBindingContext: ODataContextBinding) {
        this.base.getExtensionAPI().showSideContent("customSectionQualifier");
    }
    toggleSideContentItem1(oContextInfo: ODataContextBinding) {
        this.base.getExtensionAPI().showSideContent("childEntities1Section");
    }
}
```

--------------------------------

### i18n Model Configuration

Source: https://github.com/sap-samples/fiori-elements-feature-showcase/blob/main/_autodocs/04-configuration-manifest.md

Configures the internationalization (i18n) model, pointing to the resource properties file for translatable texts.

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