You are on page 1of 23

CGE367 – Build Your SAP Fiori App From

Backend to User Interface

PUBLIC
Speakers 2018

SAP TechEd Las Vegas Oliver Graeff


October 2–5, 2018 Andre Fischer

SAP TechEd Barcelona Oliver Graeff


October 23–25, 2018 Andre Fischer

SAP TechEd Bangalore Mayank Gupta


November 28–30, 2018 Prajwal Mavinakattekoppal Shankaregowda

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


Take the session survey.
We want to hear from you!

Be sure to complete the session evaluation


for this session CGE367
on the SAP TechEd mobile app.

Download the app from


iPhone App Store or Google Play.

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


Disclaimer

The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of SAP.
Except for your obligation to protect confidential information, this presentation is not subject to your license agreement or any other service
or subscription agreement with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or any related
document, or to develop or release any functionality mentioned therein.
This presentation, or any related document and SAP's strategy and possible future developments, products and or platforms directions and
functionality are all subject to change and may be changed by SAP at any time for any reason without notice. The information in this
presentation is not a commitment, promise or legal obligation to deliver any material, code or functionality. This presentation is provided
without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a
particular purpose, or non-infringement. This presentation is for informational purposes and may not be incorporated into a contract. SAP
assumes no responsibility for errors or omissions in this presentation, except if such damages were caused by SAP’s intentional or gross
negligence.
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, which speak only as of their dates,
and they should not be relied upon in making purchasing decisions.

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4


Goal
Developing an SAP Fiori Elements app that is based on CDS For this you’ll use different tools:
views in an end-to-end fashion  ABAP in Eclipse for CDS view development
 CDS data model representing products  SAP Gateway Service Builder to generate an OData Service
 Gateway service to expose the products based on this CDS view
 SAP Fiori app to visualize the list of products and their detail  SAP Web IDE to develop an SAPUI5 application based on SAP
information including customer ratings Fiori Elements

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


SAP CP
SAP Fiori programming model
SAP Web IDE
for SAP Business Suite

CDS Views SAP NetWeaver 7.50 or higher

SAP Gateway (OData runtime)

Referenced Data Source


OData service implementation via Service Builder
SAP Fiori Elements / SAP Web IDE

OData service
OData service implementation via SADL implementation

Query Classic
(SADL) business logic

CDS views

= code based implementation


HANA
Database tables

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


Improving SAP Fiori Development Efficiency

 Scale SAP Fiori development by applying a meta data driven approach for
pattern-based apps

 Reduce the amount of frontend code

 Provide high code quality templates and re-use controllers

 Embedding into overarching concepts of SAPUI5 Flexibility and lifecycle


management

 Foster design consistency and keep apps up-to-date with evolving design
guidelines

 Achieve higher code consistency w.r.t. quality, flexibility, extensibility, code


documentation

In short: Less Coding

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC This Photo by Unknown Author is licensed under CC BY-SA 7
SAP Fiori development with SAP Fiori elements & SAPUI5 flexibility
UI Adaptation

End User
UI Adaptation
Key User
SAPUI5 flexibility Partner at run time
Context
Industry at design time

Creativity Efficiency

Manual coding
SAP Web IDE
Development

SAP Fiori
Mixed Elements
SAPUI5
Freestyle Smart Controls

SAPUI5 Controls

Business data Semantic meta data


(SAP Gateway / OData) (OData annotations)

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 8


Metadata + SAP Fiori elements template = runtime view

<Annotation Term=“Identification">
<Collection> Product Metadata <VBox> Form template
<Record Type="DataField"> <form:SimpleForm>
<PropertyValue Property="Label" String="Product ID"/> <core:Title text=“Header"/>
<PropertyValue Path="ProductID" Property="Value"/> <template:repeat list="{Identification}">
</Record> <Label text="{path: 'meta>Label', formatter:…
<Record Type="DataField"> <Text text="{path: 'meta>Value', formatter:…
<PropertyValue Property="Label" String="Category"/> </template:repeat>
<PropertyValue Path="Category" Property="Value"/> </form:SimpleForm>
</Record> </VBox>
</Collection>
</Annotation>

