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.

For more information about this control, see the API Reference in the Demo Kit and the sample in the Explored app in the Demo Kit.

For more information about annotations for this control, see the API Reference in the Demo Kit.

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 following controls:

VariantManagement
SmartFilterBar
P13nDialog

The control also supports the popover of the SmartLink control.

For more information about the various smart controls, see sap.ui.comp.

Details

When using SmartTable with an internal responsive table, you can set the demandPopin property to true. This property renders columns that exceed the space available on the screen by displaying popins.

SmartTable checks the custom data section for the columns and reads the columnIndex attribute to determine when the columns that are defined in the XML view are rendered.

If you want to show and follow navigationProperty fields for EntityType, the SmartTable control automatically performs a $expandoperation for these fields.

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:

#!xml
<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"

#!xml
<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, or apply personalization for a column.
sortProperty
Sorts the table based on the column specified; OData model property name must be used.

This property is similar to the table column property.
filterProperty
Filters the table with the condition that has been defined; OData model property name must be used.

This property is similar to the table column property.
type
Determines the type of a control; its value can be either date, numeric, or empty string. The control will be switched accordingly.
maxLength
Numeric value 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 without a leadingProperty available in the control itself so the SmartTable control can fetch data correctly.

#!xml
<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 create and pass a search query ($search="foo" ) when using the SmartTable control?

Answer

Use the beforeRebindTable event and implement this manually.

#!js
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.

Note In the same way, you can also add any custom URL parameters or use this event to add OData $expand parameters: Instead of "custom", use "expand" as shown in the example above.

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.

#!js
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 like this:

#!xml
<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:

#!js
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:

#!js
someMethod: function() {

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

           oSmartTable.rebindTable();

       }

Question

How do I add custom toolbar buttons in the SmartTable control?

Answer

You can do this using the customToolbar aggregation, as shown below:

#!xml
<smartTable:SmartTable id="ItemsST" entitySet="Items" ...  

        <smartTable:customToolbar> 

                <OverflowToolbar design="Transparent"> 

                        <ToolbarSpacer/> 

                        <Button text="Test"/> 

                        <Button text="Click me!"/> 

               </OverflowToolbar> 

       </smartTable:customToolbar>

If you use the OverflowToolbar, the toolbar will also be responsive.