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的原创文章,请关注公众号"汪子熙":
相关推荐
Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5,曾经在 SAP 社区和“汪子熙”微信公众号上发表过多篇关于 SAP UI5 工作原理和源码解析的文章。 Jerry 也是从 SAP UI5 菜鸟一路走过来...
以下是SAP Fiori的三种方案:交易应用程序(Transactional apps),分析应用程序(Analytical apps)和实况报告报表(Fact sheets)。每个方案都有其特定的系统或软件要安装。通过阅读本文档,它可以根据所需的系统...
SAP Fiori SAP Fiori SAP Fiori Architecture Architecture Overview to Deep Overview to Deep Dive -with with focus on S/4 HANA focus on S/4 HANA
SAP Fiori 官方最新培训中使用的现金流案例。与你分享。
SAP fiori的简易开发过程指南,从开发者角度出发,分后面ODATA开发环境和前端SAP UI5环境搭建,以及发布进行了讲解
SAP Fiori Launchpad是移动或桌面设备上Fiori应用程序的入口,Launchpad Designer是配置Launchpad的标准工具。本配置指南提供了设置SAP Fiori Launchpad和Launchpad Designer所需的信息。 此外,它还提供了将所有...
SAP Fiori OData Services. OData is used to define best practices that are required to build and consume RESTful APIs. It helps you to find out changes, defining functions for reusable procedures and ...
SAP Fiori---快速指南 共82页 2018年编著 word文档,写的不错,快速入门的好教材。
SAP FIORI OVERVIEW FIORI概览
SAP Fiori - Adding a Custom Workflow in 6 Steps
SAP Fiori UX overview 2015/03
SAP Fiori Implementation Guide This document describes exploring SAP Fiori Implementation options and planning a typical SAP Fiori on premise implementation.
Take a deep dive into SAP Fiori and discover Fiori architecture, Fiori landscape installation, Fiori standard applications, Fiori Launchpad configuration, tools for developing Fiori applications and ...
SAP Fiori 官方新产品发布体验 F110自动付款样例.希望您喜欢。
SAP S4HANA frontend fiori详细配置文档,以及简单权限配置
什么是SAP Fiori SAP UX策略 SAP Fiori设计指南(Design Guideline) SAP Fiori运行环境 SAPUI5与OpenUI5 OpenUI演示
描述SAP 最新产品特性,及开发事项。
S4 HANA 中文版教材
Session 1: Introduction to SAPUI5 / FIORI (40 mins) ▫ Basic MVC concept: Model, View, Controller ▫ UI5 Control libraries • Session 2: Introduction to SAP Web IDE (20 mins) • Hands on 1: Build your...
sap fiori installation overview