Wednesday, March 16, 2016

How to show on premise data in C4C using SAP HANA Cloud Integration

One of the most requested developments within SAP Cloud for Customer (C4C) is extending screens with data from other resources.
This blog will be a step by step guide to display data from an on premise system in C4C via HANA Cloud Integration (HCI).


Developments can be split up in 3 different categories, i.e.: ECC, HCI and C4C. I will mainly focus on the C4C side, but will show some screenshots of the other developments as well.



On premise


First step is to create a function module that returns the correct data and create a web service from this function module.




In transaction SOAMANAGER or in the service definition we can download the WSDL of our web service. This WSDL is needed in HCI.


HCI


In order to create a new integration in HCI you will need to download Eclipse. You can find this information here.

We start off by creating a new Integration Project.


In the next step we choose Point-to-Point Channel.


Press Finish. The just created iflow will be opened.
  

Move the WSDL you downloaded from your on premise system into the WSDL folder of the project.


Change the Adapter type of the sender and the receiver to SOAP.


Change the settings of the Sender Channel. Save the address/path you fill in here, you will need it when you set up the Communication Arrangement in C4C.


Change the settings of the Receiver. Enter the address of your web service on your on premise system.


When you have correctly set up your iflow you can right-click and press Extract Parameters. A properties file will be generated.


You can now deploy your Integration Project.


You will need a WSDL to use in the Application Studio. For this final step you need to create a Communication Scenario in C4C, if your deployment was successfully you will be able to select your Integration Project and download the WSDL.

C4C Application Studio


To display the data in C4C we need to perform the following steps.

Create a Business Object



  • Add elements. In this case I have created a node with a cardinality of 0 till n, which represents a table. 
  • Add an action. This action will be calling the web service, but you can leave it empty for now.

Create an External Web Service Integration (WSID)


Here you need to select the WSDL we have downloaded from HCI. 

Please check in the generation Communication Scenario Definition (CSD) if you have selected the following data:

Mark Application Integration (A2X) as Communication Type:



Select the service you want to use in the services tab. (If your service is not available you need to close the CSD file and activate all your items.)


If you have successfully activated all your files, you should right-click on your CSD and select Manage Communication Arrangement.



In the Basic Settings of the Communication Arrangement you need to set up the authentication method.


To set up the correct path you need to edit the Advanced Settings, this Path is taken from the HCI settings.

Save and Activate your Communication Arrangement.

Implement your action


Place the following code in your action and replace the <fields> with your own names.

import AP.FO.BusinessPartner.Global;
import ABSL;

//Create Request and Response structures
var request:<WSID>.<Operation>.Request;
var response:<WSID>.<Operation>.Response;

//Clear Results table
this.List.Delete();

// Scenario name
var scenarioName = "<CSD>";

//Execute the web service
response = <WSID>.<Operation>(request,"",scenarioName);

// Show error message if response is initial
if (response.IsInitial()) {   
raise WebServiceCoreError.Create("E");   
return;
}   

// fault messages   
var faultItems = response.CommunicationFault.Item;   
if (faultItems.Count() > 0) {   
raise WebServiceCoreError.Create("E");   
    // do not send the complete error stack to the user. Assumption: last message is the most important on.   
    raise WebServiceContentError.Create("E", faultItems.GetLast().Note) ;   
}  

if(! response.IsInitial()) {
var <Table> = response.<Table>.item;
foreach ( var <item> in <Table>)
{
var item: elementsof MyBO.List;

item.id = <item>.<Element>;
// etc...
// add item to the list
this.List.Create(item);
}
}

Create an Embedded Component to display the data


Open the Embedded Component in the UI Designer.
Drag an AdvancedListPane on the View in the Designer Tab.



In the DataModel tab you can see that a DataList structure has been generated.


Select the DataList on the left en Select your Node on the right side of the screen and press Bind. Move any additional fields you need from the right to left by dragging them on the structure. I have also created a structure called Inport with a field AccountID, this field will be used in the next step. Your structure should eventually look like this:


On the designer tab see the results of these bindings. I’ve changed the type of the fields to StaticText because we only want to display the data.


On the Controller tab we have to create an Inport. This Inport should call an Event Handler, which calls our BO Action to call the web service.

Our Inport has an importing parameter called AccountID (since we would like to extend the Account TI)


In the Properties of our Inport set RequestFireOnInitialize to True and create a new Event Handler:


The EventHandler should have the following Operations:

Underneath the Condition you have to Configure Operation, if the Condition is met, these Operations will be performed. Below operations will be performed only when /Root/ListID is empty.

We need to create an instance of our Business Object

And move the Inport parameter to our BO element.

The final step is to call our BO Action.  In the highest level of the Event Handler we create a BOAction Operation and follow the steps below.

Activate all items.

Add your Embedded Component to an existing screen


In our example we want to extend the Account TI. Open the Configuration Explorer to find the correct screen.


In the COD_Account_TI we have the options to add our Embedded Component to a screen via the Exenstibility Explorer.

In this example we want to add it to our Overview Tab. Press Add embedded Component to Pane and select your EC as shown below.

Next press Bind to bind the parameters of the Account TI Outport to your EC Inport parameters

We should the PublicOutportECCCustomerRoot as outport and bind the AccountID to our Inport AccountID parameter.

Activate the Account TI and check if everything is working as designed. If all went well you will hopefully see something like this :-)


1 comment: