Visual Composer for Netwaver CE

8/10/2019 Visual Composer for Netwaver CE

1/14

Visual Composer for NetWeaver CE: Getting Started with a Typical Workflow

SAP DEVELOPER NETWORK | sdn.sap.com BUSINESS PROCESS EXPERT COMMUNITY | bpx.sap.com 2007 SAP AG 1

Visual Composer for NetWeaver CE: Getting Started with aTypical Workflow

Appl ies to :Visual Composer for SAP NetWeaver Composition Environment 7.1

SummaryThis article aims to help you get started modeling applications with Visual Composer for SAP NetWeaverComposition Environment. It takes you through a typical workflow, in which you define a Web servicedestination in NetWeaver Administrator, and then consume that Web service in a simple Visual Composermodel.

Author : Nicole Goldman

Company: SAP

Created on: January 2, 2008

Author BioNicole Goldman is an information developer in the SAP NetWeaver Product Managementgroup located in Ra'anana, Israel. She is responsible for the documentation of VisualComposer for SAP NetWeaver Composition Environment.


2/14



Table of ContentsGetting Started.. ............................................................................................................................................. 3

Installing Visual Composer .. ...................................................................................................................... 3

Configuring a Web Service .. ...................................................................................................................... 3

Logging On to Visual Composer .. .............................................................................................................. 3 Introducing Storyboard.. ............................................................................................................................. 4

Typical Workflow.. .......................................................................................................................................... 5 Step 1: Creating a Model .. ......................................................................................................................... 5

Step 2: Locating Data Services and Models for Reuse .. ........................................................................... 6

Step 3: Designing the Logic and Flow .. ..................................................................................................... 8 Step 4: Laying Out the UI.. ......................................................................................................................... 9

Step 5: Deploying and Running the Model .. ............................................................................................ 11 Related Content.. ......................................................................................................................................... 13

Copyright.. .................................................................................................................................................... 14


3/14



Getting Started

Installing Visual Composer

Visual Composer is included as part of the SAP NetWeaver Composition Environment installation. You installVisual Composer by selecting the additional installation option Composition Tools .

Configuring a Web Service

To use Web services as a source of data in your models, you must first define their destinations in

NetWeaver Administrator. For this example, we want to define the destination for a Web Service thatconverts an amount from one currency to another.

To config ure the Web service:

Open NetWeaver Administrator using the following URL:http://:/nwa .

In the Welcome screen, enter your user name and password and click Logon .

Choose SOA Management Technical Configuration Destination Template Management .

Click Create Destination .

In the Destination Type dropdown list, choose WSDL .

Specify the following settings for the Web service destination:

Destination Name : CurrencyConverter

URL : http://www.webservicex.net/CurrencyConvertor.asmx?WSDL

Click Save .

You can now access this Web service in the Search task panel of Visual Composer.

Note: If Visual Composer was already open when you defined the Web Service destination in NetWeaver Administrator, you need to first refresh the task panel by right-clicking the task-panel toolbar and choosingRefresh from the context menu.

Loggin g On to Visual Composer After installing Visual Composer, you access it through a browser window.To be able to access Visual Composer, you must have a user defined for you in NetWeaver Administrator.Your user must have the VisualComposerUser role assigned to it.

To access Visual Composer:

Open Microsoft Internet Explorer.

In the address bar, enter the URL of the Visual Composer server as follows:http://:/VC/freestyle.jspFor example: http://dwdf041.wdf.sap.corp:54000/VC/freestyle.jspwhere dwdf 041. wdf . sap. cor p is the fully-qualified domain name of the Visual Composer server

host, and 54000 is the application port number on the AS Java in use by the Visual Composer Serverinstallation. Note that VC is case sensitive.

In the Welcome screen, enter your user name and password and click Logon .


4/14



