**TITLE**: Chart

**INTRODUCTION**: The Chart building block enables you to render a chart based on an entitySet or a specific navigation property.

**TAGS**: chart, overview, visualization, analytics, data

**STEP**: Chart Definition

**DESCRIPTION**: The UI.Chart annotation defines the chart type, dimensions, and measures.

**LANGUAGE**: CDS

**CODE**:
```cds
service Service {
  @Analytics.AggregatedProperty #min: {
    Name                : 'minPricing',
    AggregationMethod   : 'min',
    AggregatableProperty: 'NetPricing',
    ![@Common.Label]    : 'Minimum Net Amount'
  }
  @Analytics.AggregatedProperty #max: {
    Name                : 'maxPricing',
    AggregationMethod   : 'max',
    AggregatableProperty: 'NetPricing',
    ![@Common.Label]    : 'Maximum Net Amount'
  }
  @Analytics.AggregatedProperty #avg: {
    Name                : 'avgPricing',
    AggregationMethod   : 'average',
    AggregatableProperty: 'NetPricing',
    ![@Common.Label]    : 'Average Net Amount'
  }
  @Analytics.AggregatedProperty #sum: {
    Name                : 'totalPricing',
    AggregationMethod   : 'sum',
    AggregatableProperty: 'NetPricing',
    ![@Common.Label]    : 'Total Net Amount'
  }

  @Aggregation.ApplySupported       : {
    Transformations         : [
      'aggregate',
      'topcount',
      'bottomcount',
      'identity',
      'concat',
      'groupby',
      'filter',
      'expand',
      'top',
      'skip',
      'orderby',
      'search'
    ],
    CustomAggregationMethods: ['Custom.concat'],
    Rollup                  : #None,
    PropertyRestrictions    : true,
    GroupableProperties     : [
      SalesOrderType,
      SalesOrder,
      SalesOrganization,
      OverallSDProcessStatus
    ],
    AggregatableProperties  : [{Property: NetPricing}]
  }
  entity RootEntity {
    key SalesOrder                 : String(10) @title: 'Sales Order No.';
        NetPricing                 : Decimal(15, 10);

        OverallSDProcessStatus     : String(1)  @(
          title              : 'Overall Process Status',
          Common.Text        : OverallSDProcessStatusText,
          UI.ValueCriticality: [
            {
              Value      : 'A',
              Criticality: #Negative
            },
            {
              Value      : 'B',
              Criticality: #Critical
            },
            {
              Value      : 'C',
              Criticality: #Positive
            }
          ]
        );
        OverallSDProcessStatusText : String;

        SalesOrderType             : String(4)  @(
          title      : 'Sales Order Type',
          Common.Text: SalesOrderTypeText
        );
        SalesOrderTypeText         : String;

        SalesOrganization          : String(4)  @(
          title      : 'Sales Organization',
          Common.Text: SalesOrganizationText
        );
        SalesOrganizationText      : String;
        items                      : Association to many ChildEntity
                                       on items.Parent = $self;
  }

  @Analytics.AggregatedProperty #min: {
    Name                : 'minPricing',
    AggregationMethod   : 'min',
    AggregatableProperty: 'Price',
    ![@Common.Label]    : 'Minimum price'
  }
  @Analytics.AggregatedProperty #max: {
    Name                : 'maxPricing',
    AggregationMethod   : 'max',
    AggregatableProperty: 'Price',
    ![@Common.Label]    : 'Maximum price'
  }

  @Aggregation.ApplySupported       : {
    Transformations         : [
      'aggregate',
      'topcount',
      'bottomcount',
      'identity',
      'concat',
      'groupby',
      'filter',
      'expand',
      'top',
      'skip',
      'orderby',
      'search'
    ],
    CustomAggregationMethods: ['Custom.concat'],
    Rollup                  : #None,
    PropertyRestrictions    : true,
    GroupableProperties     : [
      CommentedBy,
      UpdatedBy,
      Status
    ],
    AggregatableProperties  : [{Property: Price}]
  }
  entity ChildEntity {
    key ID                 : Integer                   @title: 'Identifier';
        Price              : Decimal(15, 10);
        Status             : String(4)                 @(
          title      : 'Status',
          Common.Text: CommentedBy
        );
        SalesOrderTypeText : String;
        CommentedBy        : String                    @title: 'Commented by';
        UpdatedBy          : String                    @title: 'Updated by';
        Parent             : Association to RootEntity @UI.Hidden;
  }

  annotate ChildEntity with @UI.Chart: {
    $Type              : 'UI.ChartDefinitionType',
    Title              : 'Chart Title',
    Description        : 'Chart Description',
    ChartType          : #Column,
    DynamicMeasures    : ['@Analytics.AggregatedProperty#min'],
    Dimensions         : [Status],
    MeasureAttributes  : [{
      $Type         : 'UI.ChartMeasureAttributeType',
      DynamicMeasure: '@Analytics.AggregatedProperty#min',
      Role          : #Axis1
    }],
    DimensionAttributes: [{
      $Type    : 'UI.ChartDimensionAttributeType',
      Dimension: Status,
      Role     : #Category
    }]
  };

  annotate RootEntity with @UI.Chart: {
    $Type              : 'UI.ChartDefinitionType',
    Title              : 'Chart Title',
    Description        : 'Chart Description',
    ChartType          : #Column,
    DynamicMeasures    : ['@Analytics.AggregatedProperty#sum'],
    Dimensions         : [SalesOrganization],
    MeasureAttributes  : [{
      $Type         : 'UI.ChartMeasureAttributeType',
      DynamicMeasure: '@Analytics.AggregatedProperty#sum',
      Role          : #Axis1
    }],
    DimensionAttributes: [{
      $Type    : 'UI.ChartDimensionAttributeType',
      Dimension: SalesOrganization,
      Role     : #Category
    }]
  };
}
```

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="UI.Chart">
	<Record Type="UI.ChartDefinitionType">
		<PropertyValue Property="Title" String="Chart Title" />
		<PropertyValue Property="Description" String="Chart Description" />
		<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column" />
		<PropertyValue Property="DynamicMeasures">
			<Collection>
				<String>@Analytics.AggregatedProperty#min</String>
			</Collection>
		</PropertyValue>
		<PropertyValue Property="Dimensions">
			<Collection>
				<PropertyPath>Status</PropertyPath>
			</Collection>
		</PropertyValue>
		<PropertyValue Property="MeasureAttributes">
			<Collection>
				<Record Type="UI.ChartMeasureAttributeType">
					<PropertyValue Property="DynamicMeasure" String="@Analytics.AggregatedProperty#min" />
					<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
				</Record>
			</Collection>
		</PropertyValue>
		<PropertyValue Property="DimensionAttributes">
			<Collection>
				<Record Type="UI.ChartDimensionAttributeType">
					<PropertyValue Property="Dimension" PropertyPath="Status" />
					<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category" />
				</Record>
			</Collection>
		</PropertyValue>
	</Record>
</Annotation>
```

**STEP**: Analytics Configuration

**DESCRIPTION**: Analytics aggregated properties define the measures that can be used in the chart.

**LANGUAGE**: CDS

**CODE**:
```cds
service Service {
  @Analytics.AggregatedProperty #min: {
    Name                : 'minPricing',
    AggregationMethod   : 'min',
    AggregatableProperty: 'NetPricing',
    ![@Common.Label]    : 'Minimum Net Amount'
  }
  @Analytics.AggregatedProperty #max: {
    Name                : 'maxPricing',
    AggregationMethod   : 'max',
    AggregatableProperty: 'NetPricing',
    ![@Common.Label]    : 'Maximum Net Amount'
  }
  @Analytics.AggregatedProperty #avg: {
    Name                : 'avgPricing',
    AggregationMethod   : 'average',
    AggregatableProperty: 'NetPricing',
    ![@Common.Label]    : 'Average Net Amount'
  }
  @Analytics.AggregatedProperty #sum: {
    Name                : 'totalPricing',
    AggregationMethod   : 'sum',
    AggregatableProperty: 'NetPricing',
    ![@Common.Label]    : 'Total Net Amount'
  }

  @Aggregation.ApplySupported       : {
    Transformations         : [
      'aggregate',
      'topcount',
      'bottomcount',
      'identity',
      'concat',
      'groupby',
      'filter',
      'expand',
      'top',
      'skip',
      'orderby',
      'search'
    ],
    CustomAggregationMethods: ['Custom.concat'],
    Rollup                  : #None,
    PropertyRestrictions    : true,
    GroupableProperties     : [
      SalesOrderType,
      SalesOrder,
      SalesOrganization,
      OverallSDProcessStatus
    ],
    AggregatableProperties  : [{Property: NetPricing}]
  }
  entity RootEntity {
    key SalesOrder                 : String(10) @title: 'Sales Order No.';
        NetPricing                 : Decimal(15, 10);

        OverallSDProcessStatus     : String(1)  @(
          title              : 'Overall Process Status',
          Common.Text        : OverallSDProcessStatusText,
          UI.ValueCriticality: [
            {
              Value      : 'A',
              Criticality: #Negative
            },
            {
              Value      : 'B',
              Criticality: #Critical
            },
            {
              Value      : 'C',
              Criticality: #Positive
            }
          ]
        );
        OverallSDProcessStatusText : String;

        SalesOrderType             : String(4)  @(
          title      : 'Sales Order Type',
          Common.Text: SalesOrderTypeText
        );
        SalesOrderTypeText         : String;

        SalesOrganization          : String(4)  @(
          title      : 'Sales Organization',
          Common.Text: SalesOrganizationText
        );
        SalesOrganizationText      : String;
        items                      : Association to many ChildEntity
                                       on items.Parent = $self;
  }

  @Analytics.AggregatedProperty #min: {
    Name                : 'minPricing',
    AggregationMethod   : 'min',
    AggregatableProperty: 'Price',
    ![@Common.Label]    : 'Minimum price'
  }
  @Analytics.AggregatedProperty #max: {
    Name                : 'maxPricing',
    AggregationMethod   : 'max',
    AggregatableProperty: 'Price',
    ![@Common.Label]    : 'Maximum price'
  }

  @Aggregation.ApplySupported       : {
    Transformations         : [
      'aggregate',
      'topcount',
      'bottomcount',
      'identity',
      'concat',
      'groupby',
      'filter',
      'expand',
      'top',
      'skip',
      'orderby',
      'search'
    ],
    CustomAggregationMethods: ['Custom.concat'],
    Rollup                  : #None,
    PropertyRestrictions    : true,
    GroupableProperties     : [
      CommentedBy,
      UpdatedBy,
      Status
    ],
    AggregatableProperties  : [{Property: Price}]
  }
  entity ChildEntity {
    key ID                 : Integer                   @title: 'Identifier';
        Price              : Decimal(15, 10);
        Status             : String(4)                 @(
          title      : 'Status',
          Common.Text: CommentedBy
        );
        SalesOrderTypeText : String;
        CommentedBy        : String                    @title: 'Commented by';
        UpdatedBy          : String                    @title: 'Updated by';
        Parent             : Association to RootEntity @UI.Hidden;
  }

  annotate ChildEntity with @UI.Chart: {
    $Type              : 'UI.ChartDefinitionType',
    Title              : 'Chart Title',
    Description        : 'Chart Description',
    ChartType          : #Column,
    DynamicMeasures    : ['@Analytics.AggregatedProperty#min'],
    Dimensions         : [Status],
    MeasureAttributes  : [{
      $Type         : 'UI.ChartMeasureAttributeType',
      DynamicMeasure: '@Analytics.AggregatedProperty#min',
      Role          : #Axis1
    }],
    DimensionAttributes: [{
      $Type    : 'UI.ChartDimensionAttributeType',
      Dimension: Status,
      Role     : #Category
    }]
  };

  annotate RootEntity with @UI.Chart: {
    $Type              : 'UI.ChartDefinitionType',
    Title              : 'Chart Title',
    Description        : 'Chart Description',
    ChartType          : #Column,
    DynamicMeasures    : ['@Analytics.AggregatedProperty#sum'],
    Dimensions         : [SalesOrganization],
    MeasureAttributes  : [{
      $Type         : 'UI.ChartMeasureAttributeType',
      DynamicMeasure: '@Analytics.AggregatedProperty#sum',
      Role          : #Axis1
    }],
    DimensionAttributes: [{
      $Type    : 'UI.ChartDimensionAttributeType',
      Dimension: SalesOrganization,
      Role     : #Category
    }]
  };
}
```

**LANGUAGE**: XML

**CODE**:
```xml
<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm">
	<Annotation Term="Analytics.AggregatedProperty" Qualifier="min">
		<Record Type="Analytics.AggregatedPropertyType">
			<PropertyValue Property="Name" String="minPricing" />
			<PropertyValue Property="AggregationMethod" String="min" />
			<PropertyValue Property="AggregatableProperty" PropertyPath="price" />
			<Annotation Term="Common.Label" String="Minimum price" />
		</Record>
	</Annotation>

	<Annotation Term="Analytics.AggregatedProperty" Qualifier="max">
		<Record Type="Analytics.AggregatedPropertyType">
			<PropertyValue Property="Name" String="maxPricing" />
			<PropertyValue Property="AggregationMethod" String="max" />
			<PropertyValue Property="AggregatableProperty" PropertyPath="price" />
			<Annotation Term="Common.Label" String="Maximum price" />
		</Record>
	</Annotation>
