**TITLE**: Chart Column (fiori-tools) — Add, Configure, Move, Delete, and Sort Chart Columns

**INTRODUCTION**: Instructions and actionable examples for adding and configuring chart columns in table controls on List Report or Object Page sections using the Page Editor. Includes required properties per chart type, UI actions, manifest.json requirement for sorting, and generated annotations (UI.Chart and UI.DataPoint) examples to guide code/annotation generation.

**TAGS**: fiori-tools, chart-column, UI.Chart, UI.DataPoint, PresentationVariant, manifest.json, sapui5, micro-chart, sorting

STEP: 1 — Include SAP icons stylesheet (if required by Page Editor/UI)
DESCRIPTION: Add the sap-icons stylesheet reference used in examples and UI icons. Keep the provided relative path exactly as used in the project.
LANGUAGE: HTML
CODE:
```html
<link rel="stylesheet" type="text/css" href="../css/sap-icons.css"/>
```

STEP: 2 — Add a Chart Column via Page Editor (UI steps)
DESCRIPTION: UI steps to add a chart column to a table in a section. Note: Add Chart Column is disabled when the table entity has no numeric properties. The minimal required input will generate UI.Chart and UI.DataPoint annotations automatically; you can extend them in the Property Panel after creation.
LANGUAGE: Plain Text
CODE:
```
1. In Page Editor: expand the target Page -> Section -> Table.
2. Click + (Add) on Columns node -> "Add Chart Column".
3. Choose Chart Type from the tree control. (Depending on chart type, additional properties are required.)
4. Click "Add". A UI.Chart and UI.DataPoint annotation are created.
```

STEP: 3 — Example generated annotation placeholders (conceptual JSON)
DESCRIPTION: Example structure of the annotations that the Page Editor generates. Use these placeholders to create/extend real annotation files (OData/Vocab XML or JSON-LD) in your project. Replace entity/property names with real values.
LANGUAGE: JSON
CODE:
```json
{
  "Annotations": {
    "Target": "MyService.MyEntityType",
    "UI.Chart": {
      "Qualifier": "Chart1",
      "ChartType": "Area",
      "DataPoints": ["DataPoint1"],
      "Measures": ["Sales"],
      "Dimensions": ["Month"]
    },
    "UI.DataPoint": {
      "ID": "DataPoint1",
      "Value": "Sales",
      "TargetValue": "SalesTarget",
      "Criticality": "SalesCriticality"
    }
  }
}
```

STEP: 4 — Required properties per chart type (use when generating annotations or UI metadata)
DESCRIPTION: For code generation or annotation editing, set at least the listed mandatory properties for each chart type. Additional optional properties (label, importance, hidden, criticality, thresholds, etc.) can be added in the Property Panel or annotation file.

- Area Chart: Value Source (data property), Measure, Dimension (x-axis)
LANGUAGE: JSON
CODE:
```json
{
  "ChartType": "Area",
  "ValueSource": "SalesValue",
  "Measure": "Amount",
  "Dimension": "Month",
  "Optional": ["Label", "Importance", "Hidden", "TargetValue", "CriticalitySource"]
}
```

- Bullet Chart: Value (numeric), MaximumValue (path or fixed)
LANGUAGE: JSON
CODE:
```json
{
  "ChartType": "Bullet",
  "Value": "CurrentValue",
  "MaximumValuePath": "MaxValue",
  "Optional": ["Label", "Importance", "Hidden", "TargetValue", "MaximumValueType", "MinimumValue", "ForecastValue", "CriticalitySource"]
}
```

- Column Chart: Value Source, Measure, Dimension
LANGUAGE: JSON
CODE:
```json
{
  "ChartType": "Column",
  "ValueSource": "SalesValue",
  "Measure": "Amount",
  "Dimension": "Category",
  "Optional": ["Label", "Importance", "Hidden", "CriticalitySource"]
}
```

- Line Chart: Value Source, Measure(s), Dimension
LANGUAGE: JSON
CODE:
```json
{
  "ChartType": "Line",
  "ValueSource": "SalesValue",
  "Measures": ["Amount", "AmountPrevious"],
  "Dimension": "Month",
  "Optional": ["Label", "Importance", "Hidden"]
}
```

- Radial Chart: Value, TargetValue (path)
LANGUAGE: JSON
CODE:
```json
{
  "ChartType": "Radial",
  "Value": "Completion",
  "TargetValuePath": "CompletionTarget",
  "Optional": ["Label", "Importance", "Hidden", "CriticalitySource"]
}
```

- Comparison Chart: Value Source, Measure, Dimension
LANGUAGE: JSON
CODE:
```json
{
  "ChartType": "Comparison",
  "ValueSource": "SalesValue",
  "Measure": "Amount",
  "Dimension": "Region",
  "Optional": ["Label", "Importance", "Hidden", "Criticality"]
}
```

- Harvey Chart: Value, MaximumValue (path)
LANGUAGE: JSON
CODE:
```json
{
  "ChartType": "Harvey",
  "Value": "Progress",
  "MaximumValuePath": "MaxProgress",
  "Optional": ["Label", "Importance", "Hidden", "MaximumValue", "Criticality"]
}
```

- Stacked Bar Chart: Value Source, Measure(s)
LANGUAGE: JSON
CODE:
```json
{
  "ChartType": "StackedBar",
  "ValueSource": "CategoryValues",
  "Measures": ["ValuePart1", "ValuePart2"],
  "Optional": ["Label", "Importance", "Hidden", "Criticality"]
}
```

STEP: 5 — Move columns inside a table (Drag & Drop or Arrow icons)
DESCRIPTION: Two ways to reorder columns programmatically or in the editor workflow. Drag and Drop supports moving multiple selected columns (use modifier key). Arrow icons move a single column up/down.
LANGUAGE: Plain Text
CODE:
```
- Drag & Drop:
  Hover column outline -> press and hold mouse -> move to highlighted green position -> release.
  To move multiple: hold CTRL while selecting and dragging.

- Arrow Icons:
  Click "Move Up" or "Move Down" icon next to the column name. Moves one column at a time.
```

STEP: 6 — Delete a Chart Column
DESCRIPTION: Steps for deletion via Page Editor; after deletion, remove any unreferenced annotations (UI.Chart, UI.DataPoint, UI.PresentationVariant) from annotation files via cleanup.
LANGUAGE: Plain Text
CODE:
```
1. Select the column in Page Editor.
2. Click Delete (wastebasket icon).
3. Confirm in Delete Confirmation popup -> Delete.
4. Run annotation cleanup to remove unreferenced UI.Chart/UI.DataPoint/UI.PresentationVariant entries.
```

STEP: 7 — Sorting micro charts in chart columns (Presentation Variant requirement)
DESCRIPTION: Sorting of micro chart data is controlled by the chart column's Sort Order property which is visible only if a UI.PresentationVariant is referenced. Requirement: set minUI5Version to 1.130 or higher in manifest.json to enable this in the Page Editor. Only supported for area, line, column, comparison, and stacked bar micro charts.
LANGUAGE: JSON
CODE:
```json
// manifest.json snippet: set minUI5Version >= 1.130
{
  "sap.ui5": {
    "dependencies": {
      "minUI5Version": "1.130.0"
    }
  }
}
```

STEP: 8 — Define PresentationVariant and SortOrder (example)
DESCRIPTION: Create or reference a UI.PresentationVariant to expose the Presentation Variant: Sort Order property for the micro chart column. Define one or more sort properties with Property and Direction fields. Move sort properties to change precedence. Remove annotation reference by setting Presentation Variant: Annotation to None, and run cleanup to remove unreferenced annotations.
LANGUAGE: JSON
CODE:
```json
{
  "UI.PresentationVariant": {
    "Qualifier": "PV_Chart1",
    "SortOrder": [
      { "Property": "Month", "Direction": "Ascending" },
      { "Property": "Sales", "Direction": "Descending" }
    ],
    "Visualizations": [
      { "Chart": "Chart1" }
    ]
  }
}
```

STEP: 9 — Notes and post-generation tasks
DESCRIPTION: After adding a chart column the Page Editor generates minimal UI.Chart and UI.DataPoint annotations. Use the Property Panel or directly edit annotation files to:
- Add labels, importance, hidden flags.
- Configure criticality, target/threshold values, max/min types and values, forecast values where applicable.
- Add/modify UI.PresentationVariant qualifiers to enable Sort Order.
- Run cleanup to remove unreferenced annotations and keep the annotation file tidy.
LANGUAGE: Plain Text
CODE:
```
Checklist after adding chart column:
- Edit UI.Chart/UI.DataPoint to add optional properties (labels, thresholds, criticality).
- If sorting required: add UI.PresentationVariant and set Presentation Variant: Annotation -> New.
- Set minUI5Version >= 1.130 in manifest.json to expose sort order.
- Run annotation cleanup to remove unreferenced annotations.
```


**TITLE**: Add, Delete, and Maintain Chart Section (Fiori Tools)

**INTRODUCTION**: This document describes the exact UI actions and resulting annotation changes needed to add, delete, and maintain an Object Page Chart Section in Fiori Tools. Use this as a code-centric checklist for generating or updating annotations (UI.Chart, UI.ReferenceFacet, UI.Facets) and related metadata (Analytics aggregated properties, CAP CDS using statements).

**TAGS**: fiori-tools, UI.Chart, UI.ReferenceFacet, UI.Facets, Analytics, Aggregation, CAP, CDS, Object Page, Chart

STEP: Required stylesheet for icon display

DESCRIPTION: Include the SAP icons stylesheet used by the editor UI (present in the original documentation). Ensure the relative path is correct in your environment.

LANGUAGE: HTML

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

STEP: Adding Chart Section

DESCRIPTION: Action steps to add a chart section from the Page Editor and the exact annotation and model changes that must be created/updated by the code generator.

- UI actions to automate:
  1. Open the Object/Form Entry Page in the Page Editor.
  2. In the outline, locate the section node and trigger the "Add" action.
  3. Select "Add Chart Section" from the section-type drop-down.
  4. Populate the chart attributes in the pop-up:
     - Label
     - Entity
     - Type
     - Dimension
     - Measure (choose one):
       - Use existing measure — select an existing measure defined with custom or transformation aggregations.
       - Create new measure — choose an aggregable property and an aggregation method to create a dynamic measure.
  5. Confirm "Add".

- Required code/annotation outcomes to implement in generated files:
  - Add a new UI.Chart annotation and add a new UI.ReferenceFacet that includes an annotationPath pointing to the newly created UI.Chart inside the existing UI.Facets collection for the Object Page entity.
  - If the user created a new measure:
    - Apply @Analytics.AggregatedProperty to the selected aggregable property with the chosen aggregation method (creates a dynamic measure).
  - If UI.Facets is not present for the entity, create a new UI.Facets annotation under that entity.
  - If UI.Facets exists in an underlying layer, override it by writing the UI.Facets annotation in the current (higher) layer.
  - For CAP CDS projects: add a using statement to the overridden file if it does not yet include it.

