Skip to Content
Introduction

Hello again everyone, I have had a couple of people including a colleague of mine ask me if I had created a blog about creating a web service based application using the SAP NetWeaver Visual Composer. I mentioned I had created one but hadn’t blogged about it yet so here we go.

One of the coolest and most extensible parts of the Visual Composer is the capability to easily link to and consume a web service from within the SAP NetWeaver Visual Composer storyboard. Curious how to do this? Read on…

Buiding a Web Service based Visual Composer Application

Ok, Let’s Begin!

1/ The first thing we have to do is login to the Visual Composer.

Figure 1.1
image

2/ Once logged into the Visual Composer create a new model call it Weather Information.

Figure 1.2
image

3/ Drag and drop an iView into the Visual Composer work area, name the iView: Weather Application

Figure 1.3
image

4/ Now we need to create a web service system to build the Weather application so first select the ‘Define Web service system’ option from the ‘Tools’ menu.

Figure 1.4
image

5/ Next enter the WSDL, a name and system alias for this new system being created. Name the system WeatherSystem use the same name for the alias as well. The WSDL to use for the Web service URL entry is http://www.webservicex.net/WeatherForecast.asmx?WSDL. Once finished hit the ‘Create’ button.

Figure 1.5
image

6/ Now that we have created our Web Services system, navigate to the Find Data tab and choose the system WeatherSystem. Display all services available for this system.

Figure 1.6
image

7/ Drag both of the data services into the Visual Composer work area.

Figure 1.7
image

8/ From the input port drag and drop a form into the work area

Figure 1.8
image

9/ Give the form the title Enter a City or Zip Code

Figure 1.9
image

10/ We are now going to add a field to the form ZIP CODE.

Figure 2.0
image

11/ Navigate to the Layout tab, right click on the PlaceName Field and change the label to “City”. Repeat this step for the ZIPCODE Field and change the label to “Zip Code”.

Figure 2.1
image

12/ Drag & Drop the input of the zipcode specific web service to the output port of the form. Map the ZIPCODE from the form to the ZipCode of the Web Service. The single input form will control both of the web service calls.

Figure 2.2
image

13/ Drag a table view out from the top output port of the two web services. Name the table views Weather by City & Weather by Zip Code respectively.

Figure 2.3
image

14/ Navigate to the Layout tab of the Visual Composer and stack the input form, the Weather by City and Weather by Zip Code views on top of one another.

Figure 2.4
image

15/ Make sure that in our table views we are only displaying the:

  1. Day
  2. Minimum Temp (Fahrenheit)
  3. Maximum Temp (Fahrenheit)

To do this, double click on the table views in layout mode one by one. On the lower right hand corner you will see the Columns for the table view. Make sure there is a check mark in front of only the three visible elements.

Figure 2.5
image

16/ Deploy the model

Figure 2.6
image

17/ Launch the iView

Figure 2.7
image

18/ View the Results

Figure 2.8
image

We have now completed the beginner portion of the exercise… For the advanced portion, which utilizes more features within the Visual Composer read on!

Advanced Functionality

19/ Now we are going to modify our existing application and make it a lot more user friendly. Re-open the model we have created thus far.

Figure 2.9
image

20/ The first thing we will do is enforce that the user entry screen is populated correctly by using guard conditions. We only want our users to populate only the ZIP code or the city not both. So we need to click on the submit connector to the web service Getweatherbyplacename.

Figure 3.0
image

21/ Open the guard condition by double clicking on the fx in the right hand corner of the input field.

Figure 3.1
image

22/ The submit event should be invoked when only the placeName is populated and not the zip code.
Enter the following expression into the Guard Condition:

  • BOOL(IF(@PlaceName == ” OR @ZIPCODE <> ”,false,true))

Figure 3.2
image

23/ We now have to set up the guard conditions for the other web service. Click on the submit link to the Getweatherbyzipcode web service and open the guard condition.
Enter the following expression into the Guard Condition:

  • BOOL(IF(@PlaceName <> ” OR @ZIPCODE == ”,false,true))

Figure 3.3
image

24/ If only one of the Web services is invoked either the Getweatherbyplacename or Getweatherbyzipcode logic would dictate that we only want to see the resulting output of the web service we invoked. To make sure that just one of the table views is visible at a time we need to utilize the visibility conditions of the table views.

  • Click on the Weather by City Table View

Figure 3.4
image

25/ We need to create a datastore variable and call it cityorzip.

  • Drag and drop a datastore object into the work area and double click on the object.

Figure 3.5
image

