Smart Table – Backend and Frontend Example
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.
Step 2: Populate the data and check.
Service Creation
Step 3: Import the highlighted vocabulary(ies) in SEGW(Project Builder Transaction). (This is a one time activity)
Step 4: Create a Service with Vocabulary Based Annotation as
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.
Properties –
Step 6: Import the vocabulary in the Service as –
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.
Step 8: Click on ‘Append Row/Create’
Step 9: Choose the highlighted type for property
Step 10: One column is created as shown below –
Do the above step for all 4 columns.
Step 11: Now the service will look like –
Step 12: Implement the Getter for Smart Table Entityset too –
Now the metadata should look like below
<edmx:Edmx xmlns:edmx=”http://schemas.microsoft.com/ado/2007/06/edmx” xmlns:m=”http://schemas.microsoft.com/ado/2007/08/dataservices/metadata” xmlns:sap=”http://www.sap.com/Protocols/SAPData” Version=”1.0″>
<edmx:Reference xmlns:edmx=”http://docs.oasis-open.org/odata/ns/edmx“Uri=”https://<host:port>/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Vocabularies(TechnicalName=’%2FIWBEP%2FVOC_UI’,Version=’0001′,SAP__Origin=’LOCAL’)/$value“>
<edmx:Include Namespace=”com.sap.vocabularies.UI.v1″/>
</edmx:Reference>
<edmx:Reference xmlns:edmx=”http://docs.oasis-open.org/odata/ns/edmx“Uri=”https://<host:port>/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Vocabularies(TechnicalName=’%2FIWBEP%2FVOC_CORE’,Version=’0001′,SAP__Origin=’LOCAL’)/$value“>
<edmx:Include Namespace=”Org.OData.Core.V1″/>
</edmx:Reference>
<edmx:Reference xmlns:edmx=”http://docs.oasis-open.org/odata/ns/edmx“Uri=”https://<host:port>/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Vocabularies(TechnicalName=’%2FIWBEP%2FVOC_COMMUNICATION’,Version=’0001′,SAP__Origin=’LOCAL’)/$value“>
<edmx:Include Namespace=”com.sap.vocabularies.Communication.v1″/>
</edmx:Reference>
<edmx:DataServices m:DataServiceVersion=”2.0″>
<Schema xmlns=”http://schemas.microsoft.com/ado/2008/09/edm” Namespace=”ZSMARTTABLE4″ xml:lang=”en” sap:schema-version=”0000″>
<EntityType Name=”SmartTable” sap:content-version=”1″>
<Key>
<PropertyRef Name=”Bname”/>
</Key>
<Property Name=”Bname” Type=”Edm.String” Nullable=”false” MaxLength=”12″ sap:label=”User”/>
<Property Name=”Fullname” Type=”Edm.String” Nullable=”false” MaxLength=”80″ sap:label=”Complete name”/>
<Property Name=”SmtpAddr” Type=”Edm.String” Nullable=”false” MaxLength=”241″ sap:label=”E-Mail Address”/>
<Property Name=”Location” Type=”Edm.String” Nullable=”false” MaxLength=”40″ sap:label=”Location”/>
</EntityType>
<EntityContainer Name=”ZSMARTTABLE4_Entities” m:IsDefaultEntityContainer=”true”>
<EntitySet Name=”SmartTableSet” EntityType=”ZSMARTTABLE4.SmartTable” sap:content-version=”1″/>
</EntityContainer>
<Annotations xmlns=”http://docs.oasis-open.org/odata/ns/edm” Target=”SmartTable”>
<Annotation Term=”com.sap.vocabularies.UI.v1.LineItem”>
<Collection>
<Record Type=”com.sap.vocabularies.UI.v1.DataFieldForAnnotation”>
<PropertyValue Property=”Label” String=”Location”/>
<PropertyValue Property=”Target” AnnotationPath=”Location”/>
</Record>
<Record Type=”com.sap.vocabularies.UI.v1.DataFieldForAnnotation”/>
<Record Type=”com.sap.vocabularies.UI.v1.DataFieldForAnnotation”>
<PropertyValue Property=”Label” String=”Location”/>
<PropertyValue Property=”Target” AnnotationPath=”Location”/>
</Record>
<Record Type=”com.sap.vocabularies.UI.v1.DataFieldForAnnotation”/>
</Collection>
</Annotation>
</Annotations>
<atom:link xmlns:atom=”http://www.w3.org/2005/Atom” rel=”self” href=”<host:port>/sap/opu/odata/sap/ZSMARTTABLE4/$metadata“/>
<atom:link xmlns:atom=”http://www.w3.org/2005/Atom” rel=”latest-version” href=”<host:port>/sap/opu/odata/sap/ZSMARTTABLE4/$metadata“/>
</Schema>
</edmx:DataServices>
</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 –
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.
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.
Yes, yes.... 😉 thanx a lot !!!!
Welcome Erik 🙂
Hi Ankit, Erik
I am trying to display data in smart table, following the steps mentioned but I am getting no data.
Created service in Gateway system and able to get metadata(status 200). I am trying in Eclipse IDE and using JS View.
View:
var oPage = new sap.m.Page({
title: "SmartTable",
showHeader: false,
content: [
new sap.m.VBox({
fitContainer: true,
items: [
new sap.ui.comp.smartfilterbar.SmartFilterBar("idsmartfilterbar",{
persistencyKey: "SmartFilter_Explored",
enableBasicSearch: true,
entitySet: "poheaderSet",
basicSearchFieldName: "Ebeln",
controlConfiguration: [
new sap.ui.comp.smartfilterbar.ControlConfiguration({
customControl: [
]
})
]
}),
new sap.ui.comp.smarttable.SmartTable("LineItemsSmartTable",{
entitySet: "poheaderSet",
smartFilterId: "smartFilterBar",
tableType: sap.ui.comp.smarttable.TableType.Table,
useExportToExcel: true,
beforeExport: oController.onbeforeExport,
showFullScreenButton: true,
showVariantManagement: true,
useTablePersonalisation: true,
header: "Purchase Orders",
showRowCount: true,
persistencyKey: "SmartTableAnalytical_Explored",
enableAutoBinding: true
})
]
})
]
});
return oPage;
Controller:
onInit: function() {
debugger;
// Create ODATA model
var url = "/sap/opu/odata/SAP/ZSMART_SRV/";
var oModel = new sap.ui.model.odata.ODataModel(url, true);
var oView = sap.ui.getCore().byId("idView1");
oView.setModel(oModel);
Wondering if I missed something. Please help me figure out the problem.
Is the Network call going through correctly ?
Yes, as I am able to find all the column names. But not able to fetch any data in the table. The control does not stop at debugger point placed at the service method. I used the same ODATA service call in other controls and it works as expected.
You need to isolate the root case. Check below -
Hi Ankit,
I checked the points mentioned by you and it works fine. Still checking why data not getting populated from the service method and stopping at the debugger point when using SmartTable control.
Checked the browser console and found the below error:
"Assertion failed: oObject must be given and must be a ManagedObject"
I have completed my requirement using sap.m.Table. But I need to understand what is going wrong in SmartTable.
Thanks.
Sorry I need to check...meanwhile other colleagues can help.
Great !!
One question...
Can we default set "All columns selected", to avoid this "Error" popup ?
Sorry Rolf for the delayed response.... I need to check that but should be possible.
BR
Hi Ankit,
Did you get any methods to show columns as default and avoid error popup?
Thanks
Give request at least fields to avoid error popup
Great blog this!!
Thanks Anubhav:)
Can you please post one on smart filterbar with search help ?
There is a lot of questions in SCN and no answers.
Thanks !
Hi Ankit,
First Thank you for this wonderful blog.
And i followed your blog, i did as per your inputs but no data is displaying in UI. any suggestions please.
I need an help where we can bind the data Dynamically based on input. for example if user given one sales order need get the SO Item details and to be displayed same using SmartTable. In the above example user do not have any interaction.
Kind Regards, Kiran
I followed all you instructions, but I get this Message (we are on 1.44):
And in the Configuration of the Control I get no Columns:
Can you assist?
Update: The Gateway seems to create wrong Metadata, see SCN: https://answers.sap.com/questions/144015/bug-in-odata-backend-for-annotations.html
Hi,
There are no fields are marked as a FILTERABLE in your oDataModel ( transaction code SEGW )
Hi Diana,
thank you for your anwser. Unforunally you don’t have the oportunity to mark Properties as “Filterable” when you use the Vocabulary-Services needed for Smart-Controls.
Best regards
Moritz
I also facing same issue. Could you please suggest solution.
Instead of using the Service Builder it is also possible to add annotations via ABAP code in your MPC_EXT class as I have described in this blog
https://blogs.sap.com/2017/04/21/how-to-add-annotations-to-an-odata-service-using-code-based-implementation/
Best Regards,
Andre
Hi Ankit Maskara,
I'm done with above steps you mentioned in blog but I'm getting the below error. Could you please help me out where I need to change it?
Hi all,
I was implementing the same approach and I was also getting the Popup "Select at least one column to perform the search".
Finally I have found the problem. In my case using the annotation type com.sap.vocabularies.UI.v1.DataFieldForAnnotation it doesn't work, instead I need to use the com.sap.vocabularies.UI.v1.DataField type.
Hope it helps!
BUt with this change You will not pass Target .. Its just asking for label
Is it solving the purpose of Smart table
Hi,
I have implemented the Odata annotations by using this type
com.sap.vocabularies.UI.v1.DataField now able to see the columns but data not displayed can you please suggest me on this.
Thanks & Regards,
Sravya
Hi Sravya,
What response is coming in the network call?
BR.
Hi Sarvya
Can you share the changes you did in order to see the result , i have the same issue .
Thanks
Deepika
Hi Ankit,
The issue has been resolved data displayed.
Thanks & Regards
Sravya
Good Sravya, may be for the benefit of others, you can brief the issue and the fix you made.
Hi,
Its really nice blog.
Just one question, how will you configure smart table for named model?
Like suppose if intead of using default model , I am naming my model. How would I configure that ?
Hi Dibyajyoti,
Thanks for the appreciation.
I am unsure about your answer since I did not try that and now I don't have system access but based on https://answers.sap.com/questions/13051825/smartfilterbar-entityset-with-named-model.html & https://answers.sap.com/questions/13027357/linkingbinding-annotation-segw-project-with-smart.html I don't think usage of named model is possible.
Thanks and Regards.
Use com.sap.vocabularies.UI.v1.DataField and it works.
Never tried, thank you.