SlideShare a Scribd company logo

Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)

Maximilian Lenkeit
Maximilian LenkeitSenior Developer, SAP Custom Development at SAP

Slides for my lecture called"Building Custom Controls to Visualize Data" at UI5Con 2016 in Frankfurt, Germany.

Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)

Maximilian Lenkeit
Maximilian LenkeitSenior Developer, SAP Custom Development at SAP

Slides for my lecture called"Building Custom Controls to Visualize Data" at UI5Con 2016 in Frankfurt, Germany.

Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)

1 of 23
Download to read offline
Public
Building Custom Controls to Visualize Data
Maximilian Lenkeit
@mlenkeit
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 2Public@mlenkeit
Disclaimer
This presentation outlines our general product direction and should not be relied on in making a
purchase decision. This presentation is not subject to your license agreement or any other agreement
with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to
develop or release any functionality mentioned in this presentation. This presentation and SAP's
strategy and possible future developments are subject to change and may be changed by SAP at any
time for any reason without notice. This document 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. SAP assumes no responsibility for errors or omissions in this
document, except if such damages were caused by SAP intentionally or grossly negligent.
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 3Public@mlenkeit
Agenda
Introduction
Example: Connected Shipping Containers
Visualizations in SAPUI5
Key Takeaways
Public
Connected Shipping
Containers
An Example for Custom Visualizations in SAP Fiori-like Apps
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 5Public@mlenkeit
Scenario Description
Port operator
Containers equipped with sensors
 Protect against theft
 Track damage
 Maintain cold chain
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 6Public@mlenkeit
Technical Setup

Recommended

UI5 Controls (UI5con 2016)
UI5 Controls (UI5con 2016)UI5 Controls (UI5con 2016)
UI5 Controls (UI5con 2016)Andreas Kunz
 
Build responsive enterprise-grade web apps with OpenUI5
Build responsive enterprise-grade web apps with OpenUI5Build responsive enterprise-grade web apps with OpenUI5
Build responsive enterprise-grade web apps with OpenUI5Andreas Kunz
 
OSCON 2014: OpenUI5 - The New Responsive Web UI Library
OSCON 2014: OpenUI5 - The New Responsive Web UI LibraryOSCON 2014: OpenUI5 - The New Responsive Web UI Library
OSCON 2014: OpenUI5 - The New Responsive Web UI LibraryAndreas Kunz
 
UI5con 2018: News from Control Development
UI5con 2018: News from Control DevelopmentUI5con 2018: News from Control Development
UI5con 2018: News from Control DevelopmentAndreas Kunz
 
UI5con 2017 - Create your own UI5 controls – what’s coming up
UI5con 2017 - Create your own UI5 controls – what’s coming upUI5con 2017 - Create your own UI5 controls – what’s coming up
UI5con 2017 - Create your own UI5 controls – what’s coming upAndreas Kunz
 
2018 UI5con Drag-and-Drop Concept
2018 UI5con Drag-and-Drop Concept2018 UI5con Drag-and-Drop Concept
2018 UI5con Drag-and-Drop Conceptaborjinik
 
Angular js best practice
Angular js best practiceAngular js best practice
Angular js best practiceMatteo Scandolo
 
Introduction to Android Programming
Introduction to Android ProgrammingIntroduction to Android Programming
Introduction to Android ProgrammingRaveendra R
 

More Related Content

What's hot

Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework Sakthi Bro
 
Overview about AngularJS Framework
Overview about AngularJS Framework Overview about AngularJS Framework
Overview about AngularJS Framework Camilo Lopes
 
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish MinutesDan Wahlin
 
JavaScript Patterns and Principles
JavaScript Patterns and PrinciplesJavaScript Patterns and Principles
JavaScript Patterns and PrinciplesAaronius
 
Intro to AngularJS
Intro to AngularJSIntro to AngularJS
Intro to AngularJSAaronius
 
Introduction to Angular js 2.0
Introduction to Angular js 2.0Introduction to Angular js 2.0
Introduction to Angular js 2.0Nagaraju Sangam
 
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Nicolás Bouhid
 
