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 !!
Thanks for your valuable post ..............
Is it possible to see this URL Mashup called through embedded component in an IPad. I tried adding the tag: Tablet into the url mashup and embedded component in the Cloud Application Studio, but it fails.
Yes it is possible.
There are two type of screen available in Cloud Application Studio
1. Desktop Screen
2. Mobile Screen
you should add your EC with mobile Screen.
Nice to hear from you 🙂
There are 2 things:
Embedded components don't work on the Native iPad App. But it would work if you launched C4C on the Browser in the iPad.
Next, Mashups within EC don't work - as per my findings at least
You could try it too but basically you're not allowed to tag mashups if they are within an EC
If we build SAP UI5 screens on ECC, would we able to call them through C4C mashups? and would such an app be supported on mobile platforms?
Awesome - thanks!!
Is it possible to display this map in the panel below the NOTES instead of opening it using the link?
If you want to display the mashup embedded into the screen, you should use the HTML mashup... HTML mashups can be HTML Code mashups or HTML URL mashups..
You'll find the details in the admin guide as well
Another clarification regarding Mashups. Is it possible to create a mashup using extension field.
Say I have an extension field in my OpportunityTI screen and making it as an link I want to open my ECC system login screen.
Is this possible. Please provide your suggestions.
Is it possible to do some validation after the user clicks on the "Test Link2" and before redirecting to the actual URL.
what I needed is- On click on the Link I need to validate something . Say need to interact with SAP ECC through service , get some data. On this result data I need to decide if I have to redirect to the URL (Test Link2) or show him Alert Message and stop redirecting to the URL.
Is this feasible?
I havent tried this myself, but perhaps you could check with the Event Handler operations.. ie, before really calling the Outport, check if you could club other operations to get the values you need, validate and based on the results Fire Outport or not
I was also thinking on the event handlers . but not sure how to implement it exactly. Will try this out .
I have 4 URL Mashup in an embedded component. In HTML5, it is working fine but in Silverlight, only the first URL is working. When I click on the 3 others, nothing happens.
Do you have any idea ?
I have created the URL mashup working fine,
i have a link field in the screen, by clicking the link it navigates to website.
this is working perfectly fine.
Now we need to have this website in the SAP - Byd screen it self.
can you guide me on this.
Try Creating HTML mashup. You can add an embedded component and add the html mashup inside it. Refer to Vinita's blog for creating HTML mashups.
Thanks for your reply,
Is not possible in URL massup in the screen ?
Srinivasan is right... a URL mashup is meant to open as a separate window. If you want this embedded in your ByD screen, you should use HTML mashups. It would be very similar to the url mashup if you are not using an HTML coded one instead usng HTML Url mashup. You can refer to my blog on that too
Had creted URL mashup for embedded component by following the same steps that you had provided but not able to get the output when clicks on the link.
the only difference with your solution is different parameters.
Do you have any idea about this?
Thanks for posting this 🙂 I am not new to C4C but somehow never worked in Mashups and suddenly a lot of the customers are using it 😀 your blog was really helpful.
Its really a good blog but it does not work for me.
I have send the data from outport EC to Inport Mashup.
I m able to see the outport value ( values are coming to screen of field ) on the Custom EC but when i click on that field .its not working..
i Checked the url parameter and found dynamic one is missed.
this parameter is already bound.
Thanks for your blog.
It is very useful blog for me.
But, I would like to know one point, that is when we join the output of standard BO and input of our EC, how to check the value of input field of EC's in absl.
I would like to explain my problem.
I joined our EC with standard Purchase Request BO's output.
And then I need some value of Purchase Request to use in our EC's field.
So, I created the AfterModify.absl script file.
And then I write the logic to execute the PR's data by using that input field's data as following:
var PR_Ret = PurchaseRequest.Item.Retrieve(this.Z_ItemUUID);
this.Z_URI.content = PR_Ret.Z_TestLinkPR;
And then I debugged my logic, I get the value as "0000000000000000000000000000000000000000" at this.Z_ItemUUID. At that time the value"00163E0E4D241EDAAADC99F6879E5587" is showed at my input field on screen and "PR_Ret " is no set.
So, I can't do anything to get the needed value from PR BO.
I send the attach image of PR's browser screen.
Please give me advice to get the input EC value via absl of EC.
Thanks and regards,