Skip to Content
Author's profile photo Jerry Wang

How SmartTable works

Part1 – Currency example – how Smart field works

Part2 – Smart field with value help

Part3 – Smart Field with Smart Link

Part4 – this blog

The appearance of smart table rendered looks like below:

/wp-content/uploads/2016/03/clipboard1_909409.png

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:

/wp-content/uploads/2016/03/clipboard3_909425.png

/wp-content/uploads/2016/03/clipboard4_909426.png

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:

/wp-content/uploads/2016/03/clipboard5_909427.png

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

/wp-content/uploads/2016/03/clipboard6_909434.png

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

/wp-content/uploads/2016/03/clipboard7_909435.png

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

/wp-content/uploads/2016/03/clipboard8_909436.png

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

/wp-content/uploads/2016/03/clipboard9_909440.png

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

/wp-content/uploads/2016/03/clipboard10_909441.png

/wp-content/uploads/2016/03/clipboard11_909442.png

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:

/wp-content/uploads/2016/03/clipboard12_909443.png

/wp-content/uploads/2016/03/clipboard13_909444.png

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

/wp-content/uploads/2016/03/clipboard14_909445.png

How “currency” filter works

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

<Property Name="CurrencyCode" Type="Edm.String" MaxLength="3"
     sap:label="Currency" sap:semantics="currency-code" sap:filterable="true" />

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

/wp-content/uploads/2016/03/clipboard15_909449.png

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

/wp-content/uploads/2016/03/clipboard16_909450.png

Once we select the checkbox and click OK button:

/wp-content/uploads/2016/03/clipboard17_909451.png

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

/wp-content/uploads/2016/03/clipboard18_909452.png

The filter condition is defined in aFilters:

/wp-content/uploads/2016/03/clipboard19_909453.png

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

/wp-content/uploads/2016/03/clipboard20_909454.png

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Yury Hotsman
      Yury Hotsman

      Hello Jerry!

      Could you explain, how did you add multiple select for table?

      /wp-content/uploads/2016/03/clipboard16_909450.png

      I have found instructions: I need add parameter "multiSelect": true to manifest.json file.

      But it doesn't work