1. 什么是Fiori Element？
在之前的博客《学习SAP Fiori，需要先了解哪些知识点？》中，我有提到，不熟悉前端开发三件套“HTML + CSS + JS”的同学，也可以完成Fiori的开发。很多同学好奇，是如何完成的？其实，就是通过使用 SAP Fiori Element。
聊几句SAP Fiori Element的历史。
SAP Fiori Element只能又称作“SMART template”，通过这个名字便可知道，Fiori element是啥。
Fiori element是SAP为Fiori APP提供了一套开发框架，可以理解为“模板”。Fiori 应用程序的的开发人员，可以根据自己的业务场景，选取相应的模板，开发过程中，通过使用OData的annotation便可以自动生成Fiori的前台UI。
什么意思呢？
如果没有Fiori element，那么Fiori APP页面上的每一个元素，都是需要通过开发人员手动绘制的（使用 HTML + CSS）, 例如控件的位置，颜色，大小等等，显然，这样是重复而且繁琐的。
而SAP Fiori Element抽象出来了最常用的App模式，形成了模板（在Fiori element中称之为floorplan）。通过使用模板，有关UI设计的重复性工作将大大减少，Dev们可以将更多的时间和精力专注于业务逻辑的实施。
使用SAP Fiori Element，能保证UI风格的一致性，同时极大提高开发的效率和App的稳定性。
2. Fiori element的优点
- 无需“HTML + CSS + JS”进行UI相关的coding
- 基于Odata metadata和annotation，以及manifest.json的配置，便可以自动生成Fiori App
- 不需手动创建SAPUI5的页面
- 应用开发人员只需要专注于“哪些内容需要在页面上显示”；至于“如何显示”，是通过SAP Fiori Element的框架自动完成的
3. Fiori Element提供了哪些模板
目前，SAP Fiori Element提供了5种类型的模板，也即Analytical List Page, Initial Page, List Report, Object Page，Overview Page。通过这几种模板，可以覆盖到绝大多数的业务场景。
挑重点的说，有关细节，感兴趣的同学可查看我附在文末的链接。
3.1 List Report + Object Page
这是一种Overview + Detail的模型，在List Page显示出overview的信息，在Object页面给出详细信息。当然，不只是display，开发人员可以定制不同的行为类型。
List Page -
Object Page -
3.2 Analytcial List Page
通过使用ALP，可以通过可视化的方式，呈现并分析数据。使用ALP可以构建炫酷的图形化Filter，各种不同风格的图表，以供数据的可视化分析。
3.3 Overview Page
在一个页面内呈现多种信息，让用户迅速得到所需的Overview状态。
4. 如何使用Fiori Element模板
SAP Fiori Element的使用方式十分简单，在Web IDE中创建Fiori项目时，可以直接使用“New >> Project from Template”。
然后在Cetegory中选择“SAP Fiori Element”, 这样便可以筛选出可用的elememt.
5. 更多资料
本文中，我们简答介绍了SAP Fiori Element的概念和使用方法，感兴趣的同学，可以查看下面的两个链接，获取更多相关知识。
- Fiori Design Guidelines - SAP Fiori Element
- SAPUI5 Demo Kit - Developing Apps with SAP Fiori Elements
持续更新SAP领域优质文章，欢迎关注❤️、点赞👍、转发📣！