The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS OrisysIndia
 
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017Joke Puts
 
Dicoding Developer Coaching #21: Android | Cara Membuat Widget di Aplikasi An...
Dicoding Developer Coaching #21: Android | Cara Membuat Widget di Aplikasi An...Dicoding Developer Coaching #21: Android | Cara Membuat Widget di Aplikasi An...
Dicoding Developer Coaching #21: Android | Cara Membuat Widget di Aplikasi An...DicodingEvent
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular jscodeandyou forums
 
Fast Prototyping Strategies for UI design
Fast Prototyping Strategies for UI designFast Prototyping Strategies for UI design
Fast Prototyping Strategies for UI designLuis Daniel Rodriguez
 
Manipulating Magento - Meet Magento Belgium 2017
Manipulating Magento - Meet Magento Belgium 2017Manipulating Magento - Meet Magento Belgium 2017
Manipulating Magento - Meet Magento Belgium 2017Joke Puts
 

What's hot (18)

Why angular js Framework
Why angular js Framework Why angular js Framework
Why angular js Framework
 
Android Materials Design
Android Materials Design Android Materials Design
Android Materials Design
 
AngularJS Best Practices
AngularJS Best PracticesAngularJS Best Practices
AngularJS Best Practices
 
Overview about AngularJS Framework
Overview about AngularJS Framework Overview about AngularJS Framework
Overview about AngularJS Framework
 
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish Minutes
 
JavaScript Patterns and Principles
JavaScript Patterns and PrinciplesJavaScript Patterns and Principles
JavaScript Patterns and Principles
 
Intro to AngularJS
Intro to AngularJSIntro to AngularJS
Intro to AngularJS
 
Introduction to Angular js 2.0
Introduction to Angular js 2.0Introduction to Angular js 2.0
Introduction to Angular js 2.0
 
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
Ajax on drupal the right way - DrupalCamp Campinas, São Paulo, Brazil 2016
 
Discover AngularJS
Discover AngularJSDiscover AngularJS
Discover AngularJS
 
The Basics Angular JS
The Basics Angular JS The Basics Angular JS
The Basics Angular JS
 
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
Introduction to Magento 2 module development - PHP Antwerp Meetup 2017
 
Dicoding Developer Coaching #21: Android | Cara Membuat Widget di Aplikasi An...
Dicoding Developer Coaching #21: Android | Cara Membuat Widget di Aplikasi An...Dicoding Developer Coaching #21: Android | Cara Membuat Widget di Aplikasi An...
Dicoding Developer Coaching #21: Android | Cara Membuat Widget di Aplikasi An...
 
Different way to share data between controllers in angular js
Different way to share data between controllers in angular jsDifferent way to share data between controllers in angular js
Different way to share data between controllers in angular js
 
Fast Prototyping Strategies for UI design
Fast Prototyping Strategies for UI designFast Prototyping Strategies for UI design
Fast Prototyping Strategies for UI design
 
Manipulating Magento - Meet Magento Belgium 2017
Manipulating Magento - Meet Magento Belgium 2017Manipulating Magento - Meet Magento Belgium 2017
Manipulating Magento - Meet Magento Belgium 2017
 
Angular Seminar-js
Angular Seminar-jsAngular Seminar-js
Angular Seminar-js
 
AngularJS Framework
AngularJS FrameworkAngularJS Framework
AngularJS Framework
 

Similar to Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)

Dmm212 – Sap Hana Graph Processing
Dmm212 – Sap Hana  Graph ProcessingDmm212 – Sap Hana  Graph Processing
Dmm212 – Sap Hana Graph ProcessingLuc Vanrobays
 
Java Script Isn\'t a Toy Anymore
Java Script Isn\'t a Toy AnymoreJava Script Isn\'t a Toy Anymore
Java Script Isn\'t a Toy AnymoreAlexis Williams
 
7 Habits of Highly Efficient Visualforce Pages
7 Habits of Highly Efficient Visualforce Pages7 Habits of Highly Efficient Visualforce Pages
7 Habits of Highly Efficient Visualforce PagesSalesforce Developers
 
