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

Answer 1

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!