Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)

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.

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

Scenario Description
Port operator
Containers equipped with sensors
 Protect against theft
 Track damage
 Maintain cold chain

Technical Setup

Public
Visualizations in SAPUI5

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>
</svg>
rect {
fill: rgb(240,171,0);
}
+
=

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>
</svg>
=
=

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

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>

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)/*...*/;
}
});

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);

Code Sample for Integrating D3.js Data Binding with SAPUI5
Control.extend("CustomChart", {
metadata : {
aggregations : {
data : { type : "sap.ui.base.ManagedObject" }
}
},
// ...
var aData = this.getBinding("data").getContexts().map(function(oContext) {
return oContext.getObject();
});
// d3.js rendering logic
}
});
data : { path: '/data' }
});
data : { path: '/data', template : new sap.ui.base.ManagedObject() }
});

Using Theme Parameters
Benefits
 Consistent with theme
 Leverage color dependencies
Example
Hint
sap.ui.core.theming.Parameters.get() returns all parameters
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); });
}

Make It Responsive
Benefits
 Enable control for different screen sizes
 Improve user experience per device
Example
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
}

Re-rendering from Scratch
Problem
DOM operations expensive
HTML control retains DOM
No re-render required
Recommended pattern
if (this.bSetupDone !== true) {
// create static parts like axis, backgrounds, etc.
this.bSetupDone = true;
}
// update the moving parts
}

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
Containers
Let’s Look Behind the Scenes

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!

Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)

Recommended

More Related Content

What's hot (18)

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

Recently uploaded (20)

Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)