Introducing StoryboardVisual Composer Storyboard contains all the tools you need to create your model. The Storyboard desktophas two main areas: the workspace and the accompanying task panel. The workspace displays your modelas you build and modify it on the Design board and the Layout board, while the task panels display the toolsand elements you use to build your model.You switch between the Design board and Layout board by clicking the relevant button at the bottom of theworkspace area. You can open multiple models simultaneously (each model opens in its own tabbed page)and switch between them as needed, by clicking on the relevant model tab at the top of the workspace area.

The main parts of the Storyboard desktop are shown in the following figure:


5/14



Typical WorkflowBefore starting to model an application with Visual Composer, you should spend time planning your modelsand the components used to create them. Careful planning enables you to create usable components in themost efficient manner.

After you have planned your model, you perform the following steps:...

Create the model and choose its type. See Step 1: Creating a Model .

Locate the data services that you want to use, or Visual Composer models that you want to reuse,using the Search task panel. See Step 2: Locating Data Services and Models for Reuse .

Design and configure the logic and flow of the component elements on the Design board, using theCompose and Configure task panels. See Step 3: Designing the Logic and Flow .

Design and configure the UI and layout of the component elements and their controls on the Layoutboard, using the Compose and Configure task panels. See Step 4: Laying Out the UI .

Deploy the model and run the application, using the Deploy task panel. See Step 5: Deploying andRunning the Model .

Step 1: Creating a Model

You create a model in a specific development component in the development server. If the developmentcomponent in which you want to create the model does not exist, you can create a new developmentcomponent in the local repository (and later add it to the shared repository or source control system). Afteryou have created a model, you can reuse it (reference it) in other models.

When you create a model, you also choose its type. The available types depend on the Visual Composer kitsthat are installed on your Visual Composer server. With core Visual Composer, the following model types areprovided:

Composite View : A model of an application task, such as searching for and displaying data.

Service Component : A single customized data service that contains one or more data services.

To create a model: Choose Model New. The Create New Model dialog box is displayed.


6/14



In the Create New Model dialog box, specify or select the following options:

Model Type : Composite View

Name : Currency_Conversion

Repository : Local Repositor y

Software component : sap.com_UWSoftwareComponent

Development component : Choose the development component in which to save your model.

If there are no available development components, create one by clicking the New button,specifying a name for the new development component, and clicking OK .

Click OK . The new model opens in its own tab in Storyboard. In this case, we chose to store themodel in the local repository, so it can only be accessed by you. If you had chosen to store the modelin the shared repository or in the source control system, it would be accessible by all modelers andautomatically be checked out to you.

For more information, see Creating a Model and Development Component in the Visual Composer Modeler'sGuide .

Step 2: Locating Data Services and Models for Reuse

You can use a range of data services such as BAPIs, RFCs, Web services, SAP enterprise services, or

other Visual Composer components from a number of different systems, to use as a source of informationin your model. For this exercise, we need to look for the Web service that we configured previously. Youperform this procedure using the Search task panel.

To locate the Web service:

Click the Search button in the task-panel toolbar.
http://help.sap.com/saphelp_nwce10/helpdata/en/45/06ec2457240484e10000000a155369/frameset.htmhttp://help.sap.com/saphelp_nwce10/helpdata/en/45/06ec2457240484e10000000a155369/frameset.htm


7/14



In the Search in dropdown list, choose the system from which you want to retrieve the data service, orchoose Visual Composer Models to reuse a model from the repository. In this case, we want to enter* to search for all the operations of the CurrencyConverter Web service.

In the Search for field, enter the name of the data service that you want to locate. In this case, wewant to choose CurrencyConverter (WebService) , which is the Web service that we defined earlier.

Note: To use BAPIs, RFCs, Web services, and enterprise services as a source of data in yourmodels, their destinations must first be correctly defined in NetWeaver Administrator.

In the Type field, choose the type of data service, for example, Bapi/RFC , Service Registry , WSDL , orModel . In this case, choose WSDL .

Click Search . All the Web service operations matching the search criteria and residing in the selectedsystem are displayed. In this case, the CurrencyConverter Web service only contains one operation.

