HTML Mashup for Google Maps API in SAP Cloud For Customer (C4C) – A Step by Step Tutorial

In this blog post we will create a HTML Mashup to consume Google Maps API in an embedded component in Individual Customer  TI screen. We will use Cloud Applications Studio as our IDE and a user which has Studio Administrator and Developer access rights.

This post is inspired from: How to Create a HTML Mashup in SAP Cloud for Customer to Consume a Google Map API  and combines it with Cloud Application Studio: Add Facet (Embedded Component) based on BO Extensions by @stefankrauth.

This will be the final screen of this tutorial:

The outline for this document will be:

1. Create a Business Object Extension for Customer

2. Create an Embedded Component to display the map

3. Extend Individual Customer TI Screen with Embedded Component

4. Create HTML Mashup to consume Google Maps API

5. Create Port Type Package (PTP)

6. Add the Mashup to the Embedded Component

We have lots of things to do, so let’s start 🙂

1. Create a Business Object Extensin for Customer

First create a folder for this BO extension. It is a good practice to organize your objects in folder in Cloud Applications Studio. Without folders, it will be very difficult for you to organize your objects when the solution gets crowded.

So let’s create a folder and name it as GoogleMaps. (Right click on your Solution and Add->New Folder)

In this new folder we will create our objects. Right click on GoogleMaps folder and add Business Object Extension for Customer. Name it as XBO_Customer.

It will ask you to select the Business Object to extend.

Customer is in http://sap.com/xi/AP/FO/BusinessPartner/Global namespace, so select it. And then select Customer from the dropdown list.

We will extend Common node of standard Customer BO. In common node add the code below:

We created FE_address field to keep the complete formatted address of the Customer. To do this we should implement Before Save event of Root node.

Right click on the XBO_Customer and click on Create Script Files option. Create Script Files dialog will popup. Select Event:BeforeSave of Root node. Make sure you uncheck Mass Enable column.

In the code editor of BeforeSave Event write the ABSL code below:

We have finished Business Object and Event Extension part. Save and Activate your work.

2. Create an Embedded Component to display the map.

We will create an Embedded Component to extend standard Customer TI screen. In this EC we will first catch the current Customer Instance and read the FE_address data to use it as a map parameter.

To create EC, right click on the GoogleMaps folder and Add->New Item ->Embedded Component. Name it as EC_Map_Address.

Double click on the newly created EC to edit it in UI Designer.

In the UI Designer, open the DataModel tab. Right click on the Root element and select Add Data Structure. Name it as Inport.

On the Inport structure, right click and select Add Data Field. Name the data field as AccountID. Your structure shoul look like this:

Now, we will bind this data model to Customer business object. To do this we have to select the namespace first. Namespace is http://sap.com/xi/AP/FO/BusinessPartner/Global and the business object is Customer.

Drag and drop InternalID field from Customer BO on to the Root of our Data Model. InternalID field will be added to our model and our model will be bound to Customer. (You may need to Drag it twice.)

Next, switch to Controller tab of the UI Designer. Right click on the Inports folder and click Add Inport. For the added InPort add a parameter and name it as AccountID. Bind this parameter to AccountID of the Inport Structure (which you created in data model).

Next, open the Properties of our InPort. InPort has RequestFireOnInitialization attribute. Set its value to true.

RequestFireOnInitialization will enable InPort to fire the declared event handler, when it is filled (initialized).

We will declare this event handler now. Under the Events section of InPort properties, there is an event as OnFire. To create an event handler for this event select …New Event Handler… .

New Event Handler screen will popup. Name the event handler as ReadCustomer. This event handler will read the current instance of the Customer. Configure it as follows:

In the event handler, create a BO Operation of type Read to read the current Customer. The parameter type should be alternativeKey, bind it to /Root/Inport/AccountID and the path should be /Root/InternalID.

Now the Inport configuration is set. To see the result we will add two fields on the Designer. Switch to Designer tab page. On the right side of the UI Designer, open BO Browser/Data Model view. Open Data Model pane of this view.

Drag and drop InternalID and InPort/AccountID from the Data Model onto the screen. Rename the texts as InternalID->Current Customer ID and AccountID->Inport AccountID.

Save and Activate your changes. You can close UI Designer and come back to the Studio.

3. Extend Individual Customer TI Screen with Embedded Component

Since we have our Embedded Component ready, we can now bind it to Individual Customer TI screen. In our GoogleMaps folder, we already created XBO_Customer business object extension. Now we will select the screen to embed our EC_Map_Address.

Right click on XBO_Customer and select Enhance Screen. We will enhance COD_SEOD_IND_ACCOUNT_TI (Thing Inspector) screen which is the big object screen for Individual Customer. Select it and click on OK button.

Double click on the COD_SEOD_IND_ACCOUNT_TI object to open it in UI Designer. We will add our embedded component on this standard screen. The only way to interact with the standard C4C screens is by Extensibility Explorer. Open Extensibility Explorer view on the right.

Our embedded component (EC_Map_Address) will be added as a facet on the main TI screen. The facet menu is under Undefined entity.

Click on Add View with embedded Component button in the Operations section. Add Embedded Component popup screen will open.

Write down tne name of your facet as MAP LOCATION. Make sure it is all in capital letters. For Embedded Component select your EC_Map_Address.

Now we selected our EC and it is time to bind the Individual Customer outport to our EC inport. Click on Bind button. The bind configuration dialog will popup.

Select PublicOutportECIndCustomerRoot as Outport and AccountID as Outport Parameter. On the right side, select InPort as Inport and AccountID as parameter. After selecting both sides click on Bind button in the middle. If bind is successfull click on OK and then Apply.

