Skip to Content

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.

To report this post you need to login first.

14 Comments

You must be Logged on to comment or reply to a post.

  1. 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

    (0) 
  2. 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

    (0) 
      1. 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

        (0) 

Leave a Reply