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

Size: px

Start display at page:

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

Marlene Barnett
5 years ago
Views:

Visual Composer for NetWeaver CE: Getting Started with a Typical Workflow Applies to: Visual Composer for SAP NetWeaver Composition Environment 7.

1 Visual Composer for NetWeaver CE: Getting Started with a Typical Workflow Applies to: Visual Composer for SAP NetWeaver Composition Environment 7.1 Summary This article aims to help you get started modeling applications with Visual Composer for SAP NetWeaver Composition Environment. It takes you through a typical workflow, in which you define a Web service destination in NetWeaver Administrator, and then consume that Web service in a simple Visual Composer model. Author: Nicole Goldman Company: SAP Created on: January 2, 2008 Author Bio Nicole Goldman is an information developer in the SAP NetWeaver Product Management group located in Ra'anana, Israel. She is responsible for the documentation of Visual Composer for SAP NetWeaver Composition Environment SAP AG 1

2 Table of Contents Getting 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 SAP AG 2

3 Getting Started Installing Visual Composer Visual Composer is included as part of the SAP NetWeaver Composition Environment installation. You install Visual 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 that converts an amount from one currency to another. To configure the Web service: Open NetWeaver Administrator using the following URL: name with full domain>:<portnumber>/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: 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 choosing Refresh from the context menu. Logging 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: name with full domain>:<portnumber>/vc/freestyle.jsp For example: where dwdf041.wdf.sap.corp is the fully-qualified domain name of the Visual Composer server host, and is the application port number on the AS Java in use by the Visual Composer Server installation. Note that VC is case sensitive. In the Welcome screen, enter your user name and password and click Logon SAP AG 3

Introducing Storyboard Visual Composer Storyboard contains all the tools you need to create your model. The Storyboard desktop has two main areas: the workspace and the accompanying task panel.

4 Introducing Storyboard Visual Composer Storyboard contains all the tools you need to create your model. The Storyboard desktop has two main areas: the workspace and the accompanying task panel. The workspace displays your model as you build and modify it on the Design board and the Layout board, while the task panels display the tools and 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 the workspace 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: 2007 SAP AG 4

5 ... Typical Workflow Before starting to model an application with Visual Composer, you should spend time planning your models and the components used to create them. Careful planning enables you to create usable components in the most 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 the Compose 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 Layout board, 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 and Running the Model. Step 1: Creating a Model You create a model in a specific development component in the development server. If the development component in which you want to create the model does not exist, you can create a new development component in the local repository (and later add it to the shared repository or source control system). After you 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 kits that are installed on your Visual Composer server. With core Visual Composer, the following model types are provided: 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 SAP AG 5

In the Create New Model dialog box, specify or select the following options: Model Type: Composite View Name: Currency_Conversion Repository: Local Repository Software component: sap.

6 In the Create New Model dialog box, specify or select the following options: Model Type: Composite View Name: Currency_Conversion Repository: Local Repository 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 the model in the local repository, so it can only be accessed by you. If you had chosen to store the model in the shared repository or in the source control system, it would be accessible by all modelers and automatically be checked out to you. For more information, see Creating a Model and Development Component in the Visual Composer Modeler's Guide. 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 information in your model. For this exercise, we need to look for the Web service that we configured previously. You perform this procedure using the Search task panel. To locate the Web service: Click the Search button in the task-panel toolbar SAP AG 6

In the Search in dropdown list, choose the system from which you want to retrieve the data service, or choose Visual Composer Models to reuse a model from the repository.

In this case, we want to choose CurrencyConverter (WebService), which is the Web service that we defined earlier.

7 In the Search in dropdown list, choose the system from which you want to retrieve the data service, or choose 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, we want 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 your models, 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, or Model. In this case, choose WSDL. Click Search. All the Web service operations matching the search criteria and residing in the selected system 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 and drag 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 that is displayed: Nested View: Inserts a reference to the selected component from the current component, as a nested view. A nested view is displayed at runtime within the current component, in the same window. 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 new window at runtime. For more information, see Discovering Data Services and Reusing Components in the Visual Composer Modeler'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 SAP AG 7

