Different Ways of Adding Custom Columns to Smart Table in SAPUI5

[Swathi_Rani1]

Hi All,

In this blog, I am going to explain Customizing the existing Default Column with Formatter and Creating Entire New Custom Column in SmartTable Control.

Introduction:

What is Smart Table: The Smart Table control creates a table based on OData metadata and When We Set Property useTablePersonalisation="true" it provides many operations (list sorting, filtering, grouping and arranging columns).

For More information: https://ui5.sap.com/#/api/sap.ui.comp.smarttable.SmartTable

What is Custom Column: A Custom Column is nothing but a column which is not available in oData metadata entity directly, such column is generated by the user as per the requirement. 

-- For Smart Table We Have to Bind oData Services(in my case I used Northwind oData Services)

• Maintain routes in neo-app.json file. This step basically relates to maintaining the connection configurations.

Note: Please make sure the connection settings are maintained if you are using Northwind Services.

{

	"path": "/Northwind",

	"target": {

		"type": "destination",

		"name": "Northwind"

	},

	"description": "Northwind odata services"

}

• In manifest.json file, We Define NorthWind Service to model.

"sap.app": {

	"dataSources": {

		"mainService": {

			"uri": "/Northwind/V2/Northwind/Northwind.svc/",

			"type": "OData",

			"settings": {

				"odataVersion": "2.0",

				"localUri": "localService/metadata.xml"

			}

		}

	}

},

"sap.ui5": {

	 "models": {

		"": {

			"dataSource": "mainService",

			"preload": true

		}

	},

}

 

Situations Where We Add Custom Columns in Smart Table:

• Assuming situation where the data is getting displayed in a table but you want to change the look of data using a formatter.

For example: If you are showing a “UnitsInStock” column. As a user you want to format it to display in “UnitsInStock >50 = Success State” & “UnitsInStock < 50 = Error State” format using a formatter.

• Assuming of situation where as a user you would like to see Two different columns combined with each other under a single column instead of Two different column.

For example: It would be better to show 1 Column of “ProductID” in table along with its ProductName (like “1 -- Chai”) instead of showing 2 columns of “ProductID” & “ProductName” (“1” & “Chai”).

 

Situation 1: How we can Customized Column in a SmartTable Using Formatter.

Step 1: Create a new UI5 Application in SAP Cloud Web IDE.

Step 2: In the View Part, We will use the Smart Table Control using namespace called “sap.ui.comp.smarttable” and “sap.ui.core”.

<content>

<smartTable:SmartTable entitySet="Products" tableType="ResponsiveTable" showRowCount="true" useExportToExcel="false" useVariantManagement="false" useTablePersonalisation="true" demandPopin="true" enableAutoBinding="true" header="Line Items" placeToolbarInTable="true" persistencyKey="SmartTablePKey" initiallyVisibleFields="ProductName,QuantityPerUnit,UnitPrice,UnitsOnOrder,DisContinued, UnitsInStock” >

<Table sticky="ColumnHeaders,HeaderToolbar">

     <columns>

          <Column>

                <customData>

	          <core:CustomData key="p13nData" value='\{"columnKey": "UnitsInStock", "leadingProperty": "UnitsInStock", "columnIndex": 5}'/>

	</customData>

                <Text text="{i18n>UnitsInStock}"></Text>

            </Column>

      </columns>

      <items>

             <ColumnListItem>

	    <ObjectStatus text="{UnitsInStock}" state="{path: 'UnitsInStock', formatter: '.formatter.StockStatus'}"></ObjectStatus>

	</ColumnListItem>

       </items>

  </Table>

</smartTable:SmartTable>

</content>

Created a new column to the smart table, and Link the new custom column with key: “p13nData”.

Note: I’ve highlighted the added code with Red Rectangular box.

Step 3: In Model Folder, We Create New File Name formatter.js and wrote Formatter Logic.

sap.ui.define(function () {

        return {

              StockStatus: function (iNo) {

                     if (iNo < 50) {

                           return sap.ui.core.ValueState.Error;

                      } else {

                            return sap.ui.core.ValueState.Success;

                    }

               }

       };

});

Step 4: In the Controller Part, we will Define Formatter.

sap.ui.define([

	"sap/ui/core/mvc/Controller",

	"../model/formatter"

], function (Controller, formatter) {

	"use strict";

	return Controller.extend("com.data.BindingData.controller.BindingData", {

		formatter: formatter,

	});

});

To load our formatter functions, we have to add it to the controller. This controller simply stores the loaded formatter functions in a local property formatter to be able to access them in the view.The formatter references are loaded as a dependency to “sap.ui.define”.

Note: I’ve highlighted the added code with Red Rectangular box.

Output: You will see that the Custom Column that you created in the table with Formatter.

• Here We See “UnitsInStock” column,with formatter “UnitsInStock >50 Will Change into Green Colour ” & “UnitsInStock < 50 Will Change into Red Colour”.

 

Situation 2: How we can create our own Custom Column in a SmartTable.

Step 1: Create a new UI5 Application in SAP Cloud Web IDE.

Step 2: In the View Part, We will use the Smart Table Control using namespace called “sap.ui.comp.smarttable” and “sap.ui.core”

<content>

<smartTable:SmartTable class="sapUiSizeCompact " editable="false" placeToolbarInTable="true" enableAutoBinding="true" entitySet="Products" header="Products" showFullScreenButton="true" showRowCount="true" tableType="ResponsiveTable" demandPopin="false" useExportToExcel="false" useTablePersonalisation="true" useVariantManagement="false" 

initiallyVisibleFields="SupplierID,CategoryID,QuantityPerUnit,UnitPrice,UnitsInStock,UnitsOnOrder, ReorderLevel,Discontinued" requestAtLeastFields="ProductID,ProductName" persistencyKey="SmartTablePKey">

    <Table sticky="ColumnHeaders,HeaderToolbar">

	<columns>

	       <Column>

		    <Label text="Product ID-Name"/>

	       </Column>

	</columns>

	<items>

	     <ColumnListItem>

	           <cells>

		      <ObjectIdentifier text="{ProductID} -- {ProductName}"/>

		   </cells>

	      </ColumnListItem>

	</items>

    </Table>

</smartTable:SmartTable>

</content>

Note:  -  The oData properties which are to be consumed (If not fetched initially using property “initiallyVisibleFields”) should be mentioned under property “requestAtLeastFields”.

Note: I’ve highlighted the added code with Red Rectangular box.

Output:


Conclusion:  Hence, To Customize any field with formatter or to Create an entire new column which is not available by default in SmartTable control, the “Custom Columns” approach will be used.