Now, you shall se your MAP LOCATION facet on Individual Customer TI screen.

Let’s check if our embedded component works or not.

Login to your C4C system as a business user and open any Individual Customer to see the screen. If you navigate to MAP LOCATION facet you should see both fields are filled automatically. This means our EC and binding works.

Since we got the current customer via our binding, we can use this to get the formatted address.

We have already created a field to keep the formatted address in Section 1. The field name was FE_address and now we will use it in our EC screen.

Open EC_Map_Address in UI Designer and navigate to DataModel tab screen. (Switch to Edit mode if it is in Display.)

Right click on the Root node and Add Data Structure. Name the newly created structure as Address. Right click on it and Add Data Field. Rename the field as FE_address.

On the right side, navigate to Common node of Customer. We created our FE_address in Common node while extending the BO, so the field should reside there. Drag and drop FE_address field from Common node on to the FE_address under Address structure on the left. Now the binding is done and we can use this field on the screen.

Switch to Designer tab. On the right side of the screen, open BO Browser/Data Model view and switch to Data Model pane. Drag and drop the FE_address field on to the EC screen.

Double click on the label of FE_address and override the label text as Main Address.

Save and Activate the EC and test again on C4C screen.

You may see the Main Address as empty in MAP LOCATION facet. Don’t panic 🙂 This is expected, because our FE_address fied is empty. We set it to be copied in BeforeSave event. And since we didn’t save this customer, it is still empty. Now let’s add address to our Individual Customer and save it.

After save, you will see Main Address in MAP LOCATION facet is filled automatically. Our binding works fine and we are ready to move on.

Before leaving this section, let’s hide the ID fields and Pane Header of our facet. In UI Designer, switch to Design tab. First select Pane Header and open Properties on the right. Set Show Header to false.

Next select Current Customer ID field and set Visible attribute to false. Repeat for Inport AccountID field.

Save and Activate EC and test it one more time.

So far everything seems fine. Let’s move on to HTML mashup configuration.

4. Create HTML Mashup to consume Google Maps API

To create the Mashup, right click on the solution folder and Add New Item. From the Mashups and Web Services list select HTML Mashup. Name it as GoogleMapsAddressMashup. (Make sure you enabled Admin mode in the Studio.)

After clicking on Add button, New HTML Mashup screen will appear. Configure the Mashup as follows:

• Mashup Category: Productivity & Tools
• Port Binding: URL Navigation
• Mashup Name: GoogleMapsAddressMashup
• Mashup Description: Custom Mashup to display Google Maps on Individual Customer TI.
• Status: Active
• Type: URL
• URL: https://maps.google.com/

Click on Add button to add parameters. We will add two parameters for this mashup.

• Parameter 1:
  • Name: output
  • Constant: embed
  • Mandatory: yes
• Parameter 2:
  • Name: q
  • Parameter Binding: URL
  • Mandatory: yes

Click on Preview button, if it shows Google Maps then you can Save and Close your mashup.

MashupConfiguration folders will be added to your solution automatically.

5. Create Port Type Package (PTP)

PTP Definition from SDK: A PTP hosts one or more port types. A port type is a blueprint for an inport or an outport. You can create a PTP to facilitate navigation between components that have inports and outports within the same PTP without any mapping.

So we will create a PTP for our HTML Mashup. To create the PTP, right click on GoogleMaps folder and select Add->New Item. From the object list select PTP and name it PTP_GoogleMapsAddress.

After clicking Add button, the Studio will ask for the business object. Select Customer and click OK.

Double click on the created PTP to configure it in UI Designer. Configure the PTP as follows:

• Right click on the Root node and select Add PortType.
• Rename the created Port Type as Google_Maps_URL.
• Right click on the Port Type and click Add Parameter.
• Rename the parameter as URL.
• Right click on the parameter again and select Set as Key.

Save and Activate the Port Type Package. The PTP should look like this:

6. Add the Mashup to the Embedded Component

As the final step, we will add the HTML Mashup (GoogleMapsAddressMashup) to the Embedded Component (EC_Map_Address).

Open the EC_Map_Address in UI Designer and switch to Edit mode.

On the top bar, click on the Add FlexLayoutRow button. The Designer will add a new row.

We will add the Google Maps Address Mashup in to this new row. In the Configuration Explorer on the left, navigate to <Your Solution>_MAIN -> SRC -> Mashups -> Pipes. Drag and drop the HTML Mashup on to the EC.

Switch to Controller tab of EC. We will configure the Outport to . Right click on Outports and select Add Outport.

For the Outport Configuration, select the previously created PTP (PTP_GoogleMapsAddress). Select Google_Maps_URL for PortType Reference. URL parameter will appear.

Add a new parameter and name it as Address. Select the Key checkbox and for Parameter Binding select FE_address in path /Root/Address/FE_address.

Now it is time for Mashup Configuration. Select the mashup listed below Mashup Configuration. On the right side switch to Simple Navigation. You will see Navigations folder. Right click on this folder and select Add Navigation.

For Source details: Select OutPort for OutPort.

For Target details: Selet URL_Navigation_Info_In for InPort.

Finally bind the Address and URL. Your Mashup Configuration should be like this:

Save and Activate your Embedded Component. We are ready to see the final result.

Login to C4C as a business user and open Individual Customer TI screen and navigate to MAP LOCATION facet.

And here is our pretty map showing the exact location of our Customer 🙂

It works in HTML5, Silverligt Client and Fiori Client.

HTML5 Client.

Silverlight Client:

Here is the screenshot of IPhone C4C Extended App. (Fiori Client)