Introduction to Visual Composer

1
Introduction to Visual Composer
2
Visual Composer

• SAP Visual Composer (VC) provides a development
  environment for rapidly creating and adopting
  model-based transactional and analytical
  applications.

3
Enterprise Portal Design Tools
4
VC Design Criteria

• Simplicity
• Fast development model-based applications no
  coding
• Small set of highly-reusable easy concepts
• Graphical interface is user friendly
• Browser based
• Reusable components
• Reuse functionality from model to model

5
VC Design Criteria

• Tightly integrated to SAP NetWeaver 2004
• Connectivity to SAP and third party systems
• Using portals, ERP, BW, JDBC and web services
• Different runtime environments
• Web Dynpro and Adobe Flex
• Test-and-Redo
• Quick modeling

6
Modeling in VC
7
Model Creation Workflow

• Define your application needs
• What are your data sources
• What UI components do you need
• Layout, controls and etc.

8
Model Creation Workflow

• Create your page and iView
• Dragging the icons from the elements task panel
• Naming accordingly

9
Model Creation Workflow

• Find system, then locate data service
• BAPIs from SAP systems
• Tables from SQL databases
• Queries, tables, cubes from BI
• Web services

10
Model Creation Workflow

• Design the iView logic
• Dragging forms, operators and UI elements onto
  the workspace
• Connect them for proper flow
• Format the design in layout mode

11
Model Creation Workflow

• Deploy model and view it in runtime
• Check iView in both design time and runtime

12
Overview - Application Modeling

• Design Time
• Visual Composer is a design-time software tool
• Define all runtime attributes and properties
• Runtime Environments
• Implements in XML-based Visual Composer language
• Model once run anywhere
• Web Dynpro Flex

13
Overview - Application Modeling

• Creating and Adapting Applications
• Create from scratch
• Or adapt an existing application
• Data Services
• SAP RFCs remote function call
• SAP BAPIs business APIs
• Business warehouse info cubes, BI queries
• JDBC relational databases
• Web services

14
Overview - Application Modeling

• Storyboard
• GUI called work desk, work space, drawing
  board
• Three different boards
• Graphical modeling elements
• Screen layout actual look and feel
• View source code

15
Overview - Application Modeling

• Workflow
• Drill down from upper-level model entities down
  to the lowest-level elements and controls
• Events
• An event is a signal that an action has occurred
  (like click a submit button)
• Modeling elements (such as data flow lines) are
  modeled to respond to these events

16
Overview VC Architecture

• The Visual Composer is installed on the
  development server, running on the J2EE engine
  which also runs the portal
• The storyboard is accessed from the client using
  a browser
• At runtime, the user deploys the model to the
  portal and views the application on the portal
• The deployed content is also stored in the Portal
  Content Directory (PCD)

17
Overview VC Architecture
18
Working with VC

• Prerequisites
• Enterprise Portal installed (2004s)
• End user computer accessing storyboard
• Microsoft IE 6.0 or higher
• Adobe SVG Viewer 3.0 (view storyboard)
• Microsoft XML parser 4.0 or higher
• Flash environment (view resulting application)

19
Working with VC

• Prerequisites (cont)
• Portal connected to back end systems
• Permission to access portal and have VC role
• Mapped as a user to backend systems on portal
• For BI, BW, JDBC
• Install required connectors
• Define systems and aliases in portal

20
Working with VC
Menu
Task Panel
Navigation
Tool Bar
Work Space
Tool Box
21
Working with VC

• Main Menu
• Main Toolbar
• Navigation Toolbars

22
Working with VC

• Tabbed Workspace
• Board Toolbox

23
Working with VC

• Task Panel
• Task Panel Toolbar

24
Working with VC
25
Using VC Log On

• Logging On
• http//sbasap09.sba.uwm.edu50000/VC
• Note VC is case sensitive
• Enter userid and password
• The same as you use for portals
• Note The logon screen looks the same as the one
  you use for portals
• Click Log on

26
Using VC - Logon
27
Using VC - Logon
28
Demonstration

• Look up sales orders for a customerusing a R/3
  BAPI

29
Demo Customer Search
Results Table
Search Form
Search
Search Data
Customers List
30
Demo Create a New Model
A. New Model
B. Name the model
31
Demo Create an iView
A. Compose ? iView
B. Double click on iView
32
Demo Find IDES System
A. Find Data ? IDES_Fall07
33
Demo Browse for Service
A. Look For Browse Service Catalog ? Reload
34
Demo Select BAPI

• BAPI_SALESORDER_GETLIST
• Drag onto work area

35
Demo Select Search Fields
A. Select Customer Number and Sales Organization
36
Demo Select Report Fields
37
Demo Add Input Form
A. Drag input port onto work space, add Input Form
38
Demo Add Table Form
A. Drag Sales Orders output port onto work space,
add Table View
39
Demo - Model
40
Demo View Layout
A. Click on Layout Tab
41
Demo View Code
A. Click on Source Tab
42
Demo Deploy Model
A. Deploy ? Deploy entire model ? Deploy
43
Demo Run Model
A. Click on Run, Portal will appear
44
Demo - Output