26/ Click on the new field button and create the variable

  • CITYORZIP

Figure 3.6
image

27/ Navigate back to the Weather by City table view and double click on the Visibility condition as seen in step 24.

Figure 3.7
image

28/ Enter the following condition for visibility:

  1. BOOL(IF(STORE@CITYORZIP == ‘CITY’,true,false))
  2. Along with setting the Visibility condition set the Transition effect to Fade In/Out.

Figure 3.8
image

29/ Double click on the Weather by Zip Code table view.

Figure 3.9
image

30/ Double click on the Visibility condition and enter the following expression:

  1. BOOL(IF(STORE@CITYORZIP == ‘ZIP’,true,false))
  2. Set the Transition effect to Fade In/Out

Figure 4.0
image

31/ We now need to update the data store so that it reflects the correct value for the datastore variable CITYORZIP.

  • Drag and drop from the entry form and add a datastore.

Figure 4.1
image

32/ Right click on the the link to the datastore just generated and click the Event Selector button. Choose the submit event and hit the OK button.

Figure 4.2
image

33/ Map a blank value to the datastore.

Figure 4.3
image

34/ Drag and drop from the output port of the Getweatherbyplacename service and choose the Data Store option from the context menu.

Figure 4.4
image

35/ Select the link just generated and map the value ‘CITY’ to the datastore variable CITYORZIP.

Figure 4.5
image

36/ Connect the Getweatherbyzipcode service to the already existing datastore object and map the value ‘ZIP’ to the datastore variable CITYORZIP.

Figure 4.6
image

Figure 4.6A
image

37/ Navigate to the layout tab of the Visual Composer storyboard and overlay the two table views so they are sitting one right on top of the other.

Figure 4.7
image

38/ What’s an analytical app without some chart visualization so:

  1. Drag and drop from the Getweatherbyplacename service and create a new chart view.
  2. Double click on the chart view to expose its properties

Figure 4.8
image

39/ Configure the chart as seen on the right

Figure 4.9
image

Figure 4.9A
image

40/ Add the following two data series to the chart

  1. Minimum Temperature = NVAL(@MinTemperatureF)
  2. Maximum Temperature = NVAL(MaxTemperatureF)

Both need to be set up with the expression editor because the values coming from the web service are represented as texts

Figure 5.0
image

Figure 5.0A
image

41/ Once the data series have been setup set the visibility condition for the chart view just as you did for the Weather by City table view.
Set the expression to:

  • BOOL(IF(STORE@CITYORZIP == ‘CITY’,true,false))

Figure 5.1
image

42/ Set the transition effect to Fade In/Out

Figure 5.2
image

43/ Create a chart view for the Getweatherbyzipcode service as well.

  • Drag and drop from the output port of the service and create a chart view named Min & Max Temperatures

Figure 5.3
image

44/ Configure the chart as can be seen on the right

Figure 5.4
image

45/ Create two data series just as was performed in step 40.

  1. One series for Minimum temperature in Fahrenheit
  2. One series for Maximum temperature in Fahrenheit

Figure 5.5
image

46/ Navigate to the visibility condition of the newly created chart view and set it up just as the Weather by Zip code table view is set up.

Figure 5.6
image

47/ Set the Transition effect to Fade In/Out

Figure 5.7
image

48/ Navigate to the layout tab and associate the two chart views one on top of the other to the right of the initial entry form.

Figure 5.8
image

49/ Navigate back to the design tab and drag and drop an HTML view onto the work area. Name the HTML View Weather Image.

Figure 5.9
image

50/ Map both the Weather by City output port and the Weather by Zip Code output ports to the Weather Image input port. Map the url of the input port to the value @WeatherImage coming from both output ports.

Figure 6.0
image

51/ Select the Weather Image HTML View and double click on the Visibility condition. Set the Visibility condition to the following expression:

  1. BOOL(IF(STORE@CITYORZIP <> ”,true,false))
  2. Select the OK button
  3. Make sure you set up the Transition effect as Fade In/Out

Figure 6.1
image

52/ Navigate to the Layout tab and place the Weather Image HTML View to the right of the two overlayed chart views. Save your work.

Figure 6.2
image

53/ Deploy your iView

Figure 6.3
image

54/ Launch the iView

Figure 6.4
image

55/ View your completed application in the portal!

Figure 6.5
image

You have now completed building an Advanced Web Application in Visual Composer utilizing Web Services!!

To report this post you need to login first.

