CDS Annotations Metadata Driven UIs PDF

Developer Information
Document Version: 1.0 2015-12-08
CDS Annotations for Metadata-Driven UIs
PUBLIC
Typographic Conventions
Type Style
Description
Example
Words or characters quoted from the screen. These include field names, screen titles,
pushbuttons labels, menu names, menu paths, and menu options.
Textual cross-references to other documents.
Example
Emphasized words or expressions.
EXAMPLE
Technical names of system objects. These include report names, program names,
transaction codes, table names, and key concepts of a programming language when they
are surrounded by body text, for example, SELECT and INCLUDE.
Example
Output on the screen. This includes file and directory names and their paths, messages,
names of variables and parameters, source text, and names of installation, upgrade and
database tools.
Example
Exact user entry. These are words or characters that you enter in the system exactly as
they appear in the documentation.
<Example>
Variable user entry. Angle brackets indicate that you replace these words and characters
with appropriate entries to make entries in the system.
EXAMPLE
Keys on the keyboard, for example, F 2 or E N T E R .
PUBLIC
2015 SAP SE or an SAP affiliate company. All rights reserved.

Typographic Conventions
Document History
Version
Date
Change
1.0
2015-12-08
First publication

Document History
PUBLIC
Contents
Introduction ................................................................................................................................... 6
2
2.1
2.2
2.3
Tables and Lists ............................................................................................................................. 8

Title .................................................................................................................................................. 8
Columns......................................................................................................................................... 10
Selection Fields............................................................................................................................... 11
3
3.1
3.2
Object-Page Floorplan ................................................................................................................ 13

Page Header .................................................................................................................................. 13
Page Body .......................................................................................................................................15
Field Groups ..................................................................................................................................17
5
5.1
5.2
5.3
5.4
Annotations Similar to DataField .............................................................................................. 19

Exposing Elements ........................................................................................................................ 19
Overwriting Default Labels ............................................................................................................ 20
Positioning Fields........................................................................................................................... 20
Prioritizing Fields ............................................................................................................................21
6
6.1
Charts ........................................................................................................................................... 23
Chart Types ................................................................................................................................... 24
7
7.1
7.2
7.3
7.4
7.5
Data Points ...................................................................................................................................26

Criticality........................................................................................................................................ 27
Trends............................................................................................................................................ 29
Trend-Criticality Calculation ......................................................................................................... 30
Person Responsible and Reference Period ................................................................................... 34
DataField Type: #AS_DATAPOINT................................................................................................ 35
Contact Data ................................................................................................................................ 37
9
9.1
9.2
9.3
Navigation ....................................................................................................................................39
With Navigation Path ..................................................................................................................... 39
With URL ........................................................................................................................................ 41
Based on Intent.............................................................................................................................. 43
10
Actions ......................................................................................................................................... 46
11
11.1
11.2
11.3
11.4
Field Manipulation ...................................................................................................................... 48

Multi-Line Text ............................................................................................................................... 48
Field Masking ................................................................................................................................. 48
Field Hiding .................................................................................................................................... 49
Interaction with Other Annotations ............................................................................................... 52
PUBLIC

Contents
12
References................................................................................................................................... 54
13
Glossary ........................................................................................................................................ 55
Important Disclaimers and Legal Information .................................................................................... 56

Contents
PUBLIC
Introduction
Metadata-driven UIs are dynamic UIs because metadata, namely CDS annotations in this context, are stored in a
repository and can be retrieved from the client as needed. CDS annotations depend on the UI in which they are
supposed to be used.
User interfaces (UIs) might differ from user to user. Even though if, for example, three different users use the
same application, each of them might have different permissions or different preferences, which results in
different UI perspectives. Users might want to personalize their UIs and see different columns in tables, for
example. CDS annotations offer default views for modelling UIs, however, CDS annotations can be overruled by
personalization preferences.
Target Group
ABAP developers who want to provide OData services within the scope of SAP Fiori programming model
Prerequisites
SAP NetWeaver Releases
SAP NetWeaver 7.50, SP01, or higher
No specific database is required, but SAP HANA DB is recommended.
Development Environment
We recommend to use the latest version of ABAP Development Tools for SAP NetWeaver (ADT).
You can download the latest available ADT plugin from the update site https://tools.hana.ondemand.com/
Authorizations
To reproduce the steps described in this guide, the user on SAP NetWeaver AS ABAP with the following roles
assigned is required:
SAP_BC_DWB_ABAPDEVELOPER
SAP_BC_DWB_WBDISPLAY
Knowledge
Basic knowledge of
ABAP Core Data Services (CDS)
SAP Fiori UI technology
Smart Templates
This guide informs you, the ABAP developer, about CDS annotations that you can use to define metadata-driven
UIs. The chapters of this guide answer the following questions:
How can I define the title of a field or a table?
How can I define the columns of a field or a table?
How can I define fields for filtering?
How can I define the header of an object-page floorplan?
PUBLIC

