You are on page 1of 28

Introduction to Visual Composer for Composition Environment

Dafna Yanay. NetWeaver UI Product Management

Agenda

1. Introduction 2. Visual Composer Key Capabilities 3. When to use Visual Composer? 4. Roadmap & Outlook

Model-Driven Development and Deployment With SAP NetWeaver Composition Environment 7.1
Robust, enterpriseclass Java EE 5 application server SAP NetWeaver BPM for process composition Processes Java Application Server Eclipse Development Environment SAP NetWeaver Developer Studio: Eclipse based development and modeling environment

Event Flow / Rules

Role

Views

SAP NetWeaver Visual Composer for modeldriven UI development (incl. analytics and voice) Web Dynpro Java SAP Interactive Forms by Adobe Federated Portal Network

SAP Composite Application Framework (CAF) business object modeling and service composition

Portal and Web

Analytics

Forms Service faade

Mobile and Voice

Services

New service Basic service Data service

Enterprise service

Enterprise Services Repository and Registry (ESR) Software lifecycle management and logistics (NWDI)

Web Services / Enterprise Services Connectivity

Bus

Data or File

What is Visual Composer?

Visual Composer is the modeling tool that enables code-free composition of UI elements, Enterprise Services, and reusable components to rapidly create and adapt rich user interfaces
Browser NetWeaver Developer Studio WD4VC

Modeling with Visual Composer - Introduction

Visual Composer supports creating applications by


manipulating data elements such as data services and Web services, and UI elements such as controls, forms, and tables creating connections between elements to define the business logic of the application generating runtime code automatically from the Visual Composer model
UI Elements Services Data Flow

Visual Composer Sample Applications

Agenda

1. Introduction 2. Visual Composer Key Capabilities 3. When to use Visual Composer? 4. Roadmap & Outlook

Visual Composer 7.1

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

CE 7.1
Q4/2007

CE 7.1.1
Q4/2008

CE 7.2
~Q4/2009

Key Capabilities

CE7.1

Out-of-the box connectivity to SAP and non-SAP backend systems ERP, CRM and BI Consumption of Enterprise Services as well as RFCs and 3rd party Web services JDBC connectivity Consumption of data services with complex structures and nested tables Simulated service creation

SAP R/3

SAP BI

.....

Non-SAP

Key Capabilities (Cont.)

CE7.1

Out-of-the-box support for SAP standard runtime technology Web Dynpro HTML Web Dynpro Flex Lifecycle Management support Integration with NWDI DTR source control

Portal Content Creation Capabilities

CE7.1

Creation of Portal content (Roles, Pages, iViews) from the Visual Composer modeling environment WYSIWYG visualization of Portal Framework (L-Shape visualization) Top-down or bottom-up content creation workflow Drag-and-drop content from Visual Composer or other content provider

Visual Composer in NWDS

CE7.1.1

Integrated version of Visual Composer in NetWeaver Developer Studio


Additional entry-point to access the Visual Composer models Browser-based version continues to be supported First step to achieve NWDS as a single tool platform for a developer role A unified entry point to all CE toolsets (Web Dynpro tools, Visual Composer, CAF, BPM, etc.)

Extending Visual Composer using Web Dynpro


Break-out from Visual Composer 1. Define the required component using Visual Composer composite view Automatically generate the Web Dynpro component interface 3. Implement the Web Dynpro component
2.

CE7.1.1

Add the Web Dynpro component to the Visual Composer model Add an existing Web Dynpro component to the Visual Composer model
4.

Web Dynpro Component Samples


Web Dynpro

CE7.1.1

Adobe Flash Islands for Web Dynpro Crystal Xcelsius

Embedded BI Features

CE7.1.1

Composite Apps

Combine analytical data, operational data, and services in one environment Integrate information from independent data sources in one analysis Launch BI/BOBJ dashboards or reports from within SAP transactions

embedded BI

SAP NetWeaver
Composition Environment Visual Composer BI Consumer Services

SAP Apps

SAP BI

Embedded BI Features

CE7.1.1

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 sources BI Data Service Wizard (Query wizard) and SQL editor Flexibly create query views and configure ports of data services Planning application enabling Expose data services for data write-back and planning function execution in Visual Composer Basic Value help support Meta-data driven, no manual involvement needed, single value selection only

Agenda

1. Introduction 2. Visual Composer Key Capabilities 3. When to use Visual Composer? 4. Roadmap & Outlook

Comparison Design Time

Web Dynpro
Model & code-based development environment (Eclipse-based) Powerful combination of Java and MVC paradigm Openness to various data sources using the CMI model

Visual Composer
Creation of web-based, user interfaces for business applications Separation of presentation logic and data logic Componentization/reuse Access to different backend systems

Model based development environment Fast learning curve & low entry barrier (non programmer can read and develop) Rapid application development

18

Comparison Runtime

Web Dynpro
Large set of UI controls

WD for VC
Personalization Client agnostic Accessibility Translation UI Rendering (common look & feel, supported browsers, etc.)

Mobile support Adobe interactive forms support

Which tool should you use Guiding questions

Visual Composer
High

Equal Preference

SAP BI Data Output of a service in a UI SAP BAPIs and RFCs Portal Business Element (e.g. form, table, chart) Pie chart Which tool should ICAF use? Process Java Expert ALV Table Developer Date BeX picker What is the source of your data? 3rd Data Party Mapping web service Non-SAP BI Data control WAD NWDI Date picker Which ABAP action do you want to perform? DTR control Data manipulation Developer Complex Services** (Sorting, Filtering, etc.) What are your business application UI requirements? NWDS** What type of skills and experience are available for the application development? File upload Interact Flash Do you require integration with other tools? Mobile control** ive Gantt Islands*** Forms Diagram by Join two or more services and BPM Tree EJBs*** control display the output in one screen Adobe

Low

Visual Composer Coverage

Consider other tool


Low

Web Dynpro

Web Dynpro Coverage

High

Visual Composer & Xcelsius The Perfect Match


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

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

Visual Composer Model

Xcelsius Dashboard

Technical View on Xcelsius Integration

Composite applications at run-time

Visual modeling of composite applications

SAP NetWeaver Platform

Parts of the model can be built with Xcelsius and plugged in via flash islands

Agenda

1. Introduction 2. Visual Composer Key Capabilities 3. When to use Visual Composer? 4. Roadmap & Outlook

Visual Composer & BPM Integration

CE7.2

SAP NetWeaver BPM is a flexible framework for designing and running user-centric collaborative processes and reusable workflows. Seamless integration between BPM and Visual Composer Break-out from a BPM Step and automatically generate the Visual Composer UI Consume existing Visual Composer UIs and add them to the business process

Model Debugging

CE7.2

Debug Window

Variables, Breakpoints, and Expressions windows

Visual Model Tracing

Console

Visual Composer 7.1

Generally available as part of SAP NW Composition Environment Visual Composer 7.1


Clustered data services support Componentization Modeling and layout enhancements Support for Web Dynpro runtime ALV tables integration Life Cycle Management support

VC 7.0 Parity VC@NWDS Web Dynpro Components Simulated Services EJB Consumption

Image Browser Message Area Support ALV Control Enhancements BI Consumer Services BPM Integration Debugger Tighter NWDS Integration Additional Controls Portal Content Creation Enhancements Field Formatting

CE 7.1.1

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