Mash up your application

[tbroek]

I really like the Visual Composer as a tool to build demo’s that show the power of E-SOA. For my last presentation I built a mash up application: You take a service from one system (let’s say SAP) and another one from another system. You combine them both into a composite application, a mash up application so to say.

The term mash up originates from the music world. Example: A famous Dutch DJ, Ben Liebrand, made an interesting mash up mix that you can watch on YouTube.
Back to our world: I combined two SAP functions with an external web service. The application shows a list of all available customers in ECC, you can pick one and the web service shows the location on a Microsoft Mappoint map.

The power of the demo is that you can build this application within 10 minutes and that you have a sexy looking user interface without having to write one single line of code. What more do you need to impress your customers?

Shopping cart:

• Custom made function module, remote enabled. I copied the BAPI_CUSTOMER_GETLIST to a custom one to delete some overhead in the input parameters but mostly because I could not get it to work properly in the VC, and I am not the only one: see this BAPI_Customer_GetList.
• BAPI provided by SAP: BAPI_CUSTOMER_GETDETAIL2
• External web service: The Microsoft web service provided by SAP was not very helpful within the VC environment, so a colleague of mine, Ronald Kleijn, made a wrapper service to simplify and only provide us the necessary information. He did it with the Visual Web Studio and deployed the service to a Microsoft server. Thanks Ronald for making this possible.

Let me first share with you the total application:

Now let’s get started:

In the first step I have created an iView in the VC and gave the first function an input screen and a results screen.


Secondly I linked the GETDETAIL BAPI to the results screen, as I want this BAPI to get the address data from the selected customer. With “Define data service” I specified the input and output fields to be used. In this example I only want to see the City, Country, Postal Code and Street from the selected customer.
 
At “Configure Element” you have to map the CUSTOMERNO input field from the second BAPI to the CUSTOMER field from the first BAPI.

Third I added the web service. Of course I first added the web service system from the “Tools” menu. Again some field mapping had to be carried out. The URL I will get from this service is passed into the HTML view.


On the layout tab, step 4, you can check the proposed layout and change it to your wishes. Also you can make the fields from the GETDETAIL BAPI read-only.


And as a last step, I deployed the application, in Flash of course, to the portal.

Now the application is ready to run.

Press “Submit” to get a list of all available customers.
Select a customer from this list. Check the address details and look at the map where your customer is located.