URL mashup called through embedded component

In my previous blog http://scn.sap.com/community/business-bydesign/studio/blog/2014/02/24/html-script-mashup–launched-from-an-embedded-component I talked about creating an HTML script mashup that was being launched from an embedded component of a standard SAP Screen.

In this blog, I talk about having a URL mashup that is launched from the Embedded Component. Please refer to Part A of the blog http://scn.sap.com/community/business-bydesign/studio/blog/2014/02/24/html-script-mashup–launched-from-an-embedded-component for the Use Case and Creating the Embedded Component

Part B is essentially different, and is highlighted below.

Creating a URL mashup

Step 1: 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 /OIF 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 a URL 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:

Step 5: We now need to specify the relation between the Outport of the EC and the Mashup.

–     Go to the Configuration Explorer and Open your mashup. On the Controller tab of the mashup, edit it and create an Inport – with the same Package and Port type as we defined earlier. This step is required to be able to bind the Outport of the EC and the Inport of the mashup. Save and activate it.

–          On the EC, right click on the Mashup Components and add the mashup.

–          Double click on the mashup just added and go the Simple Navigation tab. Add a new navigation item and define the Outport – Inport mapping.

–          Now, all that we need to do is to be able to call the mashup. We can create a Link for launching the mashup -> for each line item of the products facet containing the Travel product. Once in the Design tab in the UI Designer, using the toolbox, add a Link to the screen

–          Now configure the link:

o   In the properties of the Link, go to Event Arguments and create a new Argument with Argument name “$MashupPipeID” and constant: your mashup ID. You can get the mashup id by clicking on your mashup from your solution

o   Define a new event handler for the OnCLick event

o   Define this new Event Handler with 2 Operations: SyncDataContainer and FireOutport

FireOutport -> Specify the Outport that we created for the EC

When the link is created, the event Handler basically launches the Outport. This is bound to the Inport of the Mashup which ultimately receives values that we have passed from the Outport and hence the URL is launched with the values in these parameters !

Done !! Now save and activate your solution and test it…

Mash it up !!

Cheers !

Vinita