Skip to Content
Author's profile photo Jerry Wang

Step by step to create HTML Mashup and make it visible in UI

My series of Cloud Application Studio Blogs

1. Switch on Admin mode of your solution, and create a port type package as below:
2. Create a mashup port binding using the port type package created in previous step:
3. Create a HTML mashup and bind it to the mashup port created in previous step:
4. Create an embedded component and drag the created mashup, drop it into the pane container of embedded component:
Switch to controller tab of the embedded component, create a new outport and configure it with the port type package created in first step.
Create a simple navigation and finish the necessary parameter binding:
In the end the controller of the embedded component has the following settings:
5. Add the embedded component as a new tab of Opportunity TI via extensibility explorer.
In the runtime, the url I specified in my html mashup is parsed by UI framework and rendered within an IFrame:

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Michelle Crapo
      Michelle Crapo

      Here I go - bookmarking again.   My version is too low.   But I can't wait to be on a higher version.

      In other words - thank you for the great step by step blog.


      Author's profile photo Dhruvin Mehta
      Dhruvin Mehta

      Hi Jerry,


      Thanks , it worked like a charm.

      However our requirement was to Add the EC on Overview page which I did but the size of the EC is very small and it is almost unusable.

      Can we increse the size of the EC embbeded on overview page and not in new tab.

      Author's profile photo Suchetha H V
      Suchetha H V


      In the outport that you created on EC, did you bind that inportparameter field with any opportunity field?

      Thanks in advance:)

      Author's profile photo Manuel Tejada Mezarina
      Manuel Tejada Mezarina


      When i Try to create the HTML Mashup the application show a dump


      1. Create a HTML Mashup
      2. Open the web and fill the values(type URL)
      3. Save

      When i clic SAVE show the dump. I create an incident because this dump show on two diffetent tenants but SAP answer that not part of service.

      I based on this links:



      You have any idea what happend

      Author's profile photo Zhi Ning Liu
      Zhi Ning Liu

      Hi Jerry,

      I have a customer of C4C. The customer created a html mashup embedding a S/4 Service Orders application.

      Normally, any S/4 application will have clickjacking protection automatically implemented once sap-ui-core.js is included in their application. This means that when the S/4 is loaded inside mashup iframe (the container and the "render" iframe inside it), it will send a postMessage call to mashup as its parent window. The S/4 app will be waiting for reply from the mashup.

      My question is: Is there clickjacking protection implemented for html mashup that will support this communication with the S/4 app ?

      Best regards,

      Zhi Ning Liu