- Notes for automation:
  - The technical name and label for created artifacts are generated automatically; ensure the generated label can be adjusted in the Property Panel after creation.
  - Ensure annotationPath values point to the correct annotation identifier.
  - Maintain layer override behavior: do not mutate annotations in a lower layer; instead create an overriding annotation in the current layer file.

LANGUAGE: Description / Annotation actions (no additional code snippet provided)

CODE:
```text
Outcomes (conceptual):
- New UI.Chart annotation
- New UI.ReferenceFacet with annotationPath -> created UI.Chart
- UI.Facets created/updated under the entity
- @Analytics.AggregatedProperty applied when creating new measures
- CAP CDS: add using statement if missing
```

STEP: Deleting Chart Section

DESCRIPTION: Steps to remove a chart section from the Object Page and the annotation cleanup behavior to implement.

- UI actions to automate:
  1. In the outline, select the section node.
  2. Trigger the Delete action (wastebasket icon).
  3. Confirm deletion in the Delete Confirmation popup.

- Required code/annotation outcomes:
  - Remove the generated UI.ReferenceFacet from the UI.Facets collection for the entity.
  - Ensure the UI.Chart annotation is cleaned up during the standard cleanup procedure (do not rely on immediate deletion unless part of a cleanup routine).
  - When overriding annotations, consider removing the overriding UI.Facets entry if it only existed to host the removed reference facet and is no longer needed.

LANGUAGE: Description / Annotation actions

CODE:
```text
Deletion outcomes:
- Delete generated UI.ReferenceFacet from UI.Facets
- UI.Chart annotation removed during cleanup
```

STEP: Maintaining Chart Section Properties

DESCRIPTION: How to update chart properties and where to delegate property-specific editing to the Property Panel and other docs.

- Actions:
  - Use the Property Panel to change the section label (see "Change Form Section Label" reference).
  - Use the Property Panel to maintain analytical chart properties (see "Maintain Analytical Chart Properties" reference).
  - Ensure property edits update the corresponding annotation attributes (e.g., labels, chart type, dimension/measure bindings).

- Cross-reference links (retain for implementers):
  - Change Form Section Label: form-section-4102b3d.md#loio4102b3d63d9047c881108e6f0caae15e__changeformsectionlabel
  - Maintain Analytical Chart Properties: analytical-chart-9c086ec.md#loio9c086ecaace540be83b0e50101244e78__analyticalchartproperties

LANGUAGE: Description / Documentation links

CODE:
```text
Use Property Panel to update:
- Section label
- Chart type, dimensions, measures, and optional properties

See:
- form-section-4102b3d.md#loio4102b3d63d9047c881108e6f0caae15e__changeformsectionlabel
- analytical-chart-9c086ec.md#loio9c086ecaace540be83b0e50101244e78__analyticalchartproperties
```

STEP: Hidden Property Reference

DESCRIPTION: If chart or section visibility needs to be controlled programmatically, reference the "Hidden" appendix for rules and examples. Automations that toggle visibility should update annotation-level visibility settings accordingly.

- Reference link:
  - Hidden: appendix-457f2e9.md#loiof7ad71792a0044d6b6172f078827bdc0

LANGUAGE: Description / Documentation link

CODE:
```text
See:
- appendix-457f2e9.md#loiof7ad71792a0044d6b6172f078827bdc0
```

fiori-tools
UI.Chart
UI.ReferenceFacet
UI.Facets
Analytics
Aggregation
CAP
CDS
Object Page
Chart


**TITLE**: XML Annotation Code Completion — How to Trigger and Use Suggestions

**INTRODUCTION**: This guide explains how to use the XML annotation language server code completion to insert or modify annotation targets, terms, attributes, and annotation value elements. It covers how suggestions are generated, how to trigger the list, navigate it, accept entries (including segment-by-segment path completion using '/'), and use completion for word-based entries and code blocks. Reference: micro-snippets-addf811.md

**TAGS**: fiori-tools, code-completion, annotations, OData, XML, language-server, micro-snippets

**STEP**: 1 — How suggestions are generated

**DESCRIPTION**: Understand the sources and contexts used to produce completion suggestions so you can predict and filter results when coding. Suggestions are produced from:
- Project metadata (local OData metadata, service definitions)
- OData vocabularies (standard and extended vocabularies)
- Analysis of the project structure (available files, annotation files, component names)
- The immediate XML context where completion is triggered (targets, terms, attributes, values, or blocks)

Use knowledge of these sources to narrow your typing and filter suggestions quickly.

**LANGUAGE**: text

**CODE**:
```text
Sources: project metadata, OData vocabularies, project structure, current XML context
```

**STEP**: 2 — Trigger code completion

**DESCRIPTION**: Open the completion list at the current cursor position. Use the OS-specific keyboard shortcut. This works anywhere completion is supported (targets, terms, attributes, annotation values, code blocks, micro-snippets).

- Windows/Linux: Press Ctrl + Space
- macOS: Press CMD + Space

If your OS reserves CMD+Space (e.g., Spotlight), ensure the editor receives that shortcut or use the editor's menu/command to trigger "Trigger Suggest" / "Show IntelliSense".

**LANGUAGE**: text

**CODE**:
```text
Windows/Linux: Ctrl + Space
macOS: CMD + Space
```

**STEP**: 3 — Filter suggestions by typing

**DESCRIPTION**: Narrow the suggestion list by typing additional characters after triggering completion. The list filters in real time to match the typed prefix. Use this to quickly find long term names, attributes, or complex targets.

**LANGUAGE**: text

**CODE**:
```text
Example: Type "Com" after triggering completion to filter to entries starting with "Com"
```

**STEP**: 4 — Navigate and accept suggestions

**DESCRIPTION**: Move through suggestions and accept the highlighted item.

- Navigate: Up / Down arrow keys or mouse
- Accept: Enter key or mouse click

Accepting inserts or replaces text at the cursor based on the current context (single-value replacement, partial segment insertion, or code-block insertion).

**LANGUAGE**: text

**CODE**:
```text
Navigate: Up / Down
Accept: Enter or click
```

**STEP**: 5 — Segment-by-segment path completion (use '/' to proceed)

**DESCRIPTION**: When adding or modifying annotation targets or path values that contain segments separated by '/', you can accept the current segment and immediately trigger completion for the next segment by pressing '/'.

- Type part of a segment, select suggestion, then press '/'
- The selected segment is accepted and completion opens for the next segment
- Continue until the full path or target is built

This speeds construction of long path expressions (e.g., EntitySet/NavigationProperty/Property).

**LANGUAGE**: text

**CODE**:
```text
Workflow:
1. Trigger completion
2. Select segment suggestion
3. Press '/' to accept segment and open next-segment completion
4. Repeat until path is complete
```

**STEP**: 6 — Use cases: add/change values, word-based completion, and code blocks

**DESCRIPTION**: Code completion supports multiple operations:

- Adding new annotation entries (terms, targets, attributes)
- Modifying existing values (replace the current token with a selected suggestion)
- Word-based completion: complete partial words inside values or comments
- Code-block insertion: accept suggestions that insert multi-line snippets or micro-snippets

For micro-snippets and pre-built blocks, refer to the micro-snippets documentation: micro-snippets-addf811.md

**LANGUAGE**: text

**CODE**:
```text
Use completion to:
- Insert terms/attributes: select and press Enter
- Replace values: place cursor on value token, trigger completion, select suggestion
- Insert code blocks: choose snippet suggestion to insert multi-line XML
Reference: micro-snippets-addf811.md
```

**STEP**: 7 — View vocabulary and hint information for suggestions

**DESCRIPTION**: While browsing the suggestion list, view extra information about each vocabulary term or suggestion (description, type, origin). Use the editor's quick info / hover or the suggestion details pane to inspect the selected item before accepting it.

**LANGUAGE**: text

**CODE**:
```text
Action: Select suggestion -> open details/hover -> read vocabulary description and origin
```

fiori-tools code-completion annotations OData XML language-server micro-snippets


**TITLE**: Configure Page Elements with Page Editor (SAP Fiori tools)

**INTRODUCTION**: This guide explains how to configure SAP Fiori elements apps using the Page Editor in Fiori tools. It covers adding the SAP icons stylesheet, locating and selecting the correct @sap/ux-specification version, opening and using the Page Editor, supported templates, and enabling JSON schema files in the Application Modeler tree view. Use these steps to automate or script setup and to drive UI configuration programmatically.

**TAGS**: fiori-tools, sapui5, page-editor, ux-specification, manifest, flexibility, ODataV2, ODataV4, application-modeler

**STEP**: Add SAP icons stylesheet to pages

**DESCRIPTION**: Include the SAP icons stylesheet in your HTML pages or shell so UI icons render correctly. Keep this link in your app root or relevant HTML template.

**LANGUAGE**: HTML

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

**STEP**: Locate and verify @sap/ux-specification in the project

**DESCRIPTION**: The Page Editor uses the configuration properties from the @sap/ux-specification node module installed in the application's root folder. Confirm the package is installed and determine the available versions (matching your target UI5). Use npm commands to inspect or install the appropriate version. The module is located at ./node_modules/@sap/ux-specification in your project root.

- Check installed version
- List available versions (to match UI5-* tags)
- Install or update to a specific version if required

**LANGUAGE**: Shell

**CODE**:
```bash
# Show installed version (if any)
npm ls @sap/ux-specification

# List all published versions (to find UI5-* matching tags)
npm view @sap/ux-specification versions --json

# Install a specific version (example)
npm install --save-dev @sap/ux-specification@<version>
```

**STEP**: Match @sap/ux-specification to your SAPUI5 version

**DESCRIPTION**: Choose the correct @sap/ux-specification release by checking the UI5-* tags on the package page (npm). If you need to change the minUI5version for the app, update manifest settings accordingly (see project SAPUI5 version docs). Use the npm/version list from the previous step to select the right package version.

**LANGUAGE**: Text

**CODE**:
```
Action:
1. Visit https://www.npmjs.com/package/@sap/ux-specification and inspect UI5-* tags for compatible releases.
2. Update package.json or install the matching @sap/ux-specification version.
3. If required, update manifest.json "minUI5Version" property to the desired UI5 baseline.
```

**STEP**: Open the Page Editor (ways to start)

**DESCRIPTION**: Multiple entry points to open the Page Editor. Use whichever fits automation or manual workflows:

- Right-click the app root or any workspace folder in Explorer → Show Page Map (opens Page Map)
- Select the target page and click the pencil icon (Configure Page)
- Open the project sidebar Application Modeler and click the page node in the tree view
- In the virtual JSON page editor, click the Show Page Editor icon in the Editor Title menu

Note: Icons referenced in UI: :pencil2: (Configure Page) and SAP-icons-V5 "" (Show Page Editor).

**LANGUAGE**: Text

**CODE**:
```
Open Page Editor:
- Explorer: Right-click project/folder -> Show Page Map
- Page: Select page -> click 'Configure Page' (pencil icon)
- Application Modeler: Sidebar -> click page node
- Virtual JSON file: Editor Title -> click 'Show Page Editor' (SAP icon)
```

**STEP**: Page Editor features and capabilities

**DESCRIPTION**: Use the Page Editor to view and edit configurable elements and properties for pages (manifest and UI5 flexibility). Key features:

- Outline view of configurable elements on the selected page
- Click a node to open the Property Panel
- Property Panel features:
  - Editable properties (manifest and UI5 flexibility)
  - Search filter
  - Info tooltips for each property
  - Direct edit links to the associated file (virtual JSON or manifest)
- Create/maintain annotation-based UI elements for List Report, Object Page, and Form Entry Page (OData V4)
- Access Configuration Documentation: right-click project in Application Modeler tree view

Supported templates (Page Editor supports these templates and OData versions):
- List Report Page — OData V2 and OData V4
- Worklist Page — OData V2 and OData V4
- Analytical List Page — OData V2 and OData V4
- Overview Page — OData V2 and OData V4
- Form Entry Object Page — OData V4
- Custom Page — OData V4

**LANGUAGE**: Text

**CODE**:
```
Page Editor:
- Outline view -> select node -> open Property Panel
- Property Panel: search, tooltips, direct file edit
- Supports annotation-based elements for OData V4 pages (List Report, Object Page, Form Entry)
- Supported templates: List Report, Worklist, Analytical List, Overview, Form Entry Object, Custom (see OData V2/V4 compatibility above)
- Configuration Documentation: Right-click project -> Configuration Documentation
```

**STEP**: Application Modeler tree view and enabling JSON schema files

**DESCRIPTION**: The Application Modeler tree view shows a simplified virtual hierarchy by default (Project Name > App Name > Pages > Page Name). To view the technical view (full generated files and JSON schemas), enable JSON schema files in settings. Once enabled, the tree view is updated with the generated JSON schema files that the Page Editor and modeler reference.

Steps:
1. Open Settings in the Application Modeler or Fiori tools settings.
2. Select the "Show JSON Schemas" checkbox.
3. The tree view will refresh to include generated JSON schema files.

**LANGUAGE**: Text

**CODE**:
```
Enable JSON schema files:
1. Settings -> Show JSON Schemas (checkbox)
2. Tree view refreshes to include generated JSON schema files
Result: Technical view with full paths and generated JSON schemas available for direct inspection.
```

fiori-tools sapui5 page-editor ux-specification manifest flexibility ODataV2 ODataV4 application-modeler


**TITLE**: Connected Fields (Object Page) — Add, Move, Delete, Maintain

**INTRODUCTION**: Practical, code-focused instructions for manipulating "Connected Fields" in an SAP Fiori Tools Object Page. Use these steps to add a connected-fields node (two semantically connected properties under one label), move it, delete it, and maintain its properties. Includes the exact icon HTML snippets and annotation names referenced by the tool.

**TAGS**: fiori-tools, object-page, connected-fields, UI.ConnectedFields, UI.DataField, UI.FieldGroup, UI.Identification, annotations

STEP: 1 — Add Connected Fields

DESCRIPTION: Add two semantically connected properties under a single label to a Form Section or Identification Section inside an Object Page. Steps to perform in the editor UI:
- Expand target section and locate the Fields node.
- Click the Add icon and choose "Add Connected Fields".
- In the popup, set the common label and choose Field 1 and Field 2 (two different properties). Note: a property already used in another connected fields node cannot be selected.
- Optionally set a delimiter (single or multiple text characters like ":", "/", "-") to appear between the two field values. If unset, a space is used.
- Click Add to create the connected fields node.

Preserve: you cannot reuse properties already part of another connected fields node inside the same section.

LANGUAGE: HTML

CODE:
```html
<!-- Include icons (editor UI uses SAP icons CSS) -->
<link rel="stylesheet" type="text/css" href="../css/sap-icons.css"/>

<!-- Example doc links you may reference while adding -->
Form section doc: form-section-4102b3d.md
Identification section doc: identification-section-b83f501.md
```

STEP: 2 — Move Connected Fields

DESCRIPTION: Move a connected-fields node within a section or to a different content-area section, and swap the order of the two fields inside the node. Two supported methods:

- Drag and drop:
  - Drag the connected-fields node and drop where highlighted in green. Use Ctrl + Click to select multiple fields/nodes for grouped moving.
  - Drag a field inside the connected-fields node and drop above/below the other field to swap order.

- Arrow buttons:
  - Use Move Up / Move Down icons next to the connected fields label to move the node within the section or to another section.
  - Use Move Up / Move Down icons next to the child field inside the connected-fields node to swap the two field positions.

Constraint: Connected fields cannot be moved to the Header Section.

LANGUAGE: HTML

CODE:
```html
<!-- Editor uses SAP icon glyphs for move controls -->
<!-- Move Up / Move Down icons used in the UI: -->
<span class="SAP-icons-V5"></span> <!-- Move Up -->
<span class="SAP-icons-V5"></span> <!-- Move Down -->

<!-- Note: Header section reference (not movable to): -->
Header Section doc: header-a05d7fc.md#loio8a127fc36f5640abaab0056e632fe630
```

STEP: 3 — Delete Connected Fields

DESCRIPTION: Delete the entire connected-fields node (including its child fields). You cannot delete the individual fields inside the node separately. Steps:
- Expand the target section and locate the connected-fields node.
- Click the Delete (wastebasket) icon and confirm in the Delete Confirmation popup.
- Effect on annotations: deleting removes the UI.DataField record from UI.FieldGroup or UI.Identification. The entity-property annotations remain intact.
- Cleanup: removing a node can leave orphaned UI.ConnectedFields annotations. You must explicitly run the cleanup procedure to remove unreferenced annotations.

LANGUAGE: PlainText

CODE:
```
Editor delete icon: 🗑 (Delete - opens Delete Confirmation)
Behavior on delete:
- UI.DataField record removed from UI.FieldGroup or UI.Identification
- Annotations on entity properties are NOT deleted
- Orphaned UI.ConnectedFields annotations must be removed via explicit cleanup procedure
```

STEP: 4 — Maintain Connected Field Properties

DESCRIPTION: Update label, delimiter, visibility, and other allowed properties for a connected-fields node. Key rules and actions:
- Label: maintained like basic fields (shared/common label). See Fields docs for label behavior.
- Delimiter: can be one or more literal characters (e.g., ":", "/", "-"). If unset, a single space separates values. Delimiter values are not translatable.
- Hidden: set node hidden either statically (boolean) or dynamically by binding to a boolean property. After enabling Hidden, use "Hide by Property" to specify the dynamic condition.
- Restrictions: You cannot change which properties are used as Field 1/Field 2 within an existing connected-fields node. To change properties, delete the node and re-add it.
- Individual field-level properties: you may set all basic field properties on the individual fields except Label and Hidden (those are controlled at node level).

References for maintenance operations:
- Hidden behavior: appendix-457f2e9.md#loiof7ad71792a0044d6b6172f078827bdc0
- Hide by Property: appendix-457f2e9.md#loio4e8bb3df433546f8a80f16e53b29e4c1
- Maintaining basic field properties: link provided in docs

LANGUAGE: PlainText

CODE:
```
Delimiter examples (literal characters): ":", "/", "-"
If delimiter unset => fields separated by single space
Delimiter is NOT translatable

Hidden options:
- Static: hidden: true/false
- Dynamic: hidden bound to boolean property (use "Hide by Property" control)

Cannot change Field 1/Field 2 properties in-place. To change them:
1) Delete connected-fields node (see deletion)
2) Add new connected-fields node with desired properties

References:
- Fields: https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/457f2e9699b5437fb09d56311055a4a0.html#fields
- Hidden: appendix-457f2e9.md#loiof7ad71792a0044d6b6172f078827bdc0
- Hide by Property: appendix-457f2e9.md#loio4e8bb3df433546f8a80f16e53b29e4c1
- Maintaining Basic Field Properties: https://help.sap.com/docs/SAP_FIORI_tools/bdf9573a206b492382cc747e731cf34b/2953503145dd428194c6dff252744ac1.html?state=DRAFT&version=DEV&q=label#maintaining-basic-field-properties
```

STEP: 5 — Important Annotation and Cleanup Notes

DESCRIPTION: Summary of annotation impacts and cleanup responsibility for implementers and code generators:
- Deleting a connected-fields node removes UI.DataField entries from UI.FieldGroup or UI.Identification annotations.
- Property annotations applied to the entity remain; they are not removed by deletion of UI.DataField.
- Orphaned UI.ConnectedFields annotation entries must be removed with an explicit cleanup procedure (tooling or script) — this is not automatic.

LANGUAGE: PlainText

CODE:
```
Annotations affected:
- Removed: UI.DataField entries in UI.FieldGroup or UI.Identification (when connected-fields node deleted)
- Not removed: annotations applied to entity properties
- Orphan cleanup: UI.ConnectedFields annotation(s) must be explicitly cleaned up (run cleanup procedure to delete unreferenced annotations)
```


**TITLE**: Contact Column — add, move, and delete in Table (List Report / Object Page)

**INTRODUCTION**: Instructions for adding a Contact Column to a table inside a Fiori Tools Page Editor (list report or object page section), moving columns within a table, and deleting a contact column. Includes default behavior (Communication.Contact annotation) and relevant UI properties.

**TAGS**: fiori-tools, contact-column, table, list-report, object-page, annotation, Communication.Contact, UI

STEP: Adding a Contact Column

DESCRIPTION: In the Page Editor, add a Contact Column to a table/section. This creates a Communication.Contact annotation with the default label "Contact Name". You can change the label, importance, hidden state, or contact mapping in the Property Panel. Follow the UI actions below exactly.

- In Page Editor > Columns node:
  1. Click the Add (+) icon.
  2. Choose "Add Contact Column".
  3. In the tree control, select "Contacts".
  4. Click "Add".
