Visual Composer ESworplace Procedure

This is a nice example by Benny Schaich-Lebek showing how to leverage the object oriented programming tool Visual Composer against the eSOA library.  I will try to located a study which gives the efficiency lift from visual oriented programming development vs. hard coding.

This is a nice example by Benny Schaich-Lebek showing how to leverage the object oriented programming tool Visual Composer against the eSOA library.  I will try to located a study which gives the efficiency lift from visual oriented programming development vs. hard coding.

Benny Schaich-Lebek

Real World Composites I – Visual Composer
Benny Schaich-Lebek SAP Employee
Business Card
Posted on Jan. 18, 2008 01:45 AM in Composition Environment (CE), Application Server, Enterprise Service Community, Enterprise SOA, SAP NetWeaver Platform

Starting up on a CE environment

 What I wanted to do was  to find out about the details of the promised world of services and how this new paradigm will feel for those who actually have to live with it. What will it mean to really do a service oriented program?

What the concept says so far, the design should run in general like this:

  1. Design a diagram of actions regardless of available services
  2. Map available services to the desired actions.
  3. Write new services for those actions you could not find a service for.

 This is the most simple explanation I hacked together out of all the material I read about SOA strategies. The full tools from SAP for this approach are not ready yet (like diagram tools, which are scheduled to arrive next year), but we can draw on paper already and assume to go on from there.

By checking for a useful real world problem I browsed through the services available from the ESWorkplace on SDN. What I found was that those services always need some key to identify orders, customers, or any useful data. As an End User of an SAP application you might even prefer to have a unique key for each customer. But I think even  office clerks have a starting day and doing a demo usually gives me a headache to find out a single key.

So why not starting with an easy app that will provide such key through an easy search automatically. Many of you ABAPers and Consultants might know already that I chose the stony way…


First of all there is some configuration to do (after installation, which I’ll skip). As others have described this already, I will not go through this again in detail. The article Browsing an Enterprise Services Registry in Visual Composer  by Rudi Held et al describes this perfectly. Rudi assumes you have an account on the ESWorkplace (which you can get fast and for free also) but it should also be possible with that data to connect to other repositories in your own environment. Of course this is officially documented also in Defining Destinations.

Shortly spoken, what you do there is to configure the services registry on system HU2 of the ESWorkplace and setting values for UDDI_DESTINATION and CLASSIFICATION_DESTINATION.

Using Visual Composer with ES Workplace

Once this configuration work is done we now can activate the Visual Composer (and just in case you miss any link to VC, its http://localhost:50000/VC/freestyle.jsp on a standard install). To see services in there and it is currently only working with Internet Explorer. Opening a new model with the title “DemoService” opens a pane that has the Search-Button on the right side. As it’s already described in Rudi’s article, you have to select “Service Registry” in “Search in” and then click “Advanced Search” to open the Classification menu.

Classification List

Click through the tree in Group classifications->BrowseByApplication->ERP Foundation->Business Partner Data Management and click the check box of “Customer”. After an OK and clicking the Search-Button again you’ll get back two services. Drag and drop “CustomerSimpleByNameAndAdressQuery” on the design pane. The typical service picture appears.

Click on the diamond shape, drag away and drop right beneath the service. On the drop a menu appears that lets me choose a form view as input form.

Choosing such the form view appears, together with a link to the services input and a data mapping menu. I deselect all options and chose the field “First Name Line” 

Define Data

Same happens to the right side, where I choose a table form. And before frustrating you, I’ll uncover the fields I activated for the output table. Its the Id, FirstlineName, SecondLineName, and Formofadresscode (the latter is not useful for this, but I wanted to see some data at least…)

Now I click the Deploy Button on the far right and hit Deploy once more in the appearing menu. Once this is done a couple of links appear where you either may check this application in Web Dynpro or Flash Technology. With those links we can already test the application (I don’t care for the Layout at the moment, as it’s good enough for testing).

Tip:  Handle Service Structure with Two Forms

I’m sure many of you ABAP handlers are familiar with SAP response structures so it’s no wonder for you that they are *huge*.  However, some people may wonder about this so I spend a few words to explain this. The structure you have already seen is hierarchical and has a complete table in it’s output. This is quite common in the SAP world and as you will see there is order behind that. For example there is always a part in the tree called “Log” that includes data about the last call, including useful error messages that are most of the time better than what the development environment tells you.

As this stuff is structured the problem is: how can I show the flat information together with the table in the same form? 

The answer is: wrong thought. What you want to see is all information on the same page and for this you don’t need to fiddle around inside a view. Just make two of them, then one is a form view and the other one is a table view. Then flat data goes to the form and the table … guess you got it. This also works in case you got more then one table in one response.

And the whole thing looks like this: 

 Two forms

 Whether with or without this little addition, you now can run application DemoService and see the output. I mentioned already that I hate demos where I have to know IDs out of the dark as this seems not very realistic to me (despite sources say that the average daily user always knows the IDs of his most important business partners by heart). With our small app we can work with wild cards and submit for example a “C*”. That gives already back the maximum amount of 100 records and lists them in the table.

Customer List


 Next Step, Next Service

As you can see from the line going away from my table in design mode already, I added some more services. Well, we do have Customers, so what can we derive from that? Orders of course. Lets go back to Search, click on “Advanced Search” again and go to Group classifications-> BrowseByApplication-> ERP Applications without HCM-> Sales Order Processing and chose Sales Order.

Then choose the service SalesOrderBasicDataByBuyerAndBasicDataQueryResponse_In. This group has only one service with the same name (phew!!) and can be dragged on the Design pane.

Draw a connection from the out-pin of the “Customer” view and connect it to the input of the server.

Right click on the connection to open the mapping window. You can click on the drop down of the “Assigned Value” field of SalesOrderBuyerPartyIntern and connect it with ID.ID. This way the Customer Id gets connected to the same in the order providing service.


At the output we  do the same procedure as before, drag away from the output and choose a table in the upcoming menu. Again this data is more then a standard table can take. I’m choosing only a few interesting values like BuyerId, NetAmount, CurrencyCode, and some of the FormattedName fields (which provide values for Organization names and so on).

Let the fun begin

 From this point I first was puzzled a little bit (don’t laugh! I’m not supposed to juggle business details), as  I could not find a service that would now easily provide line items. As usual those services expect the line item ID, that I cannot provide in first place, of course. But then I found this service that provides a complete order – with all the detail order including a list of line items, which is SalesOrderByIDQueryResponse_In – and was on our list from the beginning.

The question to raise here is if it really is a good idea to put all  this info on the same screen, as the user has to read and select certain values anyways. That means that service calls may be split into different pages, but it was not my goal to win a design award. We can get access to all the data about a customer concerning their orders. And that was achieved.

Now we can do something more complicated. 

 Full project


This was relatively easy. But what if we reach areas where Visual Composer does not allow us to go forward? Then of course we are back in code. This is what happens in Part II. Soon to appear in this theater 😉

Benny Schaich-Lebek is a product specialist at SAP NetWeaver product management


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s