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