building custom controls to visualize data (ui5con 2016 frankfurt)
TRANSCRIPT
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
ContainersAn 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
© 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
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);
}
+
=
© 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>
=
=
© 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
© 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>
© 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)/*...*/;
} });
© 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);
© 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);
© 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); }); }
© 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
}
© 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
}
© 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
Public
Connected Shipping
ContainersLet’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
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!
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Thank you
Contact information:
Maximilian LenkeitSenior Developer, SAP Custom DevelopmentTwitter: @mlenkeit