- Result: A new Communication.Contact annotation is created (default label: Contact Name). Edit properties in Property Panel.
- Contact Column properties:
  - Label (see appendix: appendix-457f2e9.md#loiod44832d99bdf4f73ba14cdbb16dc9301)
  - Importance (appendix-457f2e9.md#loio7fe32a215209419da6d6c19da0f69ccb)
  - Hidden (appendix-457f2e9.md#loiof7ad71792a0044d6b6172f078827bdc0)
  - Contact mapping (appendix-457f2e9.md#loio82d94533569741e5888536d49052198c)

LANGUAGE: PlainText

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

Image path (reference):
images/FIORI_TOOLS_CONTACT_COLUMN_0e0431c.png

Notes:
- A new Communication.Contact annotation is created by the editor (default label: "Contact Name").
- To change the label or map different properties, use the Property Panel for the Contact Column.
- See appendix links for property definitions:
  - appendix-457f2e9.md#loiod44832d99bdf4f73ba14cdbb16dc9301
  - appendix-457f2e9.md#loio7fe32a215209419da6d6c19da0f69ccb
  - appendix-457f2e9.md#loiof7ad71792a0044d6b6172f078827bdc0
  - appendix-457f2e9.md#loio82d94533569741e5888536d49052198c
```

STEP: Moving a Contact Column

DESCRIPTION: Move a column within a table using drag-and-drop (multiple columns supported) or arrow icons (single column). Use highlighted eligible positions when dragging.

- Drag and Drop:
  - Hover the column header outline.
  - Press and hold mouse button; drag to the highlighted eligible position; release to drop.
  - To move multiple selected columns at once: press [CTRL] + [+] while dragging.
- Arrow Icons:
  - Click Move Up (icon: ) or Move Down (icon: ) next to the column name to move one column at a time.

LANGUAGE: PlainText

CODE:
```PlainText
Drag & Drop:
- Hover over column header outline
- Mouse down -> drag -> release at highlighted position
- Multi-column move: press [CTRL] + [+]

Arrow Icons:
- Use icons next to column name:
  - Move Up: SAP-icons-V5 symbol 
  - Move Down: SAP-icons-V5 symbol 
```

STEP: Deleting a Contact Column

DESCRIPTION: Remove a contact column from a table via the Page Editor.

- Navigate to the column in Page Editor.
- Click the Delete (wastebasket) icon to open Delete Confirmation dialog.
- Confirm by clicking "Delete".

LANGUAGE: PlainText

CODE:
```PlainText
Delete steps:
1. Select the column in the Page Editor.
2. Click the Delete (🗑) icon.
3. In the Delete Confirmation popup, click "Delete" to confirm.
```

fiori-tools contact-column table list-report object-page annotation Communication.Contact UI


**TITLE**: Contact Field (SAP Fiori Tools)

**INTRODUCTION**: Configure and manage a Contact Field in an SAP Fiori Object Page to display contact information as a quick view for a Form Section or Identification Section. This guide describes the UI actions and the annotation element used (Communication.Contact) and preserves related file paths and assets needed for implementation.

**TAGS**: fiori-tools, sap-fiori, annotation, Communication.Contact, object-page, contact-field, ui

**STEP**: 1 — Add a Contact Field

**DESCRIPTION**: Use the Page Editor to add a Contact Field to a Form or Identification section. This creates a Communication.Contact annotation entry. Follow these UI actions precisely:
- In the Page Editor, under the Form or Identification node, click the + (Add) icon and choose "Add Contact Field".
- In the tree control choose "Contact".
- Click "Add" to create a new Communication.Contact annotation.
- Ensure any referenced assets and styles (icons) are available; the application uses the sap icons stylesheet.

**LANGUAGE**: HTML

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

```text
Annotation to create: Communication.Contact
Related docs (for reference): ../form-section-4102b3d.md, ../identification-section-b83f501.md
```

**STEP**: 2 — Move a Contact Field

**DESCRIPTION**: Move the contact field within the same section or between sections in the Page Editor. Moving is allowed unless blocked by annotation path constraints. If you move a Contact Field across different annotation scopes or files, update the relative paths and references of the Communication.Contact annotation in the annotation/metadata files so the UI can resolve the annotation correctly.

**LANGUAGE**: text

**CODE**:
```text
Rules:
- You can move a Contact Field within a section like any other field.
- Moving between sections is permitted only if the relative paths of Communication.Contact and base annotations remain valid.
- If moving between files or annotation scopes, update annotation paths/references in the metadata/annotations files accordingly.

Reference doc filenames:
- form-section-4102b3d.md
- identification-section-b83f501.md
```

**STEP**: 3 — Delete a Contact Field

**DESCRIPTION**: Delete a contact column or field from the Page Editor and remove its annotation entry from your annotations/metadata files to fully remove it from the application.
UI deletion steps:
- Navigate to the field in the Page Editor.
- Click the wastebasket (Delete) icon to open the Delete Confirmation popup.
- Click "Delete" to confirm.
Post-delete: remove the corresponding Communication.Contact annotation and any unused references/assets from your annotations and metadata files to prevent orphaned entries.

**LANGUAGE**: text

**CODE**:
```text
UI Delete Steps:
1. Select field
2. Click Delete (wastebasket) icon
3. Confirm in Delete Confirmation popup

Post-delete actions for code:
- Remove the Communication.Contact annotation entry from your annotation/metadata file(s)
- Remove any unused references or paths that referenced the deleted contact field
```

Contact Field (SAP Fiori Tools)

fiori-tools sap-fiori annotation Communication.Contact object-page contact-field ui


**TITLE**: Guided Development: Available Fiori Tools Guides (Actionable Reference)

**INTRODUCTION**: Short, actionable reference listing currently available guided-development guides for Fiori Tools. Each step describes the goal, the typical files or artifacts to change, and the relevant implementation languages/types to use when writing code or automation for these guides.

**TAGS**: fiori-tools, guided-development, UI5, CAP, OData, XML, TypeScript, Manifest, CDS, ABAP, Extension Point, Page Configuration Change, Flexible Programming Model

STEP: Add a chart building block
DESCRIPTION: Add a chart building block to a page. Update view XML (or page configuration), CDS model (CAP) and OData V4 metadata as needed; connect chart to OData V4 service and Flexible Programming Model annotations/config.
LANGUAGE: CAP CDS, OData V4, Flexible Programming Model
CODE:
```text
// No source code snippet provided. Implement view XML and CDS annotations for chart.
// Typical files: webapp/view/*.xml, srv/*.cds, annotation files, manifest.json
```

STEP: Add a custom action to a page using extensions
DESCRIPTION: Implement a custom action in the page via extension point: create an extension TypeScript or JavaScript file, register it in the manifest or ext folder, add the action handler and UI control placement.
LANGUAGE: OData V2, OData V4, TypeScript
CODE:
```text
// No source code snippet provided. Create extension files under webapp/ext or src/extension.
// Typical files: webapp/extension/MyAction.ts, manifest.json (sap.ui5/extends)
```

STEP: Add a custom card to an overview page
DESCRIPTION: Add a custom card to an overview page by adding new card configuration in the page's XML/JSON configuration or page descriptor and implementing the card renderer as needed.
LANGUAGE: Extension Point
CODE:
```text
// No source code snippet provided. Modify page configuration and implement card under webapp/cards/.
```

STEP: Add a custom filter to the filter bar
DESCRIPTION: Extend the filter bar with a custom filter control using extension points and TypeScript to implement control logic and data binding.
LANGUAGE: TypeScript, Extension Point
CODE:
```text
// No source code snippet provided. Create extension handler and register filter control in the filter bar.
```

STEP: Add a custom section to an object page using extensions
DESCRIPTION: Use extension points to insert a custom section into an object page. Implement controller/fragment or component and register via manifest extensions.
LANGUAGE: OData V2, OData V4
CODE:
```text
// No source code snippet provided. Typical artifacts: webapp/fragment/CustomSection.fragment.xml, extension handler registration.
```

STEP: Add a field group to an object page
DESCRIPTION: Add a field group to an object page by updating view XML, and if applicable, add CDS annotations (CAP or ABAP CDS) to expose fields and groups.
LANGUAGE: XML, CAP CDS, ABAP CDS
CODE:
```text
<!-- No code snippet provided. Update object page view XML and CDS model with @UI.fieldGroup annotations. -->
```

STEP: Add a filter bar building block
DESCRIPTION: Add a filter bar building block using the Flexible Programming Model: update page configuration and CDS/annotations to expose filterable properties and default behavior.
LANGUAGE: Flexible Programming Model
CODE:
```text
// No source code snippet provided. Modify page configuration and annotations in CDS/service definition.
```

STEP: Add a header facet to an object page using data points
DESCRIPTION: Add a header facet populated by data points: update XML header section and CAP/ABAP CDS annotations for DataPoint UI.
LANGUAGE: XML, CAP CDS, ABAP CDS
CODE:
```xml
<!-- No snippet provided. Update header facet in object page XML and use @UI.dataPoint annotations in CDS. -->
```

STEP: Add a link list card to an overview page
DESCRIPTION: Add a link list card by adding the card configuration in the overview page container XML or descriptor and provide an OData or static data source.
LANGUAGE: XML
CODE:
```xml
<!-- No snippet provided. Add card configuration to the overview page XML or manifest card section. -->
```

STEP: Add a list card to an overview page
DESCRIPTION: Insert a list card into the overview page by editing the page/cards XML and wiring the card to a data source (OData).
LANGUAGE: XML
CODE:
```xml
<!-- No snippet provided. Update overview page container XML with card element for list card. -->
```

STEP: Add a new contact view column to a table
DESCRIPTION: Add contact view column to a table in view XML and annotate CDS models (CAP/ABAP) to provide contact data or association; update column template and binding.
LANGUAGE: XML, CAP CDS, ABAP CDS
CODE:
```xml
<!-- No snippet provided. Modify table column definitions in view XML and add CDS annotations for contact fields. -->
```

STEP: Add a new section to an object page
DESCRIPTION: Add a new content section to an object page by editing the object page XML, adding new section/subsection nodes and mapping to the entity properties via bindings and annotations.
LANGUAGE: XML, CAP CDS, ABAP CDS
CODE:
```xml
<!-- No snippet provided. Edit objectPageLayout sections in view XML and update CDS annotations accordingly. -->
```

STEP: Add a new visual filter to the filter bar
DESCRIPTION: Add a visual filter control to the smart filter bar by updating page XML and exposing values via CDS; configure visual filter metadata.
LANGUAGE: XML, CAP CDS
CODE:
```xml
<!-- No snippet provided. Add visualFilter element and link to CDS annotated property. -->
```

STEP: Add a progress indicator column to a table
DESCRIPTION: Introduce a progress indicator column: update table XML with progress control and add CDS annotations for numeric progress values.
LANGUAGE: XML, CAP CDS, ABAP CDS
CODE:
```xml
<!-- No snippet provided. Define new column with ProgressIndicator control in table view XML. -->
```

STEP: Add a rating indicator column to a table
DESCRIPTION: Add a rating indicator column to a table by adding corresponding XML column and binding to rating value in CDS; ensure correct format and annotations.
LANGUAGE: XML, CAP CDS, ABAP CDS
CODE:
```xml
<!-- No snippet provided. Add RatingIndicator control binding in table column XML. -->
```

STEP: Add a smart chart facet to an object page
DESCRIPTION: Add a Smart Chart facet to an object page by updating view XML and manifest, enabling Smart Chart and connecting it to the entity set via annotations/metadata.
LANGUAGE: XML, Manifest Change
CODE:
```xml
<!-- No snippet provided. Add smartChart aggregator facet in object page XML and necessary manifest settings. -->
```

STEP: Add a smart micro chart column to a table
DESCRIPTION: Add a micro chart as a table column: update table XML and annotate CDS models to expose the measure/dimension fields.
LANGUAGE: XML, CAP CDS, ABAP CDS
CODE:
```xml
<!-- No snippet provided. Insert MicroChart control inside table column template and map CDS fields. -->
```

STEP: Add a stack card to an overview page
DESCRIPTION: Add a stack card to the overview page by adding card configuration to the overview layout XML and implementing data provider when needed.
LANGUAGE: XML
CODE:
```xml
<!-- No snippet provided. Add stack card configuration in overview cards section. -->
```

STEP: Add a static link list card to an overview page
DESCRIPTION: Add a static link list card by editing the page's card configuration (page descriptor or page configuration change), using static entries instead of OData.
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Add static card definition to page configuration JSON descriptor.
```

STEP: Add a table card to an overview page
DESCRIPTION: Add a table card to the overview page by configuring a card with an entity set, columns and filters in the overview page XML and CDS.
LANGUAGE: XML, CAP CDS
CODE:
```xml
<!-- No snippet provided. Configure tableCard and link to CAP CDS entity set. -->
```

STEP: Add a table building block
DESCRIPTION: Add a reusable table building block by creating/updating XML fragments and CDS/OData metadata (CAP and OData V4) for data binding and operations.
LANGUAGE: CAP CDS, OData V4
CODE:
```text
// No snippet provided. Create table fragment XML and expose entity in CDS for OData V4 consumption.
```

STEP: Add an action button
DESCRIPTION: Add an action button to a page or table: update XML view to include Button control and wire action handler in controller or extension.
LANGUAGE: XML
CODE:
```xml
<!-- No snippet provided. Insert Button control into toolbar or header in view XML and implement handler. -->
```

STEP: Add a value help to a field in the filter bar
DESCRIPTION: Add value help (F4) for a filter field by updating XML and wiring to a value help dialog/annotation, with data from CDS or OData.
LANGUAGE: XML, CAP CDS
CODE:
```xml
<!-- No snippet provided. Add valueHelp configuration on filter field and provide value list source in CDS. -->
```

STEP: Add an analytical card to an overview page
DESCRIPTION: Add an analytical card by configuring chart/KPI card in the overview page XML and linking to OData/CAP service with annotations for measures and dimensions.
LANGUAGE: XML, CAP CDS
CODE:
```xml
<!-- No snippet provided. Add analytical card configuration referencing CAP CDS entity/annotations. -->
```

STEP: Add and edit filter fields
DESCRIPTION: Add or edit filter fields on the filter bar by modifying filter bar XML and CDS annotations to expose and configure fields and defaults.
LANGUAGE: XML, CAP CDS, ABAP CDS
CODE:
```xml
<!-- No snippet provided. Modify smartFilterBar or filterBar control configurations and CDS annotations. -->
```

STEP: Add and edit table columns
DESCRIPTION: Add or update table columns in view XML, adjust CDS/ABAP CDS annotations for labels, formatters, and binding paths.
LANGUAGE: XML, CAP CDS, ABAP CDS
CODE:
```xml
<!-- No snippet provided. Update lineItem annotations in CDS or modify table column elements in view XML. -->
```

STEP: Add custom columns to the table using extensions
DESCRIPTION: Use extension points to add custom columns to tables: create extension fragment and register insertion point.
LANGUAGE: Extension Point
CODE:
```text
// No snippet provided. Place custom column fragment and extend table via manifest extension points.
```

STEP: Add an interactive chart to a list page
DESCRIPTION: Add an interactive chart to a list page by inserting chart control in the list page XML and mapping to CDS-provided measures/dimensions.
LANGUAGE: XML, CAP CDS
CODE:
```xml
<!-- No snippet provided. Add Chart control and provide data binding to CAP CDS entities. -->
```

STEP: Add a key performance indicator (KPI) tag to a page
DESCRIPTION: Add KPI tag to a page header or card by inserting KPI control in XML and provisioning CDS annotations for KPI values and thresholds.
LANGUAGE: XML, CAP CDS
CODE:
```xml
<!-- No snippet provided. Add KPI tag control and map to annotated CDS KPI properties. -->
```

STEP: Add multiple fields to a column in responsive tables
DESCRIPTION: Combine multiple fields within a single responsive table column by adding composite controls or formatting within the column template in XML and mapping to CDS fields.
LANGUAGE: XML, CAP CDS
CODE:
```xml
<!-- No snippet provided. Use layout controls inside a single column to show multiple fields. -->
```

STEP: Add semantic colors to visual filters
DESCRIPTION: Apply semantic color mapping to visual filters by configuring filter metadata and CSS classes/annotated values in CDS for OData V2/V4.
LANGUAGE: XML OData V2, XML OData V4, CAP CDS
CODE:
```xml
<!-- No snippet provided. Define semantic coloring rules for visual filters via annotations/metadata. -->
```

STEP: Add semantic highlights to line items in a table
DESCRIPTION: Add semantic highlighting (color/importance) to table rows or cells by updating XML and CDS annotations to calculate status and style classes.
LANGUAGE: XML, CAP CDS
CODE:
```xml
<!-- No snippet provided. Use semantic object/formatter or annotation-driven style class binding in table. -->
```

STEP: Add status colors and icons to a column in a table
DESCRIPTION: Add status-dependent colors and icons to a table column via UI controls (ObjectStatus, Icon) and CDS annotations providing state values.
LANGUAGE: XML, CAP CDS, ABAP CDS
CODE:
```xml
<!-- No snippet provided. Insert ObjectStatus/Icon controls with binding to CDS status fields and formatter logic. -->
```

STEP: Configure flexible column layout
DESCRIPTION: Enable/configure Flexible Column Layout behavior through manifest changes and view layout settings to control navigation/responsive behavior.
LANGUAGE: Manifest Change
CODE:
```json
// No snippet provided. Update manifest.json routing and sap.ui5 configuration for FlexibleColumnLayout.
```

STEP: Configure inbound navigation
DESCRIPTION: Configure inbound navigation targets and parameters via page configuration changes or manifest routing configuration.
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Add navigation target in page configuration or manifest routing targets.
```

STEP: Configure multiple selection for a table
DESCRIPTION: Enable multi-select mode in tables via XML changes and manifest settings; ensure OData V2/V4 handling for batch operations is configured.
LANGUAGE: OData V2, OData V4, Manifest Change
CODE:
```xml
<!-- No snippet provided. Set selectionMode="MultiToggle" in table XML and update manifest for selection behavior. -->
```

STEP: Configure multiple views for tables
DESCRIPTION: Configure multiple table views (view variants) in XML and CDS annotations to offer different column sets or filters.
LANGUAGE: XML OData V2, XML OData V4, CAP CDS
CODE:
```xml
<!-- No snippet provided. Define multiple view variants in view XML and link to CDS properties. -->
```

STEP: Configure mass edit via dialog
DESCRIPTION: Configure mass edit functionality through page configuration changes: add mass edit action, dialog definition, and backend endpoint or CDS action.
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Add massEdit action and dialog configuration to page descriptor.
```

STEP: Configure object page header
DESCRIPTION: Configure what appears in the object page header by editing header XML and CDS/ABAP annotations to include title, attributes, and actions.
LANGUAGE: XML, CAP CDS, ABAP CDS
CODE:
```xml
<!-- No snippet provided. Modify object page header facets and bindings in view XML and CDS annotations for attributes. -->
```

STEP: Configure outbound navigation
DESCRIPTION: Configure outbound navigation actions and target definitions via XML view updates (navigation controls) and manifest entries for external targets.
LANGUAGE: XML
CODE:
```xml
<!-- No snippet provided. Add navigation control configuration and destructure parameters in view XML. -->
```

STEP: Configure selection of all rows in a table
DESCRIPTION: Enable select-all behavior in tables by updating manifest or table configuration to support global selection actions.
LANGUAGE: Manifest Change
CODE:
```json
// No snippet provided. Toggle selection settings in manifest or table configuration to enable select-all.
```

STEP: Configure side effects
DESCRIPTION: Define side effects for properties and actions via XML and CDS annotations so that changes refresh dependent data or UI areas.
LANGUAGE: XML, CAP CDS
CODE:
```xml
<!-- No snippet provided. Update sideEffect annotations in CDS or view metadata to trigger UI updates. -->
```

STEP: Configure spreadsheet export
DESCRIPTION: Add spreadsheet export configuration by changing page configuration to enable export action, columns, and formatting rules.
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Add export configuration to page descriptor with selected columns and formats.
```

STEP: Configure variant management for controls and pages
DESCRIPTION: Enable variant management and save/load variants for controls/pages via OData-based configuration, UI variant persistence settings, and manifest routes.
LANGUAGE: OData V2, OData V4
CODE:
```text
// No snippet provided. Configure VariantManagement control; persist variants via personalization/manifest settings.
```

STEP: Configure default grouping in a table
DESCRIPTION: Set default grouping on table load via XML settings and/or page configuration; use OData grouping or client-side grouping logic.
LANGUAGE: XML, OData V2, Page Configuration Change
CODE:
```xml
<!-- No snippet provided. Configure defaultGroupBy property or equivalent grouping settings in table/view XML or page config. -->
```

STEP: Configure auto load for a table
DESCRIPTION: Configure whether a table auto-loads its data on initial navigation via OData settings or manifest properties for both V2 and V4.
LANGUAGE: OData V2, OData V4
CODE:
```text
// No snippet provided. Adjust list report/table auto-load flags in manifest or view metadata.
```

STEP: Configure table type
DESCRIPTION: Choose and configure the table type (ResponsiveTable, GridTable, AnalyticalTable) via view XML and dataset binding settings for OData V2/V4.
LANGUAGE: OData V2, OData V4
CODE:
```xml
<!-- No snippet provided. Replace table control tag in view XML with desired table control and update bindings. -->
```

STEP: Define a filter facet
DESCRIPTION: Define a filter facet by adding filter facet XML configuration to filter bar or facet container and mapping to properties.
LANGUAGE: XML
CODE:
```xml
<!-- No snippet provided. Add <FilterFacet> element to smartFilterBar or facet container with binding. -->
```

STEP: Enable a Show Related Apps button
DESCRIPTION: Add Show Related Apps button via page configuration change to provide related apps navigation; update page descriptor.
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Add relatedApps configuration entry to page descriptor or toolbar configuration.
```

STEP: Enable condensed table layout
DESCRIPTION: Enable condensed table UI density for tables globally or per-table via manifest density or table properties.
LANGUAGE: Manifest Change
CODE:
```json
// No snippet provided. Set sapUiSizeCompact or specific table compact mode in manifest.json settings.
```

STEP: Enable data label in analytical charts
DESCRIPTION: Enable data labels in analytical charts by updating page configuration to turn on labels and formatting; connect to chart metadata settings.
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Add chartDataLabel configuration to page/card descriptor enabling labels.
```

STEP: Enable data label in smart charts and KPI cards
DESCRIPTION: Turn on data labels in smart charts and KPI cards through page configuration change (card or chart descriptor).
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Configure card/chart properties to show data labels in page configuration.
```

STEP: Enable draft toggle buttons
DESCRIPTION: Add draft toggle buttons in page toolbar via page configuration changes to switch between draft and non-draft modes.
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Add draft toggle button entries to page toolbar configuration in page descriptor.
```

STEP: Enable inline creation of table entries
DESCRIPTION: Enable inline creation/editing in tables by configuring editable table mode via page configuration and OData annotations/actions.
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Set inlineCreate settings in page configuration and ensure OData service supports create.
```

STEP: Enable object creation in a table via dialog
DESCRIPTION: Enable creating objects using a creation dialog tied to a table by manifest or view-level configuration for dialog definition and backend create action handling.
LANGUAGE: Manifest Change
CODE:
```json
// No snippet provided. Add creationDialog definition to manifest or page descriptor and link to entity/create action.
```

STEP: Enable semantic date range on smart filter bar
DESCRIPTION: Enable semantic date range picker in smart filter bar via page configuration changes to present predefined ranges (Today, Last 7 days, etc.).
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Add semanticDateRange configuration to smart filter bar settings in descriptor.
```

STEP: Extend forms in sections
DESCRIPTION: Use extension points to extend section forms; add extension fragments or views and register them to be included in section layout at runtime.
LANGUAGE: Extension Point
CODE:
```text
// No snippet provided. Create extension fragments under webapp/extension and register via manifest extension points.
```

STEP: Extend object page headers using extensions
DESCRIPTION: Use extension points to add custom header controls/content to object page headers; implement extension controller or fragment and register.
LANGUAGE: Extension Point
CODE:
```text
// No snippet provided. Place header extension fragment and configure insertion point in manifest/descriptor.
```

STEP: Set default filter values for the filter bar
DESCRIPTION: Configure default filter values by updating filter bar XML or CDS annotations to define initial property values upon page load.
LANGUAGE: XML, CAP CDS
CODE:
```xml
<!-- No snippet provided. Set defaultValue in smartFilterBar field definitions or provide defaultValue annotation in CDS. -->
```

STEP: Set selection limit for tables
DESCRIPTION: Configure selection limit (max selectable rows) via page configuration changes so UI enforces selection constraints for batch operations.
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Add selectionLimit property in page descriptor or table configuration.
```

STEP: Specify layout for the card container
DESCRIPTION: Define the layout (grid, column) for the card container by modifying page configuration to set container layout and card sizes.
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Update cardContainer layout settings in page descriptor.
```

STEP: Specify refresh interval for cards
DESCRIPTION: Set automatic refresh interval for cards by changing page configuration to schedule periodic refreshes and data retrieval.
LANGUAGE: Page Configuration Change
CODE:
```json
// No snippet provided. Add refreshInterval property to card configuration in page descriptor.
```

fiori-tools
guided-development
UI5
CAP
OData
XML
TypeScript
Manifest
CDS
ABAP
Extension Point
Page Configuration Change
Flexible Programming Model


**TITLE**: Define Application Structure with SAP Fiori Tools Page Map

**INTRODUCTION**: Step-by-step developer-focused reference for launching and using the SAP Fiori Tools Page Map (Application Modeler) to modify application-wide settings and page structure for SAP Fiori elements (and experimental SAPUI5 freestyle support). Includes exact UI actions, file paths, and links to underlying templates.

**TAGS**: fiori-tools, application-modeler, page-map, sapui5, sap-fiori, odata-v4

**STEP**: 1 — Include SAP icon stylesheet (project files)
**DESCRIPTION**: Ensure your project references the SAP icon stylesheet used by the Page Map UI (example link used in documentation). Keep this file path if replicating the docs or UI samples.
**LANGUAGE**: HTML
**CODE**:
```html
<link rel="stylesheet" type="text/css" href="../css/sap-icons.css"/>
```

**STEP**: 2 — Launch the Page Map
**DESCRIPTION**: Three ways to open the Page Map in VS Code. Select your SAP Fiori elements project from the workspace when prompted.
- From Application Info (see Project Functions > Application Information).
- From the Command Palette: open the palette, type the command, then select the project.
- From the folder context menu: right-click the project folder and choose Show Page Map.
**LANGUAGE**: text
**CODE**:
```
Command Palette: Fiori: Show Page Map
Keystroke (mac / win): Cmd/Ctrl + Shift + P
Context Menu: Right-click project folder → Show Page Map
Reference: ../Project-Functions/application-information-c3e0989.md
```

**STEP**: 3 — Application Settings (global)
**DESCRIPTION**: When Page Map opens, the default view shows Application Settings. Update values here to apply application-wide configuration immediately. These values are reflected in the project files (webapp/manifest.json and SAPUI5 flexibility records).
- Title: change application title.
- Description: change application description.
- Flex Enabled: controls UI Adaptation (UI flexibility).
  - true — Enables UI Adaptation.
  - false — Disables UI Adaptation.
  - default — undefined.
- Toggle Properties Panel Visibility: hide/show the properties panel in the Page Map UI.
- Images referenced in docs:
  - images/Flex_Enabled_48e56f4.png
  - images/Page_Map_bd3ac9b.png
**LANGUAGE**: text
**CODE**:
```
Affected file: webapp/manifest.json
Note: Changes are applied immediately and update SAPUI5 flexibility artifacts.
External docs: https://sapui5.hana.ondemand.com/#/topic/f1430c0337534d469da3a56307ff76af
```

**STEP**: 4 — Add a New Page (Fiori elements)
**DESCRIPTION**: Add a standard page (e.g., ObjectPage) via the Page Map UI.
- Click the Add New Page icon (SAP icon shown in UI header).
- From Select Page Type, choose "ObjectPage".
- Click Add.
- In Navigation, select the target entity the page will navigate to (list depends on current navigation context).
- For details on editable page elements and entity choices, open Configure Page Elements.
**LANGUAGE**: text
**CODE**:
```
UI actions:
1) Click Add New Page (header icon)
2) Select: ObjectPage
3) Click Add
4) Navigation: choose entity
Reference: configure-page-elements-047507c.md
```

**STEP**: 5 — Add a Custom Page (OData V4 only)
**DESCRIPTION**: For OData V4 projects you can add a CustomPage from templates provided by Page Map.
- Click Add New Page icon in the header of a page file.
- Select "CustomPage" from Select Page Type, then click Add.
- In Navigation, choose the entity the custom page targets.
- Under "Select your view", choose one:
  - Create a New View — Page Map will create a new view file.
  - Use Existing View — Page Map lists prepared sample custom views.
- Enter or select a View Name in the View Name field.
- Click Add. A success message appears (example: "Custom Page ProcessFlow added successfully").
- Note: The Page Map custom page templates for OData V4 are published in the open-source package @sap-ux/fe-fpm-writer (see link).
**LANGUAGE**: text
**CODE**:
```
UI actions:
1) Header → Add New Page
2) Select: CustomPage → Add
3) Navigation: select target entity
4) Select your view: [Create a New View | Use Existing View]
5) View Name: enter or choose
6) Click Add → success message
Reference (templates): https://github.com/SAP/open-ux-tools/blob/main/packages/fe-fpm-writer/README.md
```

**STEP**: 6 — Configure Page Elements (edit page properties)
**DESCRIPTION**: Open Configure Page Elements to edit page-level properties and outline. Access it from:
- the Configure Page (pencil) icon in the header of a page file, or
- the tree view of the Application Modeler.
Changes applied here update webapp/manifest.json and SAPUI5 flexibility artifacts automatically.
**LANGUAGE**: text
**CODE**:
```
Open: Configure Page (pencil icon) OR tree view → Configure Page Elements
Effect: Updates written to webapp/manifest.json and UX flexibility changes
Reference: configure-page-elements-047507c.md
Affected file path: webapp/manifest.json
```

**STEP**: 7 — Delete a Page
**DESCRIPTION**: Remove a page from the application via the Delete Page (wastebasket) icon in the page header. Note: SAPUI5 freestyle support in Page Map is experimental and has limitations (for example, adding/deleting pages in freestyle apps may not be supported).
**LANGUAGE**: text
**CODE**:
```
UI action: Click Delete Page (wastebasket icon) in page header
Warning: Freestyle projects — experimental support with limited operations (e.g., cannot add/delete pages)
```

**STEP**: 8 — References and External Links
**DESCRIPTION**: Useful links and artifact references used by Page Map and templates.
**LANGUAGE**: text
**CODE**:
```
Page Map templates (OData V4): https://github.com/SAP/open-ux-tools/blob/main/packages/fe-fpm-writer/README.md
Fiori layouts: https://experience.sap.com/fiori-design-web/list-report-floorplan-sap-fiori-element/
SAPUI5 Flexibility docs: https://sapui5.hana.ondemand.com/#/topic/f1430c0337534d469da3a56307ff76af
Project references in docs: ../Project-Functions/application-information-c3e0989.md
Configure Page Elements doc: configure-page-elements-047507c.md
```

fiori-tools application-modeler page-map sapui5 sap-fiori odata-v4


**TITLE**: Develop with a Guide — Fiori Tools Guided Development Reference

**INTRODUCTION**: Step-by-step, code-focused reference for using the Fiori Tools "Develop with a Guide" feature. Contains the exact CSS and inline icon markup used by the guide UI, UI behavior rules, parameter/table handling, keyboard interactions, and view-mode toggle instructions. Use this to script UI automation, implement the guide integration, or generate code snippets for developer guidance.

**TAGS**: fiori-tools, guide, sap-icons, annotations, UI, keyboard, parameters, split-view

**STEP**: 1 — Add SAP icon stylesheet

**DESCRIPTION**: Import the SAP icon CSS used by the guide UI. Place this link in the HTML head or the appropriate shared layout file so the guide, icons, and icon markup render correctly.

**LANGUAGE**: HTML

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

**STEP**: 2 — Icon markup used by the guide UI (expand, information)

**DESCRIPTION**: The guide UI uses inline <span> elements with specific classes to render SAP icon glyphs. Use the exact markup when replicating the guide UI or injecting icon markup into generated snippets. The "Expand view" icon and "Information" icon examples are shown below. Keep the class names intact.

**LANGUAGE**: HTML

**CODE**:
```html
<!-- Expand view icon (used in top-right of guide window) -->
<span class="SAP-icons-V5"></span>

