Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 3Public@mlenkeit
Agenda
Introduction
Example: Connected Sh...
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
Contai...
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 6Public@mlenkeit
Technical Setup
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 7Public
Public
Visualizations in SAPUI5
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 9Public@mlenkeit
Scalable Vector Graphics
Similar to HTML
...
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 10Public@mlenkeit
Open Source Library D3.js
References
 V...
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 11Public@mlenkeit
Recommendations for Creating Visualizati...
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 12Public@mlenkeit
Wrapping Visualization Into Custom Contr...
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 13Public@mlenkeit
Code Sample for Custom Control Skeleton
...
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 14Public@mlenkeit
Integrating with SAPUI5 Data Binding
Wha...
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 15Public@mlenkeit
Code Sample for Integrating D3.js Data B...
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 16Public@mlenkeit
Using Theme Parameters
Benefits
 Consis...
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 17Public@mlenkeit
Make It Responsive
Benefits
 Enable con...
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 18Public@mlenkeit
Re-rendering from Scratch
Problem
DOM op...
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 19Public@mlenkeit
Recommendations for Creating Visualizati...
Public
Connected Shipping
Containers
Let’s Look Behind the Scenes
Public
Key Takeaways
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 22Public@mlenkeit
Key Takeaways
Custom visualizations
 Ea...
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Thank you
Contact information:
Maximilian Lenkeit
Senior D...
Upcoming SlideShare
Loading in …5
×

Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)

2,922 views

Published on

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

Published in: Technology

Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)

  1. 1. Public Building Custom Controls to Visualize Data Maximilian Lenkeit @mlenkeit
  2. 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. 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. 4. Public Connected Shipping Containers An Example for Custom Visualizations in SAP Fiori-like Apps
  5. 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. 6. © 2016 SAP SE or an SAP affiliate company. All rights reserved. 6Public@mlenkeit Technical Setup
  7. 7. © 2015 SAP SE or an SAP affiliate company. All rights reserved. 7Public
  8. 8. Public Visualizations in SAPUI5
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  20. 20. Public Connected Shipping Containers Let’s Look Behind the Scenes
  21. 21. Public Key Takeaways
  22. 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. 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

×