Skip to Content

Fiori elements – How to Develop an Object Page

Continuing my series on Fiori elements … you’ll find more blogs in the Fiori elements wiki.

Object Pages are a summary screen for a single something – a single Order, single Customer, single Invoice, etc.  They are also used as the default way to display a single row of a list report, and can be called from Fiori Search or provided as the target of a hyperlink or button from other apps.  In Fiori elements – How to Design an Object Page we took first steps into design.  In this blog we see how we develop our own simple Object Page.

When you’ve worked out a design for your Object Page, and are ready to develop your own Object Page your starting point is the List Report Application template.  In other words, start by developing your List Report first. Even if you aren’t intending to use the List Report directly, creating your List Report is the simplest and quickest way to start creating your Object Page. The default display of a List Report row is an Object Page.  In this example I’ve created a simple Object Page for my Sales Order List Report.

Using a list report as a starting point will give you:

  • A working Fiori elements app
  • An Object Page entries in the App Descriptor, i.e. the manifest.json file
  • Working references to your OData Service and its entities
  • A basic UI.HeaderInfo annotation to get you started with your Object Page
  • An easy way to test your Object Page – by selecting rows of a list report

Tip: If you haven’t created a list report before you can reference my previous blog Fiori elements – How to a Develop a List Report or the tutorials in ABAP Programming Model for SAP Fiori.

Once you have your list report, you can start to add the annotations you need for the various sections of the Object Page, which we described in Fiori elements – How to Design an Object Page.

Typically you will want to do the following:

  • Assign your Header content using the UI.HeaderInfo
  • Optionally assign additional Header content, such as microcharts, using UI.HeaderFacets annotation
  • Create appropriate content type annotations to describe the contents of the sections of your Object Page body
  • Control the overall layout of the Body sections using facet annotations to map the content of the sections, and determine where each section is placed

NOTE: Only a UI.HeaderInfo annotation is mandatory for an Object Page.

As usual you can create your annotations:

  • Within your OData Service, e.g. as a metadata extension of a consumption CDS View as described in ABAP Programming Model for SAP Fiori
  • Locally in your Fiori elements app

When following the ABAP Programming Model for SAP Fiori, the preferred option is to use the metadata extension, particularly if your CDS View was created explicitly to support your Object Page.  This has the advantage of keeping most of the code for your app together, and managed by you as an ABAP Developer.

That said, using local annotations is a good way to learn and understand what annotations are needed, especially if you take advantage of the SAP Web IDE Annotation Modeler so we will use this approach in our examples, and I have also included the XML so you can see the full details of each annotation.

Once you understand how the annotations work you can later embed them in your CDS View metadata extension if you wish.

Let’s get to it!

Assigning basic Header content

The UI.HeaderInfo annotation lets you quickly add the main header details to your app.

The minimum Header for your Object Page is a title.

You can optionally add a description and a URL to a thumbnail image.

Here’s a simple Annotation Modeler example using a Sales Order ID as the title, and the company name of the Customer as a description.

And in the XML this looks like:


In our simple example this affects the the top of the Object Page as outlined below:

You can find more information on the Object Page Header in the Developer Guide for the SAPUI5 UI Development Toolkit for HTML5.

Adding more Header Content

You can add further content by using the UI.HeaderFacets annotation.  The main reason for using the HeaderFacets annotation is to highlight the most important information to business users, such as the status of the business object, or its total value, or the person responsible, or its progress against a target . For example you can display:

  • Microcharts
  • Review rating indicators
  • Progress indicators
  • Contact
  • And of course, simple text fields

You can find more information on the Header Facets in the Developer Guide for the SAPUI5 UI Development Toolkit for HTML5.

In this example we show a simple progress indicator as a header facet. We saw how to create a DataPoint annotation in Fiori elements – Percentage Progress Indicators.

And in the XML this looks like:

In our simple example this adds a section just below the top of the Object Page as outlined below. Notice that a face lets us display graphical visualizations.

Creating Content Annotations for Sections

There are several annotations that you can use to describe the content of your Object Page sections.  Here we will focus on the simplest annotations to get you started.

By convention the UI.Identification is used to describe the main data of the business object in question. Here’s a simple example:

And in the XML this looks like:

If the business object includes many other fields that need to be shown, UI.FieldGroup annotations can be used to create logically group these fields so that they can be assigned to body sections. If you have more than one FieldGroup add a Qualifier so you can distinguish between them. Here’s a simple example:

And in the XML this looks like:

In our simple example, these sections are placed in the body of our Object Page by facet annotations – which you will see shortly.  Notice that visually the UI.Identification and UI.FieldGroup annotations look very similar.

You can include content from related business objects. Ideally you want those related business objects to be described in an associated entity within the same OData Service, as this makes it easy to reference to the related objects.

