Fiori elements – How to Design 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. Here we take first steps into designing our own Object Page.
When you want a summary screen of a single business object – a single Order, Customer, Invoice, Cost Centre or whatever – that’s the time to reach for an Object Page. Object Pages can be used to both display or edit a single business object. Object Pages are part of the List Report template as they are also used as the default display of a single row of a List Report. In this blog we will focus on the basics – designing a simple read only display with a few sections.
Here’s an example of a Customer Object Page from S/4HANA Cloud 1705.
As explained in the Fiori Design Guidelines, the layout of the Object Page contains:
- Object Page Header
- Object Page Header content area, for optional additional header content
- Object Page Body content area, which consists of:
- Navigation bar – to navigate the main sections in the Body
- Sections and their content
So when designing an Object Page you need to:
- Decide what you want to show in the Header
- Decide what sections you want in the Body of the Object Page
- Decide what content & what content type you will show in each section
- Decide on the overall layout of the sections within the content
- Make sure your OData model includes all the entity sets and properties that will provide the content to be displayed
Let’s get to it!
Design the Object Page Header
Every Object Page has a header.
The Object Page Header is the first thing your business user will see when they open your object page. You want your user to instantly confirm that they are looking at the correct object instance. So the header should show the most important identifying information.
In the real-life Customer Object Page example taken from SAP S/4HANA Cloud you can see:
- The customer name
- The customer number
- An image – which could be the customer logo
After that if you wish you can add other Header sections (called Header Facets) for important information that most people will want to know right away. These sections are laid out horizontally in the Object Page header content area.
In this example, you can see:
- The location (city) of the customer
Design the Sections of the Object Page Body
There is no minimum number of sections, although of course an Object Page with no content other than the header is of limited value to a business user.
The top section in the content typically contains the main information of this business object. In the example you can see fields of the Customer object itself in the General Information section. By default these fields are listed vertically. If you have a lot of fields you may want to gather these into logical groups. In the example you can see 3 logical groups: Basic Data, Communication Data and Overall Blocks.
Other sections typically contain relationships to other objects.
Remember always business users will experience the Object Page scrolling from the top-down, so aim to place the most important relationships before less important relationships.
Design the content of each Section
You can display all sorts of content and content types in each section.
The simplest content is simple text fields.
You can also use a range of graphical visualizations, tables and other content types.
If you find you are wanting to include a lot of analytical content, you may want to consider using an Analytical List Page instead.
Design the layout of the Object Page Body
By default, each section is displayed vertically beneath the previous section. The anchor bar at the top enables quick navigation to each vertical section. In the example, when the business user selects “Contacts” in the anchor bar the Object Page scrolls down to the Contacts section below.
When using a device with large screen size you may want to display logical field groups horizontally to make better use of the screen and minimize vertical scrolling. On smaller screen sizes, Fiori responsive design will automatically adjust the screen by wrapping the fields underneath.
In the example you can see how the 3 logical groups of the General Information section are displayed horizontally as subsections of General Information.
Design your Data Model
Once you have confirmed what you want to show, make sure you give your Object Page design to your OData Architect to design the logical data model that is needed. They will decide:
- Which entity sets are needed in the OData Service
- The properties (fields) of each entity set
- The associations (relationships) between entity sets
Once your OData Service design has been modelled, then your architects and developers can use the model to decide how best to extract the information from your database, and expose it for consumption via your OData Service.
For example, if you are following the ABAP Programming Model for Fiori guidelines, your architects and developers will need to:
- Identify or design the virtual data model (VDM)
- Physically implement the VDM, by identifying or creating Core Data Services (CDS) views
- Extend the CDS Views with appropriate annotations to speed development of your Object Page
- Publish the CDS Views via OData Services
Now you are ready to start developing your Object Page! Watch out for my upcoming blog on developing the Object Page including which annotations you will need to realize your design.
Taking your Design to the next level
If you want to find out more about designing the Object Page, you’ll find lots more design information in the Fiori Design Guidelines for the Object Page.
If you want to understand more about why the Object Page is organized this way then read up on the Object Page and its History.
If you are interested in Fiori elements you might also like to look at some of our videos on Youtube such as:
Adding a Field Group to an Object Page with SAP Fiori Elements
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
And you can find more information on Developing apps with SAP Fiori elements in the SAPUI5 SDK.
Brought to you by S/4HANA RIG
Great blog Jocelyn!
I know you did not mention it as it does not fit to your series but still to this topic (and some people might don't know): the Object Page layout can be also used in freestyle apps. There will be a small part on that in the Hands-On TechEd session DX360 - Building High Quality SAPUI5 Apps.
Hi Margot
Thanks for that comment!
I'll add DX360 to the list of recommended sessions!
Hoping you are also going to talk about the importance of stable IDs? That one is very important to Fiori elements and Flexibility Services we rely on in S/4HANA for a lot of the In App Extensibility options and even some of the classic and side-by-side extensions.
Rgds,
Jocelyn
Thanks and yes, of course! Stable IDs is an absolute must in state-of-the-art UI5 apps! And flexibility services resp. UI adaptation is quite a cool thing 🙂
Oooh.. yes! I have a blog waiting to be published on that... just need to get the Develop the Object Page blog out the door first.
Looking forward to reading it!
Hi Jocelyn -
Thank for this great blog, very helpful. Thoughts on "How to design/develop Analytical list page". I've been researching but haven't been lucky so far
Cheers!
Jay Punyamurtiwar
hi,
i want yo add a buttin for every line item. i try using datafieldforaction but not sure what to give in the string?
This is a question that should be posted on answers.sap.com as it is not related to this blog.
Please add tag SAP Fiori when you post the question
Rgds
Jocelyn
Hi Jocelyn,
Can we add cutom controls in an object page, like a file uploader?
if so please help on how to do it as I could not find any documentation for this
Hi Akshaya
You can use the navigation options add global actions (buttons that trigger OData Service functions) for custom controls.
You could also use an Object Page Extension ... explained here:
https://blogs.sap.com/2017/10/29/fiori-elements-how-to-create-an-object-page-extension/
Rgds
Jocelyn
Thanks I used Extension. Just some roadblocks on creating an additional object page and navigating to it. Followed the documentation. Still unclear. Any leads?
Hi Jocelyn Dart ,
I have been trying some app dev on RAP, Is that preview only capable of List report ?
In the BDL I have defined a field as read only and in create I do not want it in the display but in read mode I want it. How do I handle it. Please help!
Regards,
Prasenjit Bist
Hi Prasenjit, Ok so rather than ask this in blog comments on an unrelated blog where you are reliant on the blog author's time alone... I would strongly recommend you raise a question on https://answers.sap.com There are quite a lot of people with Fiori elements experience now so you are much more likely to get an answer that way.
My 2 cents - I doubt RAP has anything to do with your problem... I'm curious as to where you are trying that out? Is that ABAP on SCP?
What you are looking for is what is being exposed via the annotations related to the OData Service. That is what controls the behaviour.
If you need more detailed help then again please raise a question on https://answers.sap.com with some more details of your SAPUI5 version, and your backend system version (especially NetWeaver version - as this can impact what annotations are possible) assuming you are using CDS Views for the extract, or if SCP then please explain what you are using. And if you are using local annotations the some details of what annotations you have set for the field.
Also there will also be some SAP TechEd workshops on RAP this year, so you might want to look out for more information if you are attending or from the replays once available .
Thanks
Hi Jocelyn, Thanks I will raise a question
But it takes ages to get an answer.
I am trying it on SAP Cloud Platform for ABAP (RAP model yeah).
I actually have a list with full CUD and actions, custom messages but when I try object pages with the annotations from tutorials like the one you shared or others it does not works but when I tried the same annotations a few months ago on a S4/HANA system I could generate.
May be because RAP directly generates preview and does not needs Web IDE there is the issue or I will try with the Web IDE and I need to check how that is to be done in SCP environment for ABAP PaaS.
I think I may be attending the SAP Tech Ed Bangalore .
Thanks,
Prasenjit