Smart Table SAPUI5 / Fiori with default layout

You want to gain capabilities of SAPUI5 Smart Table control using a GateWay service. Nice control, but at the moment with limited availibility of documentation and examples. Two points can make you headache. You want to bind to backend entity set, which is not directly accessible, but it is an associated entity, and you can access it via navigation from a source entity only. Second, how do you define a default layout/columns to be displayed, since you neither want to use Smart Variant management nor LineItem Annotations (anyway, if your SEGW project is of type SAP annotations, you cannot change it to VocalBulary-based annotations). First, what you need to know, that the smart table is a wrapper around a simple Table. Separate help documentation is available here.  You need to put these pieces together, to make a correct XML View, and extend it with the necessary coding in the view controller. 

XML View

Namespaces

View definition starts with right namespaces, else your xml won’t be interpreted. Controller name refers to the view controller.

<core:View xmlns:core="sap.ui.core" xmlns="sap.m"
  xmlns:smartTable="sap.ui.comp.smarttable"
  xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
  controllerName="yourController">

Smart Table

To be able to define your standard layout without Smart Variant management a table and p13n data are to be defined within the Smart Table. (There is no XML validator provided by SAP after 2 years of relasing SAPUI5, which is syntactically validating your XML. In my opinion, at least the SAP WebIDE should contain a pattern for this, but at th moment not. So do.. while…)  Yes Devs we got it finally (Nov.2015)

<smartTable:SmartTable editTogglable="false" enableAutoBinding="false" entitySet="YourGatewayEntitySet" id="mySmartTable"
	showRowCount="true" tableType="ResponsiveTable" useExportToExcel="false" useTablePersonalisation="false"
	useVariantManagement="false" editable="false">
	<Table id="myTable">
	   <columns>
	     <Column>
		<customData>
		  <core:CustomData key="p13nData" value="\{"columnKey": "FirstName","leadingProperty": "FirstName"}"/>
		</customData>
		<Text text="First Name"/>
	     </Column>
	     <Column>
		<customData>
		  <core:CustomData key="p13nData" value="\{"columnKey": "FamilyName","leadingProperty": "FamilyName"}"/>
		</customData>
		<Text text="Family Name"/>
             </Column>		
           </columns>
	   <items>
	     <ColumnListItem>
		<cells>
		  <Text text="{FirstName}"/>
		  <Text text="{FamilyName}"/>
		</cells>
	     </ColumnListItem>
	   </items>
	</Table>
</smartTable:SmartTable>

View Controller

Define variable _oMySmartTable: null  private attribute.

Ger reference of your table during initialization, and register handler for incoming navigation.

onInit: function() {
        ...
        this._oView = this.getView();
        this._oComponent = sap.ui.component(sap.ui.core.Component.getOwnerIdFor(this._oView));
        this._oRouter = this._oComponent.getRouter();
        this._oMySmartTable = this.byId("mySmartTable");
        this._oRouter.attachRoutePatternMatched(this._onRoutePatternMatched, this);
        ...
}

Every time navigating to the view, method _onRoutePatternMatched is called (this is an automatically generated method using WebIDE templates, of course you can define it manually or choose a different name).
We need to bind an entityset to the table wrapped by the Smart Table. This can be an entityset without navigation, in that case, set the /entityset name as path. In our example we want to display an associated entityset to the entity displayed currently on the view. To do this we neeed to build the navigation path. This is the entity path + “/” + navigation link name. Using SAP WebIDE, the variables and codes are automatically generated, you need to enter the last two rows only.

_onRoutePatternMatched: function(oEvent) {
		...
		this._sItemPath = "/" + oEvent.getParameters().arguments.entity;
		this._omySmartTable.setTableBindingPath(this._sItemPath + "/" + "NavigationLinkName");
		this._omySmartTable.rebindTable();
		...
}