When there are multiple relationships to show, such as multiple Items of a Sales Order, a simple option is to use a UI.LineItem annotation of the related entity to show the relationships in a table, specifying the association as the path from the current business object to it’s the related entity.  Here’s a simple example:

And in the XML this looks like:

In our simple example you see the list of Items at the bottom of our Object Page as outlined below.  To do place this content again we need facets annotations.

Controlling the Layout of the Body

There is no minimum for the Body layout. By default it is empty.

Creating a UI.Facets annotation is the starting point for adding sections to the Body.

All facet annotations have an ID and a Label. The Label will be shown to the business user, e.g. in the navigation area of the Object Page for sections, or as the header of a subsection.

Tip: Always use a formal i18n property reference for a facet Label. The label must be able to be translated (or it may show as “Unsupported”).  If you are new to this, the Annotation Modeler helps you create and reuse i18n properties – just check the type “String (i18n)” is selected for the label.

Tip: The ID is an optional technical reference, however it’s a good idea to make a habit of always setting the ID and not changing it!  Why? That way you are giving the facet a Stable ID. This enables your Fiori elements app to automatically take advantage of flexibility services such as the Adapt UI feature in SAP S/4HANA Cloud and SAP S/4HANA.

You can create as many sections as you need. To map your content type annotation to your section, the easiest option is to use a ReferenceFacet annotation. Here’s a simple example:

And in the XML this looks like:

By default, each section or “facet” is displayed vertically beneath the previous section. When using a device with large screen size you may want to display small sections instead as subsections that appear next to each other. You can do that by using a CollectionFacet. A CollectionFacet will display each subsection horizontally to the right of the previous subsection so long as there is sufficient room on the screen. The CollectionFacet is responsive so if there are too many subsections to display on one row, it automatically wraps around to a new row for the remaining sections.

Tip: If you want to know how the responsive design works, this is explained in the Fiori Design Guidelines for the Object Page floorplan.

In this example the 2 main sections are General Information and Items. Their labels appear in the navigation bar in the Object Page itself. Within the General Information CollectionFacet are 2 subsections, Basic Data and Admin Data, their labels appear as the heading of the respective subsections.

In the XML it looks like this. Notice that all the labels refer to i18n properties:

In our simple example you can see how the facets annotations control the page.

  • The UI.Facets annotation controls the body of the page,
  • ReferenceFacet annotations hold section contents.
    • Note: The Items are in their own ReferenceFacet.
  • CollectionFacet annotations groups reference facets into subsections.

Tip: You can similarly use a CollectionFacet within the HeaderFacet annotation.

You can find more information on the Sections (aka Facets) in the Developer Guide for the SAPUI5 UI Development Toolkit for HTML5.

Now just run your app!

Taking your Fiori elements app to the Next Level

If you are interested in Fiori elements you might also like to look at our videos on Youtube

Adding a Field Group to an Object Page with SAP Fiori Elements – shows how to do this in your CDS View

If you want to find out more on how to use the Annotation Modeler, you might like to look at some of our Annotation Modeler in SAP Web IDE videos on Youtube.

If you are going to SAP Teched 2017 and Interested in learning more about Fiori elements you might like to attend these sessions:

  • DX201 What’s New with SAP Fiori Elements
  • S4H276 Build a List Report SAP Fiori App: ABAP Programming Model for SAP S/4HANA
  • S4H279 Build Transactional SAP Fiori App: ABAP Programming Model for SAP S/4 HANA
  • DX264 Overview Page in SAP Fiori Elements
  • DX266 SAP Fiori Elements – Analytical List Page
  • DX360 Building High Quality SAPUI5 Apps

And you can find more information via Developing apps with SAP Fiori elements in the SAPUI5 SDK and ABAP Programming Model for Fiori in the SAP Help Portal.

Screenshots shown on:

Web IDE Version: 170720 

SAPUI5 version 1.46.11

Brought to you by S/4HANA RIG

