从实际的开发案例出发，介绍 Navigation Property 在 Fiori Elements 开发中的作用试读版

本教程笔者在 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 来提供的。