Hacking the Explored App by Adding Custom Code (UI5con 2016)
Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)
-
Upload
maximilian-lenkeit -
Category
Technology
-
view
1.310 -
download
1
Transcript of Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)
![Page 1: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/1.jpg)
Public
Building Custom Controls to Visualize Data
Maximilian Lenkeit
@mlenkeit
![Page 2: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/2.jpg)
© 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.
![Page 3: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/3.jpg)
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 3Public@mlenkeit
Agenda
Introduction
Example: Connected Shipping Containers
Visualizations in SAPUI5
Key Takeaways
![Page 4: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/4.jpg)
Public
Connected Shipping
ContainersAn Example for Custom Visualizations in SAP Fiori-like Apps
![Page 5: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/5.jpg)
© 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
![Page 6: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/6.jpg)
© 2016 SAP SE or an SAP affiliate company. All rights reserved. 6Public@mlenkeit
Technical Setup
![Page 7: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/7.jpg)
© 2015 SAP SE or an SAP affiliate company. All rights reserved. 7Public
![Page 8: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/8.jpg)
Public
Visualizations in SAPUI5
![Page 9: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/9.jpg)
© 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);
}
+
=
![Page 10: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/10.jpg)
© 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>
=
=
![Page 11: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/11.jpg)
© 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
![Page 12: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/12.jpg)
© 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>
![Page 13: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/13.jpg)
© 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)/*...*/;
} });
![Page 14: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/14.jpg)
© 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);
![Page 15: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/15.jpg)
© 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);
![Page 16: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/16.jpg)
© 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); }); }
![Page 17: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/17.jpg)
© 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
}
![Page 18: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/18.jpg)
© 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
}
![Page 19: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/19.jpg)
© 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
![Page 20: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/20.jpg)
Public
Connected Shipping
ContainersLet’s Look Behind the Scenes
![Page 21: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/21.jpg)
Public
Key Takeaways
![Page 22: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/22.jpg)
© 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!
![Page 23: Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)](https://reader031.fdocuments.us/reader031/viewer/2022030302/587da1811a28ab22148b66b3/html5/thumbnails/23.jpg)
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Thank you
Contact information:
Maximilian LenkeitSenior Developer, SAP Custom DevelopmentTwitter: @mlenkeit