Smart Table in UI5

June 13, 2015 | 4,348 Views |

Santhosh Gowda

SAPUI5

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,

Index.html,

<!DOCTYPE HTML>

<html>

<head>

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>

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

new sap.ui.core.ComponentContainer({

height : “100%”,

name : “smarttable”

}).placeAt(“content”);

});

</script>

</head>

</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”>

<!–

“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,

To report this post you need to login first.

33 Comments

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

Rohit Mahajan June 15, 2015 at 9:34 am

Hi,

The data is not coming for table, even the filter, column etc are coming properly, What can be missing thing.

Best regards,

Rohit

like (0)
1. Santhosh Gowda Post authorJune 15, 2015 at 9:52 am
  
  Please check YOUR URL/TableList returing any value?
  
  like (0)
  1. Ahalya Desikan July 14, 2015 at 9:37 am
    
    Hi Even I face the same issue.My Your URL/TableList returns value.I am not getting the data in the table.Please help.
    
    like (0)
    1. Michael Appleby July 14, 2015 at 6:21 pm
      
      Please create a Discussion for your question. You will get more visibility with the pool of experienced people in this community.
      
      Regards, Mike (Moderator)
      
      SAP Technology RIG
      
      like (0)
    2. Michael Appleby July 15, 2015 at 12:13 pm
      
      Ahalya,
      
      Please read previous posting and create a new Discussion.
      
      Regards, Mike (Moderator)
      
      SAP Technology RIG
      
      like (0)
Arshad Ansary June 19, 2015 at 9:50 am

Hi Santhosh,

Thanks for the blog.

Can you please explain the annotations that this smart table expects from OData service . I know there is something called LineItem but how to pass these values. Same for sap:visible sap:aggregation-role

Smart Table – UI Development Toolkit for HTML5 (SAPUI5) – SAP Library

Will be nice if you could share your metadata document

Regards

Arshad

like (0)
1. Santhosh Gowda Post authorJune 19, 2015 at 10:24 am
  
  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,
  
  like (0)
  1. Arshad Ansary June 19, 2015 at 10:52 am
    
    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.
    
    If you could paste the <server>/$metadata xml it would be helpful
    
    like (0)
    1. Santhosh Gowda Post authorJune 19, 2015 at 11:13 am
      
      you will find my sample metadata here-Metadata Binding in UI5
      
      And the same metadata i used for my table binding.
      
      like (0)
      1. Prateek Vinod Chadha January 21, 2016 at 4:13 am
        
        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
        
        like (0)
      2. Vered Constantin April 14, 2016 at 1:02 pm
        
        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..
        
        like (0)
Robin van het Hof June 19, 2015 at 9:53 am

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…

like (0)
1. Santhosh Gowda Post authorJune 19, 2015 at 9:59 am
  
  Sorry for that, And i will never use Comic Sans format in my blogs.
  
  like (0)
Iwan Santoso August 11, 2015 at 10:34 pm

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

like (0)
Claudia Pkarije September 17, 2015 at 7:52 am

Hi,

Is it possible in smart tables to use $expand and $filter parameter in order to show get_expanded_entityset and filtered data ?

like (1)
Joseph BERTHE October 5, 2015 at 10:15 am

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,

like (0)
1. Rohit Mahajan October 5, 2015 at 10:26 am
  
  Hi Joseph,
  
  To create default Columns, the best way is to use annotation based approach.
  
  Vocabulary-Based Annotations
  
  The LineItem annotation is required for this.
  
  Best regards,
  
  Rohit
  
  like (0)
  1. Joseph BERTHE October 8, 2015 at 11:59 am
    
    Hi,
    
    Thanks for your insight, however, I did not succeeded using the property VALUE in the annotation. I have only LABEL.
    
    I posted my issue on SDN : [SEGW] Create annotation for SmartTable
    
    Regards
    
    like (0)
  2. Iwan Santoso October 8, 2015 at 12:35 pm
    
    Hi Joseph,
    
    I haven’t figured out an elegant way to do this, but I used the following in onInit function in the controller:
    
    Get the table property of smart table:
    
    oTable = this.byId(this.createId(“mySmartTbl”)).getTable();
    
    Loop at oTable.mAggregations.columns and call setVisible(true) for each column,
    
    You should be able to see the columns into smart table
    
    Hope that helps.
    
    like (0)
Ramesh Shrestha February 6, 2016 at 2:49 am

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

like (0)
Arunkumar Yallampalli February 15, 2016 at 1:21 pm

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.

like (0)
Sai Sravya March 2, 2016 at 6:54 am

Hi Santhosh,

Could you please tell me significance of the below url.

xmlns:app=“http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1“.

like (0)
gowthami ravindranath April 14, 2016 at 9:25 am

Hi Santhosh,
will that code works in sap webide?? in YOUR URL should we give the metadata link??

like (0)
Narasimha Murthy May 16, 2016 at 11:06 am

Hi Santosh,

can we populate data in SmartTable using Json data???

like (0)
Shahid kakkkattummal May 24, 2016 at 6:40 am

Hi Santhosh,

I am following this method to implement smart table,But gives an error

like (0)
1. Sirine Melki May 24, 2016 at 12:33 pm
  
  Hi Shahid,
  
  I get the same error message , so if you have found any solution please share it.
  
  Thanks.
  
  like (0)
2. Ramesh Shrestha June 12, 2016 at 1:55 pm
  
  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.
  
  like (0)
  1. Shahid kakkkattummal September 20, 2016 at 12:45 pm
    
    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
    
    like (0)
3. Manjunath Chintha July 6, 2016 at 3:52 pm
  
  Hi Shahid,
  
  Can i know how you solved the above error ?
  
  BR, Manjunath
  
  like (0)
4. ADITI BHARGAVA April 3, 2017 at 5:38 am
  
  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.
  
  like (0)
Rewati Raman June 8, 2016 at 12:33 pm

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

like (1)
Elena Díaz June 21, 2017 at 9:57 am

Hi!

you set useToExportExcel to true.. but the excel button is not shown… i have the same issue 🙁 do you know how to fix that?

like (0)
Ashok Dhayalaraj July 5, 2017 at 11:48 pm

Hi Santhosh,

I am trying to edit a single row in Smart Table. Is this functionality available. Please help

like (0)