<!-- Information icon (used to link to further documentation in Guide details) -->
<span class="SAP-icons-V5"></span>
```

**STEP**: 3 — Launch guide and split / expand behavior

**DESCRIPTION**: Start a selected guide by clicking Start Guide under the chosen guide description. Default presentation is side-by-side split view showing: (A) guides list, (B) selected guide window. Implement or automate the following behaviors:
- Allow resizing by dragging the vertical divider between the windows.
- Provide an Expand view control (see icon markup in Step 2) in the upper-right of the guide window to exit split view and expand the guide.
- Auto-hide the guides list when the application window is reduced below the responsive threshold.

**LANGUAGE**: text

**CODE**:
```text
Start Guide -> open side-by-side view
Resizable divider -> drag vertical line between windows
Expand view -> click <span class="SAP-icons-V5"></span> in guide top-right
Responsive behavior -> hide guides list when window width < responsiveThreshold
```

**STEP**: 4 — Guide content and step composition (what a step contains)

**DESCRIPTION**: Each guide step provided to developers contains these elements. When programmatically generating or validating guide steps, ensure all the elements below are present and correctly linked:
- Target file(s) to change (path + filename)
- Brief description of the required change
- Code snippet with a sample implementation
- Parameters that control placeholders in the snippet (drop-downs, free text, selections)
- Optional: list of Annotation Terms (when the guide involves annotations)
- Tooltip text for Annotation Terms (hover behavior)

This is the authoritative structure for each step; code generation should populate the snippet and parameters, validate parameter inputs, then apply or copy the resulting snippet.

**LANGUAGE**: text

**CODE**:
```text
GuideStep {
  targetFiles: [ "path/to/target.file" ],
  description: "Short description of the change",
  snippet: "Code sample with placeholders",
  parameters: [
    { name: "ParamA", type: "select/text", options: [...] },
    { name: "ParamB", type: "text" }
  ],
  annotations?: [ "AnnotationTerm1", "AnnotationTerm2" ],
  tooltips: { "AnnotationTerm1": "Description..." }
}
```

**STEP**: 5 — Parameter input behavior and error handling

**DESCRIPTION**: Parameter UI supports single and multiple selections, dynamic snippet updates, and inline validation. Implement the following behaviors in code generation flows:
- Allow selecting multiple values from dropdowns where indicated.
- After all parameters are provided, enable two actions per step: Insert/apply snippet or Copy snippet.
- On validation error, scroll focus to the invalid parameter and block the Insert Snippet action until corrected.
- Re-enable the Insert Snippet button when the user changes the parameter to a valid value.

**LANGUAGE**: text

**CODE**:
```text
ParameterFlow:
  - renderParameters(step.parameters)
  - onParameterChange -> validateParameter(param)
    - if invalid -> scrollTo(param); disableInsertSnippet()
    - if valid -> enableInsertSnippetIfAllValid()
  - InsertSnippet -> applySnippet(snippet, parameters)
  - CopySnippet -> copyToClipboard(resolvedSnippet)
