Rapid dashboard development
with SAP NetWeaver Visual
Composer
Dr. Berg
Comerit
© 2012 Wellesley Information Services. All rights reserved.
In This Session ...
•
You will learn all the essentials on how to build and deploy SAP
NetWeaver® Visual Composer models as non-composite
environment (CE) models.
•
We will take a quick overview of the 7.0 environment followed by a
step-by-step model build example
•
We will see a detailed demo of simple techniques and good design
principles for building reports with SAP NetWeaver Visual Composer
•
We will peak and new 7.3 features and upgrade alternatives.
•
Finally, we will look at performance tuning options and the future of
SAP NetWeaver Visual Composer in the new SAP BusinessObjects
landscape
1
What We’ll Cover …
•
•
•
•
•
•
SAP NetWeaver Visual Composer overview
Building an SAP NetWeaver Visual Composer model
Demo – A complete cockpit from scratch
Improving performance tuning
Upgrading SAP NetWeaver Visual Composer 7.0 to version 7.3
Looking at other options
Wrap-up
2
The SAP NetWeaver BI Traditional Toolset
SAP BI is an
enterprise-wide
comprehensive
decision support
system (DSS) for the
analytical needs of
an enterprise
BI can also support
some degree of
operational reporting
The SAP BI tool set has many traditional presentation tools and options for
companies3 to leverage. We are not looking at BOBJ tools at this stage.
There are Two 'versions' of Visual Composer (VC)
Visual Composer 7.0 is for SAP BI Development, 7.1 and higher is for the
Composite Environment (CE). We now have version 7.3
There are different SDN forums and blogs for each This can be confusing!
4
Visual Composer for Dashboards
A Visual Composer is a tool to visualize the data.
It is a browser-based modeling and design tool
for rapid application development & prototyping
in a code-free development environment.
5
Visual Composer for Complex Dashboards
Modeling of BI applications
using Visual Composer allows
users to create analytical
content. It integrates with
infoproviders, views, BEx web
applications, Xelsisus, PDF,
APIs, and access to OLAP
and relational data sources
6
Visual Composer is Easy to Learn
Visual Composer is a power user tool that is simple to learn
for someone with a little bit of technical background i.e.
controllers, report
writers and
analysts.
No coding is
required to create
good-looking Webbased cockpits
7
Image source: SAP designguild
Visual Composer Some Graphic Examples
For SAP BW - It All Starts with a Query
The BEx Query Designer
The query is the core method for accessing BI data. You can use existing queries in your
SAP NetWeaver Visual Composer models
SAP NetWeaver Visual Composer Data Methods
•
•
•
Can integrate data from multiple data sources, including SAP and
non-SAP systems, into one model
Different options available for data access include:
 BI Extension Kit
 Remote Function Call (RFC)
 Web services
BI Extension Kit allows access
to the following DataSources
 SAP NetWeaver BW 7.0 and 7.3
 SAP NetWeaver BI 2004
(SAP BW 3.5 Support Package 14)
 JDBC
 XMLA
