Displaying UI5 application in SAP CRM WebUi as an Assignment Block
Purpose:
The main purpose of this document is to display a sample UI5 application as an assignment block in CRM WebUi.
Overview:
Here i am going to explain how simply we can access a UI5 application in CRM WebUi.
Step 1 : Initially create a form view and assign it as a assignment block on the over view page.
Step 2 : Create a UI5 application and get the URL for that application.
Step 3 : Call the UI5 application in CRM WebUi.
Step 1:
(Note: This Step 1 is for beginners only. Those who know how to create a form view and adding it as a AB they can ignore this).
You can follow below link to create a form view.
SAP CRM WEB UI : 30.CREATING FORM VIEW
Follow below link to assign the view as a assignment block on over view page.
SAP CRM WEB UI : 31.CREATING OVERVIEW PAGE
Step 2 :
Please follow below links to create a basic SAP UI5 applications.
Create Your First SAPUI5 Application – UI Development Toolkit for HTML5 (SAPUI5) – SAP Library
Note: We develop UI5 applications in IDEs like (Eclipse,Web IDE). But if you want to access the same UI5 application in CRM it has to be deployed onto a fiori server.
In my case I have developed a sample UI5 application( Which resembles like Fiori application) which displays list of available sales orders in the system and deployed onto a fiori demo server.
Which looks like below.
Step 3 :
Now here we have to call the UI5 application in CRM WebUi.
Open the .htm page of the view and write the following code in it.
<iframe src=“URL of UI5 application” name=“iframe_a” width=“100%” height=“800”></iframe>
Note: Here we can use the height and width values based on our requirement.
And the final result will look like
Thanks & Regards,
Naveen M
Good one Naveen.
Thank you Rajwin.
Very nicely done Naveen.
Thank you Arden.
Nice Naveen....
Interesting ... are you handling the conceptions of navigation between different views, handling context from CRM to the UI5 app.
I suspect that you just have a UI5 app sitting in a iframe with no interaction to the CRM context at all.
If you could pull off that I would love to see it.
Hello James,
At present i embedded my UI5 application in CRM using iframe. and there is no interaction between CRM and UI5 app.
Currently i am working on how to interact CRM and UI5 application. if i found a way around i will update here.
Br,
Navn
Hello Naveen,
I have one advice try using the global data context concept to link both SAP CRM with UI5.
I had already published the document on the same http://scn.sap.com/docs/DOC-62170
first create the Global data context as highlighted in my SCN Link above and then try to retrieve data from Global data context in ODATA class which you are either ways using in this example.
Hello Rajwin,
Thank you for the hint... I will try GDC 🙂
Hello Naveen,
Really helpful info ... thanks a lot
Thank you Hemangi.
I am glad that you found this document as helpful 🙂
Naveen. What if round trip occur then url will get loaded again with the Iframe this wont work if you have tile layout.
and if you have to make data interaction between those I think u can pass it in URL it self.
but I m not sure about the response.
Or I would suggest another approach make transaction launcher with URL and load the same. then may be the class which gets created by which u might be able to do the interaction.. just a thought!
Hi Naveen M,
Sorry Its quite a long time now,
But did you manange to do this?
If yes please share your findings.
I have a requirement to Embedd my SAPui5 screen within one of the workcentre of my existing CRM web UI.
I was thinking to use Transaction launcher but It does not work as the screen goes blank.
Could you please help me here?
Thanks
HI SAD D,
are u using , URL Bases transaction launcher? it is possible and very simple as Andrew suggested in below post
https://archive.sap.com/discussions/thread/3679110
try deactivation of Automatic delta handling.
Regards,
Dhruvin
Hi SAPD D and all,
I just have tried new THTMLB tags to integrate UI5 in SAP CRM.
SPAN {
font-family: "Courier New";
font-size: 10pt;
color: #000000;
background: #FFFFFF;
}
.L1S33 {
color: #009300;
}
.L1S51 {
color: #8B0000;
}
<thtmlbx:htmlIsland id = "htmltestIsland"
height = "800px"
width = "100%"
htmlFile = "/sap(====)/bc/ui5_ui5/sap/islandtest/webapp/index.html" >
Works so well! There are a lot of additional things u can achive , just go to FLEX_SANDBOX view and check htmlisland 🙂
Hi Dhruv,
Thanks for the reply! May I ask you what sap ui5 library you are using in your application.
Mine is sap.m and I think that is why the issue but not sure.
I have used transaction launcher as well as embedded Iframe in the component.
Every time I execute the application It gives me a blank screen and when I inspect the screen my sap ui5 gets refreshed and get loaded but all this happens untill my debugger is on, as soon as I close the debugger my screen gets blank again.
I have also tried deactivating ADH but nothing works.
Any comments?
Thanks
Thanks.