23 Comments

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

  1. Aneez Hameed
    Hi,

    I have tried deploying this application using the sneak preview  , but during the deployoment ( the advanced part ) , I am getting the following error

    Error in executing a process for Flex compilation, Error 1103: There is no property with the name ‘ROW2’.
          (C:\usr\sap\J2E\JC01\j2ee\cluster\server0\GUIMachine_Business_Packages\WeatherInformation_64334\FLEX_COMPILATION_FOLEDR\AAD8G.mxml:460)
    Error 1103: There is no property with the name ‘ROW2’.
          (C:\usr\sap\J2E\JC01\j2ee\cluster\server0\GUIMachine_Business_Packages\WeatherInformation_64334\FLEX_COMPILATION_FOLEDR\AAD8G.mxml:461)
    Error 1103: There is no property with the name ‘ROW3’.
          (C:\usr\sap\J2E\JC01\j2ee\cluster\server0\GUIMachine_Business_Packages\WeatherInformation_64334\FLEX_COMPILATION_FOLEDR\AAD8G.mxml:566)
    Error 1103: There is no property with the name ‘ROW3’.
          (C:\usr\sap\J2E\JC01\j2ee\cluster\server0\GUIMachine_Business_Packages\WeatherInformation_64334\FLEX_COMPILATION_FOLEDR\AAD8G.mxml:567)
    Failed to compile AAD8G.mxml

    Any idea on this

    THanks

    Aneez

    (0) 
    1. Scott Cairncross Post author
      Hi Aneez,

      I am not sure exactly what the error is. Go ahead and post this to the Visual Composer Forum and send me an email with a link to it. I will check it out further then.

      Thanks,
      Scott

      (0) 
  2. Andreas Reuter
    Hi
    I am using NW2004s SPS9
    I try to use the user guide, but I have some problem:
    After drag of the data services I see only 2 ports: 1. Input, 2.result. I am missing the port  for data
    AND
    columns for “Day, MaxTemperatureF, Min….” are not displayed, but “Latitude, Longitude,…”

    The link is correct: tp://www.webservicex.net/WeatherForecast.asmx?WSDL

    What I am doing wrong ?
    We don’t use a proxy.

    Thks for some hints
    Andreas

    (0) 
  3. Sai Krishna T
    Hello Scott Cairncross,
       I am so happy that the first VC application i developed is working!! ๐Ÿ˜€

       The blog is really helpful for beginners like me in Visual Composer.

    I have a small .. probably silly doubt. Is the iView you created ‘Weather Application a portal iView???? If yes, then, can u please let me know where can i find this iView in portal??? whr does this iView created in this VC application get stored in portal content directory?? i wanna see this VC application in portal… plz guide me how to go about???

    Bye!!
    Cheers,
    Sai Krishna

    (0) 
  4. Diego Gaudenzi
    Hi,
    I just installed the new CE 7.1 hoping that VC and GP where going to be part of this Composition Environment but I have not been able to find them yet. Anyone know if VC and GP are part of the brand new CE 7.1? or I have to install them from a different source. Please advice.
    Regards, Diego.
    (0) 
    1. Scott Cairncross Post author
      Visual Composer should be a part of the Composition Environment however Guided Procedures as far as I know is not. You should be able to access the VC using the same methods you have in the past.

      URL/VC

      Let me know if you still have issues and I can look further into it.

      Cheers,
      Scott

      (0) 
  5. Diana Castillo
    I am just starting on the Visual Composer world, and this blog was such a help you cant imagine. The way you explain things is really good, congratulations on that and THANK YOU very much.
    (0) 
  6. Charisse Basilio
    Hi Scott,

    I am trying to follow the detailed steps in your blog.  However I’m getting an error at this step:

    5/ Next enter the WSDL, a name and system alias for this new system being created. Name the system WeatherSystem use the same name for the alias as well. The WSDL to use for the Web service URL entry is http://www.webservicex.net/WeatherForecast.asmx?WSDL. Once finished hit the ‘Create’ button.

    The error I’m getting is: Invalid Web service URL

    What could possibly be causing this to happen?  Thanks.

    (0) 
  7. RAJESH SARIN
    Hello,

    My Question is : Can we Model in Visual Composer using BI Webservice – “GetQueryViewData” Method ?

    ————————————————–

    Briefly :

    I am trying to Publish the SAP-BI Queries as a Webservice (using “GetQueryViewData” Method) and
    then Consume this Webservice in a Visual Composer Model.

    But when I try to consume this webservice to a Visual Composer iView, I get an error message :
    ==================================================

    Failed to Fetch MetaData : Portal Request Failed due to : Cannot Import the selected operation.
    Mandatory Port AxisData includes nested tables which are not presently supported by Visual Composer.
    ==================================================

    ————————————————–

    Details :

    I have set up “Query_View_Data” taking reference from Weblog
    https://weblogs.sdn.sap.com/pub/wlg/4332
    –> Document : Web Services within SAP NetWeaver 2004s BI – Create, Discover, and Consume! –> Page Nos. 26 to 42.

    Webservice using Method “GetQueryViewData”, when it is tested through WSADMIN or EP-Webservices Navigator
    page, would ask for the Input Parameters – InfoProvider, Query, ViewId, Parameter and then it gives the result of the
    particular BI Query with Output Parameters as AxisData, AxisInfo, CellData, TextSymbols.
    This part of publishing the Web Query results is successful.

    We have done the necessary setting at BW system and Visual Administrator, WSDL url : http://:/sap/bc/srt/rfc/sap/QUERY_VIEW_DATA?sap-client=100&wsdl=1.1

    Now in the Visual Composer, I am creating a Model and dragging this Data Service – WebService to an iView.
    At this time I get an error messgae :

    ==================================================

    Failed to Fetch MetaData : Portal Request Failed due to : Cannot Import the selected operation.
    Mandatory Port AxisData includes nested tables which are not presently supported by Visual Composer.
    ==================================================

    Your guidance and help is anticipated.

    Thanks a lot for the time / help extended, in advance.

    regards,
    Rajesh Sarin

    (0) 
    1. Scott Cairncross Post author
      Hi Rajesh,

      The problem you encountered is currently a limitation inside of Visual Composer for NetWeaver 2004s. Unfortunately the Web Service Component inside of VC04s does not support nested structures. This is however fixed inside of VC CE.

      Cheers,
      Scott

      (0) 
  8. Dominik Herz
    Hi Scott,
    thanks for this great blog!

    I just want to consume a web service in my composite and try the way you have showed in the blog.
    But in my “Tools” menu form the toolbar are less entries than in yours. There are only

    (0) 
  9. Dominik Herz
    Hi Scott,
    thanks a lot for this great blog.

    I’ve just started working with vc and so it’s a great help.
    But I have a question: I want to consume a web service, but in my “Tools” menue from the tollbar are less entries than in yours. There are only the following functionalities:
      – Manage System Aliases
      – Find all Expressions
      – Service Component Wizard
      – Options

    The VC has the version 7.1 SP5!
    Where can I find the other functionalities?

    Thanks and regards,
    Dominik

    (0) 
    1. Luis Felipe Lanz
      Hi Dominik,

      That’s because this blog was made for Visual Composer 7.0 (and is valid also for 7.01) and you’re in Visual Composer for NW CE.

      It works in a different way, please go to the VC developer area here in SDN and select VC 7.1, there you will got a lot of information and blogs that explain it in detail.

      Best Regards,
      Luis

      (0) 
  10. Erwin Faizin
    Hi Scott.

    Your blog is awesome.
    I’m a very newbie on Visual Composer and just dealing with this modeling for days ๐Ÿ™

    I have 3 layer (layer #1, layer #2, and #3).
    On layer #1 there’s 2 form to generate action on 2 output table on layer #2.
    On layer #2, there’s a ‘Status’ column on one table that I assign a combo-box with.
    This combo box show 2 different text like REMOTE” and “BASE”, which a user can make a choice with. It’s like:

    Status
        REMOTE
        REMOTE
        BASE
        BASE
        REMOTE

    My question is, could I make some count on how many times this “REMOTE” and “BASE” shown up and resulting on layer #3?.
    It suppose to be like:

    Status        Total
        REMOTE       3
        BASE         2

    I made this combo box, so the user would have a flexible result.
    FYI, I’m using a BI query to generate this report.
    I’m still looking for answers in forums.
    But I think I met The Guru here :). So I would also like to email you my deployment result for more clear advice, but I had to ask your permission first.

    Thanks in advance.

    Regard,
    Erwin

    (0) 
  11. James Howard
    I am new to Visual Composer and I am trying to connect XCelsius to Visual Composer.  I saw where it is possible to do but I have not found any steps to achieve this.  Do you have any insight as to connecting XCelsius to VC? 

    Thanks

    James

    (0) 
  12. Roshni Verma
    Hi,
    I am new to VC and just starting with it.
    Whenever I try to create a webservice model irrespectible of whichever URL I am using I am getting Invalid URL msg.
    Can u please help me on this?

    Regards
    Roshni

    (0) 

Leave a Reply