Step by step to create HTML Mashup and make it visible in UI
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 ABSL
- 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 BO
- 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:
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.
Michelle
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.
In the outport that you created on EC, did you bind that inportparameter field with any opportunity field?
Thanks in advance:)
Hello,
When i Try to create the HTML Mashup the application show a dump
steps
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
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