Integrate Sas With Google Maps
Integrate Sas With Google MapsIntegrate Sas With Google Maps
Integrate Sas With Google Mapsvineetkaul
 
Introduction to the Wave Platform API
Introduction to the Wave Platform APIIntroduction to the Wave Platform API
Introduction to the Wave Platform APISalesforce Developers
 
SAP HANA SPS09 - XS Programming Model
SAP HANA SPS09 - XS Programming ModelSAP HANA SPS09 - XS Programming Model
SAP HANA SPS09 - XS Programming ModelSAP Technology
 
What's New in SAP HANA SPS 11 DB Control Center (Operations)
What's New in SAP HANA SPS 11 DB Control Center (Operations)What's New in SAP HANA SPS 11 DB Control Center (Operations)
What's New in SAP HANA SPS 11 DB Control Center (Operations)SAP Technology
 
Rails 6 frontend frameworks
Rails 6 frontend frameworksRails 6 frontend frameworks
Rails 6 frontend frameworksEric Guo
 
ITCamp 2018 - Magnus Mårtensson - Azure Resource Manager For The Win
ITCamp 2018 - Magnus Mårtensson - Azure Resource Manager For The WinITCamp 2018 - Magnus Mårtensson - Azure Resource Manager For The Win
ITCamp 2018 - Magnus Mårtensson - Azure Resource Manager For The WinITCamp
 
C13,C33,A35 アプリケーション開発プラットフォームとしてのSAP HANA by Makoto Sugishita
C13,C33,A35 アプリケーション開発プラットフォームとしてのSAP HANA by Makoto SugishitaC13,C33,A35 アプリケーション開発プラットフォームとしてのSAP HANA by Makoto Sugishita
C13,C33,A35 アプリケーション開発プラットフォームとしてのSAP HANA by Makoto SugishitaInsight Technology, Inc.
 
GlueCon 2016 - Threading in JavaScript
GlueCon 2016 - Threading in JavaScriptGlueCon 2016 - Threading in JavaScript
GlueCon 2016 - Threading in JavaScriptJonathan Baker
 
Automate your Amazon SageMaker Workflows (July 2019)
Automate your Amazon SageMaker Workflows (July 2019)Automate your Amazon SageMaker Workflows (July 2019)
Automate your Amazon SageMaker Workflows (July 2019)Julien SIMON
 
SMC304 Serverless Orchestration with AWS Step Functions
SMC304 Serverless Orchestration with AWS Step FunctionsSMC304 Serverless Orchestration with AWS Step Functions
SMC304 Serverless Orchestration with AWS Step FunctionsAmazon Web Services
 
Dynamic Data Visualization With Chartkick
Dynamic Data Visualization With ChartkickDynamic Data Visualization With Chartkick
Dynamic Data Visualization With ChartkickDax Murray
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Eliran Eliassy
 
Lessons Learned Using Apache Spark for Self-Service Data Prep in SaaS World
Lessons Learned Using Apache Spark for Self-Service Data Prep in SaaS WorldLessons Learned Using Apache Spark for Self-Service Data Prep in SaaS World
Lessons Learned Using Apache Spark for Self-Service Data Prep in SaaS WorldDatabricks
 
"Lessons learned using Apache Spark for self-service data prep in SaaS world"
"Lessons learned using Apache Spark for self-service data prep in SaaS world""Lessons learned using Apache Spark for self-service data prep in SaaS world"
"Lessons learned using Apache Spark for self-service data prep in SaaS world"Pavel Hardak
 

Similar to Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt) (20)

Dmm212 – Sap Hana Graph Processing
Dmm212 – Sap Hana  Graph ProcessingDmm212 – Sap Hana  Graph Processing
Dmm212 – Sap Hana Graph Processing
 
Java Script Isn\'t a Toy Anymore
Java Script Isn\'t a Toy AnymoreJava Script Isn\'t a Toy Anymore
Java Script Isn\'t a Toy Anymore
 
7 Habits of Highly Efficient Visualforce Pages
7 Habits of Highly Efficient Visualforce Pages7 Habits of Highly Efficient Visualforce Pages
7 Habits of Highly Efficient Visualforce Pages
 
Integrate Sas With Google Maps
Integrate Sas With Google MapsIntegrate Sas With Google Maps
Integrate Sas With Google Maps
 
Introduction to the Wave Platform API
Introduction to the Wave Platform APIIntroduction to the Wave Platform API
Introduction to the Wave Platform API
 
SAP HANA SPS09 - XS Programming Model
SAP HANA SPS09 - XS Programming ModelSAP HANA SPS09 - XS Programming Model
SAP HANA SPS09 - XS Programming Model
 
What's New in SAP HANA SPS 11 DB Control Center (Operations)
What's New in SAP HANA SPS 11 DB Control Center (Operations)What's New in SAP HANA SPS 11 DB Control Center (Operations)
What's New in SAP HANA SPS 11 DB Control Center (Operations)
 
Rails 6 frontend frameworks
Rails 6 frontend frameworksRails 6 frontend frameworks
Rails 6 frontend frameworks
 
ITCamp 2018 - Magnus Mårtensson - Azure Resource Manager For The Win
ITCamp 2018 - Magnus Mårtensson - Azure Resource Manager For The WinITCamp 2018 - Magnus Mårtensson - Azure Resource Manager For The Win
ITCamp 2018 - Magnus Mårtensson - Azure Resource Manager For The Win
 
C13,C33,A35 アプリケーション開発プラットフォームとしてのSAP HANA by Makoto Sugishita
C13,C33,A35 アプリケーション開発プラットフォームとしてのSAP HANA by Makoto SugishitaC13,C33,A35 アプリケーション開発プラットフォームとしてのSAP HANA by Makoto Sugishita
C13,C33,A35 アプリケーション開発プラットフォームとしてのSAP HANA by Makoto Sugishita
 
GlueCon 2016 - Threading in JavaScript
GlueCon 2016 - Threading in JavaScriptGlueCon 2016 - Threading in JavaScript
GlueCon 2016 - Threading in JavaScript
 
AppSync and GraphQL on iOS
AppSync and GraphQL on iOSAppSync and GraphQL on iOS
AppSync and GraphQL on iOS
 
Automate your Amazon SageMaker Workflows (July 2019)
Automate your Amazon SageMaker Workflows (July 2019)Automate your Amazon SageMaker Workflows (July 2019)
Automate your Amazon SageMaker Workflows (July 2019)
 
Vaadin Components
Vaadin ComponentsVaadin Components
Vaadin Components
 
SMC304 Serverless Orchestration with AWS Step Functions
SMC304 Serverless Orchestration with AWS Step FunctionsSMC304 Serverless Orchestration with AWS Step Functions
SMC304 Serverless Orchestration with AWS Step Functions
 
Dynamic Data Visualization With Chartkick
Dynamic Data Visualization With ChartkickDynamic Data Visualization With Chartkick
Dynamic Data Visualization With Chartkick
 
Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics Angular server side rendering - Strategies & Technics
Angular server side rendering - Strategies & Technics
 
Lessons Learned Using Apache Spark for Self-Service Data Prep in SaaS World
Lessons Learned Using Apache Spark for Self-Service Data Prep in SaaS WorldLessons Learned Using Apache Spark for Self-Service Data Prep in SaaS World
Lessons Learned Using Apache Spark for Self-Service Data Prep in SaaS World
 
"Lessons learned using Apache Spark for self-service data prep in SaaS world"
"Lessons learned using Apache Spark for self-service data prep in SaaS world""Lessons learned using Apache Spark for self-service data prep in SaaS world"
"Lessons learned using Apache Spark for self-service data prep in SaaS world"
 
SLDS and Lightning Components
SLDS and Lightning ComponentsSLDS and Lightning Components
SLDS and Lightning Components
 

Recently uploaded

Feet2Fit presentation for Centrale Supélec
Feet2Fit presentation for Centrale SupélecFeet2Fit presentation for Centrale Supélec
Feet2Fit presentation for Centrale Supélecludovicoformentini
 
iBusiness Corporation's Corporate Presentation 2024
iBusiness Corporation's Corporate Presentation 2024iBusiness Corporation's Corporate Presentation 2024
iBusiness Corporation's Corporate Presentation 2024Thanisorn Sukontapongpow
 
Acumatica - ERP for Manufacturing slides
Acumatica - ERP for Manufacturing slidesAcumatica - ERP for Manufacturing slides
Acumatica - ERP for Manufacturing slidesBrainSell Technologies
 
Semiconductor supply chain in 2024
Semiconductor supply chain in 2024Semiconductor supply chain in 2024
Semiconductor supply chain in 2024Liveplex
 
Calicut MuleSoft Meetup Group - #13 Implementing One-Way and Two-Way SSL
Calicut MuleSoft Meetup Group - #13 Implementing One-Way and Two-Way SSLCalicut MuleSoft Meetup Group - #13 Implementing One-Way and Two-Way SSL
Calicut MuleSoft Meetup Group - #13 Implementing One-Way and Two-Way SSLAnoopRamachandran13
 
Practical ChatGPT From Use Cases to Prompt Engineering & Ethical Implications
Practical ChatGPT From Use Cases to Prompt Engineering & Ethical ImplicationsPractical ChatGPT From Use Cases to Prompt Engineering & Ethical Implications
Practical ChatGPT From Use Cases to Prompt Engineering & Ethical ImplicationsVijayananda Mohire
 
Solution Challenge Info Sessions 2024 | GDSC IITK
Solution Challenge Info Sessions 2024 | GDSC IITKSolution Challenge Info Sessions 2024 | GDSC IITK
Solution Challenge Info Sessions 2024 | GDSC IITKSahilSingh368445
 
Rewind Quiz 2024, Quiz Club NITW (2023 Edition)
Rewind Quiz 2024, Quiz Club NITW (2023 Edition)Rewind Quiz 2024, Quiz Club NITW (2023 Edition)
Rewind Quiz 2024, Quiz Club NITW (2023 Edition)Quiz Club NITW
 
Know the Ways BI Tools Help Increase Business Efficiency
Know the Ways BI Tools Help Increase Business EfficiencyKnow the Ways BI Tools Help Increase Business Efficiency
Know the Ways BI Tools Help Increase Business EfficiencyEasyReports
 
scale-model-slides.pptx
scale-model-slides.pptxscale-model-slides.pptx
scale-model-slides.pptxehclark63
 
Adam Housley CES 2024 Reflections- Bridging AI and Consumer Tech for a Connec...
Adam Housley CES 2024 Reflections- Bridging AI and Consumer Tech for a Connec...Adam Housley CES 2024 Reflections- Bridging AI and Consumer Tech for a Connec...
Adam Housley CES 2024 Reflections- Bridging AI and Consumer Tech for a Connec...Adam Housley
 
OpenID AuthZEN ALFA PEP-PDP Prior Art
OpenID AuthZEN ALFA PEP-PDP Prior ArtOpenID AuthZEN ALFA PEP-PDP Prior Art
OpenID AuthZEN ALFA PEP-PDP Prior ArtDavid Brossard
 
Webinar - Unleash AI power with MySQL and MindsDB
Webinar - Unleash AI power with MySQL and MindsDBWebinar - Unleash AI power with MySQL and MindsDB
Webinar - Unleash AI power with MySQL and MindsDBFederico Razzoli
 
IASW Storyboard (1).pptx
IASW Storyboard (1).pptxIASW Storyboard (1).pptx
IASW Storyboard (1).pptxehclark63
 
iasw-cad-drawings-FINAL.pptx
iasw-cad-drawings-FINAL.pptxiasw-cad-drawings-FINAL.pptx
iasw-cad-drawings-FINAL.pptxehclark63
 
Fundamentals of BI Report Testing - Module 2
Fundamentals of BI Report Testing - Module 2Fundamentals of BI Report Testing - Module 2
Fundamentals of BI Report Testing - Module 2MichaelCalabrese20
 