```

**STEP**: 6 — Table of parameters for screen elements (Add / Reorder behavior)

**DESCRIPTION**: Several guides expose an editable table of parameters (columns, filters, selection fields). The UI and automation must support:
- Adding rows via Add buttons above the table (e.g., "Add column", "Add selection field").
- Dropdown on Add to choose variants (e.g., "Add Data Field" or "Add Data Field for Annotation") which changes available parameter inputs for the new row.
- If table has >5 rows, render an additional Add button below the table to reduce scrolling.
- Reordering rows by drag-and-drop and by keyboard navigation. The order affects generated code; show a loading indicator while the snippet updates.

Screenshots referenced (preserve file paths for UI integration or tests):
- images/FioriTools_DevelopwithGuide_141af07.png
- images/FT_Moving_Columns_fd5f702.png

**LANGUAGE**: text

**CODE**:
```text
TableButtons:
  topAddButton: "Add column" | "Add selection field" (with dropdown)
  bottomAddButton: render if rows > 5

OnAdd(newType):
  createRow(newType)
  renderRowParameters(for newType)

OnRowReorder:
  - dragAndDrop -> updateRowOrder()
  - keyboardNavigation -> updateRowOrder()
  showLoadingIndicatorUntil(snippetUpdateComplete)
```

**STEP**: 7 — Keyboard navigation to reorder rows

**DESCRIPTION**: Provide keyboard accessibility to rearrange table rows. Implement focus traversal and key handling exactly as described:
- Tab into the parameter collection until focus reaches the rearrangement controls.
- Use Left/Right arrow keys to toggle between Up and Down arrow controls.
- Press Enter to move the currently focused row in the chosen direction.
- While the reordering operation processes, display a loading indicator and update the code snippet in the background.

**LANGUAGE**: text

**CODE**:
```text
KeyboardReorder:
  onFocus(collection):
    while focus within parameters:
      if Tab -> moveFocusToRearrangementArrows()
  onLeftArrow -> selectUpArrow()
  onRightArrow -> selectDownArrow()
  onEnter -> performMove(selectedDirection)
  showLoadingIndicator()
  updateSnippetAsync()
