How to create smart table with out using mock server

[#1]

Hi All,

I have created smart table using SAPUI5 Explored sample and can able to run the application.when i am trying to create same smart table with out using mock server.i am not able to create the smart table.

Can anyone help.

Code:

View.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"

    xmlns:smartFilterBar="sap.ui.comp.smartfilterbar" xmlns:smartTable="sap.ui.comp.smarttable"

  controllerName="smarttable_northwind.main" xmlns:html="http://www.w3.org/1999/xhtml">

  <Page id="page" title="SmartTable - Customer Line Items"

              enableScrolling="false">

              <content>

              <!--

              "TableList" is the EntitySet name to get the table values          

              -->

                    <smartTable:SmartTable entitySet="Categories"

                           tableType="Table" useExportToExcel="true"

                          useVariantManagement="false" useTablePersonalisation="true" header="Line Items"

                          showRowCount="true" persistencyKey="SmartTableAnalytical_Explored"

                          enableAutoBinding="true" />

              </content>

      </Page>

</core:View>

Controller.js

onInit: function() {

  var oModel, oView;

     oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/Northwind/Northwind.svc", true);

     oModel.setCountSupported(false);

     oView = this.getView();

     oView.setModel(oModel);

  }

index.html

<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  data-sap-ui-libs="sap.m"

  data-sap-ui-theme="sap_bluecrystal">

  </script>

  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

  <script>

  sap.ui.localResources("smarttable_northwind");

  var app = new sap.m.App({initialPage:"idmain1"});

  var page = sap.ui.view({id:"idmain1", viewName:"smarttable_northwind.main", type:sap.ui.core.mvc.ViewType.XML});

  app.addPage(page);

  app.placeAt("content");

  </script>

Do i need to change any changes to the above code??

[Former Member · Accepted solution]

Hi,

there is a working example here.

http://scn.sap.com/community/developer-center/front-end/blog/2015/06/13/smart-table-in-ui5

Best regards,

Rohit

[Former Member · Accepted solution]

Thanks for your reply

I have tried the above examplebut i am getting errors when i execute above example.Please find my code.

Index.html

<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  data-sap-ui-libs="sap.m,sap.ui.commons"

   data-sap-ui-xx-bindingSyntax="complex"

  data-sap-ui-theme="sap_bluecrystal"

  data-sap-ui-resourceroots='{"smarttable": "./"}'>

  </script>

  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

  <script>

  sap.ui.getCore().attachInit(function() {

            new sap.ui.core.ComponentContainer({

                      height : "100%",

                      name : "smarttable"

              }).placeAt("content");

          });

  </script>

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 }),

]});

}

});

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="Categories"

                           tableType="Table" useExportToExcel="true"

                          useVariantManagement="false" useTablePersonalisation="true" header="Line Items"

                          showRowCount="true" persistencyKey="SmartTableAnalytical_Explored"

                          enableAutoBinding="true" />

              </content>

      </Page>

</core:View>

Controller.js

onInit: function() {

  var oModel, oView;

    oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/Northwind/Northwind.svc", true);

    oModel.setCountSupported(false);

    oView = this.getView();

    oView.setModel(oModel);

}

Errors:

GET http://localhost:53754/SmartTable/Component-preload.js 404 (Not Found)

Uncaught TypeError: Cannot read property '0' of undefined

flex error processing view idsmarttable: TypeError: Cannot read property 'getMetadata' of undefined -

Please help me if i need to do any changes to the above code as i am getting errors when i execute the above code.

[santhu_gowdaz · Accepted solution]

try ,

    oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/Northwind/Northwind.svc/$metadata", true);

[Former Member · Accepted solution]

Hi Santhosh,

Thanks for your quick reply

Eventhough i tried with the below code i am not getting data into the table ,getting errors.

oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/Northwind/Northwind.svc/$metadata", true);

i did n't get data into the table even the filter, headers are coming properly.Please help how to resolve the issue

Errors:

GET http://localhost:53754/SmartTable/Component-preload.js 404 (Not Found)

[Former Member · Accepted solution]

Hi,

Can you Please click on gears button on table and see the columns are coming.

Please select those columns and click ok.

Rohit

[santhu_gowdaz · Accepted solution]

By default the columns are not preselected. click on that table setting button it showing on rigth side on your table and select some columns. you will see the data:).