</Schema>
```

Chart

chart overview visualization analytics data


**TITLE**: Chart with Filter Bar

**INTRODUCTION**: Linking the Chart building block to the FilterBar building block enables you to provide filtering capabilities. This example shows a chart with a filter bar that allows users to filter the data displayed in the chart.

**TAGS**: chart, filter bar, integration, filtering, data

**STEP**: Implementation

**DESCRIPTION**: The Chart building block can be connected to a FilterBar using the filterBar property to enable interactive filtering.

**LANGUAGE**: XML

**CODE**:
```xml
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:macros="sap.fe.macros">
	<VBox fitContainer="true" alignItems="Stretch" alignContent="Stretch" justifyContent="Start" renderType="Div">
		<macros:FilterBar metaPath="@com.sap.vocabularies.UI.v1.SelectionFields#SF1" id="FilterBarChartFilterBar" />
		<macros:Chart
			id="chartFilterBar"
			metaPath="/RootEntity/@com.sap.vocabularies.UI.v1.Chart"
			personalization="Sort,Type,Item"
			selectionMode="Multiple"
			filterBar="FilterBarChartFilterBar"
		/>
		<Text text="NOTE: Sorting doesn't work here, since we're using a mock service" />
	</VBox>
</core:FragmentDefinition>
```

Chart with Filter Bar

chart
filter bar
integration
filtering
data


**TITLE**: Chart APIs

**INTRODUCTION**: The Chart building block enables you to extend the chart using APIs. This includes presentation variant management, selection variant handling, and variant management capabilities.

**TAGS**: chart APIs, presentation variant, get presentation variant, set presentation variant, programmatic access

**STEP**: Presentation Variant Management

**DESCRIPTION**: You can get and set the presentation variant of a chart using the APIs provided by the Chart building block.

**STEP**: Selection Variant Management

**DESCRIPTION**: You can get and set the selection variant of a chart using the APIs provided by the Chart building block. This function considers only the selection variant applied at the control level.

**STEP**: Variant Management

**DESCRIPTION**: You can get the currently selected variant and change the variant of a chart using the APIs provided by the Chart building block.

Chart APIs

chart APIs
presentation variant
get presentation variant
set presentation variant
programmatic access


**TITLE**: Chart Qualifier

**INTRODUCTION**: Chart qualifiers enable you to define multiple chart annotations on the same entity. This allows you to create different chart configurations for various use cases while maintaining a single data model.

**TAGS**: chart, qualifier, multiple charts, annotation

**STEP**: Chart Definition with Qualifier

**DESCRIPTION**: Define a UI.Chart annotation with a specific qualifier to create a named chart configuration. The qualifier allows you to have multiple chart definitions on the same entity.

**LANGUAGE**: CDS

**CODE**:
```cds
service Service {
  @Analytics.AggregatedProperty #min: {
    Name                : 'minPricing',
    AggregationMethod   : 'min',
    AggregatableProperty: 'NetPricing',
    ![@Common.Label]    : 'Minimum Net Amount'
  }
  @Analytics.AggregatedProperty #max: {
    Name                : 'maxPricing',
    AggregationMethod   : 'max',
    AggregatableProperty: 'NetPricing',
    ![@Common.Label]    : 'Maximum Net Amount'
  }
  @Analytics.AggregatedProperty #avg: {
    Name                : 'avgPricing',
    AggregationMethod   : 'average',
    AggregatableProperty: 'NetPricing',
    ![@Common.Label]    : 'Average Net Amount'
  }
  @Analytics.AggregatedProperty #sum: {
    Name                : 'totalPricing',
    AggregationMethod   : 'sum',
    AggregatableProperty: 'NetPricing',
    ![@Common.Label]    : 'Total Net Amount'
  }

  @Aggregation.ApplySupported       : {
    Transformations         : [
      'aggregate',
      'topcount',
      'bottomcount',
      'identity',
      'concat',
      'groupby',
      'filter',
      'expand',
      'top',
      'skip',
      'orderby',
      'search'
    ],
    CustomAggregationMethods: ['Custom.concat'],
    Rollup                  : #None,
    PropertyRestrictions    : true,
    GroupableProperties     : [
      SalesOrderType,
      SalesOrder,
      SalesOrganization,
      OverallSDProcessStatus
    ],
    AggregatableProperties  : [{Property: NetPricing}]
  }
  entity RootEntity {
    key SalesOrder                 : String(10) @title: 'Sales Order No.';
        NetPricing                 : Decimal(15, 10);

        OverallSDProcessStatus     : String(1)  @(
          title              : 'Overall Process Status',
          Common.Text        : OverallSDProcessStatusText,
          UI.ValueCriticality: [
            {
              Value      : 'A',
              Criticality: #Negative
            },
            {
              Value      : 'B',
              Criticality: #Critical
            },
            {
              Value      : 'C',
              Criticality: #Positive
            }
          ]
        );
        OverallSDProcessStatusText : String;

        SalesOrderType             : String(4)  @(
          title      : 'Sales Order Type',
          Common.Text: SalesOrderTypeText
        );
        SalesOrderTypeText         : String;

        SalesOrganization          : String(4)  @(
          title      : 'Sales Organization',
          Common.Text: SalesOrganizationText
        );
        SalesOrganizationText      : String;
  }

  annotate RootEntity with @UI.Chart #ChartQualifier: {
    $Type              : 'UI.ChartDefinitionType',
    Title              : 'Chart Title',
    Description        : 'Chart Description',
    ChartType          : #Column,
    DynamicMeasures    : ['@Analytics.AggregatedProperty#sum'],
    Dimensions         : [OverallSDProcessStatus],
    MeasureAttributes  : [{
      $Type         : 'UI.ChartMeasureAttributeType',
      DynamicMeasure: '@Analytics.AggregatedProperty#sum',
      Role          : #Axis1
    }],
    DimensionAttributes: [{
      $Type    : 'UI.ChartDimensionAttributeType',
      Dimension: OverallSDProcessStatus,
      Role     : #Category
    }]
  };
}
```

**LANGUAGE**: XML

**CODE**:
```xml
<edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
	<edmx:Reference Uri="https://sap.github.io/odata-vocabularies/vocabularies/UI.xml">
		<edmx:Include Namespace="com.sap.vocabularies.UI.v1" Alias="UI" />
	</edmx:Reference>
	<edmx:DataServices>
		<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="local">
			<Annotations Target="Service.RootEntity">
				<Annotation Term="UI.Chart" Qualifier="ChartQualifier">
					<Record Type="UI.ChartDefinitionType">
						<PropertyValue Property="Title" String="Chart Title" />
						<PropertyValue Property="Description" String="Chart Description" />
						<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column" />
						<PropertyValue Property="DynamicMeasures">
							<Collection>
								<String>@Analytics.AggregatedProperty#sum</String>
							</Collection>
						</PropertyValue>
						<PropertyValue Property="Dimensions">
							<Collection>
								<PropertyPath>OverallSDProcessStatus</PropertyPath>
							</Collection>
						</PropertyValue>
						<PropertyValue Property="MeasureAttributes">
							<Collection>
								<Record Type="UI.ChartMeasureAttributeType">
									<PropertyValue Property="DynamicMeasure" String="@Analytics.AggregatedProperty#sum" />
									<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
								</Record>
							</Collection>
						</PropertyValue>
						<PropertyValue Property="DimensionAttributes">
							<Collection>
								<Record Type="UI.ChartDimensionAttributeType">
									<PropertyValue Property="Dimension" PropertyPath="OverallSDProcessStatus" />
									<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category" />
								</Record>
							</Collection>
						</PropertyValue>
					</Record>
				</Annotation>
			</Annotations>
		</Schema>
	</edmx:DataServices>