```

**STEP**: 8 — Guide view modes and settings toggles

**DESCRIPTION**: The guide supports two main modes and two description visibility states. Provide a Settings UI (gear icon) to toggle modes. Implement the following toggles and behavior:
- Wizard mode (default): show one step per screen, navigation controls Next/Back. Also allow clicking numbered step tiles to jump.
- Full view mode: show all steps in a single scrollable view, maintain clickable step tiles for quick navigation.
- Show Descriptions (default): display step description and parameter descriptions.
- Hide Descriptions: hide step descriptions and parameter descriptions to compact the UI.

Settings UI reference image path:
- images/SettingsMenu_1bd394c.png

Settings behavior mapping for automation:

**LANGUAGE**: text

**CODE**:
```text
Settings:
  renderGearIcon() -> click opens settings menu (images/SettingsMenu_1bd394c.png)
  toggles:
    wizardMode: boolean (default true)
    showDescriptions: boolean (default true)

ModeBehavior:
  if wizardMode:
    renderSingleStepView()
    navButtons: ["Back", "Next"]
  else:
    renderFullScrollableView()

  if showDescriptions:
    show(step.description)
    show(parameter.description)
  else:
    hide(step.description)
    hide(parameter.description)
```

**STEP**: 9 — Annotation Terms (tooltips and use)

**DESCRIPTION**: When a guide step requires creating annotations, the guide lists Annotation Terms. Implement:
- Tooltip on hover over each Annotation Term that contains definition and usage notes.
- Option to select annotation-driven alternatives when adding parameters (e.g., "Add Data Field for Annotation").
- Ensure generated snippets reference the chosen annotation terms and include necessary imports/metadata in the target files.

**LANGUAGE**: text

**CODE**:
```text
AnnotationTerm {
  id: "com.example.Annotation",
  label: "Annotation Name",
  tooltip: "Purpose and usage of the annotation term",
  requiredImports: [ "namespace.for.annotation" ]
}

OnAnnotationSelection(term):
  injectAnnotationUsage(term) into targetFileSnippet
  addImportsIfMissing(term.requiredImports)
```

fiori-tools guide sap-icons annotations UI keyboard parameters split-view


**TITLE**: Developing an Application (SAP Fiori Tools — Application Modeler)

**INTRODUCTION**: Use SAP Fiori Tools — Application Modeler to preview and customize a generated SAP Fiori elements application. This guide lists actionable steps to integrate required assets, navigate the Application Modeler UI (Page Map, Page Editor, Property Panel), and generate mock data with AI. Keep referenced file paths and links for automation or tooling that needs to access these artifacts.

**TAGS**: fiori-tools, sap-fiori-elements, application-modeler, preview, page-map, page-editor, property-pane, mock-data, ai

STEP: 1 — Include required stylesheet asset

DESCRIPTION: Ensure the application includes the SAP icons stylesheet. Place the following snippet in your HTML head (or appropriate template/file) so the preview and editor render icons correctly. Keep the relative path exactly as in the project structure.

LANGUAGE: HTML

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

STEP: 2 — Open the Application Modeler (Page Map)

DESCRIPTION: Launch the Application Modeler extension to view the Page Map. The Page Map provides a visual representation of pages, navigations, and service entities used by the app. From the Page Map you can:
- Add or remove pages and navigations.
- Inspect global page settings that apply project-wide.
- Navigate to editing tools (Page Editor, Property Panel).

Preserve and reference this documentation link when automating or scripting flows: ../Generating-an-Application/SAP-Fiori-Elements/sap-fiori-elements-1488469.md and ../Previewing-an-Application/previewing-an-application-b962685.md

Include the Page Map image for UI mapping or visual tests:
- images/FIORI_TOOLS_PAGE_MAP_96cfbae.png

LANGUAGE: None

CODE:
```text
Page Map image path: images/FIORI_TOOLS_PAGE_MAP_96cfbae.png
Documentation links:
- Generated app: ../Generating-an-Application/SAP-Fiori-Elements/sap-fiori-elements-1488469.md
- Previewing: ../Previewing-an-Application/previewing-an-application-b962685.md
```

STEP: 3 — Open the Page Editor from Page Map

DESCRIPTION: In the Page Map click the :pencil2: (Configure Page) icon to open the Page Editor. Use the Page Editor to view the page outline and selectable configurable nodes. This is the entry point to modify page structure and to open the Property Panel for node-level configuration.

LANGUAGE: None

CODE:
```text
Action: Click the "Configure Page" (pencil) icon in Page Map to open the Page Editor.
```

STEP: 4 — Configure page elements via Page Editor and Property Panel

DESCRIPTION: Use the Page Editor to select any node (UI element or layout node). When a node is selected:
- The Property Panel opens showing configurable properties for that node.
- Update properties in the Property Panel.
- Saved changes are converted into corresponding artifact changes or UI flexibility changes within the project's folder structure.
- After save, the Application Modeler triggers a refresh of the preview.

Include UI image references for mapping automation and tests:
- Page Editor: images/FIORI_TOOLS_PAGE_EDITOR_f3232a4.png
- Property Panel: images/FIORI_TOOLS_PROPERTY_PANE_257df73.png

LANGUAGE: None

CODE:
```text
Workflow:
1. Open Page Editor (from Page Map).
2. Select node -> Property Panel opens.
3. Edit properties -> Save.
4. Changes persisted to project artifacts or UI flexibility.
5. Preview refreshed automatically.