Visual Composer Data Providers
•
•
•
You can use BI queries and views as Data Providers for
SAP NetWeaver Visual Composer models
You also can use BI query functionalities for exceptions
and variables along with SAP NetWeaver Visual
Composer models
SAP NetWeaver
Visual Composer
allows access to BI
history, favorites,
and roles
SAP NetWeaver Visual Composer 7.0 & 7.3 - Portal Publishing
SAP NetWeaver Visual Composer 7.0 designtime deploys models directly as iViews to the
Portal Content Catalog. You can then use the
iViews in portal pages, roles, etc.
In VC 7.3 you can either use portal modeling as a tool, or publish to the
Generic Portal Application Layer (GPAL). Any iViews, pages and portal
objects are created using the GPAL which exposes applications and
portlets deployed to AS Java.
12
SAP NetWeaver Visual Composer 7.0 Using BOBJ Xcelsius
SAP NetWeaver Visual Composer 7.01 (or
7.02) SP5 or higher allows you to use
existing Xcelsius UI controls and use them
inside Visual Composer.
You can also use any Flex component
made by Adobe Flex Builder (Flex 2 SDK).
You can download flash objects & 'how-to'
on sdn.sap.com (by Sap's Amir Mimran)
13
Details about Visual Composer Cockpits
•
•
•
Delivered as part of SAP NetWeaver Portal in SAP NetWeaver BW
7.0 Usage Type (SP8 and higher)
Different options available for rendering SAP NetWeaver VC output
 Flash – primarily used in version 7.0
 Web DynPro (HTML) – primarily used in version 7.3
Flash provides high-end visualization of SAP NetWeaver VC models
You can pick your own
rendering method in the menu:
Tools  Options
14
There Are Many Resources at the SDN Community
This is a great site for quickly getting
started with SAP NetWeaver Visual
Composer and for down loading a
free demo-version
SAP NetWeaver Visual Composer — And the SAP Community Network
Many of the beginner questions
have already been answered in the
expert forums on the SAP
Community Network
SAP NetWeaver Visual Composer — SDN Community Blogs
You can also learn from others’
experiences by getting
“plugged-in” to the community
network blogs dedicated to
SAP NetWeaver Visual
Composer
What We’ll Cover …
•
•
•
•
•
•
•
SAP NetWeaver Visual Composer overview
Building an SAP NetWeaver Visual Composer model
Demo – A complete cockpit from scratch
Improving performance tuning
Upgrading SAP NetWeaver Visual Composer 7.0 to version 7.3
Looking at other options
Wrap-up
18
Downloading and Getting Started — The Trial Version
You can
download a
CE trial
version on
the SAP
Community
Network
However, to put it into production you must work with
your SAP account executive for a license. It is normally
not covered by a general SAP license.
Creating a Model
The first task is to
create an overall
model to store all
your pages and
iViews
The name cannot
have blanks or
special characters
You can organize
your model in
standard folder
structures
Remember that this is a power user task, so providing the
group with some formal training (4-6 hrs) would be
beneficial. Also, teach them your naming conventions.
The SAP NetWeaver Visual Composer Add-Ons
The models are actually
graphics rendered with
Adobe SVG (vector graphics)
If you don’t have Adobe
SVG installed, you must go
to their Web site and
download it. It is a small
file and it is free.
The Work Environment — Getting Connected
First you must make
sure that your SAP
NetWeaver VC
environment is set
up with connection
back to your SAP
environment(s).
You can also work with your technical team to set up
connections to other non-SAP environments.
The SAP NetWeaver Visual Composer Configure Toolbar
We can add items
and see then from
the highest level, or
you can “drill down”
on each item and
configure them
individually
Navigation is
provided as a
toolbar and you can
also zoom in on
each item
This tool bar allows you to zoom, access layers,
insert grid lines for layout, and move objects.
The Magnifying Glass
SAP NetWeaver
Visual Composer
has many tools that
power users can
play with
The fastest way to
proficiency is to try
the many features
Very few things can
break, and the undo
button is always
available
The magnifying glass is helpful when the model is very
complex and zooming in and out is cumbersome.
The Annotation Tool
When you are developing
very complex models, it is
very helpful to add
annotations (comments)
to document your work.
Consider proposing standards within your company (i.e.,
dates, initials, and what needs to be documented).
Getting an Overview Over Complex Models
Very large SAP
NetWeaver Visual
Composer cockpits
can be hard to read
The Browse feature
allows you to see the
cockpit in a tree format
that makes it easier to
navigate
Graphical model displays can get hard to read
once very complex dashboards are created.
Development Methodology
Plan on spending
serious time with
users working on
layout and Web page
organization
P.S.! You can use the
SAP delivered
calendar for display,
or for users to
interact with your
data set
The best way to create cockpits is to prototype it first, then ask for
feedback. Since this is a discovery-oriented process, it is not a best
practice to use functional specifications to create Web cockpits.
Rapid Application Development (RAD) is the preferred methodology.
The Back-End GML Code
SAP NetWeaver Visual
Composer uses the
standard GUI Modeling
Language (GML).
If you are familiar with this
language, you can see the
code page under the
Source tab.
Our Target Dashboard
We will build a dashboard based on 2 queries called country
and customer view, and present this with tables and graphs
as well as navigational links between them (passing variables
between the queries)
Step 1 — Find the Data You Want to Model
You can look at existing queries developed by
others.
In this example we will create a Web Cockpit
based on two SAP NetWeaver BI queries.
More advanced developers can also call
Business Application Programming
Interfaces (BAPIs) that are delivered with
SAP NetWeaver BI to build complex
applications.
Step 2 — Selecting the Queries and Defining a Starting Point
1.After the query is selected, the metadata is
transferred to the model.
2.We select one query as the starting point
and can require users to use a prompt (in
this example we will leave this blank).
Step 3 — Adding a Table View Based on Query Data
1.We add a table view and select the
fields we want from the query.
2.We give the table view a meaningful
business name.
Step 4 – Adding a Chart view based on Query data
1.We add a chart view based on the query data.
2. We decide to make it a column chart.
3. The fields that we want to graph are selected.
4. We add animation to the column chart.
Step 5 — Defining Graph and Assigning Meaningful Names
1. We select the fields we want to graph as
different data series (columns).
2. We give each column a meaningful business
name (this is what the users will see).
Step 6 — Suppressing Zero Values from the Query
We can suppress the sum rows from the query, so that the graphs
are more meaningful and the tables are less cluttered.
Step 7 — Adding Navigation: Linking Tables to Other Queries
1.When a user selects a row in the country table,
we want to show all the customers in that
country and their sales.
2.We link the output from the country table view
to the customer query and map the country-key
value between the two objects.
Step 8 — Adding Navigation: Linking Graphs to Other Queries
1. We also want to give the users the option to
click on a country in the graph and see all
the customer’s sales.
2. Again, we link the output from the country
graph to the customer query and map the
country-key value between the objects.
Step 9 — Adding a Table View for Customer Sales Data
Previously we added a table and a graph of country
sales. Now we want to add similar views for
customer sales.
1. First we add a table view.
2. We select the fields to be displayed from the
query.
3. We give the table a meaningful name.
Step 9 — Adding a Table View for Customer Sales Data (cont.)
Now we add a pie chart.
1. First we add a graph view.
2. We select the pie chart type and the fields to be graphed.
3. We give the field a meaningful business name.
Step 10 — Suppressing Zero Values from the Query
Again, we suppress the sum rows from the query, so that the
graphs are more meaningful and the tables are less cluttered.
Step 11 — Layout and Compiling of Dashboard
In the layout section we arrange the objects and resize them so that they
look good. We also compile the model and can now view it in the Portal
The Result: The Web Cockpit in SAP NetWeaver Portal
All country sales are displayed based on the first query
The Result: Navigation Between the Graphs
By clicking on the country in
either of the top views, the
bottom views display sales for
those customers
What We’ll Cover …
•
•
•
•
•
•
•
SAP NetWeaver Visual Composer overview
Building an SAP NetWeaver Visual Composer model
Demo – A complete cockpit from scratch
Improving performance tuning
Upgrading SAP NetWeaver Visual Composer 7.0 to version 7.3
Looking at other options
Wrap-up
44
Demo – A complete cockpit from scratch
45
External Web Services
External Web services such as email,
stock quotes, news services, and weather
maps can also be integrated into your
SAP NetWeaver Visual Composer cockpit.
External Data Providers — Web Services
Each Web service may require different input, so you have to
spend some time trying out what works for your site and how to
format it.
What We’ll Cover …
•
•
•
•
•
•
•
SAP NetWeaver Visual Composer overview
Building an SAP NetWeaver Visual Composer model
Demo – A complete cockpit from scratch
Improving performance tuning
Upgrading SAP NetWeaver Visual Composer 7.0 to version 7.3
Looking at other options
Wrap-up
48
Performance Tips: BIA and Summary Cubes
1) If your cockpits are at a higher level such as weekly or
monthly, consider the use of summary cubes to reduce the
data accessed (also take a look at building aggregates).
2) For high volume or high number of users, you should
seriously consider the BW Accelerator Solution.
This compresses the data and
stores the data in memory (no
disk access when queries
are run).
This is “hyper fast”…
Making Cockpits Fast — Using the Cache as a Data Provider
•
•
It is very beneficial to use the cache as the method for data
service retrieval
This makes the cockpits faster by relying on previously accessed
data stored in-memory
 You can also use broadcasting to cache as a method to
