Custom development approach S/4 HANA
Tim Leys
Your logo
Frederik Devinck
SAPience.be TECHday 2017
Your logo
Agenda
Project Approach
BUILD prototype
CDS Development
SAP Fiori Development
SAPience.be TECHday 2017 2
Your logo
Case: Legume Cockpit at Roger & Roger
Daily deliveries of fresh vegetables
• Integration of weighing bridge with SAP PO
• Data will be stored in SAP S/4 HANA
• In a new app:
• Determine tarra weight
• Determine quality
• Create goods movement
SAPience.be TECHday 2017
Your logo
Project Approach
1. Create Spec 2. Create Prototype 3. Create build plan
4. Develop
5. Deliver
SAPience.be TECHday 2017
Your logo
Discover: Research
Determine the right solution: user experience
• Application shows daily weighings (large dataset)
• Different type of users using the same app
SAPience.be TECHday 2017
Your logo
Discover: Research
Determine the right solution: technology
• « Fiori First » on S/4 HANA
• Use latest SAP (Fiori) technologies
SAPience.be TECHday 2017
Your logo
Discover: Research
Why SAP Fiori / Good UX?
• Think about the applications we use in our daily life
• Require no training
• Easy to use
SAPience.be TECHday 2017
Your logo
Discover: Research
Why SAP Fiori / Good UX?
• Take a look at the time you invest at the end of a
project, when you deploy the solution
• Look at the change requests
• Good UX can reduce the number of change requests
SAPience.be TECHday 2017
Your logo
Discover: Research
Why SAP Fiori / Good UX?
• Monetary benefits
• Increase user satisfaction
• Increase customer loyalty
• Increase solution adaptation
• Strengthen relationship between IT and business
SAPience.be TECHday 2017
Your logo
Discover: Research
Why SAP Fiori / Good UX?
• Non-monetary benefits
• Gain productivity
• Save training costs
• Decrease user errors
• Decrease change requests
SAPience.be TECHday 2017
Your logo
Design: BUILD Prototype
Create prototype
1. Validate with customer
2. Gather feedback
3. Change prototype
4. Iterate
SAPience.be TECHday 2017
Your logo
Design: BUILD Prototype
Create prototype: determine the template
SAPience.be TECHday 2017
Your logo
Design: BUILD Prototype
SAP Fiori Templates: Fiori Elements
• Overview Pages List Report Object Page
SAPience.be TECHday 2017
Your logo
Design: BUILD Prototype
BUILD Prototype
SAPience.be TECHday 2017
Your logo
Develop: Approach
« Agile » approach
• 4 sprints of 2 weeks
• Predefined what each sprint will deliver
• Demo with Customer/key user at end of sprint
SAPience.be TECHday 2017
Your logo
Develop: Approach
« Agile » approach
• 1 Sprint
• Has multiple « stories » (Representation what user wants)
• Requires different development tasks
• Back-end development
• OData services
• Front-end development
• Has a specific time cost (in days)
SAPience.be TECHday 2017
Your logo
Develop: Approach
1. CDS Development
2. OData Services
3. SAP Fiori / SAPUI5 Development
SAPience.be TECHday 2017
Your logo
CDS Developments
Read data from SAP
SAPience.be TECHday 2017
Your logo
CDS Developments: CDS Views
Semantically Rich Data-models CDS is completely based on SQL
1 Domain specific languages (DDL, QL, DCL)
2 Any ‘Standard SQL features are directly
Declarative, close to conceptual thinking available like joins, unions, build-in
functions, …
Fully compatible with any DB Common basis for domain specific
3 Generated and managed SQL views
4 frameworks
Native integration in SAP HANA By using annotations
UI, Analytics, Odata, BW, …
Built-in functions and Code Pushdown Extensible
5 Table functions for breakout scenarios
6 On data model level through extenstions
Rich set of build-in SQL functions On meta-model level through annotations
SAPience.be TECHday 2017
Your logo
SAP Fiori: New Technologies with S/4 HANA
SAPUI5 Version 1.44.7
SAP Fiori 2.0 Launchpad
SAP Fiori Elements (List Report)
SAPUI5 Smart Controls
(OData) UI Annotations
SAPience.be TECHday 2017
Your logo
SAP Fiori: UI Annotations
UI Annotations
SAPience.be TECHday 2017
Your logo
SAP Fiori: UI Annotations
UI Annotations
SAPience.be TECHday 2017
Your logo
SAP Fiori: Fiori Elements
List Report Template
+ Works with OData service, combined with local
or service UI Annotations
+ Smart Controls (Filter Bar, Variant mgmt, Table)
+ SAP Template
- No front-end code
- Very little documentation
SAPience.be TECHday 2017
Your logo
SAP Fiori: Smart Controls
Custom Approach
• Create « List Report » a-like tool with
• Smart Table
• Smart Filter
• Smart Variant Management
SAPience.be TECHday 2017
Your logo
SAP Fiori: Smart Controls
Custom Approach
• Create « List Report » a-like tool with
• Smart Table
• Smart Filter
• Smart Variant Management
SAPience.be TECHday 2017
Your logo
SAP Fiori: Smart Controls
Custom Approach
SAPience.be TECHday 2017
Your logo
SAP Fiori: Smart Controls
Creation annotations in SAP WebIDE
1. Create « annotations » folder
2. Add Annotation File
Select OData Service
3. Open with Annotation Modeler
SAPience.be TECHday 2017
Your logo
SAP Fiori: Smart Controls
Annotation Modeler in SAP WebIDE
1. Select the right Entity
2. Click « + » for Annotations
3. Select « UI.LineItem »
SAPience.be TECHday 2017
Your logo
SAP Fiori: Smart Controls
UI.LineItem UI Annotation
1. Select « Path » as Expression Type
2. Select the right Entity field in the dropdown
SAPience.be TECHday 2017
Your logo
SAP Fiori: Smart Controls
UI.LineItem UI Annotation
1. Click « + » in « UI.DataField »
2. Select« Label »
3. Select the right translation from i18n file
SAPience.be TECHday 2017
Your logo
SAP Fiori: Smart Controls
+ Smart Table
UI.LineItem
UI.DataField
SAPience.be TECHday 2017
Your logo
SAP Fiori: Smart Controls
+ Smart Table
SAPience.be TECHday 2017
Your logo
SAP Fiori: Smart Controls
+ Smart Filter Bar
UI.SelectionFields Entity Fields
SAPience.be TECHday 2017
Your logo
SAP Fiori: Smart Controls
+ Smart Variant Management
• Save Filters
• Save Table Layout
• Set as Default
SAPience.be TECHday 2017
Your logo
SAP Fiori: Smart Controls
Link the Smart Controls in the XML View
Smart Variant
Smart Filter Bar
Smart Table
SAPience.be TECHday 2017
Your logo
End Result
SAPience.be TECHday 2017
Your logo
Lessons learned
Use BUILD / prototype
Get business & end users involved as much as possible
Focus on the key functionalities
Use SAP Fiori Elements / Smart Controls to reduce
development cost
SAPience.be TECHday 2017
Thank you!
Your logo
SAPience.be TECHday 2017 38