You must be Logged on to comment or reply to a post.
  • Thanks yet again Jocelyn!

    Keep up the Fiori Element posting which is sorely lacking in the community (yes – looking forward to the Open SAP course material).

    One improvement idea that I find helps at least me greatly (especially when learning Annotations) is to show what the UI looks like after each new annotation as otherwise it’s hard to visualise the individual annotations (also avoids TL;DR scenarios). The changing UI really helps connect the dots (kind of like how the SAPUI5 developer guide goes about it).  Anyway, just an idea for the future Fiori annotations you hopefully post.



    • HI Matt,

      Yes I try to do that myself when learning… it just makes for a veeeeerry long blog.

      Also it gets to be something of a pain as I have to keep clearing web browser data to get it to update.

      And of course some annotations have dependencies.

      But thanks – I’ll consider it.



  • Awesome! Thanks! And I love it when you call out the specific relationships in the images too – I tried to explain this in a similar way with Overview Pages but couldn’t work out a nice way to represent it, but you’ve done a great job.

  • Hello Jocelyn,

    Any idea on how to add filterable fields (search helps) into the object page after a ‘create’ from the list report?

    For now, only free text fields are supplied in the object page, even though I have foreseen the property as ‘filterable’ and the search help is available in the list report… I would have thought that the filters would also be available in the object page…

    Thanks for your view on this.


  • Hello Jocelyn,

    It is very helpful, thanks. I’m very interesting on Fiori Element and I try to do a simple Business scenario which is the modification of an Saled Order (of course 🙂 ). But my point here is the way of an Object Page to handle Edition mode.

    Let me explain my point. I have created an Object page with a Sold To fields. For my test I have put 2 fields for that :

    The first one is the Kunnr property and the second is an Contact Card :

    But, when I go to edition mode, as you can see, there is only the Kunnr field which is in modification. What I wanted to do is to have my Contact card transforming in edition as well.

    Do you think it is possible ? Or at least, instead of having the Kunnr number (in the first field), to have the Name of the partner.

    Kind regards,


    • Hi Joseph, Sorry I missed this one.  The contact view is a Quick View and doesn’t currently support editing.  However if you provide a foreign key association to your Partner in your OData Service then your partner number will display the name of the partner in display mode.

      In this situation you might need to look at a breakout extension to get the effect you want.



      • Hi Jocelyn,

        I understand the behavior of the QuickCard (it is a nice to have) but 🙂 (there is alway a but !)

        For the field Kunnr, I have successfully displayed the text with the foreign key association, but when the edit mode is set, the code/key is shown, this is a feature that my end user want. They don’t want to deal with key but with the name/text.

        With a dropdown it is possible to visualise only the text but when a Matchcode is bind to the element the key is shown. Is there any way to have all the time the text wihout the code ?




        • Hi Joseph,

          No not possible yet – but I agree it’s desirable. The only way I can think is to use fixed values however that’s not always appropriate.

          Would you please raise a SAP Incident to request this.  Include “Enhancement Request” in the title and use component CA-UI5-ST.  That will get it to the attention of the Fiori elements team for consideration.



    • Hi Akshaya,

      Ok it’s good to display the Object Status somewhere at the top.

      If you look closely at the Fiori Design Guidelines for the Object Page you can see that the status could be placed in a header group – typically the first header group on the left, rather than on the right.

      On the right we show global actions for the object page, e.g. Edit, Delete, etc.



  • Hi,


    How do I propogate the header description to the sub object page.

    In your example, if I would have an object page for the items, the on the item object page header Info, I would want the sales order description as well as the item no and its description. I know that to get the item description,we need the @ui.headerinfo annotation,but how do I get the description of sales order on my sub object page (item object page)


  • Hi Jocelyn,

    many thanks for this blog. But one question I have.

    If I create a object page e.g. for a quality notification via a list report, how the Fiori search is connected to my own object page? I guess the search mode needs to have a link at least to my semantic object.

    Could you please help.


    Regards Wolfgang

    • Hi Wolfgang, That’s a great question! Ok so firstly you need a search connector to find the related objects.

      The search connector is associated with a Semantic Object, which is really just a name/tag that is a logical identifier for a business object/entity, e.g. PurchaseOrder.

      Then in the Target Mappings we link the Semantic Object to the related apps including object pages. The Object Page is the app with the semantic action display or displayFactSheet. 

      If you look closely at the Configuration Details for the relevant Object Page in the Fiori Apps Library you can see more about how this is done. 

      e.g. OData Service CB_VENDOR_ACC_DOC_SRV brings together a number of search connectors and relates it to the Semantic Object VendorAccountingDocument. 

      Some further hints in the authorization process in this blog by my colleague Javier (Jorge) you may find helpful…

      Limit Search Object Access



    • Hi Shiny

      Not quite sure what you mean by multi instance layout?

      Object Page is a floorplan aimed at supporting a single instance of an object. If you want to show multiple instances of the same object then List Report would be the usual approach

  • Hi Jocelyn Dart,

    Great blog. Any ideas on how to get a dropdown on the object page in edit mode. So for example, we have fixed set of constant values (2 or 3 usually) which we would like to provide in the drop down on object page when a user is trying to create a new record using Object page. Any ideas about the possible annotations for this ? Thanks




  • Hi Jocelyn Dart ,

    Is there anything special that you had to do in the manifest.json to make the Items table appear on the Object Page?  The reason I ask is that I created a service that has a header entity and an items entity, the annotations on the back-end for both header and item, and the appropriate facet annotations.  When I look at the manifest.json, I only see the ListReport for the header, the ObjectPage for the header, and the ObjectPage for the item.  Then, when I test the app, the object page shows the “Items” label, but no table underneath.