givaudan runs sap hana und design studio
TRANSCRIPT
BA218
Barcelona, November 10th, 11th & 12th 2015
How Givaudan Uses SAP BI Tools to Monitor Quality of Products and Services
1. Who is Givaudan ?
2. The project, context and expected benefits
3. Why SAP Design Studio was selected
4. The BI systems architecture
5. Using CSS for Design Customizing
6. Using the SDK to add custom functionality
7. Lessons learned
8. Q&A
Confidential and proprietary business information of Givaudan 2
Agenda
25%of the global fragrances and flavours market value which is estimated at CHF 18-19 billion
World leader in creating memorable fragrances and flavoursInspiring our customers’ brands, delighting consumers
GivaudanAlways by your side
Mature Markets
Developing Markets
Confidential and proprietary business information of Givaudan 5
Inspiring fragrances and flavours,To help our customers grow their brands
Savoury
Snacks
Beverages
Dairy
Sweet goods
Confidential and proprietary business information of Givaudan 6
Inspiring fragrances and flavours,To help our customers grow their brands
Fabric Care Home care
Oral CarePersonal careFine Fragrances
Confidential and proprietary business information of Givaudan 7
Fragrances and Flavours drive consumers’ product choices, and balanced sales across our two Divisions
Confidential and proprietary business information of Givaudan 8
Our Fragrance Division creates scents, for leading household and luxury brands worldwide
Confidential and proprietary business information of Givaudan
Our Flavour Division makes life taste delicious, with food and beverages that delight consumers the world over
1. Who is Givaudan ?
2. The project, context and expected benefits
3. Why SAP Design Studio was selected
4. The BI systems architecture
5. Using CSS for Design Customizing
6. Using the SDK to add custom functionality
7. Lessons learned
8. Q&A
Confidential and proprietary business information of Givaudan 10
Agenda
Confidential and proprietary business information of Givaudan 11
Producing the monthly QIC reports throughout the organisation, was a very labour intensive task using data from many dispersed sources.
To support strategic decision making and ensuring that Givaudan’s quality goals are achieved, a project was initiated to modernize the process.
The project organisation was made up of both internal and external resources.
• Key users from the quality organisation
• Functional analysts from the IT/IS organisation
• Design Studio & BW Application designers from our BI partner Planeum (www.planeum.com)
QIC Dashboard project
Project background
Confidential and proprietary business information of Givaudan 12
Automate the execution of +115 QIC reports, produced on a monthly basis
More than 100 users worldwide
QIC Dashboard project
Project Objectives
Automate the publication (sharing) of these reports to the organization
Define smart way to inform audience about availability of the new report
Use a responsive & elegant dashboard design respecting the graphical charter
Produce the reports from a range of different data sources
BW (through existing reports)
SAP (micro monitoring, SAP status)
Other applications (Oracle Databases)
Confidential information of Givaudan
QIC Dashboard projectExpected benefits
13
Ensure global data consistency
Share global KPI definitions
Efficient data extraction and consolidation
Share better information to other organisations
Standardize the report structure and layout. Remove local and regional reporting
Reduce time to produce the reports. Let the teams focus on analysis & improvements.
1. Who is Givaudan ?
2. The project, context and expected benefits
3. Why SAP Design Studio was selected
4. The BI systems architecture
5. Using CSS for Design Customizing
6. Using the SDK to add custom functionality
7. Lessons learned
8. Q&A
Confidential and proprietary business information of Givaudan 14
Agenda
Confidential and proprietary business information of Givaudan 15
Why use SAP Design Studio ?
QIC Project BI Tool Requirements
Analysis of large & disperse data volumes is required
The user must be able to quickly find answers to questions.
100101
011010
A Dashboard and data visualization solution supporting comments and quick navigation was required.
Must integrate easily into the existing IT architecture
Confidential and proprietary business information of Givaudan 16
Why use SAP Design Studio ?
21st century tool
• WAD is far to complex and unfriendly to use (not 21st century, IT tool)
• BO Dashboards is not the future
• HTML5 -> Mobile, iPad
• Easy tool (for developers) to create dashboards
• More wizards for ease of use
• Scripting for both simple & complex user scenarios
• SDK for complex and non standard functionality
Why use SAP Design Studio ?
Key Features for choosing SAP Design Studio
Fully Customizable UI
o Custom Themes / Style sheets to apply Givaudan corporate branding
o Custom configurable user workflows that cover key analytical & planning
o SDK enabling custom extensions for Comments solution via Web DynPro
Power Analytics on BW, HANA & UNX Out-of-the-Box
o Analysts can leverage all analytical features of BWHANA
o Pivot Table (Crosstab) and Pivot Chart with standard context menu for OLAP actions
o Powerful standard Filter & Navigation components
o Rich set of standard chart types, e.g. waterfall, trellis, heat map
One Toolbox for SAP Enterprise BI Needs
o Stand-alone BI deployments on NW, HANA & BOE
o Integrates seamlessly with the existing Givaudan BI architecture based on BW, HANA, BI4 and SLT.
1. Who is Givaudan ?
2. The project, context and expected benefits
3. Why SAP Design Studio was selected
4. The BI systems architecture
5. Using CSS for Design Customizing
6. Using the SDK to add custom functionality
7. Lessons learned
8. Q&A
Confidential and proprietary business information of Givaudan 18
Agenda
Confidential and proprietary business information of Givaudan 19
BI Systems Architecture
How SAP Design Studio Integrates in the BI Architecture
SQL Database
External QIC data
SAP ECC
Quality & Manufacturing data
SLT Server
Real Time replication
BW
HANA Database
BI4
Real Time data replication of business
critical data via SLT
Daily replication of non critical data via
standard BW extractors
SLT data loaded directly to HANA tables in
SLT Schemas
"Published" in BW via HANA calculations
views and Virtual cubes. Mixed scenario
The Design Studio Application is deployed
on the BI4 platform
Design Studio Application runtime on any
HTML5 enabled web browser
Design Tool on Windows PC 32/64 bit
Mac/PC or Mobile
Confidential and proprietary business information of Givaudan 20
BI Systems Architecture
BW & HANA Mixed scenario design principle
Data Tables
HANA Views
Virtual Cube
HANA
BW
SLT Schema
BW Schema
Info Cube
Multi provider
1. Who is Givaudan ?
2. The project, context and expected benefits
3. Why SAP Design Studio was selected
4. The BI systems architecture
5. Using CSS for Design Customizing
6. Using the SDK to add custom functionality
7. Lessons learned
8. Q&A
Confidential and proprietary business information of Givaudan 21
Agenda
Confidential and proprietary business information of Givaudan 22
Using CSS for Design Customizing
A Well-known Web Standard
You see it every day!
Any webpage layout, mobile or desktop, is based on the CSS technology.
CSS source code
Confidential and proprietary business information of Givaudan 23
Using CSS for Design Customizing
A Well-known Web Standard
A mature, powerful and reliable technology
CSS has been around for almost 2 decades
Accepted by all browsers
Easy to maintain
Cover a large range of styling features
– Colors
– Fonts
– Element Sizes
– Position on page
Constantly evolving:
– Animations
– Shades / gradient
– Canvas styling
Confidential and proprietary business information of Givaudan 24
Using CSS for Design Customizing
A powerful tool for SAP reporting applications
Integration in SAP
SAP is now integrating CSS in every new reporting application:
SAP Fiori
SAPUI5
SAP Design Studio
Thus enabling the designers to reuse templates and features among multiple applications
Enable to deploy corporate designs at minimum costs
Easier maintenance
Confidential and proprietary business information of Givaudan 25
Using CSS for Design Customizing
Implementation in Design Studio
Give a corporate look to all Design Studio Applications
Share the same styling sheet among all applications:
Create a dedicated folder to store all styling files: CSS, but also fonts and images
Create a reference to the main file of this folder from all Design Studio applications:
Attention !
– A modification to this corporate template files have an impact on all applications
Confidential and proprietary business information of Givaudan 26
Using CSS for Design Customizing
Implementation in Design Studio
CSS Tree Implementation
Link the DS Applications to the Main file, which in turn calls sub-elements
Main
Mobile.css Blue Theme
Blue logo
Green Theme
Green Logo
Corporate Font
A clean file structure to ease maintenance
Each sub file inherit from the parent styling properties
E.g. Define a common layout for all crosstabs (width, font, borders, …) and then only change the font color in the blue and green theme files
A media-oriented styling: Mobile, Desktop, Printing
For instance, remove the header and footer when printing an application to optimize the chart area
Use LESS to combine all files to improve performances
Design StudioDesign StudioDesign Studio
Applications
Confidential and proprietary business information of Givaudan 27
Using CSS for Design Customizing
Implementation in Design Studio
CSS within Design Studio
SAP offers several customizations
On all standard components, a CSS class can be added
– A CSS Class is defined in the CSS files. A class can be assigned to any number of components. All components assigned with the same class will have the same look and feel
– All standard components have been assigned a default class by SAP. This class name can be reused and its content rewritten
On some components, a direct styling can be input
– Direct styling enables the designer to set a style for a specific component (e.g. a text box). It cannot be applied to any other components. To be avoided in most cases
– Direct styling can be combined with a CSS Class. If there is conflicting styling, the Direct Styling will prevail
Confidential and proprietary business information of Givaudan 28
Using CSS for Design Customizing
Business Case
Design Studio Templates
The objective is double
Be able to use a template with a minimum of manual activities
Produce a scaling template for various reporting needs
Main Panel
Filters Charts
A class name has been added to the main panel, and the style is cascading to all sub-elements in the application using the standard SAP component class names (valid for any DS application)
For elements with a unique design, a specific class can be created, and can be reused in other dashboards with the same requirements *
Confidential and proprietary business information of Givaudan 29
Using CSS for Design Customizing
Business Requirements
Corporate Design Studio Template
The Corporate Branding team deployed over a dozen branding logos and themes for all kind of communications methods.
The goal was to represent the company's variety of product and skills.
This variety had to be reflected in the Design Studio applications.
8 colored themes
– A common look & feel validated by the branding team
– 8 colored sub-themes including a unique set of images
Using CSS for Design Customizing
The QIC Application
1. Who is Givaudan ?
2. The project, context and expected benefits
3. Why SAP Design Studio was selected
4. The BI systems architecture
5. Using CSS for Design Customizing
6. Using the SDK to add custom functionality
7. Lessons learned
8. Q&A
Confidential and proprietary business information of Givaudan 31
Agenda
Confidential and proprietary business information of Givaudan 32
Using the SDK to add custom functionality
Use Case
Covering a specific need
An extension fulfill a specific requirement that Design Studio is not (yet) covering
An extra type of chart
Animations / navigation steps
Integration with another technology
An extension is viewed as a “custom component” in Design Studio
Confidential and proprietary business information of Givaudan 33
Using the SDK to add custom functionality
Required tools & knowledge
A web-oriented tool
An extension is powered by the standard web programming languages
Animation: event catching: jQuery, a javascript framework
Integration with Design Studio: Javascript-based librairies
Styling: CSS
Confidential and proprietary business information of Givaudan 34
Using the SDK to add custom functionality
Creating & deploying an application
Adding a extension to the BI platform
Steps to build a new extension
Eclipse JEE
– Create an extension using the SAP template in Eclipse JEE
– Build a feature and export the application
Design Studio
– Deploy locally and include the new component to a Design Studio application
– Export / upgrade on the BI platform for everyone to use
Develop in Eclipse JEE
Test in Design Studio
Deploy on the BI platform
Confidential and proprietary business information of Givaudan 35
Using the SDK to add custom functionality
Business Requirements
Design Studio Extension
A corporate QIC team needed the ability to add some comments on a Design Studio application:
Highlights
Upcoming actions
These comments are shared among the community and context-oriented:
Report Month
World Region
Report Type
Confidential and proprietary business information of Givaudan 36
Using the SDK to add custom functionality
The QIC Application
Web DynPro to write contextual comments
1. Who is Givaudan ?
2. The project, context and expected benefits
3. Why SAP Design Studio was selected
4. The BI systems architecture
5. Using CSS for Design Customizing
6. Using the SDK to add custom functionality
7. Lessons learned
8. Q&A
Confidential and proprietary business information of Givaudan 37
Agenda
Confidential and proprietary business information of Givaudan 38
• Define the design charter, create story boards and application mock-ups to simulate end-user experience before starting the build.
• Design Studio offers endless design opportunities, easy to get "lost" in the design during build.
• Query optimization end execution plan is important (We used BEx queries as data sources)
• Use the "&PROFILING=X" string for debugging and performance optimisation.
• Global script object are very useful to reduce development time (and maintenance) ... reuse of global objects, called from within the script.
Lessons Learned
Confidential and proprietary business information of Givaudan 39
• There no official library for the CSS objects ... the CSS objects & syntax varies depending on which basic theme is chosen
• Blue Crystal is now the most used ... no longer Platinum
• The Script function library is good, but certain essential functions are still missing like "Transform to uppercase".
Lessons Learned
1. Who is Givaudan ?
2. The project, context and expected benefits
3. Why SAP Design Studio was selected
4. The BI systems architecture
5. Using CSS for Design Customizing
6. Using the SDK to add custom functionality
7. Lessons learned
8. Q&A
Confidential and proprietary business information of Givaudan 40
Agenda
Confidential and proprietary business information of Givaudan 41
Q&A
Thank you
Contact
Jaques Freynet – GivaudanJohn Nurminen - Planeum