Customising the smart table in ui5

This blog post is on how to customize and enhance the sap ui5 smart tables.

1. Introduction to Smart Tables: SmartTable control is used to create different types of tables based on OData metadata. The control allows the user to define personalized table settings.

But if there is a requirement to alter the table which is a bit challenging to do straightforward at that instance it needs to customize the control to enhancing the requirement.

Suppose let us have a requirement to add one extra column and based on that column filter criteria needs to be done. At that time we need to add one extra custom column to the table as well as a custom filter in the filter bar.

2. Steps to  create Development of Sap ui5 smart table with a custom column as well as filter

Step.1:Here I am adding one custom column as the date field where users can enter the date with the date picker

The below XML code shows how to add the custom column along with the date picker

<ST:SmartTable id="smartTable" entitySet="Orders" smartFilterId="smartFilterBar" initiallyVisibleFields="CustomerID,OrderDate,ShipName,ShipCity"
enableAutoBinding="true" tableType="ResponsiveTable"  ignoredFields="ShipVia" useTablePersonalisation="true"  header="Order Records" showRowCount="true" 
showTablePersonalisation="true"  editTogglable="true"  beforeRebindTable="BeforRebindTable" showFullScreenButton="true" persistencyKey="SmartTableGrid"
initialise="onInitialiseSmartField">
<ST:customToolbar>
<OverflowToolbar design="Transparent">                               
			<ToolbarSpacer />                               
			<OverflowToolbarButton icon="sap-icon://sort" tooltip="Sort" text="Sort" press="onSort"/>
				                            </OverflowToolbar>                         
				</ST:customToolbar>
				<Table growing="true"  growingThreshold="10" autoPopinMode="true"
				sticky="ColumnHeaders,HeaderToolbar,InfoToolbar">
				                            <columns>
					                                <Column >
						                                    <customData>                                      
							<core:CustomData key="p13nData"
								value='\{"columnKey": "localShipDate", "leadingProperty":"ShippedDate","columnIndex":"3","type": "date", "sortProperty": "ShippedDate", "filterProperty": "ShippedDate"}' />
							                                    </customData>
						                                    <Text text="local Date" />
						                                </Column>
					                            </columns>
				                            <items>
					                                <ColumnListItem type="Navigation">
						                                    <cells>
							                                        <DatePicker value="{ShippedDate}" editable="false">
							</DatePicker>                           
							                                    </cells>
						                                </ColumnListItem >
					                            </items>
				                        </Table>
				                    </ST:SmartTable>

Here is the newly added Column

Newly added the custom column

Here, the Date field is present in the p13n dialog by specifying the property type: date in the custom data 

Step 2:Added  custom filter  In the filter bar 

<smartFilterBar:SmartFilterBar id="smartFilterBar" entitySet="Orders" persistencyKey="SmartFilter_Explored" basicSearchFieldName="CustomerID" enableBasicSearch="true" showRestoreOnFB="true"> 
   <smartFilterBar:controlConfiguration> 
      <smartFilterBar:ControlConfiguration key="CustomerID" visibleInAdvancedArea="true" > 
   </smartFilterBar:ControlConfiguration> 
   <smartFilterBar:ControlConfiguration key="localShipDate"  label="Custom Local Date" visibleInAdvancedArea="true" groupId="_BASIC">
        <smartFilterBar:customControl> 
            <Input showValueHelp="true" valueHelpRequest="inputValueRequest"></Input> 
        </smartFilterBar:customControl> 
   </smartFilterBar:ControlConfiguration> 
 </smartFilterBar:controlConfiguration>

Here custom local date is a custom filter:

Local date is a custom filter

While clicking on the value help It will open the p13n dialog box.

A Small Piece of code needs to add to open the value help

inputValueRequest:function(oEvent){
                this.oPersonalizationDialog = sap.ui.xmlfragment("samrt.HTML5Module.fragment.p13nDialog", this); 
            this.getView().addDependent(this.oPersonalizationDialog); 
            this.oPersonalizationDialog.open(); 
        }     
  
                         
     

Hey cool.., Here is the final output of what we are expecting:

3. Conclusion: From the above scenarios we will learn how to add the custom column with date picker control (even having different controls in the column requirements can also use this) and added the custom filter to the filter bar. Since smart controls provide high built-in futures so by customizing them we can achieve the requirements.