Introduction
How can I define the body of an object-page floorplan?
How can I group fields?
How can I expose elements to UIs?
How can I overwrite default labels?
How can I position fields?
How can I prioritize fields?
How can I define charts?
How can I visualize criticality?
How can I visualize trends?
How can I visualize criticality based on trend calculation?
How can I visualize a person responsible and a reference period?
How can I use the dataField type #AS_DATAPOINT?
How can I define a contact?
How can I define navigation between screens?
How can I define navigation to external web sites?
How can I define navigation based on actions executed on semantic objects?
How can I define actions?
How can I display fields in a text area?
How can I mask fields?
How can I hide fields?
How can I define interaction between annotations?

Introduction
PUBLIC
Tables and Lists
In Fiori we distinguish tables and list. Both mostly hold homogeneous data, but lists hold in general rather simple
data whereas tables hold usually more complex ones.
Lists are mostly used in the master list section of the master-detail floorplan and in popovers or dialogs. Sure
there is also the possibility to have them in full-screen floorplans for certain use cases.
A table contains a set of line items and usually comprises rows (one row showing one line item) and columns. Line
items can contain data of any kind, but also interactive controls, for example, for editing the data, navigating, or
triggering actions relating to the line item.
To display large amounts of data in tabular form, several table controls are provided. These are divided into two
groups, each of which is defined by a consistent feature set:
Fully responsive tables
Desktop-centric tables
In order to expose a CDS view in a table-like or list-like format, you can use the following annotations.
2.1
Title
If necessary, you can provide a header for your list or table.
PUBLIC

Tables and Lists
Fig.1: Example of title of table

You can use the following UI annotation to define what can be displayed in the title of a table or a list:
@UI.headerInfo.typeNamePlural
Sample Code 1
...
@UI.headerInfo: { typeNamePlural: 'Sales Orders' }
define view ZExample_SalesOrder as select from sepm_cds_sales_order as so {
...
}

Tables and Lists
PUBLIC
2.2
Columns
What columns are needed for a table or list depends on the use case, for example, an overview table may require
more fields than a value help list. For this reason, you can define several list layouts and table layouts that are
distinguished by a qualifier, for example 'ValueList'.
If a CDS view contains analytical annotations, for example the @DefaultAggregation annotation, the UI
automatically takes this is into consideration and no additional UI annotations are required.
Fig.2: Example of @DefaultAggregation annotation

For more information about the @DefaultAggregation annotation, see http://help.sap.com/nw75/
Developer's Guide Application Development on AS ABAP ABAP Development Tools - Eclipse SAP - ABAP
CDS Developer Guide CDS Annotations DefaultAggregation Annotations.
You can use the following UI annotation to define what can be displayed in the title of a table or a list:
10
@UI.lineItem
PUBLIC

Tables and Lists
Sample Code 2
...
@UI.lineItem: [ { position: 10 }, { qualifier: 'ValueList', position: 10 } ]
key so.sales_order_id as SalesOrder,
@UI.lineItem: [ { position: 20 }, { qualifier: 'ValueList', position: 20 } ]

so.customer.company_name as CompanyName,
@UI.lineItem: [ { position: 30 } ]
so.currency_code as CurrencyCode,
@DefaultAggregation: #SUM
@UI.lineItem: [ { position: 40 } ]
so.gross_amount as GrossAmount
}
For more information about positioning, see section Positioning Fields.
2.3
Selection Fields
If your table or list contains many data and therefore many rows, it gets hard to find the information you need. To
facilitate finding the desired information, you can use selection fields to specify the range of information that you
are looking for.
Fig.3: Example of selection fields for filtering

If a CDS is annotated as @Search.searchable, the UI automatically takes this is into consideration and no additional UI annotations are required to expose a search field or a value help.

Tables and Lists
PUBLIC
11
Fig.4: Example for @Search.searchable annotation

You can use the following UI annotation to enable specific elements for selection, for example using a filter bar:
@UI.selectionField
Sample Code 3
...
@UI.selectionField: [ { position: 10 } ]
...
}
12
PUBLIC

Tables and Lists
Object-Page Floorplan
You can use the object-page floorplan if you need to display, create, or edit any object regardless of its complexity
level. You can use the object-page floorplan with either a facet (tabs) or flat (anchors) approach.
To expose a CDS view in an object-page floorplan, you can use the following annotations.
3.1
Page Header
The page header contains information on the object you are editing in the object-page floorplan, for example.
Fig.5: Example of @UI.headerInfo for page header of object-page floorplan

You can use the following UI annotations to use several properties to influence the header section of the objectpage floorplan:
@UI.headerInfo

PUBLIC
13
Sample Code 4
@UI.headerInfo: {
typeName: 'Sales Order',
title: {
label: 'Sales Order',
value: 'SalesOrder'
-- Reference to element in element list
},
description: {
label: 'Customer',
value: 'CompanyName'
}
}

