且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

SAP Fiori image的显示原理

更新时间:2022-09-02 13:07:44

Recently I am working on an issue regarding my responsible application and I found out that previously I have wrong understanding on the image handling in CRM Fiori. I share the correct one in this knowledge so that you would not make similar mistake that I made before.


Background

In CRM Fiori application “My Opportunity”, if the account for current Opportunity has maintained image in CRM backend, it will then be displayed in Fiori UI.SAP Fiori image的显示原理SAP Fiori image的显示原理In the runtime, when you open Fiori UI, it takes two steps to get the image rendered in UI finally. These two steps could just be observed in the Chrome network tab.


Step1 – Fiori UI asks for the image URL from backend

Previously, I consider Fiori UI asked the binary content of image from backend, this is COMPLETELY WRONG!

The complete url for the first step: https://:/sap/opu/odata/sap/ZJERRY_DEMO_SRV/AccountCollection(‘4031140’)?$expand=Logo

From url we know there is an expand operation on node Logo. Check response in Chrome, there is no image binary source contained in response.

SAP Fiori image的显示原理: The complete url returned by first step:

https://:/sap/opu/odata/sap/ZJERRY_DEMO_SRV/AttachmentCollection(documentID=‘FA163EEF573D1EE585804C8B6241ABA3′,documentClass=’BDS_POC1′,businessPartnerID=’4031140’)/$value

Although it contains an “Attachment” in url, it HAS NOTHING TO DO WITH the tab in Opportunity detail page! It just indicates that the technical storage of account logo is done via CRM Attachment model.SAP Fiori image的显示原理Callstack:

SAP Fiori image的显示原理Conclusion

The http request sent in second step is not issued by My Opportunity application, but by browser itself, once an image element is filled with actual url on its “src” property.

To simply prove this conclusion:

Create a simple html file as below, just paste the url for second step into src property:

<html>
<img src="https://<hostname>:<port>/sap/opu/odata/sap/ZJERRY_DEMO_SRV/AttachmentCollection(documentID='FA163EEF573D1EE585804C8B6241ABA3',documentClass='BDS_POC1',businessPartnerID='4031140')/$value"></img>
<html>

Open it in Chrome, and you can observe exactly the same network behavior as when you open the application with an image in Fiori UI:

SAP Fiori image的显示原理