---
title: How to Create an SAP Fiori Elements User Interface
description: Learn how to create an SAP Fiori elements user interface by extending a CDS data model with UI annotations. Discover the process step-by-step here.
image: https://blog.sap-press.com/hubfs/Creating%20an%20SAP%20Fiori%20Elements%20User%20Interface.png
---

[![rheinwerk-sappress-logo-header-1](https://blog.sap-press.com/hubfs/rheinwerk-sappress-logo-header-1.svg)](https://blog.sap-press.com/) [Blog](https://blog.sap-press.com)

- Books 
    - Get an overview of our books and courses on every relevant SAP topic. 
          - [Programming](https://sap-press.com/programming/)
          - [Administration](https://sap-press.com/administration/)
          - [BI](https://sap-press.com/business-intelligence/)
          - [Finance](https://sap-press.com/finance-controlling/)
          - [Logistics](https://sap-press.com/logistics/)
          - [HR](https://sap-press.com/human-resources/)
          - [CRM & Sales](https://sap-press.com/marketing-sales/)
          - [HANA](https://sap-press.com/hana/)
          - [Introductions](https://sap-press.com/introductions/)
          - [E-Bites](https://sap-press.com/e-bites/)
          - [Certification Guides](https://www.sap-press.com/certification-guides/)
          - [Rheinwerk Courses](https://www.sap-press.com/online-courses/)
- Book Subscription 
    - Get unlimited access to all SAP PRESS books! 
          - [SAP PRESS Subscription](https://sap-press.com/subscriptions/)

[Programming](https://blog.sap-press.com/tag/programming)

# How to Create an SAP Fiori Elements User Interface

![SAP PRESS](https://blog.sap-press.com/hubfs/Twitter_profile_pic.svg)  by [SAP PRESS](https://blog.sap-press.com/author/sap-press)

In this blog post, you’ll learn how to extend a CDS data model with UI annotations and generate an SAP Fiori elements application based on it.

 

The purpose of UI annotations is to define usage patterns for data in the user interface independent of UI technology. [SAP Fiori elements](https://blog.sap-press.com/what-are-sap-fiori-elements) interprets the UI annotations and implements them in the user interface. Some UI annotations are used by different [SAP Fiori](https://learning.sap-press.com/sap-fiori) elements floorplans in the process.

First, you need to create a new metadata extension for the UI annotations:

1. Open the context menu for CDS projection view ZC\_CERTIFICATE of the certificate management and select **New Metadata Extension**.

![Creating a Metadata Extension for the User Interface](https://blog.sap-press.com/hs-fs/hubfs/2379_09_020.png?width=744&height=270&name=2379_09_020.png)

1. Name the metadata extension “ZC\_CERTIFICATE” and assign a meaningful description to it. You can use the following figure as a guide.**9**

![Maintaining a Name and Description for the Metadata Extension](https://blog.sap-press.com/hs-fs/hubfs/2379_09_021.png?width=727&height=445&name=2379_09_021.png)

1. Use the **Annotate View** template (see below) and confirm the creation by clicking the **Finish** button.

![Selecting the Annotate View Template](https://blog.sap-press.com/hs-fs/hubfs/2379_09_022.png?width=731&height=511&name=2379_09_022.png)

 

You should use the #CORE value for the @Metadata.layer annotation because it’s your own application.

 

`@Metadata.layer: #CORE`

**Metadata Layers:** The metadata is hierarchically structured on several layers, with some layers overshadowing less relevant ones. The following layers exist (with ascending priority):

- #CORE: Use on the ABAP platform or custom application. It can be overridden customer-specifically, if required.
- #LOCALIZATION: Use of an SAP application component
- #INDUSTRY: SAP industry solution
- #PARTNER: SAP partner application
- #CUSTOMER: SAP customer application

Using the annotation @UI.facet you can structure the displayed fields on the object page and group them into areas (*facets*). First, you need to define a facet for the object page header using the annotation @UI.facet.purpose : #HEADER. Use the @UI.facet.type: #FIELDGROUP\_REFERENCE annotation to set the type as a field group. Then assign the facet position 1. Add a meaningful description and the header data qualifier as the ID.

 

`@UI.facet: [`

`               /* Header Data */`

`             {`

`               purpose:     #HEADER,`

`               type:              #FIELDGROUP_REFERENCE,`

`               importance: #HIGH,`

`               position:      1,`

`               label:            'Technical data',`

`               targetQualifier: 'Header data'`

`              } ]`

You should then define additional UI areas to display certificate data, details, and status changes (see next listing). For the status changes, define a table to be output on the object page. You can do this via the #LINEITEM\_ REFERENCE annotation value.

 

`{ id:           'Certificate',`

`   purpose:     #STANDARD,`

`   type:        #IDENTIFICATION_REFERENCE,`

`   label:       'Certificate management',`

`   position:    10 },`

`{`

`   purpose:    #STANDARD,`

`   type:       #FIELDGROUP_REFERENCE,`

`   importance: #HIGH,`

`   position:   20,`

`   targetQualifier: 'Detail',`

`   label: 'Detail info'`

`},`

`{ id:             'CertificateState',`

` purpose:         #STANDARD,`

`   type:          #LINEITEM_REFERENCE,`

`   label:         'Status changes',`

`   position:      30,`

`   targetElement: '_CertificateState'`

Hide the key field CertUUID and the technical helper variable LocalLast- ChangedAt in the UI via the annotation @UI.hidden: true. These fields have purely technical meaning, so it isn’t necessary to display them in the user interface.

 

Use the UI annotations UI.lineItem, UI.identification, UI.fieldGroup, and UI.selectionField in a way that makes sense to show each field as you need it in the application.

 

Now you can activate your metadata extension. It could look like the one shown below.

 

`@Metadata.layer: #CORE`

`@UI: {`

`   headerInfo: { typeName: 'Certificate management',`

`                           typeNamePlural: 'Zertifikate',`

`                           title: { type: #STANDARD, label:`

`                           'Certificates', value: 'Material' } },`

`   presentationVariant: [{ sortOrder: [{ by: 'Material',`

`       direction: #DESC }] }] }`

 

`annotate view ZC_Certificate with`

`{`

`   @UI.facet: [`

`                           /* Header Data */`

`                           {`

`                           purpose: #HEADER,`

`                           type: #FIELDGROUP_REFERENCE,`

`                           importance: #HIGH,`

`                           position: 1,`

`                           label: 'Technical data',`

`                           targetQualifier: 'Header data'`

`                           },`

 

`                           { id: 'Certificate',`

`                           purpose: #STANDARD,`

`                           type: #IDENTIFICATION_REFERENCE,`

`                           label: 'Certificate management',`

`                           position: 10 },`

`                           {`

`                           purpose: #STANDARD,`

`                           type: #FIELDGROUP_REFERENCE,`

`                           importance: #HIGH,`

`                           position: 20,`

`                           targetQualifier: 'Detail',`

`                           label: 'Detail info'`

`                           },`

`                           { id: 'CertificateState',`

`                           purpose: #STANDARD,`

`                           type: #LINEITEM_REFERENCE,`

`                           label: 'Status changes',`

`                           position: 30,`

`                           targetElement: '_CertificateState'`

`                           } ]`

 

`   @UI.hidden: true`

`   CertUUID;`

 

`   @UI: { lineItem: [ { position: 10 } ],`

`                 identification: [ { position: 10 } ],`

`                 selectionField: [ { position: 10 } ] }`

`   Material;`

`   @UI: { lineItem: [ {`

`                 position: 20, label : 'material name' } ],`

`                 identification: [ { position: 20 } ]`

`}`

`   MaterialName;`

`   @UI: { lineItem: [ { position: 30 } ],`

`                fieldGroup: [ {`

`                qualifier: 'header data',position: 30 ],`

`                selectionField: [ { position: 30 } ]}`

`   Version;`

`   @UI: { lineItem: [ {`

`            position: 40,`

`            criticality: 'Criticality',`

`            label: 'Status' } ],`

`                 fieldGroup: [ {`

`                    qualifier: 'Header data',`

`                    position: 40,`

`                    label: 'Status',`

`                    criticality: 'Criticality' } ],`

`                 selectionField: [ { position: 40 } ] }`

`   StatusText;`

 

`   @UI: { lineItem:            [ { position: 50 } ],`

`               identification: [ { position: 50 } ] }`

`   CertificateCe;`

`   @UI: { lineItem:            [ { position: 60 } ],`

`               identification: [ { position: 60 } ] }`

`   CertificateGs;`

`   @UI: { lineItem:            [ { position: 70 } ],`

`               identification: [ { position: 70 } ] }`

`   CertificateFcc;`

`      @UI: { lineItem:         [ { position: 80 } ],`

`               identification: [ { position: 80 } ] }`

`   CertificateIso;`

`   @UI: { lineItem:            [ { position: 90 } ],`

`               identification: [ { position: 90 } ] }`

`   CertificateTuev;`

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

`   MaterialText;`

 

`   @UI.hidden: true`

`   LocalLastChangedAt;`

`}`

Now you should define a metadata extension with meaningful UI annotations for CDS projection view ZI\_CertificateState of the certificate status in the same way. In one of the earlier listings, a user interface area for the certificate status of type #LINEITEM\_REFERENCE was created (i.e., a table). Now use the UI.lineItem annotation to populate this area with data. You can see how the certificate status metadata extension might look like. Enable this metadata extension as well.

 

`   @Metadata.layer: #CORE`

`   @UI: {`

`       headerInfo: { typeName: 'Status',`

`                               typeNamePlural: 'Status',`

`                               title: { type: #STANDARD, label: 'Status',`

`                                           value: 'Status' } } }`

`   annotate view ZC_CertificateState with`

`   {`

`       @UI.facet: [ { id: 'Status',`

`                               purpose: #STANDARD,`

`                                type: #IDENTIFICATION_REFERENCE`

`                               } ]`

`   @UI.hidden: true`

`   StateUUID;`

`   @UI.hidden: true`

`   CertUUID;`

`   @UI.hidden: true`

`   Material;`

`   @UI: { lineItem:         [ { position: 10 } ],`

`            identification: [ { position: 10 } ] }`

`   Version;`

`   @UI: { lineItem:         [ { position: 20 } ],`

`            identification: [ { position: 20 } ] }`

`   Status;`

`   @UI: { lineItem: [ { position: 30,`

`                           label: 'previous status' } ],`

`            identification: [ { position: 30,`

`                           label: 'previous status' } ] }`

`   StatusOld;`

`   @UI: { lineItem: [ { position: 40,`

`                           label: 'last changed by' } ],`

`            identification: [ { position: 40,`

`                           label: 'last changed by' } ] }`

`   LastChangedBy;`

`   @UI: { lineItem: [ { position: }                     /* 50 */`

`                           label: 'last changed' } ],`

`            identification: [ { position: }             /* 50 */`

`   label: 'last changed' } ] }`

`   LastChangedAt;`

`   @UI.hidden: true`

`   LocalLastChangedAt;`

`}`

Now you can use the SAP Fiori elements application preview to test the interfaces generated on the basis of the metadata extensions. Depending on the UI annotations you use, the preview should look like the one shown in the figures below.

 

![Preview of the List Report](https://blog.sap-press.com/hs-fs/hubfs/2379_09_023.png?width=1018&height=265&name=2379_09_023.png)

![Preview of the Object Page](https://blog.sap-press.com/hs-fs/hubfs/2379_09_024.png?width=1017&height=570&name=2379_09_024.png)

 

## Learn Full Stack SAP Development in Our Rheinwerk Course!

SAP developers: Take ownership of your projects with full stack development. Grow your skills and master the backend and the frontend. In this course, you’ll learn to use the ABAP RESTful application programming model, core data services, OData, and SAP Fiori elements to develop applications from end to end. Level up today! Get access to course recordings by clicking the banner below.

 

[![blog_courses_12_ABAP_RESTful_Blog_on_demand](https://blog.sap-press.com/hs-fs/hubfs/blog_courses_12_ABAP_RESTful_Blog_on_demand.png?width=597&height=199&name=blog_courses_12_ABAP_RESTful_Blog_on_demand.png)](https://www.sap-press.com/online-courses/abap-restful-application-programming-model-and-sap-fiori-slements-full-stack-development-for-sap/)

 

Editor’s note: This post has been adapted from a section of the book *[ABAP RESTful Application Programming Model: The Comprehensive Guide](https://www.sap-press.com/abap-restful-application-programming-model_6161/?utm_source=sappressblog&utm_medium=referral&utm_campaign=Blogs&utm_term=2752_chapter9&utm_content=2752)* by Lutz Baumbusch, [Matthias Jäger](https://www.linkedin.com/in/matthias-j%C3%A4ger-835a601a6/), and [Michael Lensch](https://www.linkedin.com/in/michael-lensch-b3a13a137/). Lutz has worked as an SAP developer since 2000 and has been responsible for international SAP projects in various roles and areas. Matthias is a freelance full-stack ABAP developer, architect, and trainer. Michael leads a team of SAP developers at All for One Group SE.

 

This post was originally published 3/2024 and updated 8/2025.

## Recommendation

[![ABAP RESTful Application Programming Model](https://blog.sap-press.com/hs-fs/hubfs/2752-1.jpg?width=170&name=2752-1.jpg)](https://www.sap-press.com/abap-restful-application-programming-model_6161/?utm_source=sappressblog&utm_medium=referral&utm_campaign=Blogs&utm_term=2752_chapter9&utm_content=2752)

**ABAP RESTful Application Programming Model**

The ABAP RESTful application programming model (RAP) is the cornerstone of modern development for SAP—get on the cutting edge with this guide! Develop applications from the ground up, from data modeling with CDS to interface generation with SAP Fiori elements. Walk through concrete use cases, including managed and unmanaged scenarios, and then adapt your applications to the SAP BTP, ABAP environment. You’re on your way to working with RAP!

[Learn More](https://www.sap-press.com/abap-restful-application-programming-model_6161/?utm_source=sappressblog&utm_medium=referral&utm_campaign=Blogs&utm_term=2752_chapter9&utm_content=2752)

![SAP PRESS](https://blog.sap-press.com/hubfs/Twitter_profile_pic.svg)

**by [SAP PRESS](https://blog.sap-press.com/author/sap-press)**

SAP PRESS is the world's leading SAP publisher, with books on ABAP, SAP S/4HANA, SAP IBP, intelligent technologies, SAP Business Technology Platform, and more!

[Programming](https://blog.sap-press.com/tag/programming)

[![Share on facebook](https://7528309.fs1.hubspotusercontent-na1.net/hub/7528309/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/facebook-color.png?width=24&name=facebook-color.png)](https://www.facebook.com/share.php?u=https%3A%2F%2Fblog.sap-press.com%2Fhow-to-create-an-sap-fiori-elements-user-interface%3Futm_medium%3Dsocial%26utm_source%3Dfacebook) [![Share on linkedin](https://7528302.fs1.hubspotusercontent-na1.net/hub/7528302/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/linkedin-color.png?width=24&name=linkedin-color.png)](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fblog.sap-press.com%2Fhow-to-create-an-sap-fiori-elements-user-interface%3Futm_medium%3Dsocial%26utm_source%3Dlinkedin) [![Share on twitter](https://7528304.fs1.hubspotusercontent-na1.net/hub/7528304/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/twitter-color.png?width=24&name=twitter-color.png)](https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Fblog.sap-press.com%2Fhow-to-create-an-sap-fiori-elements-user-interface%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&url=https%3A%2F%2Fblog.sap-press.com%2Fhow-to-create-an-sap-fiori-elements-user-interface%3Futm_medium%3Dsocial%26utm_source%3Dtwitter&source=tweetbutton&text=) [![Share on email](https://7528311.fs1.hubspotusercontent-na1.net/hub/7528311/hubfs/raw_assets/public/mV0_d-web-default-modules_hubspot/img/email-color.png?width=24&name=email-color.png)](mailto:?subject=Check+out+https%3A%2F%2Fblog.sap-press.com%2Fhow-to-create-an-sap-fiori-elements-user-interface%3Futm_medium%3Dsocial%26utm_source%3Demail&body=Check+out+https%3A%2F%2Fblog.sap-press.com%2Fhow-to-create-an-sap-fiori-elements-user-interface%3Futm_medium%3Dsocial%26utm_source%3Demail)

### Comments

### Latest Blog Posts

[![How to Test ABAP Business Services in SAP Gateway Client](https://blog.sap-press.com/hs-fs/hubfs/How%20to%20Test%20ABAP%20Business%20Services%20in%20SAP%20Gateway%20Client.jpg?height=600&name=How%20to%20Test%20ABAP%20Business%20Services%20in%20SAP%20Gateway%20Client.jpg)](https://blog.sap-press.com/how-to-test-abap-business-services-in-sap-gateway-client)

[Programming](https://blog.sap-press.com/tag/programming)

## [How to Test ABAP Business Services in SAP Gateway Client](https://blog.sap-press.com/how-to-test-abap-business-services-in-sap-gateway-client)

[Read More](https://blog.sap-press.com/how-to-test-abap-business-services-in-sap-gateway-client)

[![Business Object Interfaces in ABAP RAP](https://blog.sap-press.com/hs-fs/hubfs/Business%20Object%20Interfaces%20in%20the%20ABAP%20RESTful%20Application%20Programming%20Model.jpg?height=600&name=Business%20Object%20Interfaces%20in%20the%20ABAP%20RESTful%20Application%20Programming%20Model.jpg)](https://blog.sap-press.com/business-object-interfaces-in-abap-rap)

[Programming](https://blog.sap-press.com/tag/programming)

## [Business Object Interfaces in ABAP RAP](https://blog.sap-press.com/business-object-interfaces-in-abap-rap)

[Read More](https://blog.sap-press.com/business-object-interfaces-in-abap-rap)

**Subscribe to our blog!**Get notified about future blog updates.

- <https://www.facebook.com/sappress>
- <https://twitter.com/sappress>
- <https://linkedin.com/company/sap-press>
- <https://www.instagram.com/sap_press/>
- <https://blog.sap-press.com/rss.xml>

### The official SAP PRESS Blog

As the world’s leading SAP publisher, SAP PRESS’ goal is to create resources that will help you accelerate your SAP journey. The SAP PRESS Blog is designed to provide helpful, actionable information on a variety of SAP topics, from SAP ERP to SAP S/4HANA. Explore ABAP, FICO, SAP HANA, and more!

### SAP Blog Topics

- [All Topics](https://blog.sap-press.com)
- [Logistics](https://blog.sap-press.com/tag/logistics)
- [Programming](https://blog.sap-press.com/tag/programming)
- [FICO](https://blog.sap-press.com/tag/fico)
- [Administration](https://blog.sap-press.com/tag/administration)
- [Business Intelligence](https://blog.sap-press.com/tag/business-intelligence)
- [What Is?](https://blog.sap-press.com/tag/what-is)
- [Featured](https://blog.sap-press.com/tag/featured)
- [CRM & Sales](https://blog.sap-press.com/tag/crm-sales)
- [Video](https://blog.sap-press.com/tag/video)
- [Human Resources](https://blog.sap-press.com/tag/human-resources)

### Blog curated by

[![Rheinwerk Publishing & SAP PRESS Logo](https://blog.sap-press.com/hubfs/rheinwerk-sappress-logo-header-1.svg)](https://sap-press.com) [Visit the SAP PRESS Store](https://sap-press.com)

### About

- [Home](https://sap-press.com/)
- [About Us](https://sap-press.com/the-publisher/)
- [Contact](mailto:info@rheinwerk-publishing.com)
- [Legal Notes](https://sap-press.com/legal-notes/)
- [Privacy Policy](https://sap-press.com/privacy/)
- [Terms of Use](https://sap-press.com/terms/)
- [Guest Posting](https://blog.sap-press.com/guest-posting)

© 2026 Rheinwerk Publishing, Inc. | Change Privacy Options

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "SAP PRESS",
    "url" : "https://blog.sap-press.com/author/sap-press"
  },
  "dateModified" : "2025-12-04T13:35:47.063Z",
  "datePublished" : "2024-03-18T13:00:00.000Z",
  "headline" : "How to Create an SAP Fiori Elements User Interface",
  "image" : [ "https://blog.sap-press.com/hubfs/Creating%20an%20SAP%20Fiori%20Elements%20User%20Interface.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://blog.sap-press.com/how-to-create-an-sap-fiori-elements-user-interface",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://blog.sap-press.com/hubfs/Logo-1.jpg"
    },
    "name" : "Rheinwerk Publishing, Inc."
  }
}
```