共计 856 个字符，预计需要花费 3 分钟才能阅读完成。
本教程笔者在 Github 仓库上提供的源代码我的项目里，大家抉择对应章节，比方进入 06 文件夹，运行命令行 npm run start-local，启动 Fiori Elements List Report 利用后，在 Table 区域，除了奢侈的文本显示控件之外，还能看到产品图片控件，显示产品库存状态的 Status 控件，以及产品评分控件，别离如下图高亮的三列所示。
对于图片显示，本教程之前的文章曾经具体介绍过，这个图片显示，基于 SAP UI5 的 Avatar 控件：
- 16. SAP Fiori Elements 利用里图片字段 (Image) 的显示原理介绍
- 17. SAP Fiori Elements 源码剖析系列：注解 UI.IsImageURL 的工作原理分析
- 18. 从 SAP Fiori Elements List Report 中的图片显示，谈谈背地的 XML Template 设计机制
本文开始介绍上图两头显示的 Fiori Elements 框架里 List Report 模版的 Smart Table 中，Availability 这一列的设计原理。
进入本教程附带的 Github 仓库，将代码下载到本地，运行命令行 npm run start-local, 而后浏览器里关上 UI，应用笔者这篇文章里介绍的 Chrome 开发者工具扩大：UI5 Inspector：
- SAP UI5 利用开发教程之四十一 – Chrome 扩大 UI5 Inspector 的离线装置和应用办法
在 UI5 tab 里，输出关键字 status，勾上 filter results，这样进去的后果控件树里，只会显示蕴含 status 的 SAP UI5 控件实例。由这个扩大，咱们得悉 Fiori Elements 页面上，看到的 Availability 这一列，是通过 SAP UI5 sap.m.ObjectStatus 这个控件实现的，并且这个控件绑定门路为 to_ProductStock/StockAvailability, 当绑定值为 1 时，在界面上渲染为一个红色的 × 图标。
本文介绍这个字段的数据源，是如何通过 OData 的 Navigation Property 来提供的。