Custom Columns in Smart Table

[shubhambathla94]

Hi All,

 

Introduction:

This blog refers to customizing the existing default columns in SmartTable control. In this blog i would like to explain about how we can create and use our own customized column in a SmartTable. We would also go though a few problems faced which could be resolved by Custom Columns.

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

What is SmartTable: The SmartTable control creates a table based on OData metadata and the  configuration specified. More information can be found at https://sapui5.hana.ondemand.com/#/api/sap.ui.comp.smarttable.SmartTable

 

Problems:

• Assume of a situation where as a user you would like to see 2 inter-related fields combined with each other under a single column instead of 2 different columns.


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

For example, it would be better to show 1 Column of "Quantity" in table along with its units (like "25 EA") instead of showing 2 columns of "Quantity" & "Unit" ("25" & "EA").

For example, you are showing a Date column. It is coming in format of "ddmmyyyy" but as a user you want to format it to display in "dd-mm-yy" format using a fomatter.

A similar example is shown below,

• Default Behavior -  The SmartTable control generates the columns of the table using the metadata, configuration and properties of the entitySet.

• Customization - The problems arise when user wants to display the data by combining multiple properties of oData or multiple columns(like here ShipCity & ShipCountry). The SmartTable control does not have any predefined property as a solution available for this.

Solution:

Here the Custom Columns comes into picture so the solution would be a Custom Column. Steps,

• Create a container for your Custom Column (another table).


• Define a column as per the requirement (custom column).


• Place it under the SmartTable control.

 

So Let's begin..

Prerequisite:

• A SmartTable binded with an oData service.

Process:

For creating a Custom Column in SmartTable,

• First we need to create a Table inside existing SmartTable control where we create and place our own custom columns.


• The Custom Column is defined by user as requirement (here combination of 2 properties).

Note: The oData properties which are to be consumed (if not fetched initially using property "initiallyVisibleFields") should be mentioned under property "requestAtLeastFields".

 

Step 1: Create a table(in this example sap.m.Table) under your existing Smart Table control as shown below,

<mvc:View controllerName="blog.blog.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns:smartTable="sap.ui.comp.smarttable"

	displayBlock="true" xmlns="sap.m">

	<App id="idAppControl">

		<pages>

			<Page title="Blog">

				<content>

					<smartTable:SmartTable id="testTable" entitySet="/Orders" header="Custom Column Table" enableAutoBinding="true"

						requestAtLeastFields="OrderID,ShipCity,ShipCountry" useExportToExcel="false" showTablePersonalisation="false">

						<Table>

							<columns>

								<Column hAlign="Left">

									<header>

										<Text text="OrderID"/>

									</header>

								</Column>

								<Column hAlign="Left">

									<header>

										<Text text="Ship To"/>

									</header>

								</Column>

							</columns>

							<items>

								<ColumnListItem>

									<cells>

										<Text text="{OrderID}"/>

										<ObjectIdentifier title="{ShipCity}" text="{ShipCountry}"/>

									</cells>

								</ColumnListItem>

							</items>

						</Table>

					</smartTable:SmartTable>

				</content>

			</Page>

		</pages>

	</App>

</mvc:View>

The Custom Column should be created as a part of internal table. The Custom Column can be a combination of any number of fields (as shows below).



 

Step 2: Create an oDataModel and set it to your view. You can skip this step In Case your have already set the model.

Note: This step would not be required in case you have already set the model for fetching data to your SmartTable earlier to display data.

sap.ui.define([

	"sap/ui/core/mvc/Controller"

], function (Controller) {

	"use strict";



	return Controller.extend("blog.blog.controller.View1", {

		onInit: function () {

			this.oModel = new sap.ui.model.odata.v2.ODataModel("/northwind/V2/Northwind/Northwind.svc/", {

				useBatch: false

			});

			this.getView().setModel(this.oModel);

		}

	});

});

 

Step 3: Maintain routes in neo-app.json file for your oDataModel (in my case for Northwind oData). 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 Service"

    }

 

Execute: Run the Application.

Result: You will see that the Custom Column that you created is now available in the table. In current example it would be a single column which is combination of 2 different properties.

• Here we see that Column "Ship To" is a custom column which is a combined field of 2 oData properties "ShipCity" & "ShipCountry" as maintained in XML file.

Conclusion:

Hence we can say that, in order to customize any field in SmartTable control or to create an entire new column which is not available by default, the approach of "Custom Columns" can be used.

 

Thanks,

Shubham