Hi All,
The Smart Table is the table Generated based on oData metadata.
So, explicitly creating rows and columns not required. It will creates the rows and columns based on oData metadata. If you want to do some customization it is allows to modify.
Reference –
Smart Table - UI Development Toolkit for HTML5 (SAPUI5) - SAP Library
This is my Project Structure,
- Index.html,
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-resourceroots='{"smarttable": "./"}'
>
</script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.ui.core.ComponentContainer({
height : "100%",
name : "smarttable"
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Component.js,
jQuery.sap.declare("smarttable.Component");
jQuery.sap.require("sap.ui.model.resource.ResourceModel");
sap.ui.core.UIComponent.extend("smarttable.Component", {
init : function()
{
sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
var mConfig = this.getMetadata().getConfig();
},
createContent : function() {
return new sap.m.App({id :"idApp",pages: [
sap.ui.view({id : "idsmarttable", viewName : "smarttable.smarttable.SmartTable", type : sap.ui.core.mvc.ViewType.XML, viewData : this }),
]});
},
})
SmartTable.view.xml,
<core:View xmlns:core="sap.ui.core" xmlns="sap.m"
xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" 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="smarttable.smarttable.SmartTable" height="100%">
<Page id="page" title="SmartTable - Customer Line Items"
enableScrolling="false">
<content>
<!--
"TableList" is the EntitySet name to get the table values
-->
<smartTable:SmartTable entitySet="TableList"
smartFilterId="smartFilterBar" tableType="Table" useExportToExcel="true"
useVariantManagement="false" useTablePersonalisation="true" header="Line Items"
showRowCount="true" persistencyKey="SmartTableAnalytical_Explored"
enableAutoBinding="true" />
</content>
</Page>
</core:View>
SmartTable.controller.js,
sap.ui.controller("smarttable.smarttable.SmartTable", {
onInit: function() {
var oModel, oView;
oModel = new sap.ui.model.odata.ODataModel("YOUR URL", true);
oModel.setCountSupported(false);
oView = this.getView();
oView.setModel(oModel);
},
});
Output,
- SAP Managed Tags:
34 Comments
