Smart Table

The sap.ui.comp.smarttable.SmartTable control is used to create different types of tables based on OData metadata. The control allows the user to define personalized table settings.

The frequently asked questions section aims to answer the basic questions that may occur when using the SmartTable control.

Overview

The SmartTable control is a wrapper control around any SAPUI5 table. The control analyzes the $metadata document of an OData service and renders a table for a specific entitySet.

The control allows the consuming application to build list patterns based on OData services in an efficient and consistent way and thus makes it easy for the user to create tables without much effort. For example, the control enables the automatic creation of columns.

The consuming application can overwrite the OData default information. The SmartTable control offers you additional built-in features, such as a row count and an export to a spreadsheet application.

The control is closely linked to the VariantManagement, SmartFilterBar, and P13nDialog controls and also supports the popover of the SmartLink control. For more information on these controls, refer to the relevant documentation.

Annotations

The following table shows a selection of the annotations used by the SmartTable control:

Table 1: Annotations
Element	Annotation	Value	Comment
Initial columns	`LineItem`		Shows the initial columns in the `SmartTable` control
Sorting	`sap:sortable`	Enabled by default when 'null'	Enables sorting for a table column
Filtering	`sap:filterable`	Enabled by default when 'null'	Enables filtering for a table column
Ignoring backend fields	`sap:visible`	'false'	Disables processing of an OData field of the `SmartTable`. Fields with value 'false' are not shown on table personalization panels.
Summed values	`sap:aggregation-role`	'measure'	Fields with value 'measure' are summed by default in an `AnalyticalTable` control. Grouping is then disabled for these fields.
Column width	`MaxLength/Precision/Scale`		Evaluated for the definition of a default column width. `MaxLength/Precision` determine the initial width of a table column.
Currency	`sap:semantics`	'currency-code'	If an OData field (`Edm.Decimal`) has a corresponding unit field (`sap:unit`="<FieldName>"), and the unit field has `sap:semantics`="currency-code", a compound currency field is created.

FAQ

Question

How can I enable personalization for columns I add in the XML view in the SmartTable control?

Answer

You can specify custom data for the personalization of the columns in your table as shown in the examples.

Example 1 for a normal aggregation:

<table:AnalyticalColumn id="Ledger" hAlign="Left" minScreenWidth="Tablet" demandPopin="true">
<table:customData>
<core:CustomData  key="p13nData" value='\{"columnKey": "Ledger","sortProperty": "Ledger", "filterProperty": "Ledger", "type":"numeric"}'/>
</table:customData>
              <Label text="Ledger"/>
<table:template>
<Text text="{Ledger}" />
</table:template>
</table:AnalyticalColumn>

Example 2 for use of the shortcut notation of SAPUI5 in the namespace:

View namespace part: xmlns:customData="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"

<table:AnalyticalColumn id="CompanyCode" hAlign="Left" minScreenWidth="Tablet" demandPopin="true" sortProperty= "CompanyCode" customData:p13nData='\{"columnKey": "CompanyCode","sortProperty": "CompanyCode", "filterProperty": "CompanyCode", "type":"numeric", "maxLength":"4"}'>
<Label text="Company Code" />
<table:template>
<Text text="{CompanyCode}" />
              </table:template>
       </table:AnalyticalColumn>

In the p13nData object, you can specify the following properties:

columnKey
A unique key used to save/retrieve/apply personalization for the column
sortProperty
Similar to the table column property; should point to a OData/model property name
filterProperty
Similar to the table column property; should point to a OData/model property name
type
Value can be either date or numeric or empty string; control will be switched accordingly
maxLength
Numeric value, for example, 5 to restrict number of entries in input fields
precision
Numeric value for precision
scale
Numeric value for scale

Note

Some properties that also exist in a table, for example, in sortProperty, will take precedence if specified in both places.

Question

Why do I not see data for my manually added column in the XML view? And why do I get an error "Select at least one column to perform the search" even though I have added several columns manually to the sap.m.Table inside the SmartTable control?

Answer

You need to specify custom data with at least one leadingProperty for the table/columns where there is no leadingProperty available in the control itself so the SmartTable control can fetch data correctly.

Sample Code

<Column > 

    <customData> 

          <core:CustomData key="p13nData" value='\{"columnKey": "Id","leadingProperty": "Id","sortProperty": "Id","filterProperty": "Id"}'/>

     </customData>

    <Text text="Sales Order" /> 

</Column>

Without this, the SmartTable control cannot recognize the column.

Question

How do I handle the visibility of columns in large tables?

Answer

The visibleItemsThreshold property is used as a custom property in the SmartTable control. The property triggers a warning if the end user selects too many columns in the personalization dialog for a table and the threshold defined for the property is exceeded. The property value is passed on from the XML view via the personalization.Controller to the P13nColumnsPanel control. For more information about this property, see Personalization Dialog.

Question

How do I create and pass a search query ($search = 'foo') when using the SmartTable control?

Answer

Use the beforeRebindTable event and implement this manually.

Example

Sample Code

onBeforeRebindTable: function(oEvent) {         var
        mBindingParams = oEvent.getParameter( "bindingParams" );       
		mBindingParams.parameters[ "custom" ] =
        {                        "search-focus" :
        sBasicSearchFieldName, //  the name of the search
        field                        "search" :
        sBasicSearchText //  the search text
        itself!                };  }

This will then be used internally when creating the table binding.

Question

How do I get data for custom columns (icons, formatters etc.) that are not present in the columns/binding (select = 'ColA,ColB,foo,bar') of the SmartTable control?

Answer

Use the beforeRebindTable event and implement this manually.

Example

Sample Code

onBeforeRebindTable: function(oEvent) {         var
        oBindingParams = oEvent.getParameter( "bindingParams" );
        if  (oBindingParams.parameters.select.search( "SomeIconCode" ) < 0) {                           
         oBindingParams.parameters.select +=
         ",SomeIconCode" ;         } }

This will then be used internally when creating the table binding.

Note

For an AnalyticalTable control or AnalyticalBinding, you have to use a dummy column (visible='false') with the leadingProperty you require and the set attribute inResult='true' instead.

Question

I would like to pass my own custom sorters, filters, and binding parameters when binding the table data in the SmartTable control. How do I do this?

And how can I have my own binding implementation for the SmartTable control?

Answer

You can modify the array of filters before binding is triggered in the SmartTable control by listening to the beforeRebindTable event.

To enable this, your code should look as follows:

Sample Code

<smartTable:SmartTable entitySet="LineItemsSet" beforeRebindTable="onBeforeRebindTable"…

You can now get the list of filters and sorters to be used in table binding using the following:

Sample Code

onBeforeRebindTable: function(oEvent) {

              var mBindingParams = oEvent.getParameter("bindingParams");

              var aFilters = mBindingParams.filters

With this, you need to set back the value to mBindingParams.filters, and you can pass a new filter array as well.

Note

In some exceptional cases, you can set mBindingParams.preventTableBind = 'true' to prevent table binding from taking place (optional) and do the binding at a later point in time. This is shown in the following method:

Sample Code

someMethod: function() {

           //get the smartTable and call the method rebindTable()

           oSmartTable.rebindTable();

       }