![Page 1: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/1.jpg)
How SAP HANA Cloud is transforming Business
Application Development at Danone
![Page 2: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/2.jpg)
Presentation agenda
Page 2
The story of SAP HANA Cloud @ Danone
Application development with HANA Cloud Portal
Future directions
![Page 3: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/3.jpg)
Page 3
The story of SAP HANA Cloud @ Danone
Context
HANA Cloud PaaS
HANA Cloud Portal Saas
ABAP Webdynpro
SAP On-premise Portal
![Page 4: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/4.jpg)
The story of SAP HANA Cloud @ Danone
EVOLUTION
CONTEXT: how Danone evolved from ABAP/ECC6 => SAP HANA
CLOUD (monolitic apps)=> SAP HANA Cloud Portal (wigitized app)
Evolution of skill set
Evolution of development way of working
Page 4
Security
SLA
OPEX vs CAPEX
Scalability
Flexibility
Business Continuity
Low TCO
Lower initial cost
Latest softwareNo upgrades
Great UX
Reliability
Widgets
Easy site creation
![Page 5: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/5.jpg)
Page 5
REACH PRODUCTIVITYRAPID
EVOLUTION
The story of SAP HANA Cloud @ Danone
![Page 6: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/6.jpg)
The story of SAP HANA Cloud @ Danone
Reach
Page 6
Potential SAP business application users
B2C
B2B
Enterprise B2EB2E
Traditional SAP Users
SAPGUIECC6 ERP
![Page 7: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/7.jpg)
The story of SAP HANA Cloud @ Danone
Reach
Page 7
Potential SAP business application users
B2C
B2B
Enterprise B2EB2E
Traditional SAP Users
SAPGUIECC6 ERP
HCP
HCP
HCP
![Page 8: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/8.jpg)
Why SAP HANA Cloud Portal?
Page 8
Productivity
Complex, Static, single function screen
VA01
Simple, yet Dynamic, multi-function screen
HCP CRM
![Page 9: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/9.jpg)
Page 9
The story of SAP HANA Cloud @ Danone
Rapid Evolution
Webshop
CRM
Product catalogue
Stable
Evolution
RFC
RFC
RFC
![Page 10: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/10.jpg)
Page 10
Application
Development
with HANA
Cloud Portal
![Page 11: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/11.jpg)
Page 11
Why SAP HANA Cloud Portal?
Key points for HCP adoption
![Page 12: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/12.jpg)
Page 12
Front-end solution for easy site creation and consumption, it brings
applications, report and unstructured content together.
• Flexible and easy branding and customization
• HTML5 and SAP UI5 based user interface
• Scalable solution
• Easy integration of SAP and non-SAP sources
• Sites can easily be duplicated, exported and imported across
environments
• Out-of-the-box mobile consumption and social experience
• Based on standards (HTML5, LESS, SAML2, CMIS, OpenSocial, SAP UI5)
• Light CMS capabilities
The story of SAP HANA Cloud @ Danone
![Page 13: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/13.jpg)
Page 13
Monolithic applications
• built on top of SAP HANA Cloud Platform (SAP HCP)
• Application’s logic is self-contained
• Applications run entirely on SAP HCP
Portal based applications
• Composed of widgets
• Widgets run on SAP HCP
• Application’s logic is driven by widgets and inter-widget communication
• Portal layer
Monolithic applications offer the same UI experience as Portal based ones
Monolithic vs Portal based applications
![Page 14: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/14.jpg)
Page 14
How to decide which technology suits best?
• Is the application eligible for multiple roll-outs?
• Is it to render according to different branding or theming requirements?
• Will the functionality and the User Experience differ across deployment
units?
• Will the functionality be reused across sites?
• Is the functionality based on roles (RBA)?
• Is the number of screen/pages significant?
Monolithic vs Portal: Deciding criteria
![Page 15: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/15.jpg)
Page 15
B2E scenario - Danone Waters China Web CRM
Web CRM for DWC
![Page 16: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/16.jpg)
Page 16
Order Management
Inquiry Management
Order History
Credit Check – Cockpit
Order Reporting
B2E scenario - Danone Waters China Web CRM
Web CRM for DWC
![Page 17: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/17.jpg)
Page 17
Web CRM DWC Process Flow
Is order and delivery
progress
communicated via
workflow/SMS???
![Page 18: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/18.jpg)
Page 18
Web CRM for DWC
Page 18
CS Team
GT Customer
Sales Branch
eOrder
Objective: Build an E-Collaborative CRM Platform to be used by Customers, Sales
Branch Operators and Customer Service Team, delivering zero-footprint, external
facing web front-end to SAP ECC
![Page 19: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/19.jpg)
Page 19
Web CRM DWC accessed by internal users (Danone employees) as well as
external users (e.g. sales agents) who do not exist in SAP ECC.
Functionality:
Business Party Search (Sold-to and Ship-to Party Search)
Customer Credit Usage
Order Taking (Order Check, Incompletion Log, Validation Workflow)
List of orders related to materials
Order History
Order Display and Change
Document Flow
Open Invoices
Open Reports
Web CRM DWC Functionality
![Page 20: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/20.jpg)
Page 20
In 2013 we built Web CRM for Danone Southern Africa (DSA): monolithic SAP UI5
application interfacing to SAP ECC by means of SAP NetWeaver Gateway (oData).
We broke it into reusable components and re-assembled it into the new Web CRM
DWC. Back-end functionality (RFCs) reused with little rework.
SAP HANA Cloud Portal was the solution chosen for composing the final application
From Web CRM DSA to Web CRM DWC
![Page 21: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/21.jpg)
Page 21
Web CRM DWC was the perfect candidate for SAP HANA Cloud Portal because:
• It’s a core solution, to build centrally and deploy to multiple Country
Business Units (CBUs)
• CBUs have different branding and theme requirements. A flexible and easy
way to address this was needed
• Functionality (e.g. order report) could be reused by other sites (not
necessarily belonging to the same core template)
• Different user profiles exist and access to functionality is driven by their
roles
• DWC delivers a rich set of functionality (it displays various screens), but
more capabilities will be added further down the line (extension should be
as easy as possible)
Web CRM DWC: perfect fit for widgetization
![Page 22: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/22.jpg)
Page 22
Web CRM DSA has been
widgetized as follows:
Business Party Search redeveloped from scratch and embedded in a page
template (to enhance performance and unify the look-and-feel).
Functionality is mapped to Open Social Portal Widgets and communication
employs a broker implementing Pub/Sub pattern.
Widgetizing Web CRM DSA into Web CRM DWC
Monolithic
OrderTaking
OrderHistory
Business Party
Search
Open Invoices
Open Reports
CreditCheck
![Page 23: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/23.jpg)
Page 23
SAP HANA Cloud Portal Organizational Roles
• Roles defined in HCP, at subscription level
• Groups defined in HCP at account level or at subscription level or
defined using a dynamic assertion group rule using regular expression of
SAML attributes from the IdP
• Roles are assigned to Groups, Users are assigned to Roles or Groups
• Roles defined in the platform becomes Organizational Roles in the
portal and will have to be added to the site to make them available at
page level
• Based on the groups the user is assigned to, the list of roles is
determined and navigation hierarchy is subsequently built
Navigation Root
Content Page
Crate
Orders
Change
Orders
Contentlesspage
Display
Invoices
![Page 24: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/24.jpg)
Page 24
User Authentication
Internal Users (Danone Employees): Authenticated by Symantec O3 SSO Server
• SSO Server picks up Windows User IDs, creates SAML2 Token and forwards it
to SAP HANA Cloud Portal which, in turn, feeds the token to the widgets in
the page
• Groups are defined in HCP and users are assigned to them
• Artificial groups (corresponding to SAP PFCG roles) are created on HCP and
forwarded, by a Proxy Servlet, to ECC for authorization checks
External Users (e.g. Sales Agents): Authenticated by SAP IdP
• Users created manually on SAP IdP by means of a custom cockpit
• SAP IDs mapped manually by Administrator upon User Creation
• No SSO
• Authentication UI tailored to fit DWC’s requirements
![Page 25: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/25.jpg)
B2B scenario - Nutricia Metabolics Web Shop
Page 25
The story of SAP HANA Cloud @ Danone
![Page 26: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/26.jpg)
Page 26
User Management
Content Management Cockpit
Product Catalog
Order Management (Shopping Basket)
Nutricia Web Shop
![Page 27: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/27.jpg)
Page 27
Nutricia Web Shop: Portal Architecture
Nutricia (monolithic) was decomposed into widgets according to functionality:
• Registration Form
• Header
• Footer
• Product Catagories
• Product Catalogue
• Basket Container
• PDFViewer
• Shopping Button
Some widgets were added to the portal page template whilst others were added to
the individual portal pages.
![Page 28: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/28.jpg)
Page 28
Nutricia Web Shop: User Registration
![Page 29: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/29.jpg)
Page 29
Nutricia Web Shop: Summary Screen
![Page 30: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/30.jpg)
Page 30
Nutricia Web Shop: Order Creation
![Page 31: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/31.jpg)
Overall Impressions
Page 31
SAP HANA Cloud Portal is mature and stable platform to build sophisticated user
experience, it’s reliable and offers an intuitive way to extend existing applications
or build new ones on top of SAP HCP.
Pros
• Intuitive
• Mobile consumption
• Branding & Theming
• Navigation & RBA
• Heterogeneous mash-ups
• Quick roll-outs
• Reduced time to market
Cons
• Performance
• Out-of-the-box widgets
• Authoring environmentcapabilities
![Page 32: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/32.jpg)
Page 32
Future
directions
![Page 33: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/33.jpg)
Future directions
Page 33
LATENCY
![Page 34: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/34.jpg)
BUSINESS Drivers
Main reasons for going to cloud:
Picture of clouds with ‘OPEX’ ‘RELIABILITY’ ‘UX’ etc, superimposed
Page 34
Future directions
![Page 35: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/35.jpg)
Page 35
Application performance
Application deployed on multiple DCs: EU, AP, US. Best response times was to AP.
Cachin
g
SAP UI5
Shindig
HCP
Compression
Minification
CacheControlFilter (maxAge) to cache
proxy requests
LRU Cache implemented in Proxy Servlet
which intercepts all requests. Cache size
500, eviction policy: eldest entry
Resources from CDN
EuropeSydney
USA
![Page 36: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/36.jpg)
Page 36
Future directions
Cloud infrastructure
adaptation
smart-routing for direct Rfc calls
user and role management cockpit
optimize resources consumption
![Page 37: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/37.jpg)
Outbound Logicstics
Complaint Management
B2B roll-outs (Russia,
DACH)CRM DSA
HR (Success Factors)
Purchasing
Future Directions
Page 38
Mobilization
![Page 38: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/38.jpg)
Final thoughts
Page 39
Innovative Spirit
Collaborate with SAP
Developer skills
![Page 39: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/39.jpg)
Final thoughts
Page 40
Innovative Spirit
Collaborate with SAP
Developer skills
![Page 40: How SAP HANA Cloud is transforming Business Application ... · PDF fileHow SAP HANA Cloud is transforming Business Application Development at Danone. ... • HTML5 and SAP UI5 based](https://reader031.vdocument.in/reader031/viewer/2022021817/5a8432e27f8b9a24668efda7/html5/thumbnails/40.jpg)
Questions?
Page 41