How GenAI will (not) change your business?
How GenAI will (not)  change your business?How GenAI will (not)  change your business?
How GenAI will (not) change your business?Marlon Dumas
 
Дастурлашга биринчи қадам
Дастурлашга биринчи қадамДастурлашга биринчи қадам
Дастурлашга биринчи қадамalikudratov
 
Easy path to machine learning (2023-2024)
Easy path to machine learning (2023-2024)Easy path to machine learning (2023-2024)
Easy path to machine learning (2023-2024)wesley chun
 

Recently uploaded (20)

Feet2Fit presentation for Centrale Supélec
Feet2Fit presentation for Centrale SupélecFeet2Fit presentation for Centrale Supélec
Feet2Fit presentation for Centrale Supélec
 
iBusiness Corporation's Corporate Presentation 2024
iBusiness Corporation's Corporate Presentation 2024iBusiness Corporation's Corporate Presentation 2024
iBusiness Corporation's Corporate Presentation 2024
 
Acumatica - ERP for Manufacturing slides
Acumatica - ERP for Manufacturing slidesAcumatica - ERP for Manufacturing slides
Acumatica - ERP for Manufacturing slides
 
Semiconductor supply chain in 2024
Semiconductor supply chain in 2024Semiconductor supply chain in 2024
Semiconductor supply chain in 2024
 
Calicut MuleSoft Meetup Group - #13 Implementing One-Way and Two-Way SSL
Calicut MuleSoft Meetup Group - #13 Implementing One-Way and Two-Way SSLCalicut MuleSoft Meetup Group - #13 Implementing One-Way and Two-Way SSL
Calicut MuleSoft Meetup Group - #13 Implementing One-Way and Two-Way SSL
 
Practical ChatGPT From Use Cases to Prompt Engineering & Ethical Implications
Practical ChatGPT From Use Cases to Prompt Engineering & Ethical ImplicationsPractical ChatGPT From Use Cases to Prompt Engineering & Ethical Implications
Practical ChatGPT From Use Cases to Prompt Engineering & Ethical Implications
 
Solution Challenge Info Sessions 2024 | GDSC IITK
Solution Challenge Info Sessions 2024 | GDSC IITKSolution Challenge Info Sessions 2024 | GDSC IITK
Solution Challenge Info Sessions 2024 | GDSC IITK
 
Rewind Quiz 2024, Quiz Club NITW (2023 Edition)
Rewind Quiz 2024, Quiz Club NITW (2023 Edition)Rewind Quiz 2024, Quiz Club NITW (2023 Edition)
Rewind Quiz 2024, Quiz Club NITW (2023 Edition)
 
Know the Ways BI Tools Help Increase Business Efficiency
Know the Ways BI Tools Help Increase Business EfficiencyKnow the Ways BI Tools Help Increase Business Efficiency
Know the Ways BI Tools Help Increase Business Efficiency
 
scale-model-slides.pptx
scale-model-slides.pptxscale-model-slides.pptx
scale-model-slides.pptx
 
Adam Housley CES 2024 Reflections- Bridging AI and Consumer Tech for a Connec...
Adam Housley CES 2024 Reflections- Bridging AI and Consumer Tech for a Connec...Adam Housley CES 2024 Reflections- Bridging AI and Consumer Tech for a Connec...
Adam Housley CES 2024 Reflections- Bridging AI and Consumer Tech for a Connec...
 
OpenID AuthZEN ALFA PEP-PDP Prior Art
OpenID AuthZEN ALFA PEP-PDP Prior ArtOpenID AuthZEN ALFA PEP-PDP Prior Art
OpenID AuthZEN ALFA PEP-PDP Prior Art
 
Webinar - Unleash AI power with MySQL and MindsDB
Webinar - Unleash AI power with MySQL and MindsDBWebinar - Unleash AI power with MySQL and MindsDB
Webinar - Unleash AI power with MySQL and MindsDB
 
IASW Storyboard (1).pptx
IASW Storyboard (1).pptxIASW Storyboard (1).pptx
IASW Storyboard (1).pptx
 