pre-populate the cache as well
Since a cockpit may have
many different DataSources
(queries), it can take quite
some time to execute them
if the memory cache is not
used consistently
50
Performance Tips: Using jump-to and drill down query links
•
If you pre-run the underlying queries using
BEx Broadcaster, and cache the results, you
can make the VC cockpits open much faster.
•
You can then also use Web Application Designer to provide links to
the underlying queries for more detailed information.
•
When user click the link, the query will not be run again (already in
cache).
Leverage the OLAP and the MDX cache to speed up the initial
loading of the web page. Consider using jump-to and drill down
links to more detailed information.
What We’ll Cover …
•
•
•
•
•
•
•
SAP NetWeaver Visual Composer overview
Building an SAP NetWeaver Visual Composer model
Demo – A complete cockpit from scratch
Improving performance tuning
Upgrading SAP NetWeaver Visual Composer 7.0 to version 7.3
Looking at other options
Wrap-up
52
Upgrade Options to v 7.3
There are no automated upgrade paths from NetWeaver VC 7.0 to
NetWeaver VC 7.1 or 7.2. However, you can upgrade to version 7.3
When upgrading to VC 7.3, you have two options:

Design time migration

Run time migration
Run time migration is when the already deployed VC 7.0 content is
migrated to a new NetWeaver 7.3 machine. The design time refers
to the migration of the actual VC models from 7.0 to 7.3.
Jarrod Williams from SAP has
written a great migration handbook,
that is available on the sap
developer network
53
What is new in version 7.3- Components and deploying
Models can be stored locally or in a
source code system. With the
transition to Dynpro, we store the
models in the NWDI Design-Time
Repository (DTR). This provide version
controls that was unavailable in 7.0
In Visual Composer 7.0, we used
iViews, in 7.3 we can use components
such as ‘composite views’ or ‘service component’ for advanced data services.
Models created in version 7.0 use adobe Flex, while models in 7.3 use Web Dynpro
(Java) and can be rendered in Web Dynpro HTML and Web Dynpro Flex.
The design and layout access is
now placed on the bottom toolbar
In 7.3 you can also have many models open at the same time (different
tabs) and you can use Integrated Planning (IP) queries in your model.
54
What is new in version 7.3 – More UI Controls
You also have access to control each User Interface (UI)
component. Actually, you are required to add services and then
assign UI controls (in 7.0 this is ‘pre-assigned’ by object
selection), if you don’t do this, you simply won’t see anything.
This gives much better control over the UI
components (like BusinessObjects Xcelsius)
Image source: J. Williams, SAP AG, 2011
You can also open your 7.3
models in SAP NW Developer
Studio for more custom
development
55
What We’ll Cover …
•
•
•
•
•
•
•
SAP NetWeaver Visual Composer overview
Building an SAP NetWeaver Visual Composer model
Demo – A complete cockpit from scratch
Improving performance tuning
Upgrading SAP NetWeaver Visual Composer 7.0 to version 7.3
Looking at other options
Wrap-up
56
SAP NetWeaver Visual Composer Options
In the Tools  Options section, you can control
items such as auto save, display levels, formats,
highlights, and more.
These preferences are stored
for each user and can be
personalized.
Who gets to use the SAP Visual Composer?
There is a temptation for the IT community of wanting to
keep the Visual Composer tool under their domain – That
is a mistake
- Spend time teaching Super Users VC
58
What We’ll Cover …
•
•
•
•
•
•
•
SAP NetWeaver Visual Composer overview
Building an SAP NetWeaver Visual Composer model
Demo – A complete cockpit from scratch
Improving performance tuning
Upgrading SAP NetWeaver Visual Composer 7.0 to version 7.3
Looking at other options
Wrap-up
59
What tool to select
All SAP tools have strength and weaknesses. This is a
subjective summary of each of the major tools.
Target User
Development
Capabilities
Tool
End
User
Power ExecuUser
tives
End
User
Power
IT
External
User Author Developer Graphing Navigation
data
Web Application
Designer
-
-
-
Dashboard
Designer
(Xcelsius)
-
-
-
Visual Composer
External
web
services Simplicity
OLAP
-
-
-
-
-
-
Interactive
Analysis
ad-hoc (WebI)
Ad-Hoc
querying
Longterm
Strategy
-
-
-
Analysis Edition
for OLAP (web)
-
-
Analysis MS
edition
-
-
Crystal Reports
-
BO Explorer
-
-
-
-
-
-
-
60
-
Limited Support
Some Support
Good Support
Resources
•
Visual Composer 7.0 Reference Guide

