How to add Custom Columns in SmartTable?

Question

I am displaying the data in a smartTable. Now I would like to add one custom icon column. Is this possible ? So for example I have a SmartTable and a JSON model as shown below and I would like to display the JSON Model value in First Column as Text.

<mvc:View 
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    controllerName="sap.ui.demo.smartControls.SmartTable"
    xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
    xmlns:smartTable="sap.ui.comp.smarttable">
    <smartFilterBar:SmartFilterBar 
    id="smartFilterBar"
    entityType="Product">
    <smartFilterBar:controlConfiguration>
    <smartFilterBar:ControlConfiguration
    key="Category" visibleInAdvancedArea="true"
    preventInitialDataFetchInValueHelpDialog="false">
    </smartFilterBar:ControlConfiguration>
    </smartFilterBar:controlConfiguration>
    </smartFilterBar:SmartFilterBar>
    <smartTable:SmartTable 
    id="smartTable_ResponsiveTable"
    smartFilterId="smartFilterBar" 
    tableType="ResponsiveTable" 
    editable="false"
    entitySet="Products" 
    useVariantManagement="false"
    useTablePersonalisation="false" 
    header="Products" 
    showRowCount="true"
    useExportToExcel="false" 
    enableAutoBinding="true">
    </smartTable:SmartTable>
    </mvc:View>

and in onInit() method of controller I have the json model.

var oData = { "Text": "StackOverFlow"};
var oModel = sap.ui.model.json.JSONModel(oData);
sap.ui.getCore().setModel(oModel);

Regards, Mayank

Tim Molloy Tim Molloy · Accepted Answer · 2016-12-19T23:02:20

There is an example here:

SAP Developer Guide - Smart table

I did this in an application recently, with an oData service, should be similar with data from JSON Model. Here is what mine looks like:

	<smartTable:SmartTable 
		id="gSmartTable"
		initialise="onSmartTable"
		beforeRebindTable="onBeforeRebindTable"
		showOverlay="onShowOverlay"
		entitySet="Employees" 
		smartFilterId="gSmartFilterBar" 
		tableType="ResponsiveTable" 
		useExportToExcel="false" 
		useVariantManagement="false" 
		useTablePersonalisation="true"
		persistencyKey="gSmartTable_Explored"
		header="Workers" 
		showRowCount="true"
		enableAutoBinding="true"
		demandPopin="true">	
		
		
		
	<!-- Build table to handle custom field -->
		<Table id ="gEmployeesTable" growing="true" growingScrollToLoad="true" growingThreshold="20">
			<columns>
			<Column width="100px" hAlign="Left">
					<customData>
						<!-- Custom Field -->
						<core:CustomData key="p13nData"
							value='\{"columnKey": "Pernr", "maxLength": "5","columnIndex":"0", "leadingProperty": "Pernr"}' />
					</customData>
						<Text text="{i18n>tableColumnEmployeeID}" />
				</Column>
				<Column width="100px" hAlign="Left">
					<customData>
						<!-- Custom Field -->
						<core:CustomData key="p13nData"
							value='\{"columnKey": "ZQ_STAT", "maxLength": "5","columnIndex":"4", "leadingProperty": "ZQ_STAT"}' />
					</customData>
						<Text text="{i18n>tableColumnStatus}" />
				</Column>
			</columns>
			<items>
				<!-- Table Navigation -->
				<ColumnListItem type="Navigation" press="onPress">
					<cells>
						<!-- Use formatter to dispay Pernr -->
					<Text text="{
					path: 'Pernr',
					formatter: '.formatter.stripZeros'
					}" />
					</cells>
					<cells>
						<!-- Use formatter to dispay icon colour based on status field value (0,1,2,3) -->
						<core:Icon 
						src="{
							path: 'ZQ_STAT',
							formatter: '.formatter.iconVis'
							}" 
						color="{
							path: 'ZQ_STAT',
							formatter: '.formatter.iconColour'
							}"/>
					</cells>
				</ColumnListItem>
			</items>
		</Table>
	<!-- End Custom Table -->
	
	<!-- End Smart Table -->
	</smartTable:SmartTable>

I was able to add two custom fields, with formatters on the data. If you want the custom column to appear first, set the 'columnIndex' property appropriately.

Hope that helps!

How to add Custom Columns in SmartTable?

1 Answers