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的原创文章，请关注公众号"汪子熙":
相关推荐
SAP Fiori配置手册 本配置手册旨在指导用户完成SAP Fiori的设置和配置，从而实现SAP Fiori Launchpad的激活。下面是该手册中所涉及到的知识点： 1. 创建管理员账号和测试账号 在SAP Fiori的配置中，需要创建管理...
### SAP Fiori 快速指南知识点详述 #### 一、SAP Fiori 简介 SAP Fiori 是一款由 SAP 开发的新用户体验（UX），旨在为用户提供直观、简洁的操作界面。它包含了300多个基于角色的应用程序，覆盖了人力资源、制造、...
SAP fiori的简易开发过程指南，从开发者角度出发，分后面ODATA开发环境和前端SAP UI5环境搭建，以及发布进行了讲解
### SAP Fiori APP 应用快速实施解决办法 #### 一、引言 SAP Fiori 是一种全新的用户界面设计原则和技术框架，旨在为用户提供直观、简洁和一致的体验。本文档将详细介绍如何通过手动配置步骤或使用预定义任务列表...
- **在 SAP Fiori 启动板中显示用户头像**: 增强了用户的个性化体验。 ##### 3. **UI 主题设计器** - SAP Fiori 2.0 引入了一个强大的工具，允许系统管理员轻松定制主题和样式。这有助于保持企业品牌的一致性，并...
测试用例关键点在于验证“现金位置”(Cash Position)瓷砖在SAP Fiori Launchpad中的信息显示是否准确。这个测试用例旨在确保在执行一系列业务操作后，用户能够看到正确的现金流信息。这包括了对不同维度的现金流进行...
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是一种创新的用户界面(UI)设计和交付架构，由SAP公司推出，旨在为企业应用程序带来消费级用户体验。SAP Fiori的目标是通过更新最广泛和频繁使用的SAP软件功能的用户界面，为用户提供即时价值，这些功能可以...
SAP Fiori Elements Development UX 403 SAP Fiori Elements Development UX 403 是一门关于 SAP Fiori 元素开发的高级课程，旨在帮助开发人员学习如何构建高质量的用户体验（UX）。本课程的主要目标是让开发人员...
内容概要：本文档详细介绍了SAP Fiori配置的全过程，覆盖了从创建初始账号直至完成各种关键配置步骤的具体指导。主要内容分为几个部分，首先是关于如何创建以及赋予权限于管理员账号及用于测试环境的账号，并具体...
### SAP Fiori 概览与用户体验战略 #### 标题：SAP Fiori 概览 **SAP Fiori** 是 SAP 公司为改善其应用程序的用户界面（UI）和用户体验（UX）而推出的一套设计原则和技术框架。自2013年发布以来，SAP Fiori 已经...
### SAP Fiori 2.0 产品介绍 #### 一、设计原则与创新方法论 **SAP Fiori 2.0** 是SAP SE在2016年推出的一款面向用户需求的企业软件解决方案，其核心设计理念是为用户提供简单、一致且令人愉悦的用户体验。在**第...
### SAP Fiori - 在六步内添加自定义工作流 #### 概览 本文将详细介绍如何在SAP Fiori环境中通过六个步骤实现自定义工作流的添加。此过程旨在为那些希望利用SAP Fiori的强大功能来提升业务流程管理效率的企业提供...
SAP Fiori是一个为SAP软件用户界面提供全新设计框架的用户体验。它强调简洁直观的用户界面，并能够适应不同的设备，包括桌面电脑、平板和智能手机。SAP Fiori 2.0系列视频教程涵盖了从基础到高级的内容，帮助开发者...
### SAP Fiori Launchpad配置指南 #### 一、引言 SAP Fiori Launchpad作为移动和桌面设备上的Fiori应用程序入口，为用户提供了一种直观便捷的方式去访问各种业务流程相关的应用。为了确保Fiori Launchpad能够满足...
SAP Fiori 快速启动板使用指南 SAP Fiori 快速启动板是 SAP Fiori 应用的外壳，为应用提供导航、个性化、嵌入支持和应用程序配置等服务。它是 SAP Fiori 应用在移动和桌面设备上的入口点。 快速启动板的组成部分 ...
SAP Fiori是SAP公司推出的一套用户界面(UI)技术框架，用于提供企业软件全新的用户体验。它是前端UI框架SAPUI5的一个重要组成部分，旨在为用户打造简洁、直观、便捷的操作界面。SAP Fiori以用户为中心，强调简洁性和...
内容概要：本文档详细介绍了SAP Fiori的新用户体验（UX）及其应用程序，主要涵盖三个方面：交易应用程序、事实表单和分析应用程序。SAP Fiori提供了一个多设备兼容的应用环境，可以无缝切换不同的设备进行操作。文档...
SAP Fiori 是 SAP 公司推出的一种全新的用户体验（UX）设计，旨在提供更加直观、高效和个性化的企业级应用程序。这个快速指南将带你了解 SAP Fiori 的基本概念、设计原则以及不同类型的 SAP Fiori 应用程序。 首先...