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

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

8. Public
Visualizations in SAPUI5

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

20. Public
Connected Shipping
Containers
Let’s Look Behind the Scenes

21. Public
Key Takeaways

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