Skip to Content
Santhosh Gowda
Santhosh Gowda
June 13, 2015 5 minute read

Smart Table in UI5

Follow RSS feed
0 Likes 11,047 Views 33 Comments

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

SAPUI5 Explored

This is my Project Structure,

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

Assigned tags

Related Blog Posts

    Related Questions

      33 Comments
      You must be Logged on to comment or reply to a post.
        • Santhosh Gowda Post author

          Dear Arshad,

               Thanks for your feed back.

          From the front end, we can’t pass any values for the Annotations. Annotations are did by Gateway Server side. so. if you want to see or change any of these Annotations values- Please login to your gateway server, t-code ‘segw’. select your project->Data Model-> Entity Set-> Select your collection.here you will see all your Annotations. And if you want you can change,

          • Arshad Ansary

            Thanks

            I know that but there are certain annotations which are not sap annotations. We have to create vocbulory basd annotation project in GW and import vocabulory libraries  . But there are a lot of annotations and I am not able to decide which annotation makes sense for this smart table/ smart filter.

            Annotations.jpg

            If you could paste the <server>/$metadata xml  it would be helpful

              • Former Member

                Hi Santosh,

                Above you have discussed how to create annotations while working with ABAP Netweaver Gateway. Can we also create similar type of annotations using HANA XSODATA ? Can you guide how we can do so

              • Vered Constantin

                And I would like to add to what Arshad wrote – I didn’t find any practical documentation about these must have annotations.

                For example, it took me some time to discover that if the metadata.xml doesn’t include the annotations “sap:semantics=”aggregate” on the EntitySet and “sap:aggregation-role=”dimention” on the relevant properties, the smart table with type Analytical Table will just not work properly…

                So building and understanding the metadata file is critical and unfortunately is not clear/well documented anywhere..

      • Robin van het Hof

        Hi,

        Could you please please please change your blog font to something more readable than Comic Sans? Especially the code snippets are impossible to read…

      • Iwan Santoso

        Hi,

        From the 2nd screen shot from the last, looks like you have to select the fields to be selected for the first time. Which is the same issue I have. Do you know how to set up a default variant to be used?

        Regards,

        Iwan

      • Joseph BERTHE

        Hello,

        First of all, thanks for your blog, it saved my time 🙂

        I have a question, how to set by default columns and columns order ? (maybe I do not understand something)

        Kind Regards,

      • Ramesh Shrestha

        Hi Santhosh,

        I have used smart template and I have noticed that the getEntitySet is been triggered as soon as the SmartTable is visible. Our requirement is that the service call should be triggered explicitly on press of Go with some mandatory filter parameters.

        http://help.sap.com/saphelp_scm700_ehp03/helpdata/en/be/d8274140d04fc0b9bcb2db42d8bac2/content.htm

        I have followed above link and tried to prevent the binding with mBindingParams.preventTableBind

        = ‘true’ but I am not able to rebind the table.

        Have you faced such scenario. Please let us know.



        With Regards,

        Ramesh Shrestha

      • Arunkumar Yallampalli

        Hi Santhosh,

        After binding I able to see the columns are dynamically loaded from metdata to the smart table but am not able to understand how to bind data from an oData read service.

        Please help me.

        Regards,

        Arun.

        • Ramesh Shrestha

          Hi Shahid,

          This error is asking you to have at least one column to be selected for smart table. In smart table columns are defined in the metadata so you can set few columns to be default by changing metadata. Or if you are generating metadata through some annotation then better to have it. Another option is just to ignore this error. Then press setting buttons on the smart table, then add columns as personnelization.

          • Former Member

            Hi Ramesh,

            Can you suggest, how i can modify metadata to display some columns as default,

            I am using annotation for smart table in metadata as shown below

            <Annotations xmlns=”http://docs.oasis-open.org/odata/ns/edm” Target=”……………”>

                 <Annotation Term=”com.sap.vocabularies.UI.v1.LineItem”>

                      <Collection>

                           <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                                <PropertyValue Property=”Value” Path=”CustomerId”/>

                                <PropertyValue Property=”Label” String=”CustomerId”/>

                           </Record>

                           <Record Type=”com.sap.vocabularies.UI.v1.DataField”>

                                <PropertyValue Property=”Value” Path=”CustomerName“/>

                                <PropertyValue Property=”Label” String=”CustomerName“/>

                           </Record>

                      </Collection>

                 </Annotation>

            </Annotations>

            I can  ignore this error and from setting buttons on the smart table i can display data,

            But i need to display data by default


            Thanks

        • Former Member

          Hi shahid,

           

          Please re-check the EntitySet for the Smart table. It should name of the EntitySet and not EntityType.

          <smartTable:SmartTable id =”smartTable” entitySet=”Employees”

          tableType=”Table” useExportToExcel=”true”

          useVariantManagement=”false” useTablePersonalisation=”true” header=”LineItems”

          showRowCount=”true” persistencyKey=”SmartTableAnalytical_Explored”

          enableAutoBinding=”true” />

          Regards.

      • Former Member

        Hello Santhosh,

        i tried the above link but m getting error .

        ‘initialise’ no personalizable component available – 

        DOM is not ready yet. Static UIArea cannot be created.

        Popup cannot be opened because static UIArea cannot be determined.

        Regard,

        Rewati Raman