With this blog series I hope to dig into Fiori Elements and describe what they are and how we, as developers, can leverage them to build robust applications that follow their opinionated design. In this first entry I will provide a brief introduction to these application building blocks and the annotations that help mold them.

What are Fiori Elements?

Fiori Elements (formerly Smart Templates) are essentially an aggregation of Smart Controls and other SAPUI5 controls that have been weaved together into what is described as a “floorplan” with an abstraction of code that can introspect annotation-based data and adapt layout and behavior accordingly. These “annotations” are an extension of a service’s metadata (EDMX) model and can act to enhance the service’s entity and property semantics, the service’s capabilities and potentially define how a user interface that consumes the service should behave. In other words, the service’s interface is being extended with syntax that goes beyond the scope of normal entity and association definitions with the addition of machine-readable declarations that are accessible by client-side frameworks like that of SAPUI5.

Outside of annotations dictating behavior within a Fiori Element application, you are also provided the standard paths to extension with SAPUI5 along with some extension APIs that are baked into the framework.

What is the point of all of this and why would we want to incorporate Fiori Elements into our application development process? I could spend time explaining but much more adept authors like Jocelyn Dart have already put in the effort.

A Brief Explanation of SAP-Specific and Vocabulary-Based Annotations

OData services generated within the Gateway Service Builder (transaction SEGW) before 7.50 were based on version 2.0 of the OData protocol. This version predates the concept of service annotations and, thus, compromises were to be made to integrate this form of semantic enrichment into the metadata model. This gave rise to SAP-specific annotations that commonly use the XML namespace prefix of, you guessed it, “sap”. Although these annotations will most likely be disregarded by non-SAP client-side frameworks and libraries, SAP technologies like that of SAPUI5 can make use of them and benefit from the extra semantic and functional service data.

SAP Annotation Example with a Service’s Metadata (EDMX)

Based on the OData documentation for the use of vocabularies annotations, the intent is to provide for a method of defining extensibility points in OData. These extensions can be applied to the metadata to annotate a service, entity, function import or other general element or to that of a specific instance of a collection that is returned from a service akin to field control and assigning a property of a specific instance as read-only.

Outside of those OData 4.0 base vocabulary components, you may create your own to fill any gaps or to facilitate any custom functionality. This is exactly what SAP did in the creation of their complementary vocabulary components which have a great impact on shaping the behavior of applications built with Fiori Elements. One OData 4.0 vocabulary that will be heavily leveraged is that of SAP UI and SAP Common.

Vocabulary Annotation Example from a Local Annotation File

Going forward with OData 4.0, SAP will be able to translate SAP-specific annotations into that of the new standard and be rid of these non-standard annotations. For the examples in this article, we will be leveraging both vocabulary-based and SAP-specific annotations to achieve targeted user interface behaviors within our Fiori Element application.

To learn more about the progression of enriching the metadata model for OData services, please refer to this blog entry by Ralf Handl of SAP.

In the next two installments we will walk through leveraging annotations to configuring the Smart Filter Bar in a Fiori Elements List Report Floorplan.

For other articles in this series, please refer to the list below:

• Annotating and Extending Fiori Element Applications
• Annotating and Extending Fiori Element Applications: List Report Part 1 (Smart Filter Bar Configuration)
• Annotating and Extending Fiori Element Applications: List Report Part 2 (Smart Filter Bar Configuration Continued)
• Annotating and Extending Fiori Element Applications: List Report Part 3 (Smart Table Configuration)

Some Resources to Consider

• Using OData Analytics in SADL-Based Services
• SAP – ABAP Programming Model for SAP Fiori
• SAP Annotations for OData Version 2.0
• List Report (SAP Fiori Element)
• Vocabulary-Based Annotations
• OData 4.0 Vocabularies – SAP UI
• OData 4.0 Vocabularies – SAP Common
• Overview (OData Version 2.0)
• Fiori Elements – Why cookie cutters make me happy
• Fiori Elements – How to Develop a List Report – Using Local Annotations
• com.sap.vocabularies.Common.v1.xml
• com.sap.vocabularies.UI.v1.xml