Hello Fellow SCNers,
In this blog, I will demo the usage of Smart Table control including OData Metadata development and Front End application code.
Smart Table uses Vocabulary based annotations in OData.
Backend
Data Structure and Data preparation
Step 1: Go to SE11 and create a table as shown below.
Image may be NSFW.
Clik here to view.
Step 2: Populate the data and check.
Image may be NSFW.
Clik here to view.
Service Creation
Step 3: Import the highlighted vocabulary(ies) in SEGW(Project Builder Transaction). (This is a one time activity)
Image may be NSFW.
Clik here to view.
Step 4: Create a Service with Vocabulary Based Annotation as
Image may be NSFW.
Clik here to view.
Step 5: Create an Entity - SmartTable and corresponding EntitySet. These are standard steps and I am ignoring them here, though I have attached screenshot of the same.
Image may be NSFW.
Clik here to view.
Properties -
Image may be NSFW.
Clik here to view.
Step 6: Import the vocabulary in the Service as -
Image may be NSFW.
Clik here to view.
Step 7: Create the Line Item Annotation which is the most important one for Smart table as it will help the UI5 framework to create table structure.
Choose the line item column and then click on Create Annotation.
Image may be NSFW.
Clik here to view.
Step 8: Click on 'Append Row/Create'
Image may be NSFW.
Clik here to view.
Step 9: Choose the highlighted type for property
Image may be NSFW.
Clik here to view.
Step 10: One column is created as shown below -
Image may be NSFW.
Clik here to view.
Do the above step for all 4 columns.
Step 11: Now the service will look like -
Image may be NSFW.
Clik here to view.
Step 12: Implement the Getter for Smart Table Entityset too -
Image may be NSFW.
Clik here to view.
Now the metadata should look like below
</edmx:Edmx>
Front End Code
Step 13: For sake of simplicity I have put the Smart Table in Index.html file and run it.
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>Smart Table</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs='sap.ui.commons, sap.m'>
</script>
<script id="view1" type="sapui5/xmlview">
<core:View xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable" controllerName="smartTable.controller" class="sapUiSizeCompact">
<Page id="page" title="Customers">
<smartTable:SmartTable entitySet="SmartTableSet" enableAutoBinding="true"/>
</Page>
</core:View>
</script>
<script>
//Controller
sap.ui.controller("smartTable.controller", {
onInit: function() {
var sURL, oModel, oView;
sURL = "<host:port>/sap/opu/odata/sap/ZSMARTTABLE4";
oModel = new sap.ui.model.odata.v2.ODataModel(sURL, {
json: true
});
oView = this.getView();
oView.setModel(oModel);
}
});
jQuery.sap.declare("smartTable.Component");
sap.ui.core.UIComponent.extend("smartTable.Component", {
/**
* Initialize the application
*
* @returns {sap.ui.core.Control} the content
*/
createContent: function() {
var app = new sap.m.App({
initialPage: "idView"
});
var oView = sap.ui.xmlview("idView", { viewContent: jQuery("#view1").html() });
app.addPage(oView);
return app;
}
});
new sap.ui.core.ComponentContainer({
name : "smartTable"
}).placeAt("content")
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Final Output -
Image may be NSFW.
Clik here to view.
PS: You may get some errors like one shown below but it is dependent on the SAPUI5 Version. I have used 1.33.0-SNAPSHOT version but it works on 1.28 also.
Image may be NSFW.
Clik here to view.
I would like to thank Santhosh Gowda whose blog gave me inspiration to test this control and Arshdeep Singh for his help.
I would request you all to provide feedback and ask questions to enhance everyone's learning.
BR,
Ankit Maskara.