Week 2: Building Your First SAP Fiori Elements App
Unit 6: Adding Custom Controls and Logic
Understanding the Architecture
Introducing OData Services and Annotations
Preparing your ABAP Development Environment
Creating an OData Service with ABAP RESTful Application Programming Model
Introducing SAP Fiori Elements
Accelerating SAP Fiori App Development with SAP Fiori Tools
Preparing Your Front-end Development Environment
Generating the List Report – Object Page App
Configuring the App
Building Your First SAP Fiori Elements App
Adding Custom Controls and Logic
Creating an Analytical List Page
Enhancing the Analytical List Page
Creating an Overview Page
Deploying Your SAP Fiori Elements App
Building an SAP Fiori Elements App with an External OData Service
Using More SAP Fiori Elements Capabilities
Understanding SAPUI5 Flexibility
Adapting an App as a Key User
Adapting the UI as a Developer – Basic Extensions
Adapting the UI as a Developer – Advanced Extensions
Productizing the Extended App
Extending a Standard SAP Fiori App
Painting the Big Picture
Creating a List Report Preparing Your
ABAP Development Environment
Creating an Object Page
you are here
Using XML Annotation LSP for Defining Advanced UI Features
OData service
Floorplans Annotations Configuration
(optional)
Custom code (optional)
Provided by:
Application developers Provided by:
SAP Fiori elements framework
Adding custom controls and logic
Custom code complements your app beyond standard SAP Fiori elements functionality
SAPUI5 controls SAP Fiori elements
building blocks
Example: Don’t use switches instead of checkboxes for Booleans
Use SAP Fiori elements standard features whenever possible
The closer you stay to the standard SAP Fiori elements floorplans, the greater the savings in development and maintenance costs Familiarize yourself with the
feature map and design guidelines
Avoid inconsistent user experience
by introducing different controls
Add custom actions and controls to
▪ SAP Fiori elements floorplans (header, content area, and footer)
▪ SAP Fiori elements building blocks (i.e. table, chart, form, filter bar) See full list in the official UI5 documentation: Link
SAP Fiori elements list report as starting page
SAP Fiori elements object page as first detail page
Example: custom SAPUI5 page as second detail page Example: adding a geo map as a
custom section to the object page
Example: custom action in table
Adding custom controls and logic
Extend your SAP Fiori elements app with custom controls and pages
Add custom pages to your
SAP Fiori elements application
Add custom controls to SAP Fiori elements pages
Add controller extensions to SAP Fiori elements floorplans
Use controller extension points provided by SAP Fiori elements to
add custom controller logic
Only use the SAP Fiori elements ExtensionAPI for stable access to
SAP Fiori elements floorplan logic
Example: clicking on an airport invokes custom controller logic to display airport details
Custom code Custom code
Example: implement an extension point to adapt the navigation target based on document status
Custom code
SAP Fiori elements floorplans SAP Fiori
elements ExtensionAPI
Custom controller logic defines the behavior of your extensions
Adding custom controls and logic
We will add a custom section to the travel details page in this unit
Travel overview Travel list Travel details
Booking analysis Travel desk clerk Jay Food and beverages
Wrap-up
IN THIS UNIT, YOU LEARNED
▪ How you can extend your application with custom code
▪ The different options to add custom controls and logic
▪ Why to use custom code with care and use standard SAP Fiori elements features whenever possible
NEXT UNIT
▪ Week 3 – Unit 1
Creating an analytical list page
© 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/trademarkfor additional trademark information and notices.
