Skip to Content

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:
You must be Logged on to comment or reply to a post.
  • 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.


  • 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.