Image paths:
- Page Editor: images/FIORI_TOOLS_PAGE_EDITOR_f3232a4.png
- Property Panel: images/FIORI_TOOLS_PROPERTY_PANE_257df73.png
```

STEP: 5 — Generate Mock Data with AI

DESCRIPTION: Use the Application Modeler feature "Generating Mock Data with AI" to create meaningful, contextually relevant mock data. The tool uses entity property names to infer and generate sample values. Use this when previewing pages that require realistic sample data.

Reference docs and image:
- Docs: ../Previewing-an-Application/generating-mock-data-with-ai-815c310.md
- Image: images/Generate_Mock_Data_with_AI_34759c0.png

LANGUAGE: None

CODE:
```text
Action: Run "Generate Mock Data with AI" from Application Modeler.
Inputs: Entity property names and metadata.
Output: Mock payloads saved into project mock data artifacts (used by preview).
Docs path: ../Previewing-an-Application/generating-mock-data-with-ai-815c310.md
Image path: images/Generate_Mock_Data_with_AI_34759c0.png
```

fiori-tools sap-fiori-elements application-modeler preview page-map page-editor property-pane mock-data ai


**TITLE**: Diagnostics for the XML Annotation Language Server (fiori-tools)

**INTRODUCTION**: The XML Annotation Language Server validates annotation files against project metadata, annotation vocabularies, and the OData specification. Validation runs when you open an annotation file and retriggers on each change to annotation files, metadata, or project structure. Use these diagnostics to find errors, warnings, and info messages and to apply suggested Quick Fixes.

**TAGS**: fiori-tools, diagnostics, annotation, LSP, OData, metadata, quick-fix, problems-panel, code-completion

**STEP**: 1 — What diagnostics validate and when

**DESCRIPTION**: Diagnostics validate annotation files against:
- Project metadata
- Annotation vocabularies
- OData specification

Validation triggers:
- When you open an annotation file
- On every change to annotation files, metadata, or project structure

Limitations:
- Annotations embedded in the metadata and dynamic expressions are not supported by Diagnostics.

**LANGUAGE**: text

**CODE**:
```text
Validation triggers:
- on file open
- on file save / change
- on metadata or project structure change

Unsupported:
- Annotations embedded in metadata
- Dynamic expressions
```

**STEP**: 2 — Assets referenced in docs (preserve link)

**DESCRIPTION**: Keep the provided UI assets reference as-is if copying or rendering documentation. Preserve file paths when reusing project docs.

**LANGUAGE**: HTML

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

**STEP**: 3 — Viewing diagnostics in the editor

**DESCRIPTION**: View diagnostic messages by:
- Hovering the highlighted code in the annotation file to see the message tooltip
- Opening the Problems panel to see aggregated messages

Navigation:
- Click a message in the Problems panel to jump to the related location in the annotation file.

**LANGUAGE**: text

**CODE**:
```text
View diagnostics:
- Hover over highlighted code in the annotation file
- Open Problems panel (Editor > View > Problems)

Navigate:
- Click a Problems panel entry to open the corresponding file location
```

**STEP**: 4 — Fixing diagnostics with Code Completion

**DESCRIPTION**: When the diagnostic is related to an incorrect element or value, use editor code completion to pick a suggested correct value. Trigger completion with the editor's completion shortcut and select from suggestions.

**LANGUAGE**: text

**CODE**:
```text
Trigger code completion:
- Windows: Ctrl + Space
- macOS:  Cmd  + Space

Action:
- Start typing or open completion, then select a suggested value to apply it.
```

**STEP**: 5 — Fixing diagnostics with Quick Fixes (Light Bulb)

**DESCRIPTION**: If Quick Fix actions are provided, apply them:
- Click the light bulb icon shown with the diagnostic error/warning
- Choose one of the suggested Quick Fix actions to apply the change automatically

**LANGUAGE**: text

**CODE**:
```text
Quick Fix:
- Click the light bulb icon appearing beside the diagnostic
- Select a suggested fix (applies change automatically)
```

**STEP**: 6 — When to edit local copies vs. backend metadata

**DESCRIPTION**: Diagnostics for local copies of metadata and backend annotation files are informational only. Do not rely on editing local copies to fix service-side issues. Apply fixes to the original service metadata on the backend; changes to local copies do not affect the deployed app or preview with real service data.

**LANGUAGE**: text

**CODE**:
```text
Important:
- Diagnostics on local copies are informational only.
- Make fixes in the original service metadata (backend).
- Local edits do NOT affect deployed app or real-service preview.
```

fiori-tools diagnostics annotation LSP OData metadata quick-fix problems-panel code-completion


**TITLE**: XML Annotation Quick Info (Fiori Tools)

**INTRODUCTION**: Quick Info displays documentation for OData annotation terms, record types, and properties directly in annotation files and in code-completion suggestions. Use it to quickly learn type, purpose, targets, lifecycle (experimental/deprecated), and whether a property is mandatory or optional. Content is sourced from OData vocabularies.

**TAGS**: fiori-tools, XML, OData, annotations, quick-info, hover, code-completion, documentation, vocabularies

**STEP**: 1 — Include icon stylesheet for renderable icons

**DESCRIPTION**: Ensure the icon stylesheet is available to the documentation viewer so UI icons render correctly (used by Fiori tooling docs). Add the provided link element where your documentation HTML resources are assembled or served.

**LANGUAGE**: HTML

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

**STEP**: 2 — Hover to view Quick Info in annotation files

**DESCRIPTION**: Hover the mouse pointer over any annotation term, record type, or property in the annotation (.xml/.annot.xml) file to open the Quick Info hover window. The hover displays documentation extracted from the corresponding OData vocabularies, typically answering:
- Type and purpose of the term/record/property
- Valid targets for the annotation term
- Whether the term/record/property is experimental or deprecated
- Whether the property is mandatory or optional

Use this when reading or editing annotation files to validate meanings and constraints inline.

**LANGUAGE**: text

**CODE**:
```text
Action: Hover the mouse pointer over an annotation term/record/property inside your annotation file.
Result: A hover window appears showing documentation sourced from OData vocabularies.
```

**STEP**: 3 — Show Quick Info for completion suggestions

**DESCRIPTION**: While browsing the code completion list (IntelliSense), expand the Quick Info documentation for each suggestion so you can inspect definitions without accepting the suggestion. The expanded documentation updates as you navigate the list. Close it by repeating the keybinding or clicking the close icon.

Keyboard shortcuts:
- Windows / Linux: Ctrl + Space
- macOS: Command + Space

You can also click the Information icon in the completion popup to pin/expand the documentation. Close using the :x: (Close) icon or the same keyboard shortcut.

**LANGUAGE**: text

**CODE**:
```text
Open completion list: Ctrl+Space (Win/Linux) or Cmd+Space (macOS)
Pin/expand suggestion info: Click the Information icon in the completion popup
Close expanded info: Ctrl/Cmd + Space again or click the :x: (Close) icon
```

**STEP**: 4 — Note about source and availability

**DESCRIPTION**: Quick Info content is limited to what the OData vocabularies provide. If a vocabulary lacks documentation for a term/record/property, the Quick Info hover or completion pane may be sparse or empty. When automating or generating code, fallback logic should handle missing descriptions (e.g., use term name and target hints, or consult external docs).

**LANGUAGE**: text

**CODE**:
```text
Note: Exact Quick Info content depends on availability in OData vocabularies. If a term lacks vocabulary documentation, display fallback information (term name, targets, and source vocabulary) or reference external documentation.
```

XML Annotation Quick Info (Fiori Tools)

fiori-tools XML OData annotations quick-info hover code-completion documentation vocabularies


**TITLE**: Edit in Source Code (Fiori tools — Property Panel)

**INTRODUCTION**: This document describes how the "Edit in source code" affordance appears in the Fiori tools Property Panel and how to locate the annotation definition in source files. It includes the required SAP icon stylesheet reference and the exact icon markup used in the panel. Use this when generating UI code that exposes a link/icon for jumping to the annotation definition.

**TAGS**: fiori-tools, fiori, annotations, property-panel, edit-in-source, sap-icons, vscode, business-application-studio

STEP: 1 — Include SAP icons stylesheet

DESCRIPTION: The Property Panel uses SAP icon fonts. Add the SAP icons stylesheet reference so the "Edit in source code" icon renders correctly.

LANGUAGE: HTML

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

STEP: 2 — Render the "Edit in source code" icon

DESCRIPTION: Use the SAP icon markup adjacent to the annotation/property field in the Property Panel. The icon shown below corresponds to the "Edit in source code" action. Place this span next to the text field or control where you want to offer the jump-to-source action.

LANGUAGE: HTML

CODE:
```html
<span class="SAP-icons-TNT-V3"></span> (*Edit in source code*)
```

STEP: 3 — Display an image reference for documentation or UI preview

DESCRIPTION: Use the referenced image for documentation pages or UI previews. The image file path as shipped in the documentation is provided here.

LANGUAGE: HTML

CODE:
```html
<img src="images/EditinSource_675234e.png" alt="Edit in source code screenshot"/>
```

STEP: 4 — Behavior and environment-specific notes (implementation guidance)

DESCRIPTION: When generating or testing code that surfaces the Edit-in-Source action, apply these behaviors:
- In the Property Panel, place the icon next to editable and non-editable properties where a corresponding annotation exists.
- If multiple annotation definitions exist for the same UI element, show a pop-up that lists the candidate files. The user picks one file to jump to its definition.
  - Note: The multiple-definitions pop-up is available only in Visual Studio Code.
  - In SAP Business Application Studio (BAS), only the first annotation is displayed — do not show the multiple-definition pop-up in BAS.
- If the Page Editor cannot interpret complex configuration for a UI feature, do not render the field-level control (dropdown/input) or the icon. Instead, render an "Edit in source code" link with the same jump-to-source behavior; the link should open the annotation file/definition directly.

LANGUAGE: Plaintext

CODE:
```text
- Multiple definitions pop-up: VS Code only.
- BAS: show only the first annotation (no pop-up).
- Complex/unsupported configurations: render "Edit in source code" link instead of icon or field control.
```

fiori-tools fiori annotations property-panel edit-in-source sap-icons vscode business-application-studio