Introduction to Visual Composerfor Composition Environment

Dafna Yanay.NetWeaver UI Product Management

1. Introduction

2. Visual Composer Key Capabilities

3. When to use Visual Composer?

4. Roadmap & Outlook

Agenda

Java ApplicationServer

Robust, enterprise-class Java EE 5application server

Eclipse DevelopmentEnvironment

SAP NetWeaverDeveloper Studio: Eclipsebased development andmodeling environment

Model-Driven Development and Deployment WithSAP NetWeaver Composition Environment 7.1

Proc

esse

sEvent Flow / Rules

Role

SAP NetWeaverBPM for processcomposition

View

s

Portal and Web FormsMobile

and VoiceAnalytics

SAP NetWeaver VisualComposer for model-driven UI development(incl. analytics and voice)Web Dynpro JavaSAP Interactive Formsby AdobeFederated PortalNetwork

Enterprise ServicesRepository and Registry(ESR)Software lifecyclemanagement andlogistics (NWDI)

Bus

Dataor File

Web Services / EnterpriseServices Connectivity

Serv

ices

Servicefaçade

Newservice

Dataservice

Enterpriseservice

Basicservice

SAP CompositeApplicationFramework (CAF)business objectmodeling and servicecomposition

What is Visual Composer?

Visual Composer is the modeling tool that enables code-freecomposition of UI elements, Enterprise Services, and reusablecomponents to rapidly create and adapt rich user interfaces

Browser

WD4VCNetWeaverDeveloper Studio

Modeling with Visual Composer - Introduction

manipulating data elements suchas data services and Webservices, and UI elements such ascontrols, forms, and tablescreating connections betweenelements to define the businesslogic of the applicationgenerating runtime codeautomatically from the VisualComposer model

Visual Composer supports creating applications by…

Data Flow

UI ElementsServices

Visual Composer Sample Applications

1. Introduction

2. Visual Composer Key Capabilities

3. When to use Visual Composer?

4. Roadmap & Outlook

Agenda

CE 7.1 CE 7.2

Generally available since December, 2007 as part of NetWeaver CE 7.1Enables creation of Web Dynpro application which can be rendered to html and flex

CE 7.1.1

Visual Composer 7.1

Q4/2007 ~Q4/2009Q4/2008

Key Capabilities

Out-of-the box connectivity to SAP and non-SAP backend systemsERP, CRM and BIConsumption of Enterprise Services as well as RFCs and 3rdparty Web servicesJDBC connectivityConsumption of data services with complex structures andnested tablesSimulated service creation

SAP R/3 SAP BI ..... Non-SAP

CE7.1

Key Capabilities (Cont.)

Out-of-the-box support for SAP standard runtime technologyWeb Dynpro HTMLWeb Dynpro Flex

Lifecycle Management supportIntegration with NWDI DTR source control

CE7.1

Portal Content CreationCapabilities

Creation of Portal content (Roles, Pages, iViews…) from the VisualComposer modeling environmentWYSIWYG visualization of Portal Framework (L-Shape visualization)Top-down or bottom-up content creation workflowDrag-and-drop content from Visual Composeror other content provider

CE7.1

Visual Composer in NWDS

Integrated version of Visual Composer in NetWeaver Developer StudioAdditional entry-point to access the Visual Composer modelsBrowser-based version continues to be supportedFirst step to achieve NWDS as a single tool platform for adeveloper roleA unified entry point to allCE toolsets(Web Dynpro tools,Visual Composer,CAF, BPM, etc.)

CE7.1.1

Extending Visual Composer usingWeb Dynpro

“Break-out” from Visual Composer1. Define the required component using

Visual Composer composite view2. Automatically generate the Web Dynpro

component interface3. Implement the Web Dynpro

component4. Add the Web Dynpro

component to theVisual Composer model

Add an existing Web Dynprocomponent to theVisual Composer model

CE7.1.1

Web Dynpro Component Samples

Crystal Xcelsius

Web Dynpro

Adobe Flash Islandsfor Web Dynpro

CE7.1.1

Embedded BI Features

Combine analytical data, operational data,and services in one environmentIntegrate information from independentdata sources in one analysisLaunch BI/BOBJ dashboards orreports from within SAP transactions

Composite Appsembedded BI

SAP NetWeaverComposition Environment

VisualComposer

BI ConsumerServices

SAP Apps SAP BI

CE7.1.1

Embedded BI Features

BICS (BI Consumer Services) connectivity to the following connectors:BI XMLA (NW BI 3.5, BI7.0 MDX Provider, MSSQLServer/Analysis Services 2005)BI JDBC Connector (MaxDB 7.0, 7.1, MS SQLServer 2005)BI SAP Query Connector (InfoSets in SAP Business Suite)

