- SAP Managed Tags
Hi All,
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)
Note: Please make sure the connection settings are maintained if you are using Northwind Services.
Situations Where We Add Custom Columns in Smart Table:
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.
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”.
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.
Step 4: In the Controller Part, we will Define 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.
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”
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.
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.
10 Comments
| User | Count |
|---|---|
| 11 | |
| 8 | |
| 7 | |
| 7 | |
| 6 | |
| 6 | |
| 5 | |
| 4 | |
| 4 | |
| 4 |