At runtime
<VBox>
<form:SimpleForm> Product Form
<core:Title text=“Header"/>

<Label text="Product ID"/>


<Text text="{path:'ProductID',type:'String',constraints:{'maxLength':'10','nullable':'false'}}"/>

<Label text="Category"/>
<Text text="{path:'Category',type:'String',constraints:{'maxLength':'40'}}"/>

</form:SimpleForm>
</VBox>

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 9


Agenda

Exercise 1: Create CDS view and SAP Fiori Elements app

Exercise 2: Edit annotations to customize the app

Exercise 3: Customize the app with SAPUI5 Flexibility

Exercise 4: Enhance the app to also create products

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 10


Exercise 1 – Create CDS view and SAP
Fiori Elements app
CDS consumption and interface views
selection
association
Consumption

ZC_Product ZC_ProductReview

I_ProductCategory ZI_Product ZI_ProductReview


Interface

I_Supplier
Tables

Supplier Products Reviews

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 12


Develop CDS views

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 13


SAP Gateway – referenced datasource
Transactional applications - new programming model & Classic API’s

Leverage CDS views for


 Read access
 UI annotations
Referenced data source approach
Code based Service implementation of Create, Update and
Delete methods using legacy write API's

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 14


Exercise 2 – Edit annotations to
customize the app
Annotations SAP Fiori
can be added on several levels
Elements App

CLIENT
Local Annotation File
 Annotation Modeler in SAP Web IDE Local Local
Annotations annotation file

ABAP
 Tool – ABAP in Eclipse $metadata Annotations

CDS Views

BACKEND
 Tool – ABAP in Eclipse ABAP

CDS

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 16


Exercise 3 – Customize the app with
SAPUI5 Flexibility
SAPUI5 flexibility services

Ensure lifecycle stable and Provide intuitive tooling Facilitate cost-efficient UI


modification-free UI changes tailored to the needs of change process for
based on deltas special target groups extending apps

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 18


Customer scenario: who and where?

Developer Key User End User


UI UI Personalization
adaptation adaptation
at design at runtime
time Draft
Review with IT
and users

Development Productive
Test system
system system

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 19


Exercise 4 – Enhance the app to also
create products
SAP TechEd online / SAP Community

Access replays of:


 Keynotes
 SAP TechEd live interviews
 Selected lecture sessions

http://sapteched.com/online

Continue your SAP TechEd discussion after


the event within SAP Community:
 Read and reply to blog posts
 Ask your questions
 Join conversations

sap.com/community
See all SAP TechEd blog posts

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 21


Further information

Related SAP TechEd learning journeys


CGE2 - Design and Develop SAP Fiori apps
CNA8 - How to Build Intelligent Business Applications

Related SAP TechEd sessions


CGE855 - Road Map: SAPUI5
CGE210 - SAPUI5 Evolution: Gain Performance, Close Gaps, and Use New Technologies (Lecture)
CNA220 - Next-Generation Smart SAPUI5 Controls Consuming SAP Cloud Platform Services (Lecture)
CGE372 - Evolved Best Practices and Tips for Working with SAPUI5 (Hands-On 4h)
CGE371 - How to efficiently develop SAP Fiori with Fiori elements (Hands-On 2h)
CGE716 - Everything wrong with… my SAPUI5 App (Code Review)
CGE713 - Prepare your App for SAPUI5 Evolution (Code Review)
CGE877 - SAP Web IDE: Roadmap and Q&A
CNA376 - Build Applications with the Programming Model on SAP Cloud Platform (Hands-On 2h)
CGE367 - Build Your SAP Fiori App from Back End to User Interface (Hands-On 2h)
CGE625 - Apply Your Brand to SAP Apps Using UI Theme Designer on SAP Cloud Platform (CodeJam mini-edition)

Public SAP Web sites


SAP Community: www.sap.com/community SAP products: www.sap.com/products

SAP training and certification opportunities


www.sap.com/education

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 22


Thanks for attending this session.

Feedback Contact for further topic inquiries

Please complete your session Oliver Graeff, oliver.graeff@sap.com

evaluation for CGE367. Andre Fischer, andre.fischer@sap.com

© 2018 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 23