</edmx:Edmx>
```

**STEP**: Referencing Qualified Chart

**DESCRIPTION**: Use the metaPath property to reference a specific qualified chart annotation. The syntax includes the qualifier after the # symbol.

**LANGUAGE**: XML

**CODE**:
```xml
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:macros="sap.fe.macros">
	<VBox fitContainer="true" alignItems="Stretch" alignContent="Stretch" justifyContent="Start" renderType="Div">
		<macros:Chart id="chartQualifierSample" metaPath="/RootEntity/@com.sap.vocabularies.UI.v1.Chart#ChartQualifier" />
	</VBox>
</core:FragmentDefinition>
```

Chart Qualifier

chart
qualifier
multiple charts
annotation


**TITLE**: Chart Selection Mode

**INTRODUCTION**: The Chart building block provides different selection modes that enable you to control how users can interact with chart data points. This example shows the multiple selection mode and the single selection mode.

**TAGS**: chart, selection mode, select, interaction, data points

**STEP**: Multiple Selection Mode

**DESCRIPTION**: Set selectionMode='Multiple' to allow users to select multiple data points in the chart. This is useful for comparing multiple values or performing bulk operations.

**LANGUAGE**: XML

**CODE**:
```xml
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:macros="sap.fe.macros">
	<VBox fitContainer="true" alignItems="Stretch" alignContent="Stretch" justifyContent="Start" renderType="Div">
		<Panel headerText="Multiple Selection Mode">
			<VBox fitContainer="true" alignItems="Stretch" alignContent="Stretch" justifyContent="Start" renderType="Div">
				<macros:Chart id="chartSelectionModeMultipleSample" metaPath="@com.sap.vocabularies.UI.v1.Chart" selectionMode="Multiple" />
			</VBox>
		</Panel>
		<Panel headerText="Single Selection Mode">
			<VBox fitContainer="true" alignItems="Stretch" alignContent="Stretch" justifyContent="Start" renderType="Div">
				<macros:Chart id="chartSelectionModeSingleSample" metaPath="@com.sap.vocabularies.UI.v1.Chart" selectionMode="Single" />
			</VBox>
		</Panel>
	</VBox>
</core:FragmentDefinition>
```

**STEP**: Single Selection Mode

**DESCRIPTION**: Set selectionMode='Single' to allow users to select only one data point at a time. This is the default behavior and is useful for detailed analysis of individual values.

**LANGUAGE**: XML

**CODE**:
```xml
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:macros="sap.fe.macros">
	<VBox fitContainer="true" alignItems="Stretch" alignContent="Stretch" justifyContent="Start" renderType="Div">
		<Panel headerText="Multiple Selection Mode">
			<VBox fitContainer="true" alignItems="Stretch" alignContent="Stretch" justifyContent="Start" renderType="Div">
				<macros:Chart id="chartSelectionModeMultipleSample" metaPath="@com.sap.vocabularies.UI.v1.Chart" selectionMode="Multiple" />
			</VBox>
		</Panel>
		<Panel headerText="Single Selection Mode">
			<VBox fitContainer="true" alignItems="Stretch" alignContent="Stretch" justifyContent="Start" renderType="Div">
				<macros:Chart id="chartSelectionModeSingleSample" metaPath="@com.sap.vocabularies.UI.v1.Chart" selectionMode="Single" />
			</VBox>
		</Panel>
	</VBox>
</core:FragmentDefinition>
```

Chart Selection Mode

chart
selection mode
select
interaction
data points


**TITLE**: Flexible Column Layout Actions

**INTRODUCTION**: The FlexibleColumnLayoutActions building block enables you to render the flexible column layout buttons such as Close, Enter Full Screen, and Exit Full Screen.

**TAGS**: flexible column layout, fcl, navigation, buttons, multi-column

**STEP**: Implementation

**DESCRIPTION**: To use the FlexibleColumnLayoutActions building block, you can include it in your view.

**LANGUAGE**: XML

**CODE**:
```xml
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:f="sap.f" xmlns:macros="sap.fe.macros">
	<f:DynamicPage headerExpanded="true" toggleHeaderOnTitleClick="false">
		<f:title>
			<f:DynamicPageTitle>
				<f:heading>
					<Title text="Showing Flexible Column Layout Actions" />
				</f:heading>
				<f:navigationActions>
					<macros:FlexibleColumnLayoutActions />
				</f:navigationActions>
			</f:DynamicPageTitle>
		</f:title>
		<f:content>
			<MessageStrip
				text="You can see the Flexible Column Layout actions in the header of this page."
				visible="true"
				showIcon="true"
				type="Information"
			/>
		</f:content>
	</f:DynamicPage>
</mvc:View>
```

Flexible Column Layout Actions

flexible column layout
fcl
navigation
buttons
multi-column


**TITLE**: Avatar

**INTRODUCTION**: The Field building block enables you to render avatars and icons.

**TAGS**: field, avatar, image, profile picture, IsImageURL

**STEP**: Implementation

**DESCRIPTION**: Define a string property and annotate it with UI.IsImageUrl. Then the field will render a icon or an image, depending on the backend data.

**LANGUAGE**: CDS

**CODE**:
```cds
using {TravelService.Travel} from '../../../../../service/service';
using from '../../../../../service/annotations';

extend entity TravelService.Travel with {
  Icon     : String @(UI: {IsImageURL: true});
  ImageUrl : String @(UI: {IsImageURL: true});
};
```

**LANGUAGE**: ABAP

**CODE**:
```abap
@Semantics.imageUrl: true
@UI.textArrangement: #TEXT_ONLY
Icon;
```

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="TravelService.Travel/Icon">
	<Annotation Term="UI.IsImageURL" Bool="true" />
	<Annotation Term="Common.Label" String="Icon" />
</Annotations>
```

Avatar

field
avatar
image
profile picture
IsImageURL


**TITLE**: Checkbox

**INTRODUCTION**: The Field building block enables you to render checkboxes.

**TAGS**: field, checkbox, boolean, selection, toggle

**STEP**: Implementation

**DESCRIPTION**: Define a boolean property. In edit mode, the field will render a check box, in display mode, it will show the value as a string (Yes/No).

**LANGUAGE**: CDS

**CODE**:
```cds
using {TravelService.Travel} from '../../../../../service/service';
using from '../../../../../service/annotations';

extend entity TravelService.Travel with {
  Approved : Boolean;
};
```

Checkbox


**TITLE**: Contact

**INTRODUCTION**: The Field building block enables you to render clickable fields that open a contact card.

**TAGS**: field, contact, person, communication, details

**STEP**: Communication.Contact

**DESCRIPTION**: The Communication.Contact describes the contact information.

**LANGUAGE**: CDS

