且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

SAP Fiori Elements里的Smart Table工作原理解析

更新时间:2022-09-06 08:14:27

The appearance of smart table rendered looks like below:



SAP Fiori Elements里的Smart Table工作原理解析

The source code of this example could be found from this link.


How table related annotation is parsed and table columns are rendered

Unlike the previous three examples, the control instance of SmartTable now is not created dynamically by ODataControlFactory, but statically declared in xml view and created then by XMLTemplateProcessor after xml view is loaded and parsed:


SAP Fiori Elements里的Smart Table工作原理解析



When OData metadata is retrieved asynchronously, the event handler for this Metadata ready event belonging to the SmartTable instance created in previous above is called to create Table provider:


SAP Fiori Elements里的Smart Table工作原理解析


In this context, most of the properties come from the definition in XML view:


SAP Fiori Elements里的Smart Table工作原理解析


All the input parameters for table provider creation are listed below:


SAP Fiori Elements里的Smart Table工作原理解析


In function _intialiseMetadata, the five fields of entityType Product is parsed:


SAP Fiori Elements里的Smart Table工作原理解析


Pay attention that these fives fields are not final table columns rendered.


SAP Fiori Elements里的Smart Table工作原理解析


Instead, only those fields defined under annotation “com.sap.vocabularies.UI.v1.LineItem” would be rendered as table columns:


SAP Fiori Elements里的Smart Table工作原理解析SAP Fiori Elements里的Smart Table工作原理解析



Then in _reBindTable function, we have already learned in Smart field with value help that this function will send an OData request to ask for table content:


SAP Fiori Elements里的Smart Table工作原理解析SAP Fiori Elements里的Smart Table工作原理解析



Once executed, you could observe the response returned by Mock server from console and the table is now filled with data from Products.json.


SAP Fiori Elements里的Smart Table工作原理解析


How “currency” filter works

Since currency code is marked as filterable = true in metadata.xml,

SAP Fiori Elements里的Smart Table工作原理解析


so we could switch it on in “More Filters”:

SAP Fiori Elements里的Smart Table工作原理解析



Suppose we would like to filter by currency code = EUR.


SAP Fiori Elements里的Smart Table工作原理解析


Once we select the checkbox and click OK button:


SAP Fiori Elements里的Smart Table工作原理解析


Another OData request will be sent by FilterBar from sap.ui.comp.FilterBar:


SAP Fiori Elements里的Smart Table工作原理解析


The filter condition is defined in aFilters:

SAP Fiori Elements里的Smart Table工作原理解析



Again you could observe this filter request’ url and response in console tab:


SAP Fiori Elements里的Smart Table工作原理解析