visual composer how to setup and config a sales rep data view

8/3/2019 Visual Composer How to Setup and Config a Sales Rep Data View

1/12

A Step by Step Guide for Creat inga Basic V isua l Composer App l ica t ion .

Applies to:

Visual Composer enhancement package 1 for SAP NetWeaver Composition Environment 7.1.For more information, visit the Visual Composer homepage

Summary

This step-by-step guide will help you create a simple Visual Composer application. You can use this exercisein order to learn basic Visual Composer capabilities.

Comments

In this example we will use simulated services. Simulated services are not real services, theyare a representation of a service and they hold static data

This example assumes you are using the NWDS (the NetWeaver development studio)

Author: Yogev Lidor

Company: SAP

Created on: December 2008

Author Bio

Yogev is a Visual Composer Solution Expert working in the Visual Composer Solution Office.

SAP COMMUNITY NETWORK SDN - sdn.sap.com | BPX - bpx.sap.com | BOC - boc.sap.com

2008 SAP AG
https://www.sdn.sap.com/irj/sdn/nw-vchttps://www.sdn.sap.com/irj/sdn/nw-vc


2/12

A Step by Step Guide for Creating a Basic Visual Composer Application.

Table of Contents

Scenario Description...........................................................................................................................................3

How to?...............................................................................................................................................................3

Create a new Development Component (DC) ................................................................................................3

Create a New Model .......................................................................................................................................4

Importing the Services ....................................................................................................................................5

Modeling the Application.................................................................................................................................6

The Runtime Application...................................................................................................................................10

How does it Work?........................................................................................................................................10

Adapting the Layout..........................................................................................................................................10

Basic Layout Modifications ...........................................................................................................................10

Advanced Layout Modifications ....................................................................................................................10

Related Content................................................................................................................................................11

Copyright...........................................................................................................................................................12


2008 SAP AG


3/12


Scenario Description

A list of customer names is presented to the sales representative and he has the option to getsome personal information.

How to?

Create a new Development Component (DC)

1. First, lets create a new Development Component that will store your model. To do that,select Filefrom the top menu, Newand and from the dropdown menu select VisualComposer Development Component:

2. Expand the node, select MyComponentsand click the Nextbutton:

3. Name your new DC and click Finish:


2008 SAP AG


4/12


4. You can now see your new DC in the Model Browsertab (on the left side of the screen).

Create a New Model

5. To create a new model, make sure your focus is on the storyboard, select Modelfromthe top menu and from the dropdown menu select New:


2008 SAP AG


5/12


6. Name your model, in theDevelopment Componentfield select the DC you just created in theprevious step and clickOK:

Importing the Services

We will use two services to implement the scenario:

Customers (filename - Customers.zip): This service supplies the basic data about thecustomers (ID, Name and Surname).

Customers Details (filename - Customers_Details.zip): This service supplies moredetailed information about the customers (ID, Email, Address, City and Phone).

7. To import the services make sure your focus is on the storyboard, select Modelfrom thetop menu and from the dropdown menu select Import:

8. In the Import Modeldialog box, select the DC you created and click Browse:


2008 SAP AG
https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/106e5c7f-d1b7-2b10-0497-d0cdb793f82bhttps://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/10b57614-d1b7-2b10-f098-d1bcd521b538https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/10b57614-d1b7-2b10-f098-d1bcd521b538https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/106e5c7f-d1b7-2b10-0497-d0cdb793f82b


6/12


9. Select the Customers.zip file (attached) and click the Importbutton.

10. To import the second service, repeate steps 7,8, and in step number 9 make sure youselect the Customer_Details.zip file (also attached).

Modeling the Application

On the upper part of you story board you can see 3 open tabs:

1. You new model.

2. Customers (a simulated service).

3. Cusromers_Details (a simulated service).

To start modeling your applicetion select the left tab (Your model name).

1. Search the Customers service. Do that by clicking on the Searchbutton on the right handtool strip:

2. Fill in the fields as follows and click Search:


2008 SAP AG


7/12


3. Drag the service from the Results window to the storyboard:

4. In the same way, search for the Customers_detailsservice and drag it onto the storyboard:

5. To generate the customers list we will initiate the Customersservice and create a tablecontaining all the customers. To do that, drag a line out of the Inputport of the Customersservice and from the dropdown menu select Start:

6. To present the data, drag a line out of the Customers service and from the dropdown menuselect Table:


2008 SAP AG


8/12


7. Drag a line out of the out1 table to the Inputport of the Customers_Detailsservice:

8. Drag a line out of the outputport of the Customers_Service:

9. The customer ID shows in both tables. To prevent data duplicity, right-click the outputtableand from the dropdown menu select Define Data:

10. In the Define Data dialog box uncheck the ID box and click Close:


2008 SAP AG


9/12


11. You can now Deploy and Run you application!!!

The final model (filename basic_VC_app.zip):


2008 SAP AG


10/12


The Runtime Application

The runtime application includes both tables. The top table holds a unique record for eachcustomer and the buttom table supplies detaild information about each selected customer from thetop table. As you can see, one person can have more than one address, phone and Email:

How does it Work?1. The start point triggers the Customersservice.

2. The Customersservice fills in the out1 table.

3. A selected row in out1 table triggers the Customers_Detailsservice.

4. The Customers_Detailsservice presents the selected customer details in the outputtable.

Adapting the Layout

Basic Layout Modifications

You can modify your application layout by switching to Layoutboard. Do that by clicking the Layout

tab in the bottom of your storyboard (in design time).When Switching to Layout, you can change the location of a table by dragging it.Also you can change the order of the columns inside each table by dragging the columns. Pleasetry it.

Advanced Layout Modifications

Each UI component in the model has a set of changeable UI definitions that can be found in theConfigure Task Panel of the component.

Since this Document doesnt deal with advanced capabilities, you might be interested in expendingyour knowledge by using SAP NetWeaver CE Library or going through the Intermediate Application

for Visual Composer document.


2008 SAP AG
http://help.sap.com/saphelp_nwce10/helpdata/en/44/d958673ef05f4de10000000a11466f/frameset.htmhttp://help.sap.com/saphelp_nwce10/helpdata/en/44/d958673ef05f4de10000000a11466f/frameset.htm


11/12


Related Content

Visual Composer basic application The model

For more information, visit the User Interface Technology homepage.

For more information, visit the Visual Composer homepage.


2008 SAP AG
https://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/00ff6c93-d1b7-2b10-3f9c-90322dd1f78dhttps://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/00ff6c93-d1b7-2b10-3f9c-90322dd1f78dhttps://www.sdn.sap.com/irj/sdn/nw-uihttps://www.sdn.sap.com/irj/sdn/nw-vchttps://www.sdn.sap.com/irj/sdn/nw-vchttps://www.sdn.sap.com/irj/sdn/nw-uihttps://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/00ff6c93-d1b7-2b10-3f9c-90322dd1f78d


12/12



Copyright

2008 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 byNetscape.

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 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 mayresult 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.

visual composer how to setup and config a sales rep data view

Documents