From the Results list, locate the data service, Web service operation, or model that you require anddrag it onto the Design board. In this case, drag the ConversionRate operation to the Design board.If you are reusing a model, choose how you want to reuse the component from the context menu thatis displayed:

Nested View : Inserts a reference to the selected component from the current component, as anested view. A nested view is displayed at runtime within the current component, in the samewindow.

Navigate : Inserts a reference to the selected component from within the current component,using a Navigate connector. A Navigate connector displays the reused component in a newwindow at runtime.

For more information, see Discovering Data Services and Reusing Components in the Visual ComposerModeler's Guide .

After you add the Web service operation to the model, you are ready to model the component logic and flow,as described in the following section.
http://help.sap.com/saphelp_nwce10/helpdata/en/9f/9985f72084483cb316a3c2322fb090/frameset.htmhttp://help.sap.com/saphelp_nwce10/helpdata/en/2a/28249060dd4dbc872f6266f4557364/frameset.htmhttp://help.sap.com/saphelp_nwce10/helpdata/en/2a/28249060dd4dbc872f6266f4557364/frameset.htmhttp://help.sap.com/saphelp_nwce10/helpdata/en/9f/9985f72084483cb316a3c2322fb090/frameset.htm


8/14



Step 3: Designing the Logic and Flow

After you have imported the sources of data, you design the component logic by creating the required modelelements in the workspace and defining the data flow between them. You perform this procedure on theDesign board.

To define the logic and flow of you r application:

Define the input(s) to and the output(s) from the data service:

From the input port of the data service, drag out and release the mouse. From the context menu,choose the required element, in this case Form View . When you drag out from a data service todefine an element, the fields of the selected item are automatically mapped to correspondingfields of the data service and the required controls are created for the fields. You can see this byswitching to the Layout board and looking at the controls that were added automatically to theform.

Repeat the procedure to add a Form View element to the output port of the data service.

Note: The context menus contain only the most common options for the given type of port. Toadd an element not contained in the context menu, click the Compose button in the task-paneltoolbar and drag the required element from the task panel onto the workspace. Then connect itto the relevant port of the data service and map the fields of the element to the correspondingfields of the data service.

Configure the connecting lines between the elements and data services:

Configure the line properties and the events that trigger the data flow, by right-clicking theconnecting line on the Design board and choosing Configure from the context menu. Modify therequired parameters in the Configure task panel. For this example, you can leave the defaultsettings.

For connections types that use data mapping, check that the data is mapped correctly, by right-clicking the connecting line and choosing Map Data from the context menu. In the Map Data dialog box, modify the fields in the Assigned Value column as required, and click Close .


9/14



If you added any additional elements, for example, any operators or connectors, configure them byright-clicking the element on the Design board and choosing Configure from the context menu. Modifythe required parameters in the Configure task panel.

Continue this procedure until you have created all the model elements, and the logical flow betweenthem for your model.

For more information, see Composing the Composite View in the Visual Composer Modeler's Guide .

You are ready to configure the UI elements and controls.

Step 4: Laying Out the UI

When your model is completed on the Design board, you can configure the way each UI element isdisplayed in the runtime environment. This enables you to define the runtime look-and-feel of each element,its position in the application, and its controls and data fields. You define these items using the Layout board.

To lay out the application UI:

For the Currency_Conversion application we are creating, we need to add a new field to each of theform views. The new field in the first form view will enable the runtime user to enter the amount thatthey want to convert to a different currency. The field in the second form view will display the result ofthe conversion process. To add the new fields, perform the following steps for each form viewelement:

Right-click the first form view and choose Define Data from the context menu.

In the Define Data dialog box, click the Add Field button and choose to add a field of typeNumber to the form view. Name the field in the first form view Amount ; name the field in thesecond form view Converted amoun t .