http://help.sap.com/saphelp_nwce10/helpdata/en/7c/0feaee0d214b5e9f2e890e0668a833/content.htm
•
SAP NetWeaver Visual Composer
 Mario Herger
•
The Developer's Guide to the SAP NetWeaver Composition
Environment
 Jan Rauscher and Volker Stiehl.

Integrating VC and WAD objects - a How-To Guide

http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/ad182ac7-0a01-0010-4fb88a4d217b19c1?QuickLink=index&overridelayout=true
61
7 Key Points to Take Home
•
SAP NetWeaver Visual Composer is a tool that is easy to learn
•
The tool is intended for power users – Not primarily IT
•
SAP NetWeaver Visual Composer is not going away
•
You should provide individual training to each of the power users
•
Spend serious time performance tuning the back-end queries and
data stores
•
Plan for SAP NetWeaver BW Accelerator if you have many users
of the SAP NetWeaver Visual Composer models
•
Seek advise of best practices and plan on integrating data across
systems, Web services, and other non-SAP sources
62
Your Turn!
How to contact me:
Dr. Berg
Bberg@Comerit.com
63
Disclaimer
SAP, R/3, mySAP, mySAP.com, SAP NetWeaver®, Duet™®, PartnerEdge, and other SAP products and services mentioned herein as well as their
respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. All other product
and service names mentioned are the trademarks of their respective companies. Wellesley Information Services is neither owned nor controlled by
SAP.
64