[Former Member · Accepted solution]

Hi Santhosh,

I clicked on setting button on right side it is not showing any columns and searched with a particular columns i am not able to see any  columns it seems data is not getting loaded.

Please help.

[santhu_gowdaz · Accepted solution]

this is the problem because hard coded "$metadata" in the URL.

try with a '/' before your entity,

<smartTable:SmartTable entitySet="/Categories"

[Former Member · Accepted solution]

onInit: function() {

  var oModel, oView;

     oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/Northwind/Northwind.svc", true);

     oModel.setCountSupported(false);

     oView = this.getView();

     oView.setModel(oModel);

  }

in this add this code too.

				var oTable = oView.byId("smartTable");
				oTable.setModel(oModel);
			oTable.rebindTable();

[Former Member · Accepted solution]

Even i tried by executing below code i am getting same errors and data not getting displayed in columns.

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 id ="smartTable" entitySet="/Employees"

                           tableType="Table" useExportToExcel="true"

                          useVariantManagement="false" useTablePersonalisation="true" header="Line Items"

                          showRowCount="true" persistencyKey="SmartTableAnalytical_Explored"

                          enableAutoBinding="true" />

              </content>

      </Page>

</core:View>

Controller.js

onInit: function() {

  var oModel, oView;

    oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/Northwind/Northwind.svc/$metadata", true);

    oModel.setCountSupported(false);

    /*oView = this.getView();

    oView.setModel(oModel);*/

    var oTable = oView.byId("smartTable");

    oTable.setModel(oModel);

        oTable.rebindTable();

}

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 }),

]});

}

});

[santhu_gowdaz · Accepted solution]

oView is not initialized as this.getView() in your code,

var oModel;

    oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/Northwind/Northwind.svc/$metadata", true);

    oModel.setCountSupported(false);

var oView = this.getView();

       var oTable = oView.byId("smartTable");

[Former Member · Accepted solution]

HI,

Can you share any working code fro Northwind service.

[Former Member · Accepted solution]

Hi Santhosh,

even i tried with the below code also.

onInit: function() {

  var oModel, oView;

    oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/Northwind/Northwind.svc/$metadata", true);

    oModel.setCountSupported(false);

    oView = this.getView();

    oView.setModel(oModel);

    var oTable = oView.byId("smartTable");

    oTable.setModel(oModel);

        oTable.rebindTable();

}

[santhu_gowdaz · Accepted solution]

what is the error in console? show me the browser network tab.

[Former Member · Accepted solution]

HI,

Can we create smart table using Northwind service b'coz it doesn't contain Odata annotations.??

[Former Member · Accepted solution]

[santhu_gowdaz · Accepted solution]

please check if you change the url like below then metadata is loading properly in network tab,

  oModel = new sap.ui.model.odata.ODataModel("proxy/http/services.odata.org/Northwind/Northwind.svc/", true);

[santhu_gowdaz · Accepted solution]

sorry it won't work because smart table will analyse the oData metadata and based on the annotations in the metadata it will create the smart table.

[Former Member]

Hi all,

I recently have been confronted with those problems binding OData service to a UI5 smart table. I assume in this discussion it's the same with NW service, and there are only a few posts in the web concerning this problem:

1. http://stackoverflow.com/questions/31563062/sapui5-filling-smarttable-with-odata-from-xmii

this guy gave up, using smart tables

2. Struggling with filling a SmartTable | SCN

here Sakthivel, mentions problems with annotations as well.

Even when I tried to bind the most simple XSODATA service (table, view etc.) it does not work!!

Taking a look at the $metadata of a XSODATA service I cannot find any sap specific annotations, like in the mock example (SAPUI5 Explored😞

<EntitySet Name="LineItemsSet" EntityType="com.sap.GL.zrha.LineItems"
  sap:creatable="false" sap:updatable="false" sap:deletable="false"
  sap:pageable="false" sap:content-version="1" />

There is no description how to get an XSODATA service having those annotations, shouldn't it be generated by default? Are Smart Tables designed only to work with mock server, not with HANA data - I cannot believe this??

@Santosh would you be please so kind, and describe in detail how your OData service in the "working example" ( http://scn.sap.com/community/developer-center/front-end/blog/2015/06/13/smart-table-in-ui5)

exactly looks like? Thank you - it would be really helpful!