Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
“SAP S/4HANA Cloud for intelligent product design offers an ultimate cloud-based solution that empowers you to design your digital products faster. The solution consists of the collaboration and engineering capabilities.”

SAP S/4HANA Cloud for Intelligent Product Design



In the previous blog, we got to know about the custom annotation creation against the fields in ABAP via gateway builder., Now based on those annotation properties set in the backend service, further in this blog we are going to explain how we can visualize in UI and render the respective columns for the mentioned fields, which we are explained further in this blog.

Once the service gets activated via gateway builder, annotation looks like below snapshots

List of annotation, which decides the rendering of fields in UI are mentioned below

  1. DataField

  2. LineItem

  3. Facets

  4. HeaderInfo

  5. Identification

  6. SelectionField

  7. FieldGroup


In SAP S/4HANA Intelligent product design, the shared product design section screen shots shown below which has the usage information of all the tags


  1. HeaderInfo: As highlighted above, FG-CHROMEBOOK (i.e. BOM header) is headerinfo and in annotation this field is configured for headerinfo. It identifies as the title banner for the external object also as shown in snapshot-2


  1. Identification: As shown above, the above column mapped in gateway builder with identification vocabulary. It details for the external object  and also used to identify the file name.


  1. LineItem: It represents a row in the table of imported Bills of material’s item. Which was set in the gateway builder in the Target property section like Material, Plant, Usage etc. as shown in snapshot-3


  1. Facets: It represents a set of tabs and create main sections in the contact area of your application's UI. For example: Components, Item number. As shown below snapshot-4


  1. DataField: It represents the column’s data type as shown in the snap shot. In gateway builder it is set in the type section of vocabulary UI section. DataField is being highlighted in the Snapshot-1

6. SelectionField: It represents the filterable column in UI. In gateway builder, the field is set in                the Path section of the vocabularies. As shown in snapshot-2 of annotation fields after modeling and it's UI visual as shown in the below snapshot-5.


        7. FieldGroup: In the Share Product data, after the material objects are imported, then navigate  to the details of selected material as shown in the snapshot. 1. After Navigation there can be two tabs and the fields under General data like Valid From, Base Quantity represents the Field Group.


In the above blog, main intention is to explain that how the annotation which is built on top of OData Service and to show how it can be consumed in the UI and it usage. So the end user can understand the end-to-end flow of the service build and it’s consumption in the UI.

Suggestions and questions are welcomed !!!


Few of my other blogs:-


Thank you!
1 Comment