what is ui annotation

Fiori Elements- CDS View with UI Annotations

This post contains:

•  creating a CDS view with UI Annotations with oData publish
• Creating a Fiori App (List Report Application)- that provides Search , list Display and then moving to detailed view when select a particular line item.

To start with a CDS view(BASIC) on SCARR table.

Data Preview of the CDS view.

Let’s create next a CDS view(TRANSACTIONAL) on the basic view.

Data Preview.

Finally Create a CDS View(Consumption) on the transaction view.

Publish the oData for this consumption view as in next in our Fiori App we will refer to this view.

Make search enable.

Explanation provided in the commented section: The CDS View(consumption) code details

@AbapCatalog.sqlViewName: ‘ZSP_DEMO3’ @AbapCatalog.compiler.compareFilter: true @AbapCatalog.preserveKey: true @AccessControl.authorizationCheck: #NOT_REQUIRED @EndUserText.label: ‘Consumption Flight’

@OData.publish: true            — enable oData for consumption view

@UI: { headerInfo: { typeName: ‘Flight’, typeNamePlural: ‘Flights’ } }

@Search.searchable: true @VDM.viewType: #CONSUMPTION define view ZSP_DEMO_SCARR3 as select from ZSP_DEMO_SCARR2 { @UI: { facet: [ { label: ‘Flight’, id: ‘FlightId’, position: 10, type: #COLLECTION }, { parentId: ‘FlightId’, type: #FIELDGROUP_REFERENCE, targetQualifier: ‘FlightIdFG’ } ], // fieldgroup used for grouping all fields with same qualifier to one group fieldGroup: [{ qualifier: ‘FlightIdFG’, position: 10, label: ‘Flight ID’ }], // Identification used for detailed view identification: [{ position: 10, importance: #HIGH }], // lienitem used for position in the list view lineItem: [{ position: 10, label: ‘Flight ID’ }]

} @Consumption.filter.hidden: true @Search.defaultSearchElement: true // default search field carrid

key ZSP_DEMO_SCARR2.carrid,

