Extending Visual Composer through Web Services Vol. 1

[Former Member]

h5. Introduction

Hello Everyone, I hope everyone had a great time last week in at TechEd 2006 in Las Vegas!




Well in the first blog of my new series Extending Visual Composer through Web Services I will be addressing how you can create a combine operator that permits you to output a TableView. This is not that complicated of an example, but I figured this was a good way to start this blog series. We are going to use JAVA and the NetWeaver Developer Studio to build this webService.

h5. Setting it up

The first thing you need to do is to determine your two dataSets you wish to merge. For the purposes of this example I am going to use a dataSet from BI and a dataSet from MDM.




The BI DataSet comes from an SAP BI Query:

The MDM DataSet comes from a webService which pulls data via the MDM JAVA API from an MDM Repository:









Now that the two source structures have been successfully determined we now need to create our EJB Project and our EAR project so we can encapsulate and deploy our web services.




Open the NetWeaver Developer Studio click on New->Project.









Choose the EJB Module Project give the project a name like “MDMTechEdDemo”.









From within the J2EE Development Perspective right click on the Project you just created and choose New->EJB. The below dialog will popup.









Give your EJB and Name and a package type.




We now need to build the three classes that will be used within our interface, the two data structures for input and the single data structure for output.




The BIData Class for input has the following fields:




<span>private String mdmRemoteKey; private String custID; private String salesOrg; private String material; private String netvalue; private String q1NetSales; private String q2NetSales; private String q3NetSales; private String q4NetSales; private String totalSales;</span>




You can see from the query (displayed above) we are buiding this class based on the exact same structure.




To build this class right click on the EJB Project and choose New->JAVA Class









Name the class BIData.




Populate the class with the above fields and generate your getter and setter methods by right clicking within the class and selecting source->Generate Getter and Setter.









NOTE: Remember when you build these classes within the NetWeaver Developer Studio you need to make sure you add the addition implements java.io.Serializable to the end of the class declaration or you will not be able to use these classes within the web service interface. (see above)




Click on Select All and then hit the OK button.









The MDMData Class only contains three fields because of the fact that we only want to add two fields to the BI Query’s result set, Sales Territory & SIC Hierarchy. Our MDM Class has the following fields:




<span>private String globalMDMID; private String salesTerritory; private String SICcode;</span>




The class of the resultSet needs to be built as well, the MDMBIJoined class contains the below fields:




<span>private String globalMDMID; private String salesTerritory; private String SICcode;  private String custID; private String salesOrg; private String material; private String q1NetSales; private String q2NetSales; private String q3NetSales; private String q4NetSales; private String totalSales;</span>




Repeat the above steps to create the MDMData class and the MDMBIJoined class…




The join condition that we will merge the two dataSets on is mdmRemoteKey (from BIData) = globalMDMID (from MDMData).




We now need to create a business method, to do this double click on the bean in the left hand pane and choose the methods tab.









When creating your business method you will be prompted to enter the name of the method and the input and output parameters which we have now created. Once you have successfully added mdmData and biData as the input parameters (remember these need to be flagged as arrays) and the MDMBIJoined class as an output parameter save your work and the business method structure will be generated for you.




Under the ejbModule folder find the MDMDemoWSBean.java file and open the file. Once the file is open navigate to the newly created business method and enter the code below:




<span>public MDMBIJoined[] MDMBIJoin(MDMData[] mdmData, BIData[] biData) {    MDMBIJoined[] resultSet = null;  MDMData mdmDataElem = null;  Hashtable mdmLookup = new Hashtable();    for(int j = 0; j < mdmData.length; j++){   mdmLookup.put(mdmData[j].getGlobalMDMID(), mdmData[j]);  }      resultSet = new MDMBIJoined[biData.length];  for( int i = 0; i < biData.length; i++ ){   mdmDataElem = (MDMData) mdmLookup.get(biData[i].getMdmRemoteKey());          resultSet[i] = new MDMBIJoined();   if( mdmDataElem != null ){   resultSet[i].setGlobalMDMID(mdmDataElem.getGlobalMDMID());         resultSet[i].setSalesTerritory(mdmDataElem.getSalesTerritory());       resultSet[i].setSICcode(mdmDataElem.getSICcode());   }else{   resultSet[i].setGlobalMDMID(biData[i].getMdmRemoteKey());   }      resultSet[i].setCustID(biData[i].getCustID());       resultSet[i].setMaterial(biData[i].getMaterial());   resultSet[i].setQ1NetSales(biData[i].getQ1NetSales());   resultSet[i].setQ2NetSales(biData[i].getQ2NetSales());   resultSet[i].setQ3NetSales(biData[i].getQ3NetSales());   resultSet[i].setQ4NetSales(biData[i].getQ4NetSales());   resultSet[i].setSalesOrg(biData[i].getSalesOrg());      resultSet[i].setTotalSales(biData[i].getTotalSales());  }      return resultSet; }</span>




Now that we have created all the necessary code we need to generate a web service and VI or virtual interface.




To do this right click on the Bean icon in the left hand pane of your NetWeaver Developer Studio and choose New->Web Service:




!https://weblogs.sdn.sap.com/weblogs/images/36456/009.JPG|height=324|alt=image|width=396|src=https://...!




You will now be prompted to enter the name of the web service and security level, for this example we don’t want any security so choose Simple SOAP and give your web service a name.









Choose the Finish button to generate an interface and web service descriptor for the business method(s) that exist within your EJB Project.




Before we are able to deploy our web service to our JAVA Web Application Server we need to create an Enterprise Application Project to associate our EJB Project with. Similarly to when we built our EJB Project click on File->New->Project here you will receive a prompt asking you to choose the type of project that you wish to create, choose J2EE->Enterprise Application Project. Give your Enterprise Application Project the name MDMTechEdDemoEAR.




Now that we have all of the projects created we need to build and deploy our JAR and EAR files, to do this execute the following steps:

• 
  
• 2/ Right Click on the EJB Project and choose add to EAR, choose the EAR Project you just created
• 
  
• 3/ Right Click on the EAR Project and choose Build Application Archive
• 
  
• 4/ Right Click on the EAR file that appears under your EAR Project and choose Deploy to J2EE Engine
• 
  
  
  
  
  NOTE: You need to have setup your NWDS to point to a J2EE Engine this can be done from the menu option Preferences->SAP J2EE Engine
  
  
  
  

From the web service navigator copy the WSDL Url to your clipboard.




We now need to open up the Visual Composer. I am not going to explain the rest of the steps in as great of detail as the preceding steps because I know you are all VC experts ;)…




Login to the Visual Composer storyboard and open a model, create a new iView within that model. From the Tools menu choose the Define Web Service System option.









Populate the information requested by the prompt. Give the Web Service System a name, alias and paste the WSDL Url from the clipboard into the Web Service URL input field. Click on the Create Button to complete the build of the new web service system.









From the Find Data tab you can now see the MDMBIJoin web service that we created.









Drag the web service into the storyboard and feed it two separate dataSets:









From this model built we are retrieving data from a BI Query, and MDM JAVA API Web Service and are merging them with the web service we just built!!




See the results below:




BI Data


!https://weblogs.sdn.sap.com/weblogs/images/36456/017.JPG|height=303|alt=image|width=600|src=https://...!




MDM Data







Joined Data







We have have now built our very own combine operator but instead of only being able to utilize the Form UI element as an output we can leverage the Table View UI Element as well.

h5. Summary

I hope that you all enjoyed the first edition of the blog series and can see how easy it is to build a simple JAVA web service and utilize it in the Visual Composer!