For this example, leave the default control that is automatically bound to the field (an input field).However, if you want to change the control type, you can click the control icon in the Define Datadialog box and choose a different control from the dropdown list.

Click Close . A control for the new field is automatically added to the form view.

Drag the new control in the first form view to the top of the form; leave the new control in the

second form view at the bottom of the form.Tip: You can also add controls to views by dragging them from the Compose task panel to therelevant view on the Layout board, and then binding them to a field if necessary.

Reposition the different view elements and controls in the layout. You can choose Vertical flow orHorizontal flow in the Configure task panel to automatically arrange all view elements vertically orhorizontally in the component, or to automatically arrange all controls in the selected view element.You can use drag and drop to change the order in which elements and controls are displayed, anddrag the handles of the form elements to resize them. You can also use the Columns property in theConfigure task panel to change the number of columns in the form view.

If you want to add a toolbar and toolbar buttons, select the required view element and select theShow toolbar checkbox in the Configure task panel. You can then add buttons to the toolbar bydragging them from the Compose task panel to the toolbar in the view element. The toolbar area ishighlighted in orange when you drag a control over it.
http://help.sap.com/saphelp_nwce10/helpdata/en/8d/0579850a2e45dd9ddb242926148414/frameset.htmhttp://help.sap.com/saphelp_nwce10/helpdata/en/8d/0579850a2e45dd9ddb242926148414/frameset.htm


10/14



Display and modify the properties of each UI element and control, such as an input form or buttoncontrol, by selecting it and clicking the Configure button in the task-panel toolbar. The Configure taskpanel is displayed, showing the properties of the selected element, for example, the element title,whether it has a toolbar, and its frame style.

Use the Title and Label fields in the Configure task panel to rename the form views and controls, sothey look similar to this:

For this example, we need to define a dynamic expression for the Converted amount field that tellsthe field to display the result of the Amount field value multiplied by the Conversion rate field value.To do this:

Right-click the Converted amount field and choose Configure from the context menu.

In the Value field, click the fx button and choose Enter formula .


11/14



In the Dynamic Expression Editor , delete the text displayed in the Expression pane.

In the Expression pane, enter an equal sign ( =), then expand the Data Fields node and theConversion Details node and drag the Amount field to the Expression pane.

Expand the Operators node, and drag the multiplication ( *) operator to the Expression pane.

Drag the ConversionRateResult from the Data Fields node to the Expression pane.

Click the Check button to verify the syntax. The dynamic expression should look like this:=[Conversion Details]@Amount*@ConversionRateResult

Click OK and then click the Save button on the toolbar to save your model.

For more information, see Laying Out the UI in the Visual Composer Modeler's Guide .

At this stage, your model is close to completion, ready to be deployed to the runtime environment.

Step 5: Deploying and Running th e Model

The models that you create in Visual Composer are saved in Generic Modeling Language (GML) format.When you compile your model, the GML format is converted into XGL format. When you deploy your model,the compilation process is performed and then the XGL code is compiled into the supported runtimelanguage that you select, such as Web Dynpro HTML or Web Dynpro Flex.

The runtime environment is independent of the modeling process, meaning that you can deploy a singlemodel to multiple runtime environments. You compile and deploy a model using the Deploy task panel.

To deploy and run an application:

Make sure that the Runtime environment to which you want to deploy the application is selected inthe Deploy task panel (make sure that nothing is selected on the Design board or Layout board toview this checkbox). If the Runtime property is not displayed in the Deploy task panel, chooseTools -> Options and select the Show runtime provider in Deploy task panel checkbox.

Specify that the component should be deployed as an application, by selecting the Define asapplication checkbox in the Configure task panel (make sure that nothing is selected on the Designboard or Layout board to view this checkbox).

Click the Deploy button in the task-panel toolbar.

To deploy all components throughout the dependency chain, select the Include dependencies checkbox. Any components referenced from the current model, any components referenced from thereferenced components, and so on, are all deployed, regardless of the development component inwhich they are located.

