Week 2: Building Your First SAP Fiori Elements App

Unit 1: Creating an Object Page

openSAP Developing and Extending SAP Fiori Elements Apps

Introducing SAP Fiori Elements

Painting the Big Understanding the Introducing OData Preparing your

Your Creating an OData Creating a List
Picture Architecture Services and ABAP Development Service with ABAP Report
Annotations Environment RESTful Application
Programming Model

Building Your First SAP Fiori Elements App

Creating an Object Accelerating SAP Preparing Your Generating the List Configuring the Adding Custom
Page Fiori App Front-end Report – Object App Controls and Logic
Development with Development Page App
SAP Fiori Tools Environment

you are here

Using More SAP Fiori Elements Capabilities

Creating an Enhancing the Creating an Deploying Your Building an SAP Using XML
Analytical List Analytical List Overview Page SAP Fiori Fiori Elements App Annotation LSP for
Page Page Elements App with an External Defining Advanced
OData Service UI Features

Extending a Standard SAP Fiori App

Understanding Adapting an App Adapting the UI as Adapting the UI as Productizing the

SAPUI5 Flexibility as a Key User a Developer – a Developer – Extended App
Basic Extensions Advanced
Extensions

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 2

Creating an object page
An object page lets you display, edit, and create objects, as well as save drafts

The object page is suitable for both simple and more complex, multi-faceted objects.
It is often used to categorize the relevant information about an object using sections.

The object page

▪ Comes with a flexible, responsive layout and
a dynamic page header
▪ Gives you optimal support for multiple device
types
▪ Allows you to adjust the layout to a wide
range of use cases

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 3

Creating an object page
The object page has several key functions

Object page header

▪ Provides key information about the object as well as
necessary context
▪ Provides access to global actions
▪ Is expanded initially and collapses when the user
scrolls or navigates to another section
▪ Can be pinned to stay expanded during navigation

Behavior Check the infographic in our documentation

▪ The object page can be in display, edit, or create mode
▪ The layout remains the same independent of the mode
Navigation bar (optional)
Content area ▪ Lets the user navigate to the different sections
▪ Can consist of one or multiple sections
Footer toolbar
▪ Can display all sorts of content and content types in
each section, for example, simple text fields, tables, ▪ Provides access to actions such as save or cancel
charts, and a range of graphical visualizations ▪ Provides access to messages (if applicable)
© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4
Creating an object page
We will build the travel details page in this unit

Travel overview Travel list Travel details

Booking analysis Food and beverages

Travel desk clerk Jay

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 5

Creating an object page
Wrap-up

IN THIS UNIT, YOU LEARNED

▪ When to use an object page floorplan
▪ About the components in an object page
▪ How to create an object page using ABAP CDS annotation
▪ How to easily find relevant documentation using the feature map

NEXT UNIT
▪ Week 2 – Unit 2
Accelerating SAP Fiori app development with SAP Fiori tools

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 6

Thank you.
Contact information:

open@sap.com
Follow all of SAP

www.sap.com/contactsap

© 2021 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of
SAP SE or an SAP affiliate company.
The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its
distributors contain proprietary software components of other software vendors. National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or
warranty of any kind, and SAP or its affiliated companies shall not be liable for errors or omissions with respect to the materials.
The only warranties for SAP or SAP affiliate company products and services are those that are set forth in the express warranty
statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional
warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or
any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation,
and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platforms, directions, and
functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason
without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or
functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ
materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, and they
should not be relied upon in making purchasing decisions.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered
trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. All other product and service names
mentioned are the trademarks of their respective companies.
See www.sap.com/trademark for additional trademark information and notices.