Step 3: Designing the Logic and Flow After you have imported the sources of data, you design the component logic by creating the required model elements in the workspace and defining the data flow

To define the logic and flow of your 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.

8 Step 3: Designing the Logic and Flow After you have imported the sources of data, you design the component logic by creating the required model elements in the workspace and defining the data flow between them. You perform this procedure on the Design board. To define the logic and flow of your 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 to define an element, the fields of the selected item are automatically mapped to corresponding fields of the data service and the required controls are created for the fields. You can see this by switching to the Layout board and looking at the controls that were added automatically to the form. 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. To add an element not contained in the context menu, click the Compose button in the task-panel toolbar and drag the required element from the task panel onto the workspace. Then connect it to the relevant port of the data service and map the fields of the element to the corresponding fields 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 the connecting line on the Design board and choosing Configure from the context menu. Modify the required parameters in the Configure task panel. For this example, you can leave the default settings. For connections types that use data mapping, check that the data is mapped correctly, by rightclicking 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 SAP AG 8

9 If you added any additional elements, for example, any operators or connectors, configure them by right-clicking the element on the Design board and choosing Configure from the context menu. Modify the required parameters in the Configure task panel. Continue this procedure until you have created all the model elements, and the logical flow between them 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 is displayed 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 the form views. The new field in the first form view will enable the runtime user to enter the amount that they want to convert to a different currency. The field in the second form view will display the result of the conversion process. To add the new fields, perform the following steps for each form view element: 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 type Number to the form view. Name the field in the first form view Amount; name the field in the second form view Converted amount. 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 Data dialog 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 the relevant 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 or Horizontal flow in the Configure task panel to automatically arrange all view elements vertically or horizontally 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, and drag the handles of the form elements to resize them. You can also use the Columns property in the Configure 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 the Show toolbar checkbox in the Configure task panel. You can then add buttons to the toolbar by dragging them from the Compose task panel to the toolbar in the view element. The toolbar area is highlighted in orange when you drag a control over it SAP AG 9

Display and modify the properties of each UI element and control, such as an input form or button control, by selecting it and clicking the

The Configure task panel is displayed, showing the properties of the selected element, for example, the element title, whether it has a

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

10 Display and modify the properties of each UI element and control, such as an input form or button control, by selecting it and clicking the Configure button in the task-panel toolbar. The Configure task panel 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, so they look similar to this: For this example, we need to define a dynamic expression for the Converted amount field that tells the 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 SAP AG 10

11 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 the Conversion 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 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 the 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 runtime language 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 single model 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 in the Deploy task panel (make sure that nothing is selected on the Design board or Layout board to view this checkbox). If the Runtime property is not displayed in the Deploy task panel, choose Tools -> 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 as application checkbox in the Configure task panel (make sure that nothing is selected on the Design board 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 the referenced components, and so on, are all deployed, regardless of the development component in which 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 which you saved the Currency_Conversion model. Links are displayed for all the components defined as applications in the development component that was deployed (and also in any development components in the dependency chain, if the Include dependencies checkbox was selected) SAP AG 11

Click the Currency_Conversion application link to run the specific application.

entering a number in the Amount field, and USD and EUR in the currency fields.

12 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 in the currency fields. Click the Submit button to display the exchange rate between the selected currencies 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 SAP AG 12

13 Related Content Visual Composer for CE: Finding the Documentation Visual Composer for CE Online Help Visual Composer page on SDN 2007 SAP AG 13

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 of IBM Corporation. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated 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 of Citrix Systems, Inc. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute 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 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. Data contained in this document serves informational 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 ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty. These materials are provided as is without a warranty of any kind, either express or implied, including but not limited to, the implied warranties 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 these materials. SAP has no control over the information that you may access through the use of hot links contained in these materials and does 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 be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent SAP AG 14

Visual Composer - Task Management Application

Visual Composer - Task Management Application Applies to: Visual Composer for NetWeaver 2004s. Summary This document describes the basic functionality of the Task Management application, which is now available