快速定制开发SAP Fiori Element应用

介绍

前端开发最常用的语言就是JavaScript，JS是一门非常强大灵活的语言，但是对于技能和时间上要求比较高。

Fiori Element可以通过配置annotations的方式，来实现需求，可以避免编写代码的方式来开发应用，这样可以大幅提高效率和降低effort。

下面来通过一个小例子来看，如何通过Annotations XML来配置一个Fiori Element列表应用。

在完成以后，需要能够有根据不同过滤条件来查询销售订单的数据。

主要的步骤

创建一个Annotation文件

下一步

WEBIDE提供了更方便的Annotation编辑器，不用手写XML代码

新加上HeaderInfo, LineItem, SelectionFields

配置所需要的字段：

1. HeaderInfo是列表Header是的信息。

2. LineItem是列表的所有显示列。

3. SelectionFields是过滤查询条件。

Annotations代码:

<edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
	<edmx:Reference Uri="/Northwind/V2/Northwind/Northwind.svc/$metadata">
		<edmx:Include Alias="Metadata" Namespace="NorthwindModel"/>
	edmx:Reference>
	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470968/UI.xml?api=v2">
		<edmx:Include Alias="UI" Namespace="com.sap.vocabularies.UI.v1"/>
	edmx:Reference>
	<edmx:DataServices>
		<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="Orders_FE.annotation0.NorthwindModel">
			<Annotations Target="Metadata.Order">
				<Annotation Term="UI.HeaderInfo">
					<Record Type="UI.HeaderInfoType">
						<PropertyValue Property="TypeName" String="{@i18n>appTitle}"/>
						<PropertyValue Property="TypeNamePlural" String="{@i18n>appDescription}"/>
					Record>
				Annotation>
				<Annotation Term="UI.SelectionFields">
					<Collection>
						<PropertyPath>OrderDatePropertyPath>
						<PropertyPath>CustomerIDPropertyPath>
						<PropertyPath>ShipCountryPropertyPath>
					Collection>
				Annotation>
				<Annotation Term="UI.LineItem">
					<Collection>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="OrderID"/>
						Record>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="CustomerID"/>
						Record>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="ShipAddress"/>
						Record>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="OrderDate"/>
						Record>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="ShipCountry"/>
						Record>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="ShipRegion"/>
						Record>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="ShippedDate"/>
						Record>
					Collection>
				Annotation>
			Annotations>
		Schema>
	edmx:DataServices>
edmx:Edmx>

运行程序

小结

可以看到FioriElements可以大幅提高开发效率，可以通过简单的配置就可以完成一个符合SAP Fiori设计语言的应用。

参考阅读

https://blogs.sap.com/2016/11/27/fiori-elements-how-to-develop-a-list-report-using-local-annotations/

https://blog.csdn.net/starshus/article/details/105736879