Skip to Content

Introduction

Using Web services with Visual Composer is easy and a good way to show the capabilities of the latest version of Visual Composer – Visual Composer for NetWeaver 2004s.
However, with Enterprise SOA in mind Enterprise Services might be an even better opportunity to show what one can do with Visual Composer.
The following Blog describes how to consume Enterprise Services from ES-Workplace using Visual Composer.
For this example Visual Composer for NetWeaver 2004s SPS 8 is used. Details on the ES-Workplace can be found here.

Step I – Configuring the Proxy Settings

In a first step we have to configure the proxy settings for SAP NetWeaver Portal and the Application Server. This step is only necessary when a proxy/firewall is in use. But since this will in general be the case it is an very important step.

Configuring the proxy settings of the application server

Open the Visual Administrator. After connecting make sure the Cluster tab is selected. Open the Server and then the Services node. From the list of Services choose Web Services Container.
Make sure the Runtime tab is selected and click on the Settings tab on the bottom of the screen.
The proxy settings can now be changed and saved.

Proxy settings for the Application Server
Figure I: Proxy settings for the Application Server

Configuring the proxy settings of SAP NetWeaver Portal

Open SAP NetWeaver Portal as an administrator. Click on System Administration tab. Open System Configuration and Service Configuration. Open Applications, com.sap.portal.ivs.httpservice, and Services. Configure proxy. Use the same settings as above and save them.
From the context menu of com.sap.portal.ivs.httpservice choose Administrate to restart the services and apply your changes.
To be on the save side it is recommended to restart the application server with the new settings.

Proxy settings for NetWeaver Portal
Figure II: Proxy settings for NetWeaver Portal

Step II – Creating an Enterprise Service system for VC

Actually there is a very good description for this part in a How-To paper by Ingo Sauerzapf that can be found here.
Before starting make sure to have a user for the ES-Workplace. If you do not have a user yet please request one here.

Creating a Proxy

To eventually create a system in Visual Composer open the Visual Administrator again. Follow the steps above but instead of Web Services Container choose Web Services Security. Unfold Web Service Clients and sap.com. Choose DynamicWSProxies and press Create on the bottom of the Visual Administrator.
In the popup that opens up you can choose whatever name you like. In out example we use FU2_800 accordingly to the How-To paper.
Create a proxy to connect to the ES-Workplace accordingly to Figure III with the user you requested for the ES-Workplace.

Connecting to the ES-Workplace
Figure III: Connecting to the ES-Workplace

Creating a Proxy for the Metadata

To use Enteprise Services we have to create a second proxy through which we can access the metadata of the services. To create this second system we can simply follow the steps for creating the first proxy above.
Only exception is in the URL field we use the following URL: http://erp.esworkplace.sap.com:82/sap/bc/srt/wsil

Accessing the Enterprise Services from Visual Composer

We can now access the systems from within Visual Composer. By clicking on Find Data you can see the systems we just created (given that the Visual Composer user has the correct roles and permissions in the Portal). As you can see in Figure IV it is possible to search and browse the Enterprise Service groups on the ES-Workplace.

ES Systems in Visual Composer
Figure IV: ES Systems in Visual Composer

Step III – Building an Visual Composer Application that uses an Enterprise and a Web Service

The following example shows how to build an Visual Composer application that uses an Enterprise Service and a Web service. Please see this screencam for a step-by-step walkthrough.

Adding an Enterprise Service

As a first step we add a simple Enterprise Service to our model. We access the ES-Workplace as described above and search for Customer*. From the result groups we expand CustomerSimpleByNameAndAddressQueryRespone_In and drag the Enterprise Service with the same name into our model.

Visual Composer will ask for the fields we want to use. In our example we need at least: CustomerAddressCityName, CustomerAddressCountryCode, and CustomerName_FirstLineName for input port Customersimpleselectionbynameandaddress and ID, BasicData_Common_Name_FirstLineName, and BasicData_Common_NaturalPersonIndicator for the output port customer.

By dragging out from the input and output port of the Enterprise Service we can now create an Input Form and a Table View. We then rename the form and the table and change some of the UI elements.

After setting up the layout we can now deploy the application and test it in SAP NetWeaver Portal

Adding a Data Store

A Data Store allows us to store data that we can use later on from virtually everywhere within our iView model.

In our example we first create a data store by clicking on Compose and dragging Data Store from Connectors into our model.

We then configure the Data Store and add two fields Country and City to it. Both with an empty Text as default value. Advantage of creating the Data Store first is that the fields are already known when using the Data Store later on. Note that there can be only one Data Store per iView.