@UI: { fieldGroup: [{ qualifier: ‘FlightIdFG’, position: 20, label: ‘Flight Name’ }], identification: [{ position: 20, importance: #HIGH }], lineItem: [{ position: 20, label: ‘Flight Name’ }] } ZSP_DEMO_SCARR2.carrname,

@UI: { fieldGroup: [{ qualifier: ‘FlightIdFG’, position: 30, label: ‘Flight Currency’ }], identification: [{ position: 30, importance: #HIGH }], lineItem: [{ position: 30, label: ‘Currency’ }] } ZSP_DEMO_SCARR2.currcode,

@UI: { fieldGroup: [{ qualifier: ‘FlightIdFG’, position: 40, label: ‘Flight URL’ }], identification: [{ position: 40, importance: #HIGH }], lineItem: [{ position: 40, label: ‘Flight URL’ }] } ZSP_DEMO_SCARR2.url }

Activate the oData service in Tx- IWFND/MAINT_SERVICE

Let’s go to the webIDE ( prerequisite- the cloud connector must be established to teh backend system to consume the oData Service ).

Create a new project from template.

Select List Report Application

Provide details.

Select the oData service

Select the annotation file

Here we have just one oData Collector and no navigation (as it is just one table).

The project is created and now run and then select the first file.

Select the app.

Here is our search and list view. Click on Go and then we can see all the records in the list view.

Select a line and then it navigates to the detailed view.

The list and the detailed screen contains all 4 fields of the table. Here one thing to be noted- the FACET(tab) is named as General Information which we have no specified any where in our CDS view. We will back to this later.  

Now let’s see the Adapt Filter details.

Here it shows 3 more fields.

The default search field works on CARRID and we have 3 more fields in the select filters.

As we have a single qualifier and assigned to 3 fields. so all 3 fields appears under one filter group.

Here we have a small table with just 4 fields. Basically the list view contains lines and each line shows just the important information with less no. of columns and when user selects a line and go to the detailed view, it should show a lot more details of that line.

line item property of the UI – controls whether a field to be displayed in the list view or not. Here below in the consumption view, let’s comment out the line item for the URL field, which means URL field won’t be displayed in the list view and similarly the IDENTIFICATION controls the display in the detailed view.

Again commented the fieldgroup for URL field which means this would control the search filter property.

Let’s rerun the application[ may be close the app and rerun the app]. Here we can see the URL field is not appearing on the list view.  Go to the details.

All 4 fields displayed. Go back.

Now in the Adapt Filter, two fields group together under the identifier- FlightIDFG

In the details screen, the tab label- appears as General Information.

Open the project and the open the annotate XML file and here we refer to the i18n property. Open i18n file.

The detailed view- tab label comes from here.

Add a new one and refer this in the annotation xml.

here the proper label appears in the Detailed view tab.

• Click to share on Twitter (Opens in new window)
• Click to share on Facebook (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on WhatsApp (Opens in new window)

One comment

• Pingback: Fiori Elements- CDS View with Association – SAPCODES

Leave a Reply Cancel reply

• Already have a WordPress.com account? Log in now.
• Follow Following
• Copy shortlink
• Report this content
• View post in Reader
• Manage subscriptions
• Collapse this bar

odata-vocabularies

Ui vocabulary.

Namespace: com.sap.vocabularies.UI.v1

Terms for presenting data in user interfaces

The SAP UI Vocabulary aims to optimize usage of data in UI channels. It focuses on usage patterns of data in UIs, not on UI patterns, and it is completely independent of the UI technologies or devices used to visualize the data.

These usage patterns represent certain semantic views on business data, some of them very general, others centering around the concept of a Thing, i.e. something tangible to end users. Examples for Things are semantic object instances or business object instances. One example for a usage pattern is the collection of properties which helps the user to identify a Thing, the UI.Identification term. Another example is the UI.LineItem term, which is a set of properties suitable for visualizing a collection of business object instances, e.g. as a list or table.

HeaderInfoType

Fieldgrouptype, connectedfieldstype.

Group of semantically connected fields with a representation template and an optional label

GeoLocationType

Properties that define a geographic location

MediaResourceType

Properties that describe an image

Either Url or Stream MUST be present, and never both.

DataPointType

Numberformat.

Describes how to visualise a number

VisualizationType

Referenceperiod.

Reference period

CriticalityType

Criticality of a value or status, represented e.g. via semantic colors (https://experience.sap.com/fiori-design-web/foundation/colors/#semantic-colors)

CriticalityCalculationType : CriticalityThresholdsType

Describes how to calculate the criticality of a value depending on the improvement direction

The calculation is done by comparing a value to the threshold values relevant for the specified improvement direction.

The value to be compared is

• Value - if ReferenceValue is not specified
• Value sub ReferenceValue – if ReferenceValue is specified and IsRelativeDifference is not specified or specified as false
• (Value sub ReferenceValue) divBy ReferenceValue – if ReferenceValue is specified and IsRelativeDifference is specified as true

For improvement direction Target , the criticality is calculated using both low and high threshold values. It will be

• Positive if the value is greater than or equal to AcceptanceRangeLowValue and lower than or equal to AcceptanceRangeHighValue
• Neutral if the value is greater than or equal to ToleranceRangeLowValue and lower than AcceptanceRangeLowValue OR greater than AcceptanceRangeHighValue and lower than or equal to ToleranceRangeHighValue
• Critical if the value is greater than or equal to DeviationRangeLowValue and lower than ToleranceRangeLowValue OR greater than ToleranceRangeHighValue and lower than or equal to DeviationRangeHighValue
• Negative if the value is lower than DeviationRangeLowValue or greater than DeviationRangeHighValue

For improvement direction Minimize , the criticality is calculated using the high threshold values. It is

• Positive if the value is lower than or equal to AcceptanceRangeHighValue
• Neutral if the value is greater than AcceptanceRangeHighValue and lower than or equal to ToleranceRangeHighValue
• Critical if the value is greater than ToleranceRangeHighValue and lower than or equal to DeviationRangeHighValue
• Negative if the value is greater than DeviationRangeHighValue

For improvement direction Maximize , the criticality is calculated using the low threshold values. It is

• Positive if the value is greater than or equal to AcceptanceRangeLowValue
• Neutral if the value is less than AcceptanceRangeLowValue and greater than or equal to ToleranceRangeLowValue
• Critical if the value is lower than ToleranceRangeLowValue and greater than or equal to DeviationRangeLowValue
• Negative if the value is lower than DeviationRangeLowValue

Thresholds are optional. For unassigned values, defaults are determined in this order:

• For DeviationRange, an omitted LowValue translates into the smallest possible number (-INF), an omitted HighValue translates into the largest possible number (+INF)
• For ToleranceRange, an omitted LowValue will be initialized with DeviationRangeLowValue, an omitted HighValue will be initialized with DeviationRangeHighValue
• For AcceptanceRange, an omitted LowValue will be initialized with ToleranceRangeLowValue, an omitted HighValue will be initialized with ToleranceRangeHighValue

CriticalityThresholdsType

Thresholds for calculating the criticality of a value

Derived Types:

• CriticalityCalculationType
• LevelThresholdsType

ImprovementDirectionType

Describes which direction of a value change is seen as an improvement

LevelThresholdsType : CriticalityThresholdsType ( Experimental )

Thresholds for an aggregation level

The trend of a value

TrendCalculationType

Describes how to calculate the trend of a value

By default, the calculation is done by comparing the difference between Value and ReferenceValue to the threshold values. If IsRelativeDifference is set, the difference of Value and ReferenceValue is divided by ReferenceValue and the relative difference is compared.

The trend is

• StrongUp if the difference is greater than or equal to StrongUpDifference
• Up if the difference is less than StrongUpDifference and greater than or equal to UpDifference
• Sideways if the difference is less than UpDifference and greater than DownDifference
• Down if the difference is greater than StrongDownDifference and lower than or equal to DownDifference
• StrongDown if the difference is lower than or equal to StrongDownDifference

KPIDetailType

Chartdefinitiontype, chartaxisscalingtype, chartaxisscalebehaviortype, chartaxisautoscalebehaviortype, chartaxisautoscaledatascopetype, fixedscalemultiplestackedmeasuresboundaryvaluestype, chartdimensionattributetype, chartmeasureattributetype.

Exactly one of Measure and DynamicMeasure must be present

ChartDimensionRoleType

Chartmeasureroletype, emphasislabeltype ( experimental ).

Assigns a label to the set of emphasized values and optionally also for non-emphasized values. This information can be used for semantic coloring.

ValueCriticalityType ( Experimental )

Assigns a fixed criticality to a primitive value. This information can be used for semantic coloring.

CriticalityLabelType ( Experimental )

Assigns a label to a criticality. This information can be used for semantic coloring.

Abstract base type for facets

• CollectionFacet
• ReferenceFacet
• ReferenceURLFacet

Applicable Annotation Terms:

• PartOfPreview

CollectionFacet : Facet

Collection of facets

ReferenceFacet : Facet

Facet that refers to a thing perspective, e.g. LineItem

ReferenceURLFacet : Facet

Facet that refers to a URL

SelectionPresentationVariantType

Presentationvarianttype, selectionvarianttype, parameterabstract.

Key property of a parameter entity type

• IntervalParameter

Parameter : ParameterAbstract

Single-valued parameter

IntervalParameter : ParameterAbstract

Interval parameter formed with a ‘from’ and a ‘to’ property

SelectOptionType

List of value ranges for a single property

Exactly one of PropertyName and DynamicPropertyName must be present

SelectionRangeType

Value range. If the range option only requires a single value, the value must be in the property Low

SelectionRangeSignType

Selectionrangeoptiontype.

Comparison operator

TextArrangementType

Notetype ( experimental ), importancetype, datafieldabstract.

Elementary building block that represents a piece of data and/or allows triggering an action

By using the applicable terms UI.Hidden, UI.Importance or HTML5.CssDefaults, the visibility, the importance and and the default css settings (as the width) of the data field can be influenced.

• DataFieldForAnnotation
• DataFieldForAction
• DataFieldForIntentBasedNavigation
• DataFieldForActionGroup
• DataFieldWithAction
• DataFieldWithIntentBasedNavigation
• DataFieldWithNavigationPath
• DataFieldWithUrl
• DataFieldWithActionGroup
• CssDefaults

CriticalityRepresentationType

Datafieldforannotation : datafieldabstract.

A structured piece of data described by an annotation

DataFieldForActionAbstract : DataFieldAbstract

Triggers an action

DataFieldForAction : DataFieldForActionAbstract

Triggers an OData action

The action is NOT tied to a data value (in contrast to DataFieldWithAction ).

OperationGroupingType

Datafieldforintentbasednavigation : datafieldforactionabstract.

Triggers intent-based UI navigation

The navigation intent is expressed as a Semantic Object and optionally an Action on that object.

It is NOT tied to a data value (in contrast to DataFieldWithIntentBasedNavigation ).

DataFieldForActionGroup : DataFieldAbstract ( Experimental )

Collection of OData actions and intent based navigations

DataField : DataFieldAbstract

A piece of data

DataFieldWithAction : DataField

A piece of data that allows triggering an OData action

The action is tied to a data value. This is in contrast to DataFieldForAction which is not tied to a specific data value.

DataFieldWithIntentBasedNavigation : DataField

A piece of data that allows triggering intent-based UI navigation

It is tied to a data value which should be rendered as a hyperlink. This is in contrast to DataFieldForIntentBasedNavigation which is not tied to a specific data value.

DataFieldWithNavigationPath : DataField

A piece of data that allows navigating to related data

It should be rendered as a hyperlink

DataFieldWithUrl : DataField

A piece of data that allows navigating to other information on the Web

DataFieldWithActionGroup : DataField ( Experimental )

Recommendationstatetype.

Indicates whether a field contains or has a recommended value

Editable fields for which a recommendation has been pre-filled or that have recommendations that differ from existing human input need to be highlighted.

RecommendationListType

Reference to a recommendation list

A recommendation consists of one or more values for editable fields plus a rank between 0.0 and 9.9, with 9.9 being the best recommendation.

RecommendationBinding

Type: String

Name of an Action, Function, ActionImport, or FunctionImport in scope

Possible values are

• Namespace-qualified name of an action or function ( foo.bar )
• Namespace-qualified name of an action or function followed by parentheses with the parameter signature to identify a specific overload, like in an annotation target ( foo.bar(baz.qux) )
• Simple name of an action import or function import of the annotated service ( quux )
• Namespace-qualified name of an entity container, followed by a slash and the simple name of an action import or function import in any referenced schema ( foo.corge/quux )

• Top 10 Reasons to Choose SAP Integration Suite
• How to create database tables in SAP HANA Cloud
• Extending CDS View
• Data Modeling in SAP HANA – Introduction
• Use of Parameter in CDS View

CDS: UI Annotations for Selection Filters and Report Layout

Annotations enrich the CDS views but can be confusing as well. These series of blogs have my simplified explanation.

If you are building a Fiori List Report, then you definitely need to use UI Annotations to mark your selection filters and report layout and they are very use to use.

For selection screen, you need to add above a column, the following annotations and if there are multiple selection filters, position value will determine the order. The lower position value appears first in the selection filter.

In this example, the field2 will appear first even though it is written below field1 in the selection filter list.

For the report layout, we use the following annotations:

Just like a field catalog in ALV grid program, we maintain the order and description for columns. The report appears in sequential order of the position in ascending order.

If the same field is shown in the report and used in the selection (as is the case generally), then you can add both the annotations.

UI has a long list of annotations just like a field catalog of the ALV grid and probably we will not use most of them so frequently but this will be surely used.

These annotations are used in Fiori Elements Apps and I guess you can ignore @UI.lineItem: and @UI.selectionField: if the apps is created using the UI5 programming.

Was this post helpful. Please let us know in the comment section. Please also let us know which annotations you want to understand better.

• Adding attachments to Idoc messages
• Loop inside a CDS view

You May Also Like

SAP Fiori Element Feature Maps

Cds: search annotations – search.searchable.

CDS: VDS Annotations – VDM.viewType

Leave a reply cancel reply.

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Enjoy this blog? Please spread the word :)

RAP - UI Annotations (Part 2)

Let's look again at the structure of the UI annotations for the complex entity and what we can influence with them.

If you want to learn more about the UI annotations, just take a look at the first part of the series, where we explain the structure of the images in detail. In this article you can expect the delta to the complex entity and what you can actually do with the annotations.

Introduction

How should you build your UI annotations to deal with complex entities and RAP objects? We will focus on the structure of the list report, which consists of a list and an object page. The list shows the individual entries, mostly with a reduced amount of information. The details page prepares the information and makes it available to the user in a more engaging way.

In the first step, let's create the metadata for the two entities, and we'll move them back to the metadata extension files. The calculations now look like this:

We also create the extension for the positions. The first thing you notice here is that there are no selection fields. These are not supported in the detail screen.

Hint: The second entity can then be integrated into the detail screen via the LINEITEM_REFERENCE. A list similar to the initial screen is displayed.

Explanation

The following explanation for this, in order to take a look at the annotations in detail. First of all, the entry list of the app (top right) and the detailed list (bottom right):

Then the list of the second entity in the detail screen of the invoices (top right) and the corresponding detail page of the items:

In this example we also worked with the HEADERINFO to show information in the header area. Keys are usually used here, which you usually cannot edit anyway.

Change mode

If you activate the change mode in the detail screen of the invoices, all changeable fields of the entity are switched to input. With newer Fiori Elements versions, however, the fields of the sub-entities are also put into edit mode, so you can edit all information at once.

Fiori Elements Showcase App

At the end of last year, SAP released a showcase app for RAP and CAP, so you can easily see and test all current functions of Fiori Elements. The app is supplemented with the latest features of the frameworks and is therefore up to date. You can find out more about the installation, the documentation and the functions in the blog in the reference.

You can find the individual features using the tag (#EXAMPLE) in the documentation, but also in the source code. So you can see how the feature was implemented and how you can use it sensibly.

UI annotations are a very easy way to give applications a look and function. With Fiori Elements, the development of standardized Fiori applications is accelerated many times over and saves a pure Fiori developer. As an ABAP developer, you are very well positioned with Fiori Elements. You can find the latest version of the app in our repository .

Source: SAP Blog - SAP Fiori Showcase App SAP Icon Explorer

RAP - Show app count (Tile)

Category - ABAP

This example is about displaying a counter on the tile of a Fiori Elements application and how such a thing can be implemented.

RAP - Generator (Fiori)

In this article we will look at the more complex RAP generator as a Fiori Elements application and what advantages you have with it.

RAP - Generator (ADT)

Today, let's take a look at the RAP Generator, which is already integrated into ABAP Development Tools, and how you can use it to easily build new RAP apps.

RAP - Unmanaged (Remote)

Here you can learn more about the unmanaged RAP object with a remote data source and how you can implement such scenarios.

RAP - Unmanaged (Local)

In this article an example for the implementation of an unmanaged RAP object based on a locally available API.

Some of UI annotations/Local annotations for LROP Fiori application.

There two ways we can write annotations.

• Using CDS views
• Using annotation modler in webide

We can overwrite the annotations coming from backend cds view using annotation modler.

SAP Fiori System Administration Certification Preparation Guide

In this blog I am focusing purely on Local annotations for List report object page application which are useful while developing the fiori elements list report object page application. Only some of the annotations I have covered in this blog.

We can utilize annotation modler to overwrite/create new annotations based on our need. This post can give you insights on where the local annotations can show the result on the screen.

Through this post I am writing some of local annotations step by step process on list report and object page, so that if any one is trying to build fiori elements app and they can easily understand where different local annotations fits on the screen.

Note: Here I had used standard PO service to demonstrate the UI annotations.

How to link annotation.xml file to our service:

– create annotation.xml(filetype should be .xml) file inside webapp folder. Path: right click on webapp folder-new-Annotation File ->in the next window we have to choose the corresponding odata service = this will create an local annotation file for that service and corresponding code will be added in manifest.json file.

Manifest.json link for annotation file:

Path: sap.app – dataSources

In below example inside localannotations section check the uri to find where the annotation file exist in webapp folder.

1) Selection fields

2) Value List:

Here we have to always match valuelist property with local property(i.e the property which is coming from the bindelement aggregation).

3) Line Item :

Showing the line item (table at main page)

4) Identification:

5) Header Info:

6) Data Point:

7) Header Facets:

map datapoint annotation info here: in below example rating and progress indicator are data point annotations are mapped in header facet as a reference facet.

8) object page: Item’s line Item annotations:

Annotations:

Step1) prepare line item annotations of the corresponding item entity with a Qualifier.

Step2) the step1 qualifier we have to add as a reference facet in the entity UI.Facet annotation

9) navigate to sub object page:

To navigate to sub object from an objectpage, then below code is used in manifest.json file.

10) Hide objectpage data fields:

we can use UI.Hidden annotation to hide any data field on the screen.

11) Field group annotation:

Here we can group several data fields into groups using the field group annotations.

Step1) add annotation field group with qualifier:

Step2) add this qualifier as reference facet in Item’s entity in the annotation file:

12) add table in subobject page:

in the sub-object page if we have to add table then, we can make use of below annotations.

Here inside the item object page , add table for schedules lines using annotations

Step1) add line item annotations for corresponding entity:

Step2) we have to add the above line item annotation as reference facet funder UI.Facet for corresponding entity(the current page navigated entity)

13) more link:

Inside general information tab when we have multiple sections of data and we want to show the data using show more/show less buttons