iasw-cad-drawings-FINAL.pptx
iasw-cad-drawings-FINAL.pptxiasw-cad-drawings-FINAL.pptx
iasw-cad-drawings-FINAL.pptx
 
social media ppt.pptx
social media ppt.pptxsocial media ppt.pptx
social media ppt.pptx
 
Fundamentals of BI Report Testing - Module 2
Fundamentals of BI Report Testing - Module 2Fundamentals of BI Report Testing - Module 2
Fundamentals of BI Report Testing - Module 2
 
How GenAI will (not) change your business?
How GenAI will (not)  change your business?How GenAI will (not)  change your business?
How GenAI will (not) change your business?
 
Дастурлашга биринчи қадам
Дастурлашга биринчи қадамДастурлашга биринчи қадам
Дастурлашга биринчи қадам
 
Easy path to machine learning (2023-2024)
Easy path to machine learning (2023-2024)Easy path to machine learning (2023-2024)
Easy path to machine learning (2023-2024)
 

Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)

  • 1. Public Building Custom Controls to Visualize Data Maximilian Lenkeit @mlenkeit
  • 2. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 2Public@mlenkeit Disclaimer This presentation outlines our general product direction and should not be relied on in making a purchase decision. This presentation is not subject to your license agreement or any other agreement with SAP. SAP has no obligation to pursue any course of business outlined in this presentation or to develop or release any functionality mentioned in this presentation. This presentation and SAP's strategy and possible future developments are subject to change and may be changed by SAP at any time for any reason without notice. This document 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. SAP assumes no responsibility for errors or omissions in this document, except if such damages were caused by SAP intentionally or grossly negligent.
  • 3. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 3Public@mlenkeit Agenda Introduction Example: Connected Shipping Containers Visualizations in SAPUI5 Key Takeaways
  • 4. Public Connected Shipping Containers An Example for Custom Visualizations in SAP Fiori-like Apps
  • 5. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 5Public@mlenkeit Scenario Description Port operator Containers equipped with sensors  Protect against theft  Track damage  Maintain cold chain
  • 6. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 6Public@mlenkeit Technical Setup
  • 7. © 2015 SAP SE or an SAP affiliate company. All rights reserved. 7Public
  • 9. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 9Public@mlenkeit Scalable Vector Graphics Similar to HTML  XML-based  CSS for styling Common shapes  Path  Circle  Rectangle  Group  … <svg> <rect width="20" height="90" x="0" transform="translate(0, 0)"></rect> <rect width="20" height="85" x="25" transform="translate(0, 5)"></rect> <rect width="20" height="80" x="50" transform="translate(0, 10)"></rect> </svg> rect { fill: rgb(240,171,0); } + =
  • 10. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 10Public@mlenkeit Open Source Library D3.js References  VizFrame  Hundreds of examples online Key Features  Low-level APIs  Data binding var selSvg = d3.select("#svg"); var aData = [ {x:30}, {x:25}, {x:20} ]; var selRects = selSvg.selectAll("rect").data(aData); selRects.enter().append("rect") .attr("width", 20) .attr("height", function(d) { return d.x; }) .attr("x", function(d, i) { return i * 25; }); <svg id="svg"> <rect width="20" height="30" x="0"></rect> <rect width="20" height="25" x="25"></rect> <rect width="20" height="20" x="50"></rect> </svg> = =
  • 11. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 11Public@mlenkeit Recommendations for Creating Visualizations in SAPUI5 Do’s  Wrap visualization into custom control  Integrate with SAPUI5 data binding  Use theme parameters  Make it responsive Don’ts  Re-render from scratch
  • 12. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 12Public@mlenkeit Wrapping Visualization Into Custom Control Benefits  Use in XML views  Leverage data binding  Reuse DOM Checklist  Use sap.ui.core.HTML to render a container  Render in container from onAfterRendering <Page title="Dashboard"> <custom:CustomChart ... /> </Page>
  • 13. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 13Public@mlenkeit Code Sample for Custom Control Skeleton Control.extend("CustomChart", { metadata : { aggregations : { _html : { type : "sap.ui.core.HTML", multiple : false, visibility : "hidden" } } }, init : function() { this._sContainerId = this.getId() + "--container"; this.setAggregation("_html", new sap.ui.core.HTML({ content : "<svg id='" + this._sContainerId + "'></svg>" })); }, renderer : function(oRm, oControl) { oRm.write("<div"); oRm.writeControlData(oControl); oRm.write(">"); oRm.renderControl(oControl.getAggregation("_html")); oRm.write("</div>"); }, onAfterRendering : function() { var aData = [ {x:30}, {x:25}, {x:20} ]; var selRects = d3.select("#" + this._sContainerId).selectAll("rect").data(aData); selRects.enter().append("rect").attr("width", 20)/*...*/; } });
  • 14. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 14Public@mlenkeit Integrating with SAPUI5 Data Binding What we’d like to do Benefits  Use with different data  Abstract data source  Standard sorting and filtering var oModel = new JSONModel({ data : [ {x:30}, {x:25}, {x:20} ] }); var oControl = new CustomChart({ data : { path: '/data' } }); oControl.setModel(oModel);
  • 15. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 15Public@mlenkeit Code Sample for Integrating D3.js Data Binding with SAPUI5 Control.extend("CustomChart", { metadata : { aggregations : { data : { type : "sap.ui.base.ManagedObject" } } }, // ... onAfterRendering : function() { var aData = this.getBinding("data").getContexts().map(function(oContext) { return oContext.getObject(); }); // d3.js rendering logic } }); var oModel = new JSONModel({ data : [ {x:30}, {x:25}, {x:20} ] }); var oControl = new CustomChart({ data : { path: '/data' } }); oControl.setModel(oModel); var oModel = new JSONModel({ data : [ {x:30}, {x:25}, {x:20} ] }); var oControl = new CustomChart({ data : { path: '/data', template : new sap.ui.base.ManagedObject() } }); oControl.setModel(oModel);
  • 16. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 16Public@mlenkeit Using Theme Parameters Benefits  Consistent with theme  Leverage color dependencies Example Hint sap.ui.core.theming.Parameters.get() returns all parameters onAfterRendering : function() { var aData = [ {x:30}, {x:25}, {x:20} ]; var selRects = d3.select("#" + this._sContainerId).selectAll("rect").data(aData); selRects.enter().append("rect").attr("width", 20)/*...*/ .attr("fill", function(d, i) { return sap.ui.core.theming.Parameters.get("sapUiChart" + i); }); }
  • 17. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 17Public@mlenkeit Make It Responsive Benefits  Enable control for different screen sizes  Improve user experience per device Example onAfterRendering : function() { this._sResizeHandlerId = sap.ui.core.ResizeHandler.register(this, jQuery.proxy(this._onResize, this)); }, onBeforeRendering : function() { sap.ui.core.ResizeHandler.deregister(this._sResizeHandlerId); }, exit : function() { sap.ui.core.ResizeHandler.deregister(this._sResizeHandlerId); }, _onResize : function(oEvent) { // oEvent.size.width // oEvent.size.height }
  • 18. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 18Public@mlenkeit Re-rendering from Scratch Problem DOM operations expensive HTML control retains DOM No re-render required Recommended pattern onAfterRendering : function() { if (this.bSetupDone !== true) { // create static parts like axis, backgrounds, etc. this.bSetupDone = true; } // update the moving parts }
  • 19. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 19Public@mlenkeit Recommendations for Creating Visualizations in SAPUI5 Do’s  Wrap visualization into custom control  Integrate with SAPUI5 data binding  Use theme parameters  Make it responsive Don’ts  Re-render from scratch
  • 22. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 22Public@mlenkeit Key Takeaways Custom visualizations  Easy to build and integrate with SAPUI5  Help to tailor an app to the user’s needs Try it yourself  Take the scaffold  Get creative!
  • 23. © 2015 SAP SE or an SAP affiliate company. All rights reserved. Thank you Contact information: Maximilian Lenkeit Senior Developer, SAP Custom Development Twitter: @mlenkeit