在SAP WebClient UI裡使用AJAX進行非同步資料讀取

i042416發表於2020-09-13

What is smart field

According to  SAP help, “Smart controls are a specific category of SAPUI5 controls that have some special features in addition to the standard SAPUI5 features and thus make it easier to use the control in certain scenarios. One important building block of smart controls is the SmartField control that, depending on the OData metadata defined, allows you to renders other controls and, for example, define fields with certain attributes based on the metadata.”

In xml view definition, only one SmartLabel and one SmartField are declared.


在SAP WebClient UI裡使用AJAX進行非同步資料讀取


However, in rendered UI, there is additional currency field displayed as well. This is the meaning of “Smart”.


在SAP WebClient UI裡使用AJAX進行非同步資料讀取


How SmartField works

(1) SmartField which is bound to Price field is rendered as usual:


在SAP WebClient UI裡使用AJAX進行非同步資料讀取


(2) The mock data, Products.json, will be loaded by Mock server and once it is available, success callback is triggered.


在SAP WebClient UI裡使用AJAX進行非同步資料讀取


(3) In callback, setElementBindingContext will trigger initialization logic of SmartField:


在SAP WebClient UI裡使用AJAX進行非同步資料讀取 在SAP WebClient UI裡使用AJAX進行非同步資料讀取


(4) Here ODataControlFactory will try to get all sap defined annotation from OData Metadata,


在SAP WebClient UI裡使用AJAX進行非同步資料讀取


The picture above highlights some of sap annotations. For a complete list of them, please refer to this  link.

Parse logic of all annotations could be find from AnnotationHelper.get. The example below introduces how sap:unit annotation is parsed.


在SAP WebClient UI裡使用AJAX進行非同步資料讀取 在SAP WebClient UI裡使用AJAX進行非同步資料讀取


The string “CurrencyCode” is returned:


在SAP WebClient UI裡使用AJAX進行非同步資料讀取


At this time, metadata for currency UI element is available and it is ready for creation:


在SAP WebClient UI裡使用AJAX進行非同步資料讀取


(5) UI element for currency code display is created here:


在SAP WebClient UI裡使用AJAX進行非同步資料讀取


And CSS class sapUiCompSmartFieldUnit is added:


在SAP WebClient UI裡使用AJAX進行非同步資料讀取


要獲取更多Jerry的原創文章,請關注公眾號"汪子熙":

在SAP WebClient UI裡使用AJAX進行非同步資料讀取


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2719113/,如需轉載,請註明出處,否則將追究法律責任。

相關文章