在深入研究类似于Display的Fiori应用程序的创建之前，让我们了解Fiori Element的相关性和用法。为了在开发SAP Fiori应用程序时减少前端代码的数量并保持设计的一致性，SAP引入了生成UI的框架。它称为 SAP Fiori Element。SAP Fiori Element使用元数据注释和预定义模板来生成SAP Fiori应用程序。
因此，SAP Fiori Element模板通过仍使用前端中的预定义扩展点来提供灵活性，从而极大地减少了必要的前端SAPUI5 JavaScript代码，并显着提高了开发人员的生产率。
与SAP Fiori元素相比，自由式应用程序为前端开发人员提供了UI设计和逻辑方面的完全灵活性，但在开发阶段需要大量的精力。UI布局及其控件必须由开发人员手动声明，并且必须实现必要的SAPUI5 JavaScript逻辑。此外，开发自由式应用程序时的另一个风险是违反SAP Fiori设计准则。
有各种可用的Fiori元素模板。以下是SAPUI5 App开发中最常用的那些：
- 列表报告模板 –由列表和对象页面组成。
- Master-Detail模板 –列表和详细信息页面将在一个页面本身中显示为拆分屏幕。
- 概述页面（OVP） –由多种样式的卡片组成。卡片可以包括条形图，图形。
- 分析列表页面（ALP） –由带有条形图和图表以及列表的分析视图组成。
让我们考虑开发List-Report页面，这是最常用的基于Fiori的模板的应用程序。要使用Fiori Elements模板，我们必须使用SAP Web IDE。
- 启动SAP WebIDE并从模板中选择File-> New-> Project
2.选择list report application模板，然后选择下一步。
3.输入以下详细信息，然后单击下一步。
4.选择系统（网关系统），输入OData服务名称，然后在下面的列表中选择服务。最后单击下一步。
5.选择注释，然后单击下一步。
6.选择OData集合。OData集合应该始终是整个数据模型的主要实体。在这里，我们必须选择航空公司实体，因为它是主要实体。OData导航必须是必须在导航上显示的下一个实体。
7.单击下一个选项卡中的完成，将创建项目。
8.选择项目，然后单击运行。
9.项目执行后，Fiori应用程序将如下所示。
由于未放置任何UI元素，因此Fiori应用程序中不会显示任何标签或其相应的值。为了在应用程序中显示智能表，窗体，字段等，我们利用UI批注将UI元素放置/放置在Fiori应用程序上。
我们在CDS视图级别将UI注释编写为@UI。但是，使用Metadata扩展文件并将所有UI注释放入其中是一个好习惯。这是因为将来可能会更改UI / UX，这样UI元素也可以轻松适应新的UI / UX设计。
要创建元数据扩展文件，请右键单击CDS节点，然后选择“元数据扩展名”。提供类似于CDS数据定义的名称和描述。
创建元数据扩展文件后，最重要的步骤是：
- 提供我们要进行UI注释的视图名称。
2.在“数据定义”中的“元数据扩展名”注释下方添加顺序，以显示“数据定义”和“元数据扩展名文件”之间的链接。
以下是UI批注及其行为描述。
参考上面的UI批注语法，让我们将其应用并在实施后比较Fiori应用。根据上表，添加了UI批注。以下是航空公司和航班信息的元数据扩展文件的源代码。数据模型。将屏幕中的编号与UI注释表中的编号进行比较。
同样，我们为航班信息和航班时刻表创建元数据。以下是构建元数据并使用UI注释正确放置后的Fiori应用程序。
使用所有UI注释和Fiori元素模板，现在可以构建类似Display的应用程序。
