快速定制開發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&gt;appTitle}"/>
						<PropertyValue Property="TypeNamePlural" String="{@i18n&gt;appDescription}"/>
					</Record>
				</Annotation>
				<Annotation Term="UI.SelectionFields">
					<Collection>
						<PropertyPath>OrderDate</PropertyPath>
						<PropertyPath>CustomerID</PropertyPath>
						<PropertyPath>ShipCountry</PropertyPath>
					</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