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

ContainersAn 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

© 2015 SAP SE or an SAP affiliate company. All rights reserved. 7Public

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

}

+

=


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>

=

=


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" }

} }, // ...onAfterRendering : function() {

var aData = this.getBinding("data").getContexts().map(function(oContext) { return oContext.getObject();

}); // d3.js rendering logic

} });


data : { path: '/data' } }); oControl.setModel(oModel);


data : { path: '/data', template : new sap.ui.base.ManagedObject() } }); oControl.setModel(oModel);


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


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

}


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

}


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


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

Technology

Building Custom Controls to Visualize Data (UI5Con 2016 Frankfurt)