...
}
@UI.badge
This UI annotation can be considered as the combination of the UI annotations @UI.headerInfo and
@UI.identification. The properties imageUrl, typeImageUrl and title should usually correspond to
the properties of the UI annotation @UI.HeaderInfo. In addition to the title, a headLine, mainInfo and
secondaryInfo of the same format can be specified.
14
PUBLIC

Sample Code 5
@UI.badge: {
title: {
label: 'Sales Order',
value: 'SalesOrderID'
},
headLine: {
label: 'Customer',
value: 'CompanyName'
},
mainInfo: {
label: 'Gross Amount',
value: 'GrossAmount'
},
secondaryInfo: {
label: 'Billing Status',
value: 'BillingStatus'
}
}

so.gross_amount as GrossAmount,
so.billing_status as BillingStatus,
...
}
3.2
Page Body
The page body can consist of a list or a table, for example, in which you can see and edit details of an object from
the master-detail floorplan.

PUBLIC
15
Fig.6: Example of columns of table on object-page floorplan

You can use the following UI annotation to define what elements are displayed in the page body of the object-page
floorplan:
@UI. identification
This annotation is similar to the UI annotation @UI.lineItem, but @UI. Identification has no qualifier.
Sample Code 6
...
@UI.identification: [ { position: 10 } ]
}
16
PUBLIC

Field Groups
If you want to group fields under one heading to consolidate semantically connected information, you can use field
groups. With field groups, you can build sections for forms, for example.
Fig.7: Example of field group

You can use the following UI annotation to group several fields:
@UI. fieldGroup
This annotation is similar to the UI annotation @UI.lineItem because the different field groups have unique
qualifiers.

Field Groups
PUBLIC
17
Sample Code 7
@UI.fieldGroup: [ { qualifier: 'GeneralInformation', position: 10 } ]
@UI.fieldGroup: [ { qualifier: 'GeneralInformation', position: 20 } ]

@UI.fieldGroup: [ { qualifier: 'SalesData', position: 10 } ]

@UI.fieldGroup: [ { qualifier: 'SalesData', position: 20 } ]

}
18
PUBLIC

Field Groups
Annotations Similar to DataField
The OData annotation dataField refers to a property of the OData service that is used.
Some annotations are syntactically similar or even identical. These annotations are the following:
@UI.lineItem
@UI.selectionField
@UI.identification
@UI.fieldGroup
These annotations are called dataField-like annotations in the following sections.
5.1
Exposing Elements
You can use dataField-like annotations to reference elements from a different CDS view using to-oneassociations. You therefore need to explicitly define the elements with a value property. These elements are then
exposed to the UI.
Sample Code 8
...
define view ZExample_SalesOrder as select from sepm_cds_sales_order as so
association [0..1] to sepm_cds_business_partner as _BusinessPartner
on $projection.buyer_guid = _BusinessPartner.business_partner_key
{
so.buyer_guid,
...
@UI.Identification: [
{ value: '_BusinessPartner.company_name', position: 110 },
{ value: '_BusinessPartner.bp_role', position: 120 }
]
_BusinessPartner
}