Real-time access to relational and multidimensional sourcesBI Data Service Wizard (Query wizard) and SQL editor

Flexibly create query views and configure portsof data services

Planning application enablingExpose data services for data write-backand planning function execution inVisual Composer

Basic Value help supportMeta-data driven, no manualinvolvement needed,single value selection only

CE7.1.1

1. Introduction

2. Visual Composer Key Capabilities

3. When to use Visual Composer?

4. Roadmap & Outlook

Agenda

Comparison – Design Time

18

Web Dynpro Visual Composer

Model – baseddevelopmentenvironment

Fast learning curve& low entry barrier

(non programmer canread and develop)

Rapid applicationdevelopment

Creation of web-based,user interfaces for

business applications

Separation of presentationlogic and data logic

Componentization/reuse

Access to differentbackend systems

Model & code-baseddevelopmentenvironment

(Eclipse-based)

Powerfulcombination ofJava and MVC

paradigm

Openness to variousdata sources using

the CMI model

Comparison – Runtime

Personalization

Client agnostic

Accessibility

Translation

UI Rendering (commonlook & feel, supportedbrowsers, etc.)

WD for VC

Web Dynpro

Large set of UI controls

Mobile support

Adobe interactive formssupport

Vis

ual C

ompo

ser

Cove

rage

Web Dynpro CoverageLow High

Low

Hig

h

Which tool should you use – Guiding questions

Equal PreferenceVisual Composer

Consider other tool Web Dynpro

Tree control

SAP BI Data

EJBs***

SAP BAPIs and RFCs

Complex Services**

Non-SAP BI Data 3rd Party web service

Join two or more services anddisplay the output in one screen

Output of a service in a UIElement (e.g. form, table, chart)

Data manipulation(Sorting, Filtering, etc.)

Data Mapping

ALV Table

GanttDiagram

File uploadcontrol**

Pie chart

Date pickercontrolDate picker

control

JavaDeveloper

ABAPDeveloper

BusinessProcessExpert

BPM

Interactive

Formsby

Adobe

NWDIDTR

BeXWAD

Portal

Mobile

NWDS**

CAF

FlashIslands***

Which tool should I use?Which tool should I use?

What is the source of your data?

Which action do you want to perform?

What are your business application UI requirements?

What type of skills and experience are available for theapplication development?

Do you require integration with other tools?

Visual Composer & XcelsiusThe Perfect Match

Composition Environment with Visual Composer is SAP's flagship product for buildingcomposite applications, which can include both BI information and transactional/operationalsteps.Xcelsius is the tool of choice for BI dashboards with enhanced visualization capabilities

Integration Scenario - Xcelsius dashboards and visualizations can beembedded or launched from within a Visual Composer Application

XcelsiusDashboard

Visual ComposerModel

Technical View on Xcelsius Integration

SAP NetWeaver PlatformVisual modeling ofcomposite applications

Composite applicationsat run-time

Parts of the modelcan be built with

Xcelsius andplugged in via flash

islands

1. Introduction

2. Visual Composer Key Capabilities

3. When to use Visual Composer?

4. Roadmap & Outlook

Agenda

Visual Composer & BPM Integration

SAP NetWeaver BPM is a flexible framework for designing and running user-centriccollaborative processes and reusable workflows.Seamless integration between BPM and Visual Composer

Break-out from a BPM Step and automatically generate the Visual Composer UIConsume existing Visual Composer UIs and add them to the business process

CE7.2

Model Debugging

Debug WindowDebug Window

Visual Model TracingVisual Model Tracing Console

Variables, Breakpoints, andExpressions windows

Variables, Breakpoints, andExpressions windows

CE7.2

Visual Composer 7.1

Generally available as part of SAP NWComposition Environment

Visual Composer 7.1Clustered data services supportComponentizationModeling and layout enhancementsSupport for Web Dynpro runtime

ALV tables integrationLife Cycle Management support

CE 7.1.1

BPM Integration

Debugger

Tighter NWDS Integration

Additional Controls

Portal Content CreationEnhancements

Field Formatting

VC 7.0 Parity

VC@NWDS

Web Dynpro Components

Simulated Services

EJB Consumption

Image Browser

Message Area Support

ALV Control Enhancements

BI Consumer Services

CE 7.2

Visual Composer Modelers Community

www.sdn.sap.com/irj/sdn/nw-vc

Your Questions and Comments

Thank you for your time!

Questions