**CODE**:
```cds
using TravelService as service from '../service/service';

annotate service.Travel {
  TravelStatus @Common.ValueListWithFixedValues;
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Travel with @UI.LineItem: [
  {Value: TravelID},
  {
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@UI.ConnectedFields#TripDates'
  },
  {Value: to_Agency_AgencyID},
  {
    Value             : TravelStatus_code,
    Criticality       : TravelStatus.criticality,
    @UI.Importance    : #High,
    @HTML5.CssDefaults: {width: '10em'}
  },
  {Value: BookingFee},
  {Value: TotalPrice}
];

annotate service.Travel with @(UI: {SelectionFields: [
  TravelID,
  to_Agency_AgencyID,
  TravelStatus_code,
  BeginDate,
  EndDate
]});

annotate service.Travel with @Capabilities.FilterRestrictions.FilterExpressionRestrictions: [
  {
    Property          : 'BeginDate',
    AllowedExpressions: 'SingleRange'
  },
  {
    Property          : 'EndDate',
    AllowedExpressions: 'SingleRange'
  }
];

annotate service.Travel with @(UI: {
  FieldGroup #TravelData    : {Data: [
    {Value: TravelID},
    {Value: to_Agency_AgencyID},
    {Value: BeginDate},
    {Value: EndDate}
  ]},
  FieldGroup #ApprovalData  : {Data: [
    {
      $Type      : 'UI.DataField',
      Value      : TravelStatus_code,
      Criticality: TravelStatus.criticality,
      Label      : 'Status'
    },
    {Value: BookingFee},
    {Value: TotalPrice}
  ]},
  FieldGroup #HeaderMain    : {Data: [
    {Value: BeginDate},
    {Value: EndDate},
    {Value: TotalPrice}
  ]},
  ConnectedFields #TripDates: {
    Label   : 'Business Trip Dates',
    Template: '{BeginDate} / {EndDate}',
    Data    : {
      BeginDate: {
        $Type: 'UI.DataField',
        Value: BeginDate
      },
      EndDate  : {
        $Type: 'UI.DataField',
        Value: EndDate
      }
    }
  },
  Facets                    : [
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'TravelData',
      Label : 'Travel Information',
      Target: '@UI.FieldGroup#TravelData',
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'ApprovalData',
      Label : 'Approval Data',
      Target: '@UI.FieldGroup#ApprovalData'
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'BookingList',
      Label : 'Bookings',
      Target: 'to_Booking/@UI.LineItem'
    }
  ],
  HeaderFacets              : [{
    $Type : 'UI.ReferenceFacet',
    Target: '@UI.FieldGroup#HeaderMain'
  }],
  HeaderInfo                : {
    TypeName      : 'Travel',
    TypeNamePlural: 'Travels',
    Title         : {
      $Type: 'UI.DataField',
      Value: Description
    },
    Description   : {
      $Type: 'UI.DataField',
      Value: TravelID
    },
    TypeImageUrl  : 'sap-icon://header',
  }
});

annotate service.Travel {
  to_Agency @Common.ValueList: {
    CollectionPath: 'TravelAgency',
    Label         : '',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: to_Agency_AgencyID,
        ValueListProperty: 'AgencyID'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Street'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PostalCode'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'City'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'CountryCode_code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PhoneNumber'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'EMailAddress'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'WebAddress'
      }
    ]
  };
}

annotate service.TravelAgency with @(UI: {
  DataPoint #Recommendation: {
    Value        : Recommendation,
    TargetValue  : 100.0,
    Title        : 'Recommendation',
    Visualization: #Progress
  },
  DataPoint #Rating        : {
    Value        : Rating,
    TargetValue  : 5.0,
    Title        : 'Rating',
    Visualization: #Rating
  },
  FieldGroup #Contact      : {Data: [{
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@Communication.Contact',
    Label : 'Travel Agency'
  }]}
});

annotate service.TravelAgency with @(
  Communication.Contact : {
    email: [{
      type   : #work,
      address: EMailAddress
    }],
    fn   : Name,
    adr  : [{
      type    : #work,
      code    : PostalCode,
      country : CountryCode_code,
      locality: City
    }]
  },
  Common.IsNaturalPerson: false
);

annotate service.Booking {
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Booking with @(UI: {
  HeaderInfo: {
    TypeName      : 'Booking',
    TypeNamePlural: 'Bookings',
    TypeImageUrl  : 'sap-icon://alert',
    Title         : {
      $Type: 'UI.DataField',
      Value: BookingID
    }
  },
  Facets    : [{
    $Type : 'UI.ReferenceFacet',
    ID    : 'FacetIdentifier1',
    Target: '@UI.FieldGroup'
  }],
  LineItem  : [
    {Value: BookingID},
    {Value: BookingDate},
    {Value: ConnectionID},
    {Value: FlightDate},
    {Value: FlightPrice}
  ],
  FieldGroup: {Data: [
    {
      $Type: 'UI.DataField',
      Value: BookingID
    },
    {
      $Type: 'UI.DataField',
      Value: BookingDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightPrice
    }
  ]}
});

annotate service.TravelAgency with @(UI: {FieldGroup #Link: {Data: [{
  $Type: 'UI.DataFieldWithUrl',
  Value: Name,
  Url  : WebAddress
}]}});
```

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="Communication.Contact">
	<Record Type="Communication.ContactType">
		<PropertyValue Property="fn" Path="AgencyName" />
		<PropertyValue Property="tel">
			<Collection>
				<Record Type="Communication.PhoneNumberType">
					<PropertyValue Property="uri" Path="Phone" />
					<PropertyValue Property="type" EnumMember="Communication.PhoneType/work" />
				</Record>
			</Collection>
		</PropertyValue>
		<PropertyValue Property="email">
			<Collection>
				<Record Type="Communication.EmailAddressType">
					<PropertyValue Property="address" Path="Email" />
					<PropertyValue Property="type" EnumMember="Communication.ContactInformationType/work" />
				</Record>
			</Collection>
		</PropertyValue>
	</Record>
</Annotation>
```

**STEP**: DataFieldForAnnotation

**DESCRIPTION**: Define a UI.DataFieldForAnnotation that in turn targets a Communication.Contact.

**LANGUAGE**: CDS

**CODE**:
```cds
using TravelService as service from '../service/service';

annotate service.Travel {
  TravelStatus @Common.ValueListWithFixedValues;
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Travel with @UI.LineItem: [
  {Value: TravelID},
  {
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@UI.ConnectedFields#TripDates'
  },
  {Value: to_Agency_AgencyID},
  {
    Value             : TravelStatus_code,
    Criticality       : TravelStatus.criticality,
    @UI.Importance    : #High,
    @HTML5.CssDefaults: {width: '10em'}
  },
  {Value: BookingFee},
  {Value: TotalPrice}
];

annotate service.Travel with @(UI: {SelectionFields: [
  TravelID,
  to_Agency_AgencyID,
  TravelStatus_code,
  BeginDate,
  EndDate
]});

annotate service.Travel with @Capabilities.FilterRestrictions.FilterExpressionRestrictions: [
  {
    Property          : 'BeginDate',
    AllowedExpressions: 'SingleRange'
  },
  {
    Property          : 'EndDate',
    AllowedExpressions: 'SingleRange'
  }
];

annotate service.Travel with @(UI: {
  FieldGroup #TravelData    : {Data: [
    {Value: TravelID},
    {Value: to_Agency_AgencyID},
    {Value: BeginDate},
    {Value: EndDate}
  ]},
  FieldGroup #ApprovalData  : {Data: [
    {
      $Type      : 'UI.DataField',
      Value      : TravelStatus_code,
      Criticality: TravelStatus.criticality,
      Label      : 'Status'
    },
    {Value: BookingFee},
    {Value: TotalPrice}
  ]},
  FieldGroup #HeaderMain    : {Data: [
    {Value: BeginDate},
    {Value: EndDate},
    {Value: TotalPrice}
  ]},
  ConnectedFields #TripDates: {
    Label   : 'Business Trip Dates',
    Template: '{BeginDate} / {EndDate}',
    Data    : {
      BeginDate: {
        $Type: 'UI.DataField',
        Value: BeginDate
      },
      EndDate  : {
        $Type: 'UI.DataField',
        Value: EndDate
      }
    }
  },
  Facets                    : [
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'TravelData',
      Label : 'Travel Information',
      Target: '@UI.FieldGroup#TravelData',
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'ApprovalData',
      Label : 'Approval Data',
      Target: '@UI.FieldGroup#ApprovalData'
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'BookingList',
      Label : 'Bookings',
      Target: 'to_Booking/@UI.LineItem'
    }
  ],
  HeaderFacets              : [{
    $Type : 'UI.ReferenceFacet',
    Target: '@UI.FieldGroup#HeaderMain'
  }],
  HeaderInfo                : {
    TypeName      : 'Travel',
    TypeNamePlural: 'Travels',
    Title         : {
      $Type: 'UI.DataField',
      Value: Description
    },
    Description   : {
      $Type: 'UI.DataField',
      Value: TravelID
    },
    TypeImageUrl  : 'sap-icon://header',
  }
});

annotate service.Travel {
  to_Agency @Common.ValueList: {
    CollectionPath: 'TravelAgency',
    Label         : '',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: to_Agency_AgencyID,
        ValueListProperty: 'AgencyID'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Street'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PostalCode'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'City'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'CountryCode_code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PhoneNumber'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'EMailAddress'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'WebAddress'
      }
    ]
  };
}

annotate service.TravelAgency with @(UI: {
  DataPoint #Recommendation: {
    Value        : Recommendation,
    TargetValue  : 100.0,
    Title        : 'Recommendation',
    Visualization: #Progress
  },
  DataPoint #Rating        : {
    Value        : Rating,
    TargetValue  : 5.0,
    Title        : 'Rating',
    Visualization: #Rating
  },
  FieldGroup #Contact      : {Data: [{
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@Communication.Contact',
    Label : 'Travel Agency'
  }]}
});

annotate service.TravelAgency with @(
  Communication.Contact : {
    email: [{
      type   : #work,
      address: EMailAddress
    }],
    fn   : Name,
    adr  : [{
      type    : #work,
      code    : PostalCode,
      country : CountryCode_code,
      locality: City
    }]
  },
  Common.IsNaturalPerson: false
);

annotate service.Booking {
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Booking with @(UI: {
  HeaderInfo: {
    TypeName      : 'Booking',
    TypeNamePlural: 'Bookings',
    TypeImageUrl  : 'sap-icon://alert',
    Title         : {
      $Type: 'UI.DataField',
      Value: BookingID
    }
  },
  Facets    : [{
    $Type : 'UI.ReferenceFacet',
    ID    : 'FacetIdentifier1',
    Target: '@UI.FieldGroup'
  }],
  LineItem  : [
    {Value: BookingID},
    {Value: BookingDate},
    {Value: ConnectionID},
    {Value: FlightDate},
    {Value: FlightPrice}
  ],
  FieldGroup: {Data: [
    {
      $Type: 'UI.DataField',
      Value: BookingID
    },
    {
      $Type: 'UI.DataField',
      Value: BookingDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightPrice
    }
  ]}
});

annotate service.TravelAgency with @(UI: {FieldGroup #Link: {Data: [{
  $Type: 'UI.DataFieldWithUrl',
  Value: Name,
  Url  : WebAddress
}]}});
```

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="UI.FieldGroup" Qualifier="Contact">
	<Record Type="UI.FieldGroupType">
		<PropertyValue Property="Data">
			<Collection>
				<Record Type="UI.DataFieldForAnnotation">
					<PropertyValue Property="Target" AnnotationPath="@Communication.Contact" />
					<PropertyValue Property="Label" String="Contact" />
				</Record>
			</Collection>
		</PropertyValue>
	</Record>
</Annotation>
```

Contact

field contact person communication details


**TITLE**: Data Point

**INTRODUCTION**: The Field building block enables you to render single data points.

**TAGS**: field, data point, value, metric, display, DataPoint

**STEP**: Implementation

