Use Case

Sometimes, we may need to pull and pass parameters from an SAP screen to to a mashup. In some cases, the outport of the SAP screen may not have all the parameters you need to pass to the mashup. In such cases, you could introduce an embedded component to have a control over the outport parameters that should be passed to the mashup. This document talks about such a scenario.

Here, we take a simple example of launching Google Maps – as an HTML mashup

This document consists of 3 parts

Part A: Making the Embedded Component with an Inport to connect to the Opportunity TI Outport

Part B: Making the HTML Mashup and connecting to the Embedded component created in Part A

Part C: Pulling other parameters’ information from related Business Objects and associations

Part A:

Step1: Identify the Source Outport

For your embedded component, identify the source Outport that would give you the information you need.

In our example, since we have an Opportunity with a line item – which has a travel package Product called Delhi, we want to be able to display the location of Delhi in Google Map with a certain Latitude and Longitude. In our case, the Outport PublicOutportECOOpportunityItem gives us some information. What we need from here for our mashup are ItemUUID and Product ID. Other than these parameters, we also need Latitude and Longitude which will be defined in our custom BO.

Step 2: Create your custom BO and declare the other elements and actions you need

businessobject Url_mashup {

[AlternativeKey] element itemUUID:UUID; //Will be used for the EC Inport

        element productId:NOCONVERSION_ProductID;

        element urlparamz:LANGUAGEINDEPENDENT_MEDIUM_Text;

        element urlparamt:LANGUAGEINDEPENDENT_MEDIUM_Text;

action fillparams;

Set the parameter values in the action definition. This could be hardcoded as constants in the Mashup as well, but this is to demonstrate that you could set values to parameters that you would want to pass to the mashup. Other non-hard-codeable values – like Sales Org ID – is an example which could be pulled through association.

Step 3: Get the information you need in the Embedded component from the Opportunity TI Outport

·         Create an Embedded Component

·         Bind the necessary fields

·         Create an OBN structure and data fields within that. These will be used as Placeholders when the Outport-Inport Navigation from the TI to the EC takes place

·         Create an Inport for the Embedded Component.

Add the parameters that you want to receive from the TI Outport. Apart from the obvious Product ID for our use case, we have the Item UUID here. Since this was declared as an Alternative key in our custom BO, it gives us a proper handle to the Line Item of the Opportunity. This can later be used if required in retrieving further information about the item and its related associations

·         In the properties of the Inport, create a new Event Handler

Using this Event Handler, we create Operations, which control how the information is read from the Outport of the TI, and what further actions take place.

Using the Alternative Key Item UUID, we do a read Operation

If our Custom BO instance was not already created for the Opportunity Line Item that is selected, we would like to create that instance, so as to store the values we need. For this, we will create a new event handler and define it later.

Next, we would like to assign the values that we received into our Data Structure to our Data Elements – ie, Item UUID and Product ID

Now, we would like to assign values to the other elements declared in our BO – like z and t. We had already defined this in our Action fillparams(). Now, we would like to call this action..hence, the next Operation:

Now, we also define the event handler Create_Item as mentioned in the Script Operation

After Create(), we read the instance

Now, the Inport definition along with its Event Handlers are done. Let’s drag the Product ID, Z and T fields to the UI. (This is not really needed, but we could use it for testing and ensuring that the values coming to the EC Inport from the TI Outport are correct)

·         Displaying the Embedded Component:

Now that the EC has been created we need to display it at the right place. In this example, since for each line selected, the travel package product would determine the Location that would be shown by the Google Maps url, we display the EC in a Pane container within the Product facet of the Opportunity TI. To do this, navigate to the Opportunity TI from the Configuration Explorer of the UI designer and edit it. This would open up the Extensibility Explorer. Identify the Pane where you want to embed the EC, and Choose “Add EC to Pane”

Binding information needs to be provided, hence specify the Outport of the TI and the Inport  of your EC and bind the parameters

Save and Activate your solution and test to see whether you see the Product ID and other parameters in the embedded section of the Opportunity TI

PART B: HTML Mashup

You can follow the standard steps mentioned in the Studio documentation for creating an HTML mashup and adding to your floorplan. Below are snapshots to help you identify those steps

Step 1: Define Port Type Package

To create a mashup, you first define a Port Type Package which consists of a Port Type and the parameters you want the binding to be done for…

Step 2: Define the Port Binding.

Choose a Category that you would also use in the third step of creating a URL mashup. For the Package, choose the one created in the step above

Step 3: Create an Outport for your embedded Component.

This is where you control what parameters you want to pass to the mashup. Recall, that the Opportunity TI’s Outport cannot be enhanced, and for our usecase we needed more parameters. By introducing the Outport in our Embedded Component, we are able to achieve that.

Add parameters and bind them to the custom BO’s fields (recall that we had adjusted these fields in the action fillparams()

Step 4: Create an HTML mashup.

Choose the same Mashup Category as in step 2 above and the related Port Binding

Bind the parameters to the parameters of the Outport defined in step 3 above. By doing this,

we are ultimately passing values to the mashup from the values that are bound to the Outport of the EC, hence:

Note that here we have used the HTML Code option. This might be suitable when there are lots of values to be passed to the destination, much of which is also hard coded values…Below is the script that was used for this.

<!DOCTYPE html>

<html>

<head>

  <title>Simple Map</title>

<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>

<meta charset=”utf-8″>

<style>       html, body, #map-canvas {         height: 100%;         margin: 0px;         padding: 0px       }     </style>

<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false“></script>    

<script>

var map;

function initialize() {

//Test by outputting variables to the console..this ensures that your Outport-Inport bindings are

correct

document.write(“Hello World!”);

document.write(sap.byd.ui.mashup.context.inport.ParameterZ );

document.write( sap.byd.ui.mashup.context.inport.ParameterT);

var mapOptions = {     zoom: 8,     center: new google.maps.LatLng

(sap.byd.ui.mashup.context.inport.ParameterZ,sap.byd.ui.mashup.context.inport.ParameterT) 

//(-34.397, 150.644) .. test using hard coded values if required

};

map = new google.maps.Map(document.getElementById(‘map-canvas’),       mapOptions);

}

1. google.maps.event.addDomListener(window, ‘load’, initialize);

</script>

</head>

<body>

<div id=”panel”>

    </div>

    <div id=”map-canvas”></div>

</body>

</html>

The text in bold above are the parameters that are being used instead of constants. These should hold the values passed to the mashup from the Outport of the Embedded component. To test whether the Inports have the correct values a simple statement like document.write would write to your screen the values that are there in the inport parameters.

In some cases, we might also have an HTML form along with the javascript. In this case, the form parameters cannot be directly assigned with the value as shown above, because it  would be interpreted directly as a string. In this case, we should be able to assign the value to this id field later as part of the script..

Eg:

Code snippet from HTML form:

<input type=”hidden” id=”zoom” name=”zoom” value=”” >

<input type=”hidden” id=”mapType” name=”mapType” value=”” >

Note that there is an Id assigned, and the value is null. Later, in the javascript, we access this id, and assign a value to this using our context parameters.. eg:

Code snippet from javascript:

<SCRIPT LANGUAGE=”JavaScript” type=”text/javascript”>

          document.getElementById(‘zoom’).value = sap.byd.ui.mashup.context.inport.ParameterZ;

          document.getElementById(‘mapType’).value = sap.byd.ui.mashup.context.inport.ParameterT;

  document.datapipe.submit();

</SCRIPT>

A handy feature to use for debugging the script is the Developer Tools that comes along with IE. Using F12, you can start the developer Tool, start debugging, and set a breakpoint anywhere in your code.. Another quick way to do this, is to write debugger; in your script where you want to check the values say.. eg: if you want to check the value of the inport parameters.. you could set a debugger; statement within your javascript and watch the inport parameters’ values

Step 5: Display Mashup

Now that the script is done, display the HTML mashup on your embedded component. For this, go back to your embedded component in the UI Designer.

Create an empty pane container by adding a row

Locate your mashup in the Configuration explorer and drag it to the Pane container as shown below

Click on Bind and Bind the Outport and Inport

Now that the binding is done, we need to display the mashup correctly. This relies on having the correct anchors. We basically need two things

·         An anchor for the Outport itself

·         An anchor for the Pane container and the Floorplan that would display it

For the outport anchor, click on the Outport from the controller tab, and create a new anchor as shown below

For the Pane container anchor, go to the Designer tab and select the Pane container in the properties window. Under the Anchor information, create a new anchor for the Pane Container

For the Floorplan anchor, select the Embedded Component option in the Properties Drop Downs and create an anchor as shown below

Now, in the Outport, add these 2 anchors as referenced anchors, and you’re done !!

Save and activate all.

Finally, you can test your mashup !! (Displayed in the attachment since i wasnt able to add more images in the blog 😉 )

Part C: Additional parameters from SAP BOs

As another variant of this scenario, if we want to pull other parameters from the SAP BOs, itself, we could do the following:

Example: We additionally need the Sales Org ID and the Distribution Channel information.

We declare additional elements in our Custom BO for the same:

[Label(“Sales Organisation”)] element salesOrg:OrganisationalCentreID;

[Label(“Distribution Channel”)] element distrChannel:DistributionChannelCode;

In our previously defined action fillparams(), We declare an association to be able to retrieve information for the same using the Item UUID handle we already have. we additionally assign values to these parameters using our association

association toItem to Opportunity.Item using UUID;

       var itemInst = Opportunity.Item.Retrieve(this.itemUUID);

       this.toItem = itemInst;

     this.distrChannel.content = this.toItem.ToParent.SalesAndServiceBusinessArea.DistributionChannelCode.content;

     this.salesOrg = this.toItem.ToParent.SalesAndServiceBusinessArea.SalesOrganisationID;

Once this is done, you need to adapt part B of the solution to be able to pass these new parameters as Outports of the EC, and receive them in the Inports of the mashup. Correct binding should be ensured.