You are on page 1of 27

run()

UX123 – Build a Compelling


UX with 3D and Map
Visualization in SAP Fiori

Public
Speakers

Las Vegas, Sept 19 - 23 Bangalore, October 5 - 7 Barcelona, Nov 8 - 10

Mark Doberenz Nikhil Javaraju Victor Wündisch

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 2


Disclaimer

The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of
SAP. Except for your obligation to protect confidential information, this presentation is not subject to your license agreement or
any other service or subscription agreement with SAP. SAP has no obligation to pursue any course of business outlined in this
presentation or any related document, or to develop or release any functionality mentioned therein.

This presentation, or any related document and SAP's strategy and possible future developments, products and or platforms
directions and functionality are all subject to change and may be changed by SAP at any time for any reason without notice.
The information in this presentation is not a commitment, promise or legal obligation to deliver any material, code or functionality.
This presentation 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. This presentation is for informational
purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this
presentation, except if such damages were caused by SAP’s intentional or gross negligence.

All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially
from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only
as of their dates, and they should not be relied upon in making purchasing decisions.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 3


Abstract

Customers in product- and asset-intensive industries think in real-world 3D objects, not tables and
transactions.

This lecture shows how to provide an intuitive user experience with 3D or mapping in your SAP Fiori
application using the SAP Visual Interaction toolkit. This is surprisingly easy to do and delivers a
compelling user experience for customers.

See how interactive models improve user understanding and decision making, and learn how to get
started building applications.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 4


SAP products
Already visual for ~10 years

© 2016 SAP SE or an SAP affiliate company. All rights reserved. 5


Map and 3D based visualizations in SAP Fiori

SAP Visual Business (available in UI5 since v1.26)

SAP Visual Interaction Toolkit (available in UI5 since v1.32)

UI5 1.28 1.38 1.42

VB 1.28 1.38 1.42

VIT 1.32 1.38 1.42

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 6


SAPUI5
SAP LICENSE
Includes usage of VB & VIT
Potential extra costs
for map provider
OpenUI5
OPEN SOURCE (APACHE
LICENSE 2.0)
Visual You need to buy
OEM license for usage of VB
Business &
Map
provider + Visual
Interaction
OEM
Toolkit
+ Visual
Business

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


Example: minimalistic Use of 3D Viewer and map

<App>
<vk:Viewer id="Viewer" width="100%" height="100%">
<vk:ContentResource source="/webapp/screw.vds” sourceType="vds" sourceId="1" />
</vk:Viewer>
sap.ui.vk.Viewer
</App>

<App>

<vbm:GeoMap initialPosition="141.2631503;-29.9794937;0" initialZoom="4"
id="VBISelection" width="100%" height="100%">
<vbm:Spots items="{/Spots}">
<vbm:Spot position="{pos}" tooltip="{tooltip}" type="{type}" select="{select}”
sap.ui.vbm.
</vbm:Spots>
selectColor="RHLSA(0;1.0;3.0;1.0)" click="onSpotClick" />
GeoMap
</vbm:GeoMap>

</App>

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 8


Example: How to configure a map in GeoMap control

var oMapConfig = {
"MapProvider": [{
"name": "MAPS","type": "", "description": "", "tileX": "256","tileY": "256",
"maxLOD": "19",
"copyright": "Maps 2016",
"Source": [{"id": "s1","url": "https://mapurl/{LOD}/{X}/{Y}?authtokens" } ]
}],
"MapLayerStacks": [{
"name": "Default",
"MapLayer": {
"name": "layer1",
"refMapProvider": "MAPS",
"opacity": "1.0", Map
"colBkgnd": "RGB(255,255,255)"
}
configuration
}]
};
this.oGeoMap.setMapConfiguration(oMapConfig);

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 9


Example: How to find a node in 3D scene

var scene = viewer.getScene();


var vsm = viewer.getViewStateManager();
var nodeInfo = scene.getDefaultNodeHierarchy();

nodeInfo.enumerateChildren(null, function(pnode) {
var name = pnode.getName();
if (name == ”Name of node to find") {
nodeToGet = pnode.getNodeId();
}
});

var nodeProxy = nodeInfo.createNodeProxy(nodeToGet);


nodeProxy.setTintColorABGR(3221225727); Access to 3D
nodeProxy.setWorldMatrix();
nodeProxy.setLocalMatrix():
scene
nodeProxy.setOpacity();

nodeProxy.getVeIds(); // readonly
nodeProxy.getNodeMetadata();

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 10


Demo

Combined UI5 app with map and 3D

Public
Cloud for real estate, latest adopter

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 12


Cloud for real estate, latest adopter

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 13


Transforming information in sporting events

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 14


SAP Asset Intelligence Network, latest productive adopter

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 15


Improved documentation for SAP Visual Business

SAP UI5 explored app Visual Business Visual Business


 Filter for „Map“ best practices SAP Fiori app samples
 Examples for analytic map and  Ramping up knowledge  Most requested use cases
geo map  Target group: first timers  Elegant UI5 solutions

Spark interest 0-100 knowledge 100+ knowledge

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 16


Improved documentation for SAP Visual Interaction Toolkit

SAP UI5 explored app Developer guide for Visual Interaction Toolkit
 Filter for „3D“  Tutorials for building custom 3D scenarios
 Examples for loading a file in the 3D viewer

0-100 knowledge 100+ knowledge

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 17


Current deliveries map container in Visual Interaction Toolkit

First version was delivered with


SAPUI5 1.38

Controls
toolbar,
scene tree,
analytical map

Map container

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 18


Current deliveries 3D Viewer in Visual Interaction Toolkit

First version was delivered with


SAPUI5 1.32

Controls
viewport,
scene tree,
step ctrl

Composite control
viewer

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 19


Demo

UI5 explored and development guide in SAP UI5 specific to 3D and maps

Public
Roadmap

Next releases for Visual Interaction Toolkit:

1. 3D Dynamic Objects
2. Map container for usage in interactive scenarios
3. Maps in SAP Fiori elements (Overviewpage)

VB 1.28 1.38

VIT 1.32 1.38

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 21


Roadmap ahead – Visual Interaction Toolkit for maps

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 22


Roadmap ahead – Visual Interaction Toolkit for 3D

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 23


SAP TechEd Online

Continue your SAP TechEd


education after the event!
Access replays of
 Keynotes
 Demo Jam
 SAP TechEd live interviews
 Select lecture sessions
 Hands-on sessions
 …

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 24


Further information

SAP UI5 Documentation


https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ui.vbm.html
https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ui.vk.html

SAP Public Web


http://scn.sap.com/community/visual-business
http://scn.sap.com/community/visual-enterprise

Watch SAP TechEd Online


www.sapteched.com/online

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 25


Feedback
Contact information:
Mark Doberenz
Please complete your mark.doberenz@sap.com

session evaluation for UX123 Nikhil Javaraju


nikhil.javaraju@sap.com

Product Owner
Victor Wündisch
victor.wuendisch@sap.com

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 26


© 2016 SAP SE or an SAP affiliate company. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://www.sap.com/corporate-en/about/legal/copyright/index.html for additional trademark information and notices.

Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company products and
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as
constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop
or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

© 2016 SAP SE or an SAP affiliate company. All rights reserved. Public 27