zoukankan      html  css  js  c++  java
  • SAP Fiori image的显示原理

    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.

    How to maintain account Logo in CRM so that it could be displayed in Fiori UI

    We have to launch CRM WebUI, upload a new attachment for given account:

    This attachment should meet the following criteria, to make sure it could be used as logo for the current account:

    (1) it must be an image file ( type JPEG Graphic or other image format )
    (2) in property maintenance window, it must be set as default document among all attachments and document type must be BDS_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.

    the url contained in Logo node is used as the requested url for the second step, as could be observed in Chrome:

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

    Step2 – bind the url to image field in application

    Check the xml binding path for image field in Opportunity detail view: it is bound to ImgSrc in json model.

    In application code, it just fills that json model field with url returned by step 1:

    And this operation will lead to a delayed re-render later to set the native html property “src” for image field, which is done by framework:

    Callstack:

    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:

    要获取更多Jerry的原创文章,请关注公众号"汪子熙":

  • 相关阅读:
    docker部署mysql
    docker安装nginx
    Linux查看日志-grep
    linux系统常用命令
    python爬虫
    unittest中常用的assert语句
    Linux 监控tcp连接数及状态
    linux top命令查看内存及多核CPU的使用讲述
    jmeter的时间戳函数使用
    influxdb基本SQL操作2
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/13631422.html
Copyright © 2011-2022 走看看