PUBLIC
19
5.2
Overwriting Default Labels
If a CDS element is exposed via a dataField-like annotation, the label is by default derived from the CDS annotation
@EndUsertText.label if available, or from a DDIC element.
If you want a default label to be overwritten by a specific label, for example Customer instead of Business, you can
use the label property.
Sample Code 9
...
{
so.buyer_guid,
...
@UI.Identification: [
{ value: '_BusinessPartner.company_name', position: 110, label: 'Customer
Name' },
{ value: '_BusinessPartner.bp_role', position: 120, label: 'Customer Role }
]
_BusinessPartner
}
5.3
Positioning Fields
To define the order of fields in the UI, you can use the position property of dataField-like annotations. Only the
positioning order is relevant, so you can use any decimal number as value for the positioning property.
20
PUBLIC

Sample Code 10
...
@UI.identification: [ { position: -5 } ]

@UI.identification: [ { position: '1.1' } ]

}
5.4
Prioritizing Fields
To define the priority of elements, you can use the importance property of dataField-like annotations. This
information is relevant for adaptive UIs. If a UI is displayed on a small screen, elements with low priority can
automatically be hidden. To define importance, you can choose the following values:
#HIGH
#MEDIUM
#LOW
not set

PUBLIC
21
Sample Code 11
...
@UI.identification: [ { position: 10, importance: #HIGH } ]
@UI.identification: [ { position: 20, importance: #MEDIUM } ]

@UI.identification: [ { position: 30, importance: #LOW } ]

...
}
22
PUBLIC

Charts
If you want to visualize data, you can use a chart.
Fig.8: Example of a line chart

You can use the following UI annotation to define the properties of a chart:
@UI.chart
You define this UI annotation at view level. It refers to the elements that are to be used in the chart.
Additionally, you can provide a title and description.

Charts
PUBLIC
23
Sample Code 12
...
@UI.chart: {
title: 'Gross Amount by Customer',
description: 'Line-chart displaying the gross amount by customer',
chartType: #LINE,
dimensions: [ 'CompanyName' ],
-- Reference to one element
measures: [ 'GrossAmount' ]
-- Reference to one or more elements

@Semantics.amount.currencyCode: 'CurrencyCode'
...
}
6.1
Chart Types
Each chart type has different restrictions referring to how many dimensions and measures are required or
allowed. The following table lists the admissible types and their restrictions.
Type
Dimensions
Measures
COLUMN
One dimension
One or more measures
COLUMN_STACKED
Displayed on the x-axis
Displayed on the y-axis
COLUMN_STACKED_100
AREA
AREA_STACKED
AREA_100
24
PUBLIC

Charts
Type
Dimensions
Measures
BAR
One dimension
One or more measures
BAR_STACKED
PIE
One dimension
One Measure
DONUT
For segmentation
For size of segment
SCATTER
Two dimensions
BUBBLE
One for the x-axis, one for the yaxis
Up to two measures (symbol and

color)
RADAR
Three or more dimensions
No measures
HEAT_MAP
Two dimensions
One measure (color)
LINE
BAR_STACKED_100
HORIZONTAL_AREA
HORIZONTAL_AREA_STACKED
HORIZONTAL_AREA_100
One measure (size of bubble)
One for the x-axis, one for the yaxis

TREE_MAP
WATERFALL
One or more hierarchical

dimensions
one measure (rectangle size)
One dimension
One measure
one optional measure (color)
Table 1: Chart Types

Charts
PUBLIC
25
Data Points
In some cases, you want to visualize a single point of data that typically is a number that can be enriched with
business-relevant data but may also be textual, for example a status value.
Fig.9: Example of data points

You can use the following UI annotation to define a single point of data:
@UI.dataPoint
You can, for example, express if a high or a low value is desired, or if a value is increasing or decreasing. The
simplest variant of the UI annotation @UI.dataPoint consists of the title property.
26
PUBLIC

Data Points
Fig.10: Example of simple variant of data point

In the following example, only the title is exposed to the UI.
Sample Code 13
...
define view ZExample_SalesOrdersByCustomer as select from ... as so {
key so.buyer_guid as BuyerGuid,
@Semantics.currencyCode: true
@UI.dataPoint: { title: 'Gross Amount' }

so.actual_amount as ActualAmount
}
7.1
Criticality
A more usable variant of the UI annotation @UI.dataPoint also contains information about the criticality, the
trend, and the name of a person responsible.
You can use the sub-annotation @dataPoint.criticality to express if a value is positive or negative, for
example.
You can use the sub-annotation @dataPoint.trend to express if a value has decreased or increased, for
example.
In this case, the properties targetValue, criticality, and trend are already evaluated in the CDS view. In the
CDS view, the target value is already calculated, and if the current value thus is bad or good, and if the current
value has improved or declined, for example. These values are only referred to from the @UI.dataPoint annotation.
Data can be defined as being either positive, critical, or negative. These data can be statuses, for example.
You can use the following sub-annotation to highlight criticality:
@UI.dataPoint.criticality
You define this UI annotation at view level. It refers to the elements that are to be used in the chart.
Additionally, you can provide a title and description.

Data Points
PUBLIC
27
The table below lists the values that are valid for the UI annotation @UI.dataPoint.criticality, and shows
how these values are visualized on the UI:
Value
Description
Visualization in Color
Negative
Red
Critical
Yellow
Positive
Green
Table 2: Values and Visualization of Criticality
Sample Code 14
...
@UI.dataPoint: {
title: 'Gross Amount',
targetValueElement: 'TargetAmount',
-- Reference to element
criticality: 'AmountCriticality',
trend: 'AmountTrend',
}
so.actual_amount as ActualAmount,
so.target_amount as TargetAmount,
so.criticality as AmountCriticality,
so.trend as AmountTrend
}
28
PUBLIC

Data Points
7.2
Trends
Data can be defined as being either increasing, decreasing, or stable. These data can be measured over a certain
period of time and visualized on the UI.
You can use the following sub-annotations to highlight trends:
@UI.dataPoint.trend
Example:
For an example, see the example code in section Criticality.
@UI.dataPoint.trendCalculation
Example:
The table below lists the values that are valid for the UI annotation @UI.dataPoint.trendCalculation,
and shows how these values are visualized on the UI:
Value
Description
Strong up
Up
Sideways
Down
Strong down
Visualization
Table 3: Values and Visualization of Trend

For the trend calculation, the flag isRelativeDifference indicates whether the absolute or the relative
difference between the actual value and the reference value is used to calculate the trend.
DownDifference
UpDifference
StrongDownDifference
StrongUpDifference
Fig.11: Visualization of trend calculation

Data Points
PUBLIC
29
Sample Code 15
...
@UI.dataPoint: {
//...
trendCalculation: {
referenceValue: 'ReferenceAmount', -- Reference to element
isRelativeDifference: true,
-- Comparison of ratio
strongUpDifference: 1.25,
upDifference: 1.1,
downDifference: 0.9,
strongDownDifference: 0.75
}
}
so.reference_amount as ReferenceAmount
}
7.3
Trend-Criticality Calculation
Another way to specify properties of criticality and trend is to define rules for criticality and trend within the UI
annotation @UI.dataPoint.
.
30
PUBLIC

Data Points
Fig.12: Example of visualization of trend-criticality calculation
You can use the following sub-annotations to calculate trends and derive from these calculation the criticality of
data:
@UI.dataPoint.trendCalculation
@UI.dataPoint.criticalityCalculation

Data Points
PUBLIC
31
Sample Code 16
...
@UI.dataPoint: {
targetValue: 9216,
criticalityCalculation: {
improvementDirection: #TARGET,
toleranceRangeLowValue: 9200,
toleranceRangeHighValue: 9300,
deviationRangeLowValue: 8800,
deviationRangeHighValue: 9700
},
trendCalculation: {
referenceValue: 'ReferenceAmount', -- Reference to element
isRelativeDifference: false,
-- Comparison of difference
strongUpDifference: 100,
upDifference: 10,
downDifference: -10,
strongDownDifference: -100
}
}
so.reference_amount as ReferenceAmount
}
For the criticality calculation, the value of the property improvementDirection is crucial because this value
determines what further properties are needed. If, for example, the value is # MINIMIZE, the properties
ToleranceRangeHighValue and DeviationRangeHighValue are relevant.
32
PUBLIC

Data Points
ToleranceRangeLowValue
ToleranceRangeHighValue
DeviationRangeHighValue
DeviationRangeLowValue
Fig.13: Example of improvementDirection: #TARGET
ToleranceRangeHighValue
DeviationRangeHighValue
Fig.14: Example of improvementDirection: # MINIMIZE
ToleranceRangeLowValue
DeviationRangeLowValue
Fig.15 Example of improvementDirection: # MAXIMIZE

The properties of the sub-annotation @UI.dataPoint.criticalityCalculation can have either constant
values or derive values from referencing to other elements. If a property references to another element, the suffix
Element must be added to the name of the property.
Note
This also applies to the properties of the sub-annotation @UI.dataPoint.trendCalculation, except
for the property referenceValue. This property always references to another element.
Example:
toleranceRangeLowValue becomes toleranceRangeLowValueElement.

Data Points
PUBLIC
33
7.4
Person Responsible and Reference Period
You can add the following properties to the UI annotation @UI.dataPoint:
referencePeriod
responsibleName
You can define both properties either in the UI annotation directly, or in another element and reference from the
UI annotation to this element.
In the following example, the data point has a static reference period and a static person responsible. The value of
the gross amount is formatted with the valueFormat property. The value is thus scaled with factor 1000 and is
displayed with one decimal place, this is the value 34500 EUR would be displayed as 34.5 kEUR.
Fig.16: Example of visualization of person responsible, reference period, and value format
34
PUBLIC

Data Points
Sample Code 17
...
@UI.dataPoint: {
description: 'Gross Amount per Customer',
longDescription: 'The gross amount per customer ...',
valueFormat: {
scaleFactor: 1000,
numberOfFractionalDigits: 1
},
referencePeriod: { description: '2015 Q3' },
responsibleName: 'John Doe'
}
}
In the following example, a dynamic reference period is used that is supplied by the following parameters
start
end
These parameters have to be aliased in the element list before they can be used in the @UI.dataPoint
annotation. The responsible property must refer to a to-one-association. The target entity of this association
should contain the contact data of the person responsible.
For a definition of element list, see section Glossary.
7.5
DataField Type: #AS_DATAPOINT
The type #AS_DATAPOINT maps to DataFieldForAnnotation. DataFieldForAnnotation is used to refer

to other annotations using the Edm.AnnotationPath abstract type. The annotation path must end in
vCard.Address or UI.dataPoint.

Data Points
PUBLIC
35
You can use the following type to reference an exposed data point from dataField-like annotations:
#AS_DATAPOINT
You use this type to include a microchart in the UI annotation @UI.lineItem, for example.
In this example, the UI annotation @UI.lineItem has to be defined at the same CDS element as the UI annotatin
@UI.dataPoint itself.
Sample Code 18
...
...
@UI.dataPoint: { title: 'Gross Amount' }

@UI.lineItem: [ { type: #AS_DATAPOINT } ]
}
36
PUBLIC

Data Points
Contact Data
In some cases users of an application need to see contact data, for example, of business partners, customers, or
employees.
You can use the following annotation set to inform a client that an entity contains contact information and map
the CDS elements to the corresponding address field:
@Semantics
This annotation set contains annotations to inform about telephone numbers, email addresses, names,
addresses, and contacts.
The following example contains sub-annotations belonging to the annotation set @Semantics. For a complete list,
see http://help.sap.com/nw75/ Developer's Guide Application Development on AS ABAP ABAP
Development Tools - Eclipse SAP - ABAP CDS Developer Guide CDS Annotations Semantics Annotations.

Contact Data
PUBLIC
37
Sample Code 19
...
define view Employees as select from ...
{
key EmployeeId,
@Semantics.name.givenName
FirstName,
@Semantics.name.additionalName
MiddleName,
@Semantics.name.familyName
LastName,
GenderCode,
@Semantics.telephone.type: [#WORK, #PREF]

PhoneNumber,
@Semantics.telephone.type: [#FAX]
FaxNumber,
@Semantics.telephone.type: [#CELL]
MobilePhoneNumber,
@Semantics.eMail.address
EmailAddress,
PreferredLanguage,
@Semantics.contact.birthDate
BirthDate
}
38
PUBLIC

Contact Data
Navigation
It often is not sufficient to stay on one screen. Users might need to navigate between screens or even to web sites
outside an application. You can use the following dataField types ton include navigation concepts:
#WITH_NAVIGATION_PATH
Used for navigation within an application.
#WITH_URL
Used for navigation from an application to an external web site.
#FOR_INTENT_BASED_NAVIGATION
Used for navigation based on an action that is related to a semantic object.
9.1
With Navigation Path
This navigation type contains either a navigation property or a term cast. The term either is of type
Edm.EntityType, a concrete entity type, or a collection of these types.

Navigation
PUBLIC
39
Fig.17: Example of dataField of type #WITH_NAVIGATION_PATH

You can use the following dataField type to expose a link to other pages of a UI:
#WITH_NAVIGATION_PATH
In the following example, CompanyName is displayed as link referring to the association _BusinessPartner.
40
PUBLIC

Navigation
Sample Code 20
...
{
so.buyer_guid,
...
@UI.lineItem: [ {
position: 20,
type: #WITH_NAVIATION_PATH,
url: '_BusinessPartner' -- Reference to association
} ]
...
_BusinessPartner
}
9.2
With URL
This type navigation type contains a reference to a URL to navigate to specific web sites, for example.

Navigation
PUBLIC
41
Fig.18: Example of dataField of type #WITH_URL

You can use the following dataField type to display links to external websites:
#WITH_URL
In the following example, CompanyName is displayed as link referring to the CDS element WebsiteUrl.
42
PUBLIC

Navigation
Sample Code 21
...
{
...
@UI.lineItem: [ {
position: 20,
type: #WITH_URL,
url: 'WebsiteUrl'
} ]
so.customer.web_address as WebsiteUrl,
...
}
9.3
Based on Intent
This navigation type contains an action that is related to a semantic object. This combination of action and
semantic object is an intent. The annotation @Consumption.semanticObject is required for navigation based
on intent. The client decides how to react when this navigation is triggered.

Navigation
PUBLIC
43
Fig.19: Example of dataField of type #FOR_INTENT_BASED_NAVIGATION

You can use the following dataField type to expose the intent to navigate without specifying how this
navigation is to be resolved:
#FOR_INTENT_BASED_NAVIGATION
In the following example, the intent 'Show' (action) 'BusinessPartner' (semantic object) is expressed. The
client can, for example, open a separate application to display the details of the corresponding business partner.
44
PUBLIC

Navigation
Sample Code 22
...
{
...
@UI.lineItem: [ {
position: 20,
label: 'Show customer-details',
type: #FOR_INTENT_BASED_NAVIGATION,
semanticObjectAction: 'Show'
-- Action
} ]
@Consumption.semanticObject: 'BusinessPartner'
-- Semantic Object
...
}

Navigation
PUBLIC
45
10 Actions
Actions are directly related to items that you can see in a table on a master-detail floorplan, for example. Users
can select items and execute certain actions on the selected items.
Fig.20: Example of action 'Copy' on master-detail floorplan

You can use the following dataField type to expose actions to the client:
#FOR_ACTION
This property has to be assigned to some arbitrary element. It is thereby not relevant that the property does
not refer to this element.
46
PUBLIC

Actions
Sample Code 23
...
@UI.lineItem: [
-- Standard Lineitem
{ position: 10 },
-- Action Lineitem
{ type: #FOR_ACTION, dataAction: 'BOPF:Copy', label: 'Copy' }
]
...
}

Actions
PUBLIC
47
11
Field Manipulation
This section describes annotations that influence the appearance exposed fields. When a field is marked with
these annotations, it is manipulated no matter in what other annotations the field is used. The reason for this is
that annotations for manipulation are self-contained annotations and not properties of other annotations, For
example, when a field is marked with the @UI.masked annotation, the field is masked regardless if it is used in a
@UI.lineItem annotation or a @UI.identification annotation.
11.1
Multi-Line Text
You can use the following annotation to mark a field to be displayed by a control that supports multi-line input, for
example a text area:
@UI.multiLineText
Sample Code 24
...
define view Product as select from ... {
key ProductID,
ProductName,
@UI.multiLineText: true
Description,
...
}
11.2
Field Masking
In some cases, data of fields need to be consumed by the client, but must not be visible on the UI. This field
behavior is required when users need to enter passwords, for example.
48
PUBLIC

Field Manipulation
You can use the following annotation to mark a field to not to be displayed in clear text by the client because, for
example, it contains sensitive data:
@UI. Masked
This annotation does not influence how data is transferred. If a field is marked with the @UI.masked
annotation, the data belonging to this field is still transferred to the client like any other property in clear text.
Sample Code 25
...
define view Destination as select from ... {
key DestinationID,
...
AuthType,
-- None, Basic, SSO, ...
BasicAuthUserName,
@UI.masked
BasicAuthPassword,
...
}
11.3 Field Hiding

Generally, all fields that are exposed by the OData service are available to the client, regardless if the fields are
exposed explicitly using UI annotations. To enable end-user personalization, the client may offer the possibility to
add fields that are hidden by default, for example to a list report.
You can use the following annotation to prevent fields from being displayed on a UI and in the personalization
dialog, but leaving the field available for client:
@UI.hidden
You can use this annotation if, for example, a CDS view contains technical keys, for example GUIDs, that have to
be exposed to the OData service to work. These keys are usually not supposed to be displayed on the UI. You can
also use this annotation if fields are required in calculations, but are not supposed to be displayed on a UI.

Field Manipulation
PUBLIC
49
In the following example, the annotation @UI.dataPoint with pre-calculated criticality and trend is exposed. The
hidden fields AmountCriticality and AmountTrend are required by the client to calculate the corresponding
values, but are not supposed to be displayed on the UI.
Sample Code 26
...
@UI.hidden
...
@UI.dataPoint: {
criticality: 'AmountCriticality',
trend: 'AmountTrend',
}
so.actual_amount as ActualAmount,
@UI.hidden
so.criticality as AmountCriticality,
@UI.hidden
so.trend as AmountTrend
}
You can use the following annotation to prevent fields from being available to a client:
@Consumption.hidden
Preventing fields from being available to a client is necessary for system parameters. These parameters are filled
by the runtime engine, but must not be available to the client.
50
PUBLIC

Field Manipulation
Sample Code 27
...
define view OverdueSalesOrder with parameters
@Consumption.hidden : true
@Environment.systemField : #SYSTEM_DATE
P_Date : sydate,
as select from ...
{
...
}
In the following example, the field buyer_guid is required by the association to _BusinessPartner only. This
means, the field must be included in the element list of the CDS view, but must not be transferred to the client.
Sample Code 28
...
{
@Consumption.hidden: true
so.buyer_guid,
...
_BusinessPartner
}
There may be cases, where a field is needed in the client, for example for calculations, but should not be displayed
directly in a list or table, or on an object-page floorplan. In this case the annotation, @Consumption.hidden is not
suitable.

Field Manipulation
PUBLIC
51
11.4 Interaction with Other Annotations

In addition to UI annotation, you can use model-specific annotations that affect the desired client behavior. You
can implement, for example, unit-currency-mappings, ID-text-mappings, or properties for field control that are
represented by model-specific annotations. These model-specific annotations can be evaluated by the client and
no additional UI annotations are required.
In the following example, the field CurrencyCode is marked with a @Semantics.currencyCode and is
referenced by field GrossAmount. This means that the field GrossAmount is always displayed with the
corresponding currency. The field CurrencyCode does not need to be exposed explicitly.
Futhermore the field GrossAmount is marked as being mandatory. This means that the field is treated
accordingly by the client: The field is marked with an asterisk, and if users do not fill in a value for this property, an
error is raised. The administrative fields such as CreatedAt and CreatedBy, are set in a back-end validation and
must not be changed by the client. For this reason, these fields are marked as being read-only.
Fig.21: Example of interaction between CDS annotations
52
PUBLIC

Field Manipulation
Sample Code 29
...
{
@ObjectModel.mandatory: true
@UI.identification: [ { position: '20' } ]
...
@ObjectModel.readOnly: true
so.created_at as CreatedAt,
so.created_by as CreatedBy,
so.changed_at as ChangedAt,
so.changed_by as ChangedBy,
}

Field Manipulation
PUBLIC
53
12
References
Complete lists of available CDS annotations:

http://help.sap.com/nw75/ Developer's Guide Application Development on AS ABAP ABAP Development
Tools - Eclipse SAP - ABAP CDS Developer Guide CDS Annotations
54
PUBLIC

References
13
Glossary
Element List
An element list in a CDS view contains all parameters and their aliases that are used by CDS annotations.
Example:
If you need to use the parameter p_StartDate, you add to the element list of the corresponding CDS view the
following declaration:
$parameters.p_StartDate as StartDate

Glossary
PUBLIC
55
Important Disclaimers and Legal Information
Coding Samples
Any software coding and/or code lines / strings ("Code") included in this documentation are only examples and
are not intended to be used in a productive system environment. The Code is only intended to better explain and
visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and comple teness
of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code,
unless damages were caused by SAP intentionally or by SAP's gross negligence.
Accessibility
The information contained in the SAP documentation represents SAP's current view of accessibility criteria as of
the date of publication; it is in no way intended to be a binding guideline on how to ensure accessibility of software
products. SAP in particular disclaims any liability in relation to this document. This disclaimer, however, does not
apply in cases of wilful misconduct or gross negligence of SAP. Furthermore, this document does not result in any
direct or indirect contractual obligations of SAP.
Gender-Neutral Language
As far as possible, SAP documentation is gender neutral. Depending on the context, the reader is addressed
directly with "you", or a gender-neutral noun (such as "sales person" or "working days") is used. If when referring
to members of both sexes, however, the third-person singular cannot be avoided or a gender-neutral noun does
not exist, SAP reserves the right to use the masculine form of the noun and pronoun. This is to ensure that the
documentation remains comprehensible.
Internet Hyperlinks
The SAP documentation may contain hyperlinks to the Internet. These hyperlinks are intended to serve as a hint
about where to find related information. SAP does not warrant the availability and correctness of this related
information or the ability of this information to serve a particular purpose. SAP shall not be liable for any damages
caused by the use of related information unless damages have been caused by SAP's gross negligence or willful
misconduct. All links are categorized for transparency (see: http://help.sap.com/disclaimer).
56
PUBLIC

Important Disclaimers and Legal Information
www.sap.com/contactsap

No part of this publication may be reproduced or transmitted in any
form or for any purpose without the express permission of SAP SE
or an SAP affiliate company.
SAP and other SAP products and services mentioned herein as well
as their respective logos are trademarks or registered trademarks of
SAP SE (or an SAP affiliate company) in Germany and other
countries. All other product and service names mentioned are the
trademarks of their respective companies. Please see http://www.
sap.com/corporate-en/legal/copyright/index.epx#trademark for
additional trademark information and notices.
Material Number:

CDS Annotations Metadata Driven UIs PDF

Uploaded by

Copyright:

Available Formats

CDS Annotations Metadata Driven UIs PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CDS Annotations Metadata Driven UIs PDF

Uploaded by

Copyright:

Available Formats

Developer Information

Document Version: 1.0 2015-12-08

CDS Annotations for Metadata-Driven UIs

Emphasized words or expressions.

Keys on the keyboard, for example, F 2 or E N T E R .

CDS Annotations for Metadata-Driven UIs

CDS Annotations for Metadata-Driven UIs

Tables and Lists ............................................................................................................................. 8

Object-Page Floorplan ................................................................................................................ 13

Field Groups ..................................................................................................................................17

Annotations Similar to DataField .............................................................................................. 19

Data Points ...................................................................................................................................26

Contact Data ................................................................................................................................ 37

Field Manipulation ...................................................................................................................... 48

CDS Annotations for Metadata-Driven UIs

Important Disclaimers and Legal Information .................................................................................... 56

CDS Annotations for Metadata-Driven UIs

SAP NetWeaver 7.50, SP01, or higher

No specific database is required, but SAP HANA DB is recommended.

ABAP Core Data Services (CDS)

SAP Fiori UI technology

How can I define the title of a field or a table?

How can I define the columns of a field or a table?

How can I define fields for filtering?

How can I define the header of an object-page floorplan?

CDS Annotations for Metadata-Driven UIs

How can I define the body of an object-page floorplan?

How can I group fields?

How can I expose elements to UIs?

How can I overwrite default labels?

How can I position fields?

How can I prioritize fields?

How can I define charts?

How can I visualize criticality?

How can I visualize trends?

How can I visualize criticality based on trend calculation?

How can I visualize a person responsible and a reference period?

How can I use the dataField type #AS_DATAPOINT?

How can I define a contact?

How can I define navigation between screens?

How can I define navigation to external web sites?

How can I define navigation based on actions executed on semantic objects?

How can I define actions?

How can I display fields in a text area?

How can I mask fields?

How can I hide fields?

How can I define interaction between annotations?

CDS Annotations for Metadata-Driven UIs

Tables and Lists

Fully responsive tables

If necessary, you can provide a header for your list or table.

CDS Annotations for Metadata-Driven UIs

Fig.1: Example of title of table

CDS Annotations for Metadata-Driven UIs

Fig.2: Example of @DefaultAggregation annotation

CDS Annotations for Metadata-Driven UIs

@UI.lineItem: [ { position: 20 }, { qualifier: 'ValueList', position: 20 } ]

Fig.3: Example of selection fields for filtering

CDS Annotations for Metadata-Driven UIs