Click Deploy . The model is compiled and deployed to the selected runtime.

In the Results area of the Deploy task panel, expand the development component group in whichyou saved the Currency_Conversion model. Links are displayed for all the components defined asapplications in the development component that was deployed (and also in any developmentcomponents in the dependency chain, if the Include dependencies checkbox was selected).
http://help.sap.com/saphelp_nwce10/helpdata/en/83/8de633a236404bb9eff15ea9ec9704/frameset.htmhttp://help.sap.com/saphelp_nwce10/helpdata/en/83/8de633a236404bb9eff15ea9ec9704/frameset.htm


12/14



Click the Currency_Conversion application link to run the specific application. It should look similar

to this:

Check that the application is working by entering a number in the Amount field, and USD and EUR inthe currency fields. Click the Submit button to display the exchange rate between the selectedcurrencies and the converted amount. It should look similar to this:

For more information, see Compiling and Deploying Models in the Visual Composer Modeler's Guide .
http://help.sap.com/saphelp_nwce10/helpdata/en/45/fcdbc4a2654df7a81fd3ad81b026b3/frameset.htmhttp://help.sap.com/saphelp_nwce10/helpdata/en/45/fcdbc4a2654df7a81fd3ad81b026b3/frameset.htm


13/14



Related Content Visual Composer for CE: Finding the Documentation Visual Composer for CE Online Help Visual Composer page on SDN
https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7213http://help.sap.com/saphelp_nwce10/helpdata/en/45/04134e8a5741dee10000000a1553f6/frameset.htmhttps://www.sdn.sap.com/irj/sdn/visualcomposerhttps://www.sdn.sap.com/irj/sdn/visualcomposerhttp://help.sap.com/saphelp_nwce10/helpdata/en/45/04134e8a5741dee10000000a1553f6/frameset.htmhttps://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/7213


14/14


Copyright Copyright 2007 SAP AG. 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 AG.The information contained herein may be changed without prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.

Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.

IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400, iSeries, pSeries, xSeries,zSeries, System i, System i5, System p, System p5, System x, System z, System z9, z/OS, AFP, Intelligent Miner, WebSphere,Netfinity, Tivoli, Informix, i5/OS, POWER, POWER5, POWER5+, OpenPower and PowerPC are trademarks or registered trademarks ofIBM Corporation.

Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe SystemsIncorporated in the United States and/or other countries.

Oracle is a registered trademark of Oracle Corporation.

UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.

Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks ofCitrix Systems, Inc.

HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, MassachusettsInstitute of Technology.

Java is a registered trademark of Sun Microsystems, Inc.

JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by

Netscape.MaxDB is a trademark of MySQL AB, Sweden.

SAP, R/3, mySAP, mySAP.com, xApps, xApp, SAP NetWeaver, and other SAP products and services mentioned herein as well as theirrespective logos are trademarks or registered trademarks of SAP AG in Germany and in several other countries all over the world. Allother product and service names mentioned are the trademarks of their respective companies. Data contained in this document servesinformational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAPGroup") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors oromissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in theexpress warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting anadditional warranty.

These materials are provided as is without a warranty of any kind, either express or implied, including but not limited to, the impliedwarranties of merchantability, fitness for a particular purpose, or non-infringement.

SAP shall not be liable for damages of any kind including without limitation direct, special, indirect, or consequential damages that may

result from the use of these materials.SAP does not warrant the accuracy or completeness of the information, text, graphics, links or other items contained within thesematerials. SAP has no control over the information that you may access through the use of hot links contained in these materials anddoes not endorse your use of third party web pages nor provide any warranty whatsoever relating to third party web pages.

Any software coding and/or code lines/strings (Code) included in this documentation are only examples and are not intended to beused in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules ofcertain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errorsor damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent.

Date post:	02-Jun-2018
Category:	Documents
Upload:	miquimain
View:	224 times
Download:	0 times

Visual Composer for Netwaver CE

Documents