Skip to Content
Author's profile photo Ankit Maskara

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.

Table.jpg

Step 2: Populate the data and check.

Data.jpg


Service Creation


Step 3: Import the highlighted vocabulary(ies) in SEGW(Project Builder Transaction). (This is a one time activity)

Vocab.jpg

Step 4: Create a Service with Vocabulary Based Annotation as

Serv Det 1.jpg

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.

Serv Det 2.jpg

Properties –

Serv Det 3.jpg

Step 6: Import the vocabulary in the Service as –

Import Vocab.jpg

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.


Line Item.jpg

Step 8: Click on ‘Append Row/Create’


Line Item 2.jpg

Step 9: Choose the highlighted type for property

Line Item 3.jpg

Step 10: One column is created as shown below –


Line Item 4.jpg

Do the above step for all 4 columns.

Step 11: Now the service will look like –

Proj 1.jpg

Step 12: Implement the Getter for Smart Table Entityset too –


Getter.jpg

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 –

Output.jpg

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.

Error.jpg

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.

Assigned Tags

      34 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Erik Hoven
      Erik Hoven

      Yes, yes.... 😉 thanx a lot !!!!

      Author's profile photo Ankit Maskara
      Ankit Maskara
      Blog Post Author

      Welcome Erik 🙂

      Author's profile photo Aurobindo Sarola
      Aurobindo Sarola

      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.

       

      Author's profile photo Ankit Maskara
      Ankit Maskara
      Blog Post Author

      Is the Network call going through correctly ?

      Author's profile photo Aurobindo Sarola
      Aurobindo Sarola

      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.

      Author's profile photo Ankit Maskara
      Ankit Maskara
      Blog Post Author

      You need to isolate the root case. Check below -

      1. Is the external breakpoint triggering for other OData calls of same service ?
      2. If so, try putting some dummy data in the UI itself and see if data is rendered on app.
      Author's profile photo Aurobindo Sarola
      Aurobindo Sarola

      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.

       

      Author's profile photo Ankit Maskara
      Ankit Maskara
      Blog Post Author

      Sorry I need to check...meanwhile other colleagues can help.

      Author's profile photo Rolf Hoven
      Rolf Hoven

      Great !!

      One question...

      Can we default set "All columns selected", to avoid this "Error"  popup ?

      Author's profile photo Ankit Maskara
      Ankit Maskara
      Blog Post Author

      Sorry Rolf for the delayed response.... I need to check that but should be possible.

      BR

      Author's profile photo Shahid kakkkattummal
      Shahid kakkkattummal

      Hi Ankit,

      Did you get any methods to show columns as default and avoid error popup?

      Thanks

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy

      Give request at least fields to avoid error popup

      Author's profile photo Anubhav Pandey
      Anubhav Pandey

      Great blog this!!

      Author's profile photo Ankit Maskara
      Ankit Maskara
      Blog Post Author

      Thanks Anubhav:)

      Author's profile photo Former Member
      Former Member

      Can you please post one on smart filterbar with search help ?

      There is a lot of questions in SCN and no answers.

      Thanks !

      Author's profile photo Kiran VK
      Kiran VK

      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

      Author's profile photo Moritz Ruff
      Moritz Ruff

      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

      Author's profile photo Diana Pol
      Diana Pol

      Hi,

      There are no fields are marked as a FILTERABLE in your oDataModel ( transaction code SEGW )

      Author's profile photo Moritz Ruff
      Moritz Ruff

      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

      Author's profile photo tejaswini kancharla
      tejaswini kancharla

      I also facing same issue. Could you please suggest solution.

      Author's profile photo Andre Fischer
      Andre Fischer

      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

      Author's profile photo Govendran Annadurai
      Govendran Annadurai

      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?

       

      Error.jpg

      Author's profile photo Former Member
      Former Member

      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!

       

      Author's profile photo Former Member
      Former Member

      BUt with this change You will not pass Target .. Its just asking for label

      Is it solving the purpose of Smart table

      Author's profile photo saisravya b
      saisravya b

      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

      Author's profile photo Ankit Maskara
      Ankit Maskara
      Blog Post Author

      Hi Sravya,

      What response is coming in the network call?

      BR.

      Author's profile photo deepika jain
      deepika jain

      Hi Sarvya

      Can you share the changes you did in order to see the result , i have the same issue .

      Thanks

      Deepika

      Author's profile photo saisravya b
      saisravya b

      Hi Ankit,

       

      The issue has been resolved data displayed.

      Thanks & Regards

      Sravya

      Author's profile photo Ankit Maskara
      Ankit Maskara
      Blog Post Author

      Good Sravya, may be for the benefit of others, you can brief the issue and the fix you made.

       

      Author's profile photo Jhoan Rendon Soto
      Jhoan Rendon Soto
      Good afternoon,
      I have implemented the Odata annotations using this type
       com.sap.vocabularies.UI.v1.DataField but I get the following result:
      
      
      
      
      Thanks & Regards.
      Author's profile photo Dibyajyoti Nanda
      Dibyajyoti Nanda

      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 ?

      Author's profile photo Ankit Maskara
      Ankit Maskara
      Blog Post Author

      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.

      Author's profile photo George cui
      George cui

      Use com.sap.vocabularies.UI.v1.DataField and it works.

      Author's profile photo Ankit Maskara
      Ankit Maskara
      Blog Post Author

      Never tried, thank you.