Skip to Content

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:
image

Now let’s get started:
image
In the first step I have created an iView in the VC and gave the first function an input screen and a results screen.
image

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.
image  image
At “Configure Element” you have to map the CUSTOMERNO input field from the second BAPI to the CUSTOMER field from the first BAPI.
image

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

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

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

Now the application is ready to run.
image
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.
image

To report this post you need to login first.

12 Comments

You must be Logged on to comment or reply to a post.

  1. Valery Silaev
    Twan,

    This map web-service is the most interesting part. Unfortunately, you didn’t explain it at all 🙁

    All the rest was already published on SDN in some or another form, but creating own component for VC was not discussed… Sehr schade

    VS
    P.S. Link to forum thread in post is broken

    (0) 
    1. R. Kleijn
      Valery,

      Creating your own component for VC can be done in many ways. You can use CAF, or any other publicly available service which can be used in VC by importing the WSDL, RFC (BAPI), ABAP service, and so on. In fact the ‘how to’ for creating a component would be far too extensive for this article.

      If you are interested in the webservice used in this example then please let me know and i can provide you with more information. If you are interested in how to create a component you should specify what you are actually looking for.

      With kind regards,

      Ronald Kleijn
      PS: The forum is down, so i assume the link will work when the forum is working again.

      (0) 
      1. David Pierre
        Hi ,

        What facinates me about this blog is that in Visual Composer 7.1 (part of CE7.1 installation) , there is no “URL/HTML View” anymore (I’m using SPS04)!  It disappeard as opposed to VC in NW7.0 release.

        Therefore, I’m very curious how you created the URL
        that effectively displays the Mappoint map in the output canvas!

        You can also contact me @ dpierre2@csc.com to discuss this.  I’m building a prototype with a similar setup right now (but using Google Maps) and this would come in handy.

        BR ,
        David Pierre

        (0) 
      2. Anton Ansalmar
        Hi ronald,

        Could you please send me some information regarding how I can configure this webservice, we would like to demo this to one of our clients.

        anton

        (0) 
      1. David Pierre
        Hi ,

        What facinates me about this blog is that in Visual Composer 7.1 (part of CE7.1 installation) , there is no “URL/HTML View” anymore (I’m using SPS04)! It disappeard as opposed to VC in NW7.0 release.

        Therefore, I’m very curious how you created the URL
        that effectively displays the Mappoint map in the output canvas!

        You can also contact me @ dpierre2@csc.com to discuss this. I’m building a prototype with a similar setup right now (but using Google Maps) and this would come in handy.

        BR ,
        David Pierre

        (0) 
  2. T.B. Elzinga
    Hi Twan,

    Nice blog and of great use when explaining E-SOA to curious customers/BPX-consultants. For demo-purposes a suggestion to put this on film -:).

    Greetings Theo

    (0) 
  3. Marcus Schiesser
    This visual composer seems to be mostly interesting. I recently saw a live demonstration at the Cebit and was very impressed.
    About one month ago I also developed a mashup using Adobe Flex / Kapow. It is using data from the german supplier directory Wer-liefert-was? and uses it to send order requests to these suppliers. The location of the suppliers could be shown on a map (hmm, every mashup seems to need this).
    You can find a demo of the mashup at:
    http://www.sbz-gpm.de/ria/werliefertwas.html
    The demo does not actually access the service but only demo data as the service is not for public use – also it’s unfortunately in German.
    More info you can find at my blog:
    http://www.sbz-gpm.de/component/option,com_jd-wp/Itemid,56/p,9/
    (0) 
  4. Angélique Heutinck
    Hi Twan,

    I tried to recreate your application but I used another external web service called http://ws.strikeiron.com/MapQuestBasicMap?WSDL. When I test it via the internet, it works perfectly. However, I added it to my VC application and deployed it in Flash successfully. However, when I run the application I get

    Portal Runtime Error

    An exception occurred while processing a request for :
    iView : N/A
    Component Name : N/A

    iView not found: undefined.default.
    Exception id: 09:33_24/12/07_0024_5654750
    See the details for the exception ID in the log file

    Do you know why this happens?

    kind regards,
    Angelique Heutinck

    (0) 

Leave a Reply