Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
9620959731
Discoverer
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 

Below is the XML code


<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.

Labels in this area