**DESCRIPTION**: Add a DataPoint annotation. The Value points to the property representing the data to be visualized, for example in the form of a Progress Indicator (Visualization: #Progress).

**LANGUAGE**: CDS

**CODE**:
```cds
using TravelService as service from '../service/service';

annotate service.Travel {
  TravelStatus @Common.ValueListWithFixedValues;
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Travel with @UI.LineItem: [
  {Value: TravelID},
  {
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@UI.ConnectedFields#TripDates'
  },
  {Value: to_Agency_AgencyID},
  {
    Value             : TravelStatus_code,
    Criticality       : TravelStatus.criticality,
    @UI.Importance    : #High,
    @HTML5.CssDefaults: {width: '10em'}
  },
  {Value: BookingFee},
  {Value: TotalPrice}
];

annotate service.Travel with @(UI: {SelectionFields: [
  TravelID,
  to_Agency_AgencyID,
  TravelStatus_code,
  BeginDate,
  EndDate
]});

annotate service.Travel with @Capabilities.FilterRestrictions.FilterExpressionRestrictions: [
  {
    Property          : 'BeginDate',
    AllowedExpressions: 'SingleRange'
  },
  {
    Property          : 'EndDate',
    AllowedExpressions: 'SingleRange'
  }
];

annotate service.Travel with @(UI: {
  FieldGroup #TravelData    : {Data: [
    {Value: TravelID},
    {Value: to_Agency_AgencyID},
    {Value: BeginDate},
    {Value: EndDate}
  ]},
  FieldGroup #ApprovalData  : {Data: [
    {
      $Type      : 'UI.DataField',
      Value      : TravelStatus_code,
      Criticality: TravelStatus.criticality,
      Label      : 'Status'
    },
    {Value: BookingFee},
    {Value: TotalPrice}
  ]},
  FieldGroup #HeaderMain    : {Data: [
    {Value: BeginDate},
    {Value: EndDate},
    {Value: TotalPrice}
  ]},
  ConnectedFields #TripDates: {
    Label   : 'Business Trip Dates',
    Template: '{BeginDate} / {EndDate}',
    Data    : {
      BeginDate: {
        $Type: 'UI.DataField',
        Value: BeginDate
      },
      EndDate  : {
        $Type: 'UI.DataField',
        Value: EndDate
      }
    }
  },
  Facets                    : [
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'TravelData',
      Label : 'Travel Information',
      Target: '@UI.FieldGroup#TravelData',
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'ApprovalData',
      Label : 'Approval Data',
      Target: '@UI.FieldGroup#ApprovalData'
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'BookingList',
      Label : 'Bookings',
      Target: 'to_Booking/@UI.LineItem'
    }
  ],
  HeaderFacets              : [{
    $Type : 'UI.ReferenceFacet',
    Target: '@UI.FieldGroup#HeaderMain'
  }],
  HeaderInfo                : {
    TypeName      : 'Travel',
    TypeNamePlural: 'Travels',
    Title         : {
      $Type: 'UI.DataField',
      Value: Description
    },
    Description   : {
      $Type: 'UI.DataField',
      Value: TravelID
    },
    TypeImageUrl  : 'sap-icon://header',
  }
});

annotate service.Travel {
  to_Agency @Common.ValueList: {
    CollectionPath: 'TravelAgency',
    Label         : '',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: to_Agency_AgencyID,
        ValueListProperty: 'AgencyID'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Street'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PostalCode'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'City'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'CountryCode_code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PhoneNumber'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'EMailAddress'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'WebAddress'
      }
    ]
  };
}

annotate service.TravelAgency with @(UI: {
  DataPoint #Recommendation: {
    Value        : Recommendation,
    TargetValue  : 100.0,
    Title        : 'Recommendation',
    Visualization: #Progress
  },
  DataPoint #Rating        : {
    Value        : Rating,
    TargetValue  : 5.0,
    Title        : 'Rating',
    Visualization: #Rating
  },
  FieldGroup #Contact      : {Data: [{
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@Communication.Contact',
    Label : 'Travel Agency'
  }]}
});

annotate service.TravelAgency with @(
  Communication.Contact : {
    email: [{
      type   : #work,
      address: EMailAddress
    }],
    fn   : Name,
    adr  : [{
      type    : #work,
      code    : PostalCode,
      country : CountryCode_code,
      locality: City
    }]
  },
  Common.IsNaturalPerson: false
);

annotate service.Booking {
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Booking with @(UI: {
  HeaderInfo: {
    TypeName      : 'Booking',
    TypeNamePlural: 'Bookings',
    TypeImageUrl  : 'sap-icon://alert',
    Title         : {
      $Type: 'UI.DataField',
      Value: BookingID
    }
  },
  Facets    : [{
    $Type : 'UI.ReferenceFacet',
    ID    : 'FacetIdentifier1',
    Target: '@UI.FieldGroup'
  }],
  LineItem  : [
    {Value: BookingID},
    {Value: BookingDate},
    {Value: ConnectionID},
    {Value: FlightDate},
    {Value: FlightPrice}
  ],
  FieldGroup: {Data: [
    {
      $Type: 'UI.DataField',
      Value: BookingID
    },
    {
      $Type: 'UI.DataField',
      Value: BookingDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightPrice
    }
  ]}
});

annotate service.TravelAgency with @(UI: {FieldGroup #Link: {Data: [{
  $Type: 'UI.DataFieldWithUrl',
  Value: Name,
  Url  : WebAddress
}]}});
```

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="UI.DataPoint" Qualifier="Recommendation">
	<Record Type="UI.DataPointType">
		<PropertyValue Property="Title" String="Travel Agency Recommendation" />
		<PropertyValue Property="Value" Path="Recommendation" />
		<PropertyValue Property="TargetValue" Decimal="100.0" />
		<PropertyValue Property="Visualization" EnumMember="UI.VisualizationType/Progress" />
	</Record>
</Annotation>
```

**LANGUAGE**: ABAP

**CODE**:
```abap
@UI.dataPoint: {
  title: 'Recommendation',
  targetValue: 100.0,
  visualization: #PROGRESS
}
annotate view service.TravelAgency with {
  @UI.dataPoint: {
    qualifier: 'Recommendation'
  }
  Recommendation;
}
```

Data Point

field
data point
value
metric
display
DataPoint


**TITLE**: Date Picker

**INTRODUCTION**: The Field building block enables you to render date input fields with a date picker.

**TAGS**: date and time fields, calendar, timestamp, temporal

**STEP**: Implementation

**DESCRIPTION**: Define a property of type Date. The field formats the string value and in edit mode offers a Date Picker for changing the date.

**LANGUAGE**: CDS

**CODE**:
```cds
using {
  sap,
  managed,
  Currency,
  Country
} from '@sap/cds/common';

using from '../service/annotations';

@cds.autoexpose  @readonly
aspect MasterData {}

service TravelService {
  @odata.draft.enabled
  @Common.SemanticKey: [TravelID]

  entity Travel : managed {
    key TravelUUID    : UUID;

        @Common.Label          : 'ID'
        @Common.Text           : Description
        TravelID      : Integer default 0                         @readonly;

        @Common.Label          : 'Begin Date'
        BeginDate     : Date;

        @Common.Label          : 'End Date'
        EndDate       : Date;

        @Common.Label          : 'Booking Fee'
        BookingFee    : Decimal(10, 2) default 0                  @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label          : 'Total Price'
        TotalPrice    : Decimal(10, 2)                            @readonly  @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label          : 'Currency'
        CurrencyCode  : Association to CurrencyCode default 'EUR' @mandatory;

        @Common.Label          : 'Description'
        Description   : String(1024);

        @Common.Label          : 'Travel Details'
        @UI.MultiLineText
        TravelDetails : String(1024);

        @title                 : 'Status'
        @Common.Text           : TravelStatus.name
        @Common.TextArrangement: #TextOnly
        TravelStatus  : Association to TravelStatus default 'O'   @readonly;

        @title                 : 'Agency'
        @Common.Text           : to_Agency.Name
        @Common.TextArrangement: #TextFirst
        to_Agency     : Association to TravelAgency               @mandatory;

        to_Booking    : Composition of many Booking
                          on to_Booking.to_Travel = $self;
  };

  entity Booking : managed {
    key BookingUUID   : UUID;

        @Common.Label: 'Booking ID'
        BookingID     : Integer                                  @Core.Computed;

        @Common.Label: 'Booking Date'
        BookingDate   : Date;

        @Common.Label: 'Connection'
        ConnectionID  : String(4)                                @mandatory;

        @Common.Label: 'Flight Date'
        FlightDate    : Date                                     @mandatory;

        @Common.Label: 'Flight Price'
        FlightPrice   : Decimal(10, 2)                           @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label: 'Currency'
        CurrencyCode  : Currency default 'EUR'                   @mandatory;

        @Common.Label: 'Status'
        BookingStatus : Association to BookingStatus default 'N' @mandatory;
        to_Travel     : Association to Travel                    @mandatory;

        PaymentMethod : String(1) default 'B'                    @Common              : {
          Label                   : 'Payment Method',
          Text                    : _Payment.Method,
          TextArrangement         : #TextOnly,
          ValueListWithFixedValues: true,
          ValueList               : {
            Label         : 'Payment Method',
            CollectionPath: 'Payment',
            Parameters    : [{
              $Type            : 'Common.ValueListParameterInOut',
              LocalDataProperty: PaymentMethod,
              ValueListProperty: 'code'
            }]
          }
        };
        _Payment      : Association to one Payment
                          on _Payment.code = PaymentMethod;
  };

  entity Payment {
    key code   : String(1) @(Common: {
          Label          : 'Payment Code',
          Text           : Method,
          TextArrangement: #TextFirst
        });
        Method : String    @(
          Core.Immutable: true,
          Common.Label  : 'Payment Method'
        );
  }

  entity TravelStatus : sap.common.CodeList {
    key code        : String(1) @Common.Text: descr;
        name        : String(255);
        descr       : String(1000);
        criticality : Int16     @odata.Type : 'Edm.Byte' enum {
          Neutral  = 0;
          Negative = 1;
          Critical = 2;
          Positive = 3;
          NewItem  = 5
        };
  };

  entity CurrencyCode : sap.common.CodeList {
        @Common.Label: 'Currency Code'
    key code  : String(3);

        @Common.Label: 'Currency Description'
        descr : String(255);
  };

  entity BookingStatus : sap.common.CodeList {
    key code : BookingStatusCode
  };

  entity TravelAgency : MasterData {
        @Common.Label: 'Agency ID'
        @Common.Text : Name
    key AgencyID       : String(6);

        @Common.Label: 'Agency Name'
        Name           : String(80);
        Street         : String(60);

        @Common.Label: 'Postal Code'
        PostalCode     : String(10);

        @Common.Label: 'City'
        City           : String(40);

        @Common.Label: 'Country Code'
        CountryCode    : Country;

        @Common.Label: 'Phone Number'
        PhoneNumber    : String(30);

        @Common.Label: 'Email Address'
        EMailAddress   : String(256);

        @Common.Label: 'Web Address'
        WebAddress     : String(256);
        Rating         : Integer;
        Recommendation : Integer;
  };

  type TravelStatusCode  : String(1) enum {
    Open     = 'O';
    Accepted = 'A';
    Canceled = 'X';
  };

  type BookingStatusCode : String(1) enum {
    New      = 'N';
    Booked   = 'B';
    Canceled = 'X';
  };
}
```

Date Picker

date and time fields
calendar
timestamp
temporal


**TITLE**: Date-Time Picker

**INTRODUCTION**: The Field building block enables you to render date input fields with a date-time picker.

**TAGS**: field, date time picker, date time, calendar, timestamp, datetime

**STEP**: Implementation

**DESCRIPTION**: Define a property of type DateTime. The field formats the string value and in edit mode offers a date-time picker for changing date and time.

**LANGUAGE**: CDS

**CODE**:
```cds
using {TravelService.Travel} from '../../../../../service/service';
using from '../../../../../service/annotations';

extend entity TravelService.Travel with {
  @Common.Label: 'Reminder'
  ReminderTime : DateTime;
};
```

Date-Time Picker

field
date time picker
date time
calendar
timestamp
datetime


**TITLE**: Field

**INTRODUCTION**: The Field building block enables you to render a property that is configured as part of the service metadata. The field analyzes the different annotations that are defined for the property to create the most appropriate controls, and you can configure options to adjust the behavior.

**TAGS**: field

**STEP**: Implementation

**DESCRIPTION**: If not annotated otherwise, an editable property is rendered as an Input field in edit mode.

**LANGUAGE**: CDS

**CODE**:
```cds
using {
  sap,
  managed,
  Currency,
  Country
} from '@sap/cds/common';

using from '../service/annotations';

@cds.autoexpose  @readonly
aspect MasterData {}

service TravelService {
  @odata.draft.enabled
  @Common.SemanticKey: [TravelID]

  entity Travel : managed {
    key TravelUUID    : UUID;

        @Common.Label          : 'ID'
        @Common.Text           : Description
        TravelID      : Integer default 0                         @readonly;

        @Common.Label          : 'Begin Date'
        BeginDate     : Date;

        @Common.Label          : 'End Date'
        EndDate       : Date;

        @Common.Label          : 'Booking Fee'
        BookingFee    : Decimal(10, 2) default 0                  @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label          : 'Total Price'
        TotalPrice    : Decimal(10, 2)                            @readonly  @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label          : 'Currency'
        CurrencyCode  : Association to CurrencyCode default 'EUR' @mandatory;

        @Common.Label          : 'Description'
        Description   : String(1024);

        @Common.Label          : 'Travel Details'
        @UI.MultiLineText
        TravelDetails : String(1024);

        @title                 : 'Status'
        @Common.Text           : TravelStatus.name
        @Common.TextArrangement: #TextOnly
        TravelStatus  : Association to TravelStatus default 'O'   @readonly;

        @title                 : 'Agency'
        @Common.Text           : to_Agency.Name
        @Common.TextArrangement: #TextFirst
        to_Agency     : Association to TravelAgency               @mandatory;

        to_Booking    : Composition of many Booking
                          on to_Booking.to_Travel = $self;
  };

  entity Booking : managed {
    key BookingUUID   : UUID;

        @Common.Label: 'Booking ID'
        BookingID     : Integer                                  @Core.Computed;

        @Common.Label: 'Booking Date'
        BookingDate   : Date;

        @Common.Label: 'Connection'
        ConnectionID  : String(4)                                @mandatory;

        @Common.Label: 'Flight Date'
        FlightDate    : Date                                     @mandatory;

        @Common.Label: 'Flight Price'
        FlightPrice   : Decimal(10, 2)                           @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label: 'Currency'
        CurrencyCode  : Currency default 'EUR'                   @mandatory;

        @Common.Label: 'Status'
        BookingStatus : Association to BookingStatus default 'N' @mandatory;
        to_Travel     : Association to Travel                    @mandatory;

        PaymentMethod : String(1) default 'B'                    @Common              : {
          Label                   : 'Payment Method',
          Text                    : _Payment.Method,
          TextArrangement         : #TextOnly,
          ValueListWithFixedValues: true,
          ValueList               : {
            Label         : 'Payment Method',
            CollectionPath: 'Payment',
            Parameters    : [{
              $Type            : 'Common.ValueListParameterInOut',
              LocalDataProperty: PaymentMethod,
              ValueListProperty: 'code'
            }]
          }
        };
        _Payment      : Association to one Payment
                          on _Payment.code = PaymentMethod;
  };

  entity Payment {
    key code   : String(1) @(Common: {
          Label          : 'Payment Code',
          Text           : Method,
          TextArrangement: #TextFirst
        });
        Method : String    @(
          Core.Immutable: true,
          Common.Label  : 'Payment Method'
        );
  }

  entity TravelStatus : sap.common.CodeList {
    key code        : String(1) @Common.Text: descr;
        name        : String(255);
        descr       : String(1000);
        criticality : Int16     @odata.Type : 'Edm.Byte' enum {
          Neutral  = 0;
          Negative = 1;
          Critical = 2;
          Positive = 3;
          NewItem  = 5
        };
  };

  entity CurrencyCode : sap.common.CodeList {
        @Common.Label: 'Currency Code'
    key code  : String(3);

        @Common.Label: 'Currency Description'
        descr : String(255);
  };

  entity BookingStatus : sap.common.CodeList {
    key code : BookingStatusCode
  };

  entity TravelAgency : MasterData {
        @Common.Label: 'Agency ID'
        @Common.Text : Name
    key AgencyID       : String(6);

        @Common.Label: 'Agency Name'
        Name           : String(80);
        Street         : String(60);

        @Common.Label: 'Postal Code'
        PostalCode     : String(10);

        @Common.Label: 'City'
        City           : String(40);

        @Common.Label: 'Country Code'
        CountryCode    : Country;

        @Common.Label: 'Phone Number'
        PhoneNumber    : String(30);

        @Common.Label: 'Email Address'
        EMailAddress   : String(256);

        @Common.Label: 'Web Address'
        WebAddress     : String(256);
        Rating         : Integer;
        Recommendation : Integer;
  };

  type TravelStatusCode  : String(1) enum {
    Open     = 'O';
    Accepted = 'A';
    Canceled = 'X';
  };

  type BookingStatusCode : String(1) enum {
    New      = 'N';
    Booked   = 'B';
    Canceled = 'X';
  };
}
```

Field


**TITLE**: Field Control

**INTRODUCTION**: The Field building block enables you to define how a field behaves in different scenarios by using the FieldControl property. For example, a field can be set to read-only, hidden, or mandatory, either statically or based on certain conditions.

**TAGS**: field, field control, display, edit, FieldControl, Mandatory, Optional, ReadOnly

**STEP**: Implementation

**DESCRIPTION**: The value of the FieldControl determines how the field behaves. It uses an enumeration (FieldControlType) for possible values. You can set a property to read-only statically, similar to Core.Computed, but you can also refer to a property that uses the enumeration values as possible data values.
				Note that this example uses a Form building block with FormElement building blocks, rather than stand-alone Field building blocks. The FormElements building block not only provides a field, but also automatically creates and manages the label, including visualizing when an input value is mandatory.

**LANGUAGE**: CDS

**CODE**:
```cds
using {TravelService.Travel} from '../../../../../service/service';
using from '../../../../../service/annotations';

extend entity TravelService.Travel with {
  BookingFeeFC : Integer;
};

annotate TravelService.Travel with {
  BeginDate   @Common.FieldControl: #Mandatory;
  Description @Common.FieldControl: #Optional;
  to_Agency   @Common.FieldControl: #ReadOnly;
  BookingFee  @Common.FieldControl: BookingFeeFC;
};
```

**LANGUAGE**: ABAP

**CODE**:
```abap
// Behaviour Definition for TravelEntity (CDS View)
define behavior for TravelEntity alias Travel {
  ...
  // Dynamic Feature Control:  Use 'features:instance' in the behavior definition
  // and implement method 'get_instance_features' in the behavior pool class
  // using the relevant constants from 'if_abap_behv=>fc'.
  field ( features : instance ) BeginDate, Description, to_Agency_AgencyID, BookingFee;
  ...
}
```

**LANGUAGE**: XML

**CODE**:
```xml
<Schema Namespace="TravelService" xmlns="http://docs.oasis-open.org/odata/ns/edm">
	...
	<Annotations Target="TravelService.Travel/BeginDate">
		<Annotation Term="Common.Label" String="Begin Date" />
		<Annotation Term="Common.FieldControl" EnumMember="Common.FieldControlType/Mandatory" />
	</Annotations>
	<Annotations Target="TravelService.Travel/Description">
		<Annotation Term="Common.Label" String="Description" />
		<Annotation Term="Common.FieldControl" EnumMember="Common.FieldControlType/Optional" />
	</Annotations>
	<Annotations Target="TravelService.Travel/to_Agency_AgencyID">
		<Annotation Term="Common.Text" Path="to_Agency/Name">
			<Annotation Term="UI.TextArrangement" EnumMember="UI.TextArrangementType/TextFirst" />
		</Annotation>
		<Annotation Term="Common.FieldControl" EnumMember="Common.FieldControlType/ReadOnly" />
	</Annotations>
	<Annotations Target="TravelService.Travel/BookingFee">
		<Annotation Term="Common.Label" String="Booking Fee" />
		<Annotation Term="Common.FieldControl" Path="BookingFeeFC" />
		<Annotation Term="Measures.ISOCurrency" Path="CurrencyCode_code" />
	</Annotations>
	...
</Schema>
```

Field Control

field
field control
display
edit
FieldControl
Mandatory
Optional
ReadOnly


**TITLE**: File Upload and Download

**INTRODUCTION**: The Field building block enables you to render fields with file upload and download capabilities.

**TAGS**: field, file upload, download, attachment, documents, stream, MediaType

**STEP**: Implementation

**DESCRIPTION**: You can bind Edm.Stream properties to the Field. Specify its content type and acceptable types via Core.MediaType and Core.AcceptableMediaTypes annotations. Core.ContentDisposition.Filename defines the file name to be displayed.

**LANGUAGE**: CDS

**CODE**:
```cds
using {TravelService.Travel} from '../../../../../service/service';
using from '../../../../../service/annotations';

/*
 * Stream Content (as BLOB)
 */
@title         : 'Stream Content'
@Core.MediaType: 'application/octet-stream'
type Stream : LargeBinary;

extend entity TravelService.Travel with {
  @title: 'Notes File'
  File     : Stream @(
    Core.MediaType                  : 'text/plain',
    Core.AcceptableMediaTypes       : ['text/plain'],
    Core.ContentDisposition.Filename: FileName
  );
  FileName : String;
};
```

**LANGUAGE**: XML

**CODE**:
```xml
<Annotations Target="YourEntity/File">
	<Annotation Term="Core.MediaType" String="text/plain" />
	<Annotation Term="Core.AcceptableMediaTypes">
		<Collection>
			<String>text/plain</String>
		</Collection>
	</Annotation>
	<Annotation Term="Core.ContentDisposition">
		<Record>
			<PropertyValue Property="Filename" PropertyPath="FileName" />
		</Record>
	</Annotation>
</Annotations>
```

**LANGUAGE**: ABAP

**CODE**:
```abap
@EndUserText.label: 'Notes File'
    @Semantics.largeObject: {
      mimeType: 'MimeType',
      fileName: 'FileName',
      acceptableMimeTypes: ['text/plain'],
      contentDispositionPreference: #ATTACHMENT
    }
    File,

    @Semantics.mimeType: true
    MimeType,

    FileName,
```

File Upload and Download

field
file upload
download
attachment
documents
stream
MediaType


**TITLE**: Input Mask

**INTRODUCTION**: The Field building block enables you to render masked input fields, which allow users to enter values only in the specified format.

**TAGS**: field, input mask, formatting, pattern, validation, InputMask, mask

**STEP**: Implementation

**DESCRIPTION**: Add a UI.Mask annotation to the property to be masked. The annotation specifies the Mask to be applied to the value. The PlaceholderSymbol shows where the user can enter data. The Rules property defines an array of mask symbols and their allowed values as a regular expression.

**LANGUAGE**: CDS

**CODE**:
```cds
using {TravelService.Booking} from '../../../../../service/service';
using from '../../../../../service/annotations';

extend entity TravelService.Booking with {
  CreditCardNumber : String @(UI.InputMask: {
    Mask             : '0000-0000-0000-0000',
    PlaceholderSymbol: '_',
    Rules            : [{
      MaskSymbol: '0',
      RegExp    : '[0-9]'
    }]
  });
};
```

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="UI.InputMask" Qualifier="DiscountCode">
	<Record>
		<PropertyValue Property="Mask" String="C ***-***-***" />
		<PropertyValue Property="PlaceholderSymbol" String="_" />
	</Record>
</Annotation>
```

Input Mask

field
input mask
formatting
pattern
validation
InputMask
mask


**TITLE**: Input with Value Help

**INTRODUCTION**: The Field building block enables you to render input fields with value help. Users can choose values from a list or use a dialog to search for and select values.

**TAGS**: input fields, text input, user input, data entry

**STEP**: Value Help Configuration Using ValueList Annotation

**DESCRIPTION**: The com.sap.vocabularies.Common.v1.ValueList annotation configures value help functionality for input fields. It defines where to find possible values through its CollectionPath (resource path to OData collection) and CollectionRoot (service root URL) properties. The Label property provides the headline for the value list dialog. The Parameters property contains instructions for constructing requests and mapping response values through in/out mappings, determining how field values interact with the value help data.

**STEP**: Value Help with Select Control (Dropdown)

**DESCRIPTION**: This basic value help allows a single selection from a predefined list. Use Common.ValueListWithFixedValues to render as a dropdown select control. Fields can display key and description in different formats using TextArrangement annotation.

**STEP**: Value Help with Validation

**DESCRIPTION**: Demonstrates validation feature using Common.ValueListForValidation. Input values are validated against the value list data when leaving the field. Enter any value and remove focus - if the value is not found in the dataset, the field shows a red frame and error message.

**STEP**: Context-Dependent Value Help

**DESCRIPTION**: Different value help dialogs based on context determined by another property. Use Common.ValueListRelevantQualifiers to configure behavior when using multiple value lists. The value help content changes dynamically based on the value of another field.

**STEP**: Multiple Value Help Dialogs

**DESCRIPTION**: Scenarios requiring more than one value help. Use a collection of ValueList annotations to select a value help variant from a dropdown list in the dialog. Click the value help icon to open the dialog, then use the dropdown menu at the top to switch between different value help variants.

**STEP**: In/Out Parameter Mapping

**DESCRIPTION**: Structure of ValueList annotation and how In/Out mappings link fields between main entity and value help entity. Out-Mapping automatically fills other fields when selecting a value help item. In-Mapping uses field values as filters in other value helps. In/Out-Mapping combines both behaviors.

**STEP**: Value Help Containing a Tree Table

**DESCRIPTION**: You can configure a value help to show a tree table instead of a standard list. This is done by adding a PresentationVariantQualifier to the ValueList annotation pointing to a PresentationVariant. The PresentationVariant contains a RecursiveHierarchyQualifier pointing to RecursiveHierarchy definitions specifying properties of the tree table.

**STEP**: Side Effects for Value Help Collection Updates

**DESCRIPTION**: Use side effects to refresh value help data when the underlying collection has been modified. This ensures users always see the most current data in value help dialogs. For detailed implementation, refer to the following documentation:

Input with Value Help

input fields
text input
user input
data entry


**TITLE**: Link with URL

**INTRODUCTION**: The Field building block enables you to render fields with links.

**TAGS**: links, hyperlinks, navigation, URL, quick view

**STEP**: URL-based Navigation

**DESCRIPTION**: You can add a DataFieldWithUrl annotation for a property and provide a URL. The field will render the value as a link, which navigates to the specified URL.

**LANGUAGE**: CDS

**CODE**:
```cds
using TravelService as service from '../service/service';

annotate service.Travel {
  TravelStatus @Common.ValueListWithFixedValues;
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Travel with @UI.LineItem: [
  {Value: TravelID},
  {
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@UI.ConnectedFields#TripDates'
  },
  {Value: to_Agency_AgencyID},
  {
    Value             : TravelStatus_code,
    Criticality       : TravelStatus.criticality,
    @UI.Importance    : #High,
    @HTML5.CssDefaults: {width: '10em'}
  },
  {Value: BookingFee},
  {Value: TotalPrice}
];

annotate service.Travel with @(UI: {SelectionFields: [
  TravelID,
  to_Agency_AgencyID,
  TravelStatus_code,
  BeginDate,
  EndDate
]});

annotate service.Travel with @Capabilities.FilterRestrictions.FilterExpressionRestrictions: [
  {
    Property          : 'BeginDate',
    AllowedExpressions: 'SingleRange'
  },
  {
    Property          : 'EndDate',
    AllowedExpressions: 'SingleRange'
  }
];

annotate service.Travel with @(UI: {
  FieldGroup #TravelData    : {Data: [
    {Value: TravelID},
    {Value: to_Agency_AgencyID},
    {Value: BeginDate},
    {Value: EndDate}
  ]},
  FieldGroup #ApprovalData  : {Data: [
    {
      $Type      : 'UI.DataField',
      Value      : TravelStatus_code,
      Criticality: TravelStatus.criticality,
      Label      : 'Status'
    },
    {Value: BookingFee},
    {Value: TotalPrice}
  ]},
  FieldGroup #HeaderMain    : {Data: [
    {Value: BeginDate},
    {Value: EndDate},
    {Value: TotalPrice}
  ]},
  ConnectedFields #TripDates: {
    Label   : 'Business Trip Dates',
    Template: '{BeginDate} / {EndDate}',
    Data    : {
      BeginDate: {
        $Type: 'UI.DataField',
        Value: BeginDate
      },
      EndDate  : {
        $Type: 'UI.DataField',
        Value: EndDate
      }
    }
  },
  Facets                    : [
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'TravelData',
      Label : 'Travel Information',
      Target: '@UI.FieldGroup#TravelData',
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'ApprovalData',
      Label : 'Approval Data',
      Target: '@UI.FieldGroup#ApprovalData'
    },
    {
      $Type : 'UI.ReferenceFacet',
      ID    : 'BookingList',
      Label : 'Bookings',
      Target: 'to_Booking/@UI.LineItem'
    }
  ],
  HeaderFacets              : [{
    $Type : 'UI.ReferenceFacet',
    Target: '@UI.FieldGroup#HeaderMain'
  }],
  HeaderInfo                : {
    TypeName      : 'Travel',
    TypeNamePlural: 'Travels',
    Title         : {
      $Type: 'UI.DataField',
      Value: Description
    },
    Description   : {
      $Type: 'UI.DataField',
      Value: TravelID
    },
    TypeImageUrl  : 'sap-icon://header',
  }
});

annotate service.Travel {
  to_Agency @Common.ValueList: {
    CollectionPath: 'TravelAgency',
    Label         : '',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: to_Agency_AgencyID,
        ValueListProperty: 'AgencyID'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'Street'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PostalCode'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'City'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'CountryCode_code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'PhoneNumber'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'EMailAddress'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'WebAddress'
      }
    ]
  };
}

annotate service.TravelAgency with @(UI: {
  DataPoint #Recommendation: {
    Value        : Recommendation,
    TargetValue  : 100.0,
    Title        : 'Recommendation',
    Visualization: #Progress
  },
  DataPoint #Rating        : {
    Value        : Rating,
    TargetValue  : 5.0,
    Title        : 'Rating',
    Visualization: #Rating
  },
  FieldGroup #Contact      : {Data: [{
    $Type : 'UI.DataFieldForAnnotation',
    Target: '@Communication.Contact',
    Label : 'Travel Agency'
  }]}
});

annotate service.TravelAgency with @(
  Communication.Contact : {
    email: [{
      type   : #work,
      address: EMailAddress
    }],
    fn   : Name,
    adr  : [{
      type    : #work,
      code    : PostalCode,
      country : CountryCode_code,
      locality: City
    }]
  },
  Common.IsNaturalPerson: false
);

annotate service.Booking {
  CurrencyCode @Common.ValueList: {
    CollectionPath: 'Currencies',
    Parameters    : [
      {
        $Type            : 'Common.ValueListParameterInOut',
        LocalDataProperty: CurrencyCode_code,
        ValueListProperty: 'code'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'name'
      },
      {
        $Type            : 'Common.ValueListParameterDisplayOnly',
        ValueListProperty: 'descr'
      }
    ]
  };
}

annotate service.Booking with @(UI: {
  HeaderInfo: {
    TypeName      : 'Booking',
    TypeNamePlural: 'Bookings',
    TypeImageUrl  : 'sap-icon://alert',
    Title         : {
      $Type: 'UI.DataField',
      Value: BookingID
    }
  },
  Facets    : [{
    $Type : 'UI.ReferenceFacet',
    ID    : 'FacetIdentifier1',
    Target: '@UI.FieldGroup'
  }],
  LineItem  : [
    {Value: BookingID},
    {Value: BookingDate},
    {Value: ConnectionID},
    {Value: FlightDate},
    {Value: FlightPrice}
  ],
  FieldGroup: {Data: [
    {
      $Type: 'UI.DataField',
      Value: BookingID
    },
    {
      $Type: 'UI.DataField',
      Value: BookingDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightDate
    },
    {
      $Type: 'UI.DataField',
      Value: FlightPrice
    }
  ]}
});

annotate service.TravelAgency with @(UI: {FieldGroup #Link: {Data: [{
  $Type: 'UI.DataFieldWithUrl',
  Value: Name,
  Url  : WebAddress
}]}});
```

**LANGUAGE**: XML

**CODE**:
```xml
<Annotation Term="UI.FieldGroup" Qualifier="Link">
	<Record Type="UI.FieldGroupType">
		<PropertyValue Property="Data">
			<Collection>
				<Record Type="UI.DataFieldWithUrl">
					<PropertyValue Property="Value" Path="Description" />
					<PropertyValue Property="Url" Path="WebsiteUrl" />
					<PropertyValue Property="Label" String="Website" />
				</Record>
			</Collection>
		</PropertyValue>
	</Record>
</Annotation>
```

**LANGUAGE**: ABAP

**CODE**:
```abap
@UI.fieldGroup: [{
    targetQualifier: 'TravelAgencyDetails',
    position: 10
  }]

  @UI.fieldGroup: [{
    qualifier: 'TravelAgencyDetails',
    position: 10,
    type: #WITH_URL,
    url: 'WebsiteUrl'
    label: 'Website'
  }]
  Name;

  @UI.hidden: true
  WebsiteUrl;
```

**STEP**: Intent-based Navigation

**DESCRIPTION**: For intent-based navigation via semantic objects, please refer to the following topic.

**ADDITIONAL RELATED CODE BLOCKS**:

**FILE**: Sample.fragment.xml

**LANGUAGE**: XML

**CODE**:
```xml
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:macros="sap.fe.macros">
	<VBox class="sapUiTinyMarginTop" width="320px">
		<Label text="Travel Agency:" />
		<macros:Field metaPath="@com.sap.vocabularies.UI.v1.FieldGroup#Link/Data/0" id="FieldLinkUrl" />
	</VBox>
</core:FragmentDefinition>

```

**FILE**: service.cds

**LANGUAGE**: CDS

**CODE**:
```cds
using {
  sap,
  managed,
  Currency,
  Country
} from '@sap/cds/common';

using from '../service/annotations';

@cds.autoexpose  @readonly
aspect MasterData {}

service TravelService {
  @odata.draft.enabled
  @Common.SemanticKey: [TravelID]

  entity Travel : managed {
    key TravelUUID    : UUID;

        @Common.Label          : 'ID'
        @Common.Text           : Description
        TravelID      : Integer default 0                         @readonly;

        @Common.Label          : 'Begin Date'
        BeginDate     : Date;

        @Common.Label          : 'End Date'
        EndDate       : Date;

        @Common.Label          : 'Booking Fee'
        BookingFee    : Decimal(10, 2) default 0                  @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label          : 'Total Price'
        TotalPrice    : Decimal(10, 2)                            @readonly  @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label          : 'Currency'
        CurrencyCode  : Association to CurrencyCode default 'EUR' @mandatory;

        @Common.Label          : 'Description'
        Description   : String(1024);

        @Common.Label          : 'Travel Details'
        @UI.MultiLineText
        TravelDetails : String(1024);

        @title                 : 'Status'
        @Common.Text           : TravelStatus.name
        @Common.TextArrangement: #TextOnly
        TravelStatus  : Association to TravelStatus default 'O'   @readonly;

        @title                 : 'Agency'
        @Common.Text           : to_Agency.Name
        @Common.TextArrangement: #TextFirst
        to_Agency     : Association to TravelAgency               @mandatory;

        to_Booking    : Composition of many Booking
                          on to_Booking.to_Travel = $self;
  };

  entity Booking : managed {
    key BookingUUID   : UUID;

        @Common.Label: 'Booking ID'
        BookingID     : Integer                                  @Core.Computed;

        @Common.Label: 'Booking Date'
        BookingDate   : Date;

        @Common.Label: 'Connection'
        ConnectionID  : String(4)                                @mandatory;

        @Common.Label: 'Flight Date'
        FlightDate    : Date                                     @mandatory;

        @Common.Label: 'Flight Price'
        FlightPrice   : Decimal(10, 2)                           @Measures.ISOCurrency: CurrencyCode_code;

        @Common.Label: 'Currency'
        CurrencyCode  : Currency default 'EUR'                   @mandatory;

        @Common.Label: 'Status'
        BookingStatus : Association to BookingStatus default 'N' @mandatory;
        to_Travel     : Association to Travel                    @mandatory;

        PaymentMethod : String(1) default 'B'                    @Common              : {
          Label                   : 'Payment Method',
          Text                    : _Payment.Method,
          TextArrangement         : #TextOnly,
          ValueListWithFixedValues: true,
          ValueList               : {
            Label         : 'Payment Method',
            CollectionPath: 'Payment',
            Parameters    : [{
              $Type            : 'Common.ValueListParameterInOut',
              LocalDataProperty: PaymentMethod,
              ValueListProperty: 'code'
            }]
          }
        };
        _Payment      : Association to one Payment
                          on _Payment.code = PaymentMethod;
  };

  entity Payment {
    key code   : String(1) @(Common: {
          Label          : 'Payment Code',
          Text           : Method,
          TextArrangement: #TextFirst
        });
        Method : String    @(
          Core.Immutable: true,
          Common.Label  : 'Payment Method'
        );
  }

  entity TravelStatus : sap.common.CodeList {
    key code        : String(1) @Common.Text: descr;
        name        : String(255);
        descr       : String(1000);
        criticality : Int16     @odata.Type : 'Edm.Byte' enum {
          Neutral  = 0;
          Negative = 1;
          Critical = 2;
          Positive = 3;
          NewItem  = 5
        };
  };

  entity CurrencyCode : sap.common.CodeList {
        @Common.Label: 'Currency Code'
    key code  : String(3);

        @Common.Label: 'Currency Description'
        descr : String(255);
  };

  entity BookingStatus : sap.common.CodeList {
    key code : BookingStatusCode
  };

  entity TravelAgency : MasterData {
        @Common.Label: 'Agency ID'
        @Common.Text : Name
    key AgencyID       : String(6);

        @Common.Label: 'Agency Name'
        Name           : String(80);
        Street         : String(60);

        @Common.Label: 'Postal Code'
        PostalCode     : String(10);

        @Common.Label: 'City'
        City           : String(40);

        @Common.Label: 'Country Code'
        CountryCode    : Country;

        @Common.Label: 'Phone Number'
        PhoneNumber    : String(30);

        @Common.Label: 'Email Address'
        EMailAddress   : String(256);

        @Common.Label: 'Web Address'
        WebAddress     : String(256);
        Rating         : Integer;
        Recommendation : Integer;
  };

  type TravelStatusCode  : String(1) enum {
    Open     = 'O';
    Accepted = 'A';
    Canceled = 'X';
  };

  type BookingStatusCode : String(1) enum {
    New      = 'N';
    Booked   = 'B';
    Canceled = 'X';
  };
}

```

**FILE**: Travel.json

**LANGUAGE**: JSON

**CODE**:
```json
[
	{
		"TravelUUID": "52657221A8E4645C17002DF03754AB66",
		"TravelID": "00000001",
		"BeginDate": "2025-11-04",
		"EndDate": "2025-11-06",
		"BookingFee": "20.00",
		"TotalPrice": "900.00",
		"CurrencyCode_code": "USD",
		"Description": "Business Trip for Christine, Pierre",
		"TravelDetails": "This business trip includes a two-day customer workshop at the airport. The goal is the evaluation of the customer's use cases and the alignment on the road map for the upcoming year.",
		"TravelStatus_code": "A",
		"to_Agency_AgencyID": "070001"
	},
	{
		"TravelUUID": "53657221A8E4645C17002DF03754AB66",
		"TravelID": "00000002",
		"BeginDate": "2025-12-04",
		"EndDate": "2025-12-16",
		"BookingFee": "80.00",
		"TotalPrice": "3164.00",
		"CurrencyCode_code": "USD",
		"Description": "Lars Jensen site visit for system rollout support",
		"TravelDetails": "Will be provided soon...",
		"TravelStatus_code": "O",
		"to_Agency_AgencyID": "070002"
	},
	{
		"TravelUUID": "54657221A8E4645C17002DF03754AB66",
		"TravelID": "00000003",
		"BeginDate": "2025-08-04",
		"EndDate": "2025-08-08",
		"BookingFee": "40.00",
		"TotalPrice": "1871.00",
		"CurrencyCode_code": "USD",
		"Description": "John Smith customer workshop at Acme Corp headquarters",
		"TravelDetails": "Will be provided soon...",
		"TravelStatus_code": "O",
		"to_Agency_AgencyID": "070003"
	},
	{
		"TravelUUID": "55657221A8E4645C17002DF03754AB66",
		"TravelID": "00000004",
		"BeginDate": "2025-09-04",
		"EndDate": "2025-09-05",
		"BookingFee": "40.00",
		"TotalPrice": "1240.00",
		"CurrencyCode_code": "USD",
		"Description": "Anna Müller onboarding with new project team in Berlin",
		"TravelDetails": "Will be provided soon...",
		"TravelStatus_code": "X",
		"to_Agency_AgencyID": "070003"
	}
]

```

Link with URL

links
hyperlinks
navigation
URL
quick view