Analytical App Development

Adrian Streitz, Johannes Rank, Borys Levkovskyi

Prerequisites

• Fundamental programming skills

• Completion of the module SAPUI5

• Completion of the module OData

• Recommended: Completion of the module SAP Fiori

© 2018 SAP University Competence Center | Technical University of Munich 2

Agenda

I. Motivation
II. UI Controls for Simple Charts
a. Chart Container
b. Chart Types

III.Smart UI Controls
IV.Mockservers
I. Motivation

• Dashboards represent a common way of information visualization

• Cover aggregated information needed usually by middle and upper management
• Involve real-time data (KPIs, sensor data, …)
• Roll-up and drill-down functionality as must-have for multidimensional data (e.g. sales orders)

© 2018 SAP University Competence Center | Technical University of Munich 4

II. UI Controls for Simple Charts
Viz-Library Charts

• Displays data from data models

(JSON or OData)

• Supports different chart types:

line, column, pie, heatmap…

• Simple implementation – minimal need

for frontend programming if data
arrives in a correct form

© 2018 SAP University Competence Center | Technical University of Munich 5

II. UI Controls for Simple Charts
Viz-Library Charts – API
• setVizProperties() – configures texts for title, • setDataset() – performs data binding, requires a
category axis, and value axis special Object, FlattenedDataset, as a parameter

• addFeed() – ads a feed to a chart. AxisLabels and PrimaryValues are mandatory.

© 2018 SAP University Competence Center | Technical University of Munich 6

II. UI Controls for Simple Charts
Chart Container

• Provides functions for direct

interaction with the chart
• Basic functions
- zooming
- enable/disable legend
- full-screen mode

• Extendable with customized buttons

and other interface elements
according to your needs
• Charts need to be placed in the
container

© 2018 SAP University Competence Center | Technical University of Munich 7

II. UI Controls for Simple Charts
Chart Container – API

• Instantiated via constructor

• Constructor has an object of a type

ChartContainerContent as a
parameter

• ChartContainerContent instantiated
with icon (path), title (String), and
content (array of chart objects)

• Every standard container button has

its own visibility setter

• Is injected into another control (e.g. as

FlexContent of a FixFlex)

© 2018 SAP University Competence Center | Technical University of Munich 8

II. UI Controls for Simple Charts
Micro Chart

• Small layout size

• Supports all usual chart types, like

bar, column, pie, etc. *

• Usually used to depict a single KPI

• Integrable into Fiori Tiles

• No interaction with single chart

elements possible

 however the chart as a whole

may react to clicks (if not
integrated into a tile)
* https://experience.sap.com/fiori-design-web/chart-types/

© 2018 SAP University Competence Center | Technical University of Munich 9

II. UI Controls for Simple Charts
Network Graph

• Structural illustration of nodes and

connecting lines
 Good example – workflow
visualization (on the screenshot)
• Entire layout design customizable
• Child nodes can be expanded or
collapsed
• Group assignment of multiple nodes
• Minimal frontend programming
necessary

© 2018 SAP University Competence Center | Technical University of Munich 10

III. Smart UI Controls
Gantt Chart

• Illustration of a project plan (incl.

milestones)
• Bounded to a table and/or a tree map
• Self-adapting chart according to
expanded nodes of an underlying tree
map
• Very complex control
 Requires high programming effort
on the frontend side

© 2018 SAP University Competence Center | Technical University of Munich 11

Now you know the basics about the simple charts in UI5.
To consolidate your knowledge, you can do tasks 1 – 4 of the Analytical Apps Developemnt exercise.
III. Smart UI Controls
Smart Field / Smart Form

• Extended input help (not just simple

values, but various search
possibilities)

• Provides the user with the input help

like he is used to when working with
SAP GUI
• Special case: currency fields
 Currency that corresponds to a
selected value (e.g. flight price) is
loaded from the database without
the necessity to select it manually
• Usually grouped into smart forms

© 2018 SAP University Competence Center | Technical University of Munich 13

III. Smart UI Controls
Smart Table

• Illustrates data as table

• Enables data sorting and filtering
• Various customization possibilities
(e.g. editable cells)
• Allows creation of custom layouts
(comparable with ALV grids)
• Combinable with smart fields in
header

© 2018 SAP University Competence Center | Technical University of Munich 14

III. Smart UI Controls
Smart Chart

• Extends functions of normal chart UI • Multiple interactions available without further

elements configuration
• No chart container necessary  navigation based on graph elements
 toolbar available by default  graph types changeable at runtime
 data roll-up/drill-down
 layout configuration (e.g. chart legend)

© 2018 SAP University Competence Center | Technical University of Munich 15

Now you know the basics about the simple charts in UI5.
To consolidate your knowledge, you can do tasks 5 – 7 of the Analytical Apps Developemnt exercise.
Check your knowledge
Check your knowledge

• Is it always necessary to place a chart within a chart container?In which cases is a semantic object
needed?

• Why do we need analytical apps?

© 2018 SAP University Competence Center | Technical University of Munich 18

Solution
Solution

• Is it always necessary to place a chart within a chart container?In which cases is a semantic object
needed?
 No, it is not. SmartCharts have their own toolbar, and the viz-Charts can be depicted without the
container. It just allows more interaction with the chart.

• Why do we need analytical apps?

 Slide 4

© 2018 SAP University Competence Center | Technical University of Munich 20

© 2018 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://global12.sap.com/corporate-en/legal/copyright/index.epx 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.

© 2018 SAP University Competence Center | Technical University of Munich 21