To fill the Data Store with some data we drag out from the output we drag out from the out port of the Input Form we created before and choose Data Store from the context menu. Then we change the connection Event name from evt1 to submit and configure the data mapping.

We have now created a Data Store that contains the information on the Country and City of our customers. This information will be needed later on to dynamically show and hide UI elements.

Adding a Web Service

To add a Web service in Visual Composer we first have to create a Web service system. This can be done by clicking on the Tools menu and then selecting Define Web service system. To actually create the system we have to provide a New system name, a New system alias, and a Web service URL.

Note creating a Web service system this way means creating a system in the system landscape of the NetWeaver Portal (that is why we need an alias as well). Thus we have to make sure that the system does not exist yet (the system name and the system alias have to be “new”). If everything is ok Visual Composer will just close the dialog box else we will get an error message.

We can now access the newly created system by clicking on Find Data and choosing it from the list of existing systems. We then search for * and choose GetWeatherByPlaceName from the list and drag it into our model.

Using this Web service we can now get the weather data for any City in the United States. We connect the out port of the table we created to the Input port of the Web service and configure the data mapping.

From the Getweatherbyplacenameresult Details Weatherdata port of Getweatherbyplacename we can now drag out and create a table and a chart. We configure the table and chart according to our needs. To use the field WeatherImage which contains a URL to an image “showing” the weather in a city at a specific day we can create a HTML view (Compose –> Components) and connect it to the table out port. After configuring the data mapping we can this way select a day from the table and the weather image will change accordingly.

After updating the layout we can now deploy the application.

Hiding elements

As mentioned before the Web service we just added only works for cities in the US. Thus we would like to hide the components we created for the Web service (the table, the chart, and the HTML view).

To hide an element in Visual Composer we can simply configure the element and change the Visibility condition to false. However in our example we want the elements to be visible if the chosen country is US so instead of simply using false we can use STORE@Country==’US’. Now our data store comes in handy. STORE@Country is the field in the data store in which we stored the country information. So if this field contains (equals / ==) ‘US’ the Visibility condition will be true, else false. Exactly what we need.

Note in the attached video we use a more complex way to evaluate the Visibility condition:
BOOL(IF(STORE@Country==’US’,true,false)) This is mainly to show the use of the expression editor and the build in functions that Visual composer offers. Showing IF from the Conditional Functions and later one BOOL from the same function group to convert text into a boolean value.

We can now deploy the application.

That’s all folks!
To report this post you need to login first.

8 Comments

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

  1. Huw Edwards
    I can’t work out how to pass the City and Country fields to the weather web service. The instructions say to do it from the output table but that doesn’t contain a city or country field and none are available as outputs from the enterprise service. Am I missing anything obvious? Is there a way to pass them from the Data Store?
    (0) 
    1. Carsten Boennen Post author
      Passing the City information to the weather Web service is two fold. First we have to create the connection between the output table and the Web service. Second we have to configure the data mapping. And the assumption is correct that this data mapping has to refer to the Data Store. You can either use the Expression Editor to browse to the fields of the Data Store or simply use this expression: STORE@City. The attached video shows in detail how to brose to the fields.
      (0) 
  2. Sean Gillen
    Hi,

    The HU2 system has replaced the FU2 system. I can connect to my HU2_800 system from VC and see the enterprise services ok, but I can’t see any enterprise services when I use the metadata connection. I therefore get a metadata error when I try and drag the service onto the VC canvas.

    Can you please help? Something must have changed since the changeover to HU2. Is it authorisations?

    regards,
    Sean

    (0) 
    1. Carsten Boennen Post author
      Hi Sean,

      We are aware of changes and an updated version of the blog is planned.
      Personally I changed from VC to UI Strategy this is why someone else will take over.
      Please check as well the information provided by Ingo Sauerzapf they might be helpful in this context.

      Regards,
      Carsten

      (0) 
  3. 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
    Work with XMLA Web Service for BI Data in External Applications!
    –> 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 (+91-9987014089)

    (0) 
  4. Ajay Malempati
    Hi Carsten,

    // To eventually create a system in Visual Composer open the Visual Administrator again. Follow the steps above but instead of Web Services Container choose “Web Services Security”..

    when i choose “Web Services Security” in the visual administrator .. i get an error … engine.adminadaptor not started .. if you know please help me out..

    thx,
    ajay.

    (0) 
    1. Carsten Boennen Post author
      Hi Ajay,

      I left Visual Composer PM some time ago, thus I would recommend to address the question to the Visual Composer guys in the SDN forum or maybe the WAS guys can help.

      Sorry and Regards,
      Carsten

      (0) 

Leave a Reply