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