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

[JerryWang]

My series of Cloud Application Studio Blogs

• How to detect EditMode in an Embedded Component


• Step by step to enable your custom BO with attachment upload functionality


• Step by step to create an Adobe Print form in Cloud application Studio


• How to render PDF which displays picture from the image attachment of your custom BO


• How to get current logged on business user’s employee information and assigned organization unit via...


• How to implement dynamic access control based on custom BO using OWL


• How to make Code List Restriction work when control field and restricted field are not on the same B...


• How to implement custom number range using custom business object


• Two approaches to create Code List in Cloud Studio


• Create Dynamic Code List via Custom Business Object Association


• Step by step to develop Thing Type based navigation and BO Object based navigation


• Put Extension field into embedded component and make it visible in Standard UI


• One possible cause that embedded component fails to display in UI


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


• Step by step to enable Text Collection for your custom BO


• Automatically send an Email notification to line manager via Workflow in Account application


• Step by step to create Object Value Selector in Cloud Application Studio

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: