Skip to Content

How bind annotation file and Smart Table

Hello colleagues.

I have such a question. I create Smart Table in JS Controller. How I can bind this Smart Table with annotation file, where I prescribe columns?

Smart Table creation code:

var mytable = new SmartTable({
    entitySet : "vGatewayStatuses",
    id : "st",
    smartFilterId : "smartFilterBar",
    tableType : "Table" ,
    useExportToExcel : true,
    useVariantManagement :true ,
    useTablePersonalisation : true, 
    header : "Line Items",
    showRowCount : true ,
    persistencyKey : "SmartTableAnalytical_Explored",
    enableAutoBinding : true
});

I try set entitySet, but nothing happens. When I start my UI app, I have Smart Table with "No data".

What could be the problem?

Thanks for answers.

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

4 Answers

  • Posted on May 03, 2019 at 10:00 AM

    Hi Kirill Sokolov,

    If you create the annotation file via the webide for the odata service, then automatically the annotation will be linked to the odata service in manifest.json. You don't need to explicitly bind again for the smart table. But if it is originating from the odata service via vocabulary service then you need to manualy link it in the manifest.json.

    It will be added like in the below format:

    https://ui5.sap.com/#/topic/fd715d97ebf842739697c9a0f276f0c0

    Thanks,

    Mahesh

    Add a comment
    10|10000 characters needed characters exceeded

    • Kirill Sokolov, please use the below syntax to insert the smart table into the page.

      this.getView().byId("page").insertContent(mytable); " my example is using m.page, so i used insertContent method.

      If you use your syntax, the model, annotations will not be propagated to the smarttable, which I think is your issue.

      Also, like Vedaradhya Agrahar suggested, please provide the function names correctly like below:

      eforeRebindTable : "onBeforeRebindTable",
      

      Thanks,
      Mahesh

  • Posted on May 03, 2019 at 10:22 AM

    Hi Mahesh Kumar Palavalli,

    Thanks for answers. My annotation linked with odata service in manifest.json. But when I create Smart Table in XML I have this result:

    <semantic:content>
    <smartTable:SmartTable id="smtable" entitySet="vGatewayStatuses" editable="false"    persistencyKey="varianttable" tableType="ResponsiveTable" useExportToExcel="true" beforeExport="onBeforeExport" editTogglable="false" useVariantManagement="true" useTablePersonalisation="true" header="Line Items" showRowCount="true" enableAutoBinding="false" demandPopin="false" class="sapUiResponsiveContentPadding" showFullScreenButton="true" beforeRebindTable="onBeforeRebindTable" visible="true">
    </smartTable:SmartTable>
    </semantic:content>
    

    And when I create Smart Table in JS Controller I have this result:

    var mytable = new SmartTable({
    id : "smtable",
    entitySet : "vGatewayStatuses",
    editable : false,
    persistencyKey : "varianttable",
    tableType : "ResponsiveTable",
    useExportToExcel : true,
    beforeExport : "onBeforeExport",
    editTogglable : false,
    useVariantManagement : true,
    useTablePersonalisation : true,
    header : "Line Items",
    showRowCount : true,
    enableAutoBinding : true,
    demandPopin : false,
    showFullScreenButton : true,
    beforeRebindTable : "onBeforeRebindTable",
    visible : true
    });
    mytable.placeAt("container-DirectoriesEditor---detail--detailPage-page-content");

    Why when I create Smart Table in XML I see my columns and Smart Table interface, and when I create Smart Table in JS Controller I see only "No data"?


    777.png (15.1 kB)
    888.png (4.9 kB)
    Add a comment
    10|10000 characters needed characters exceeded

    • A small tip regarding the rules of commenting & answering:

      You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.

      Now coming to ur issue, please use the below syntax to insert the smart table into the page.

      this.getView().byId("page").insertContent(mytable); " my example is using m.page, so i used insertContent method.

      If you use your syntax, the model, annotations will not be propagated to the smarttable, which I think is your issue.

      Also, like Vedaradhya Agrahar suggested, please provide the function names correctly like below:

      eforeRebindTable : "onBeforeRebindTable",<br>

      Thanks,
      Mahesh

  • Posted on May 03, 2019 at 12:52 PM

    Hi Kirill Sokolov,

    When controls are defining in javascript event name of the control must bind to function..

    In you'r case. it's defined as String

    beforeExport :"onBeforeExport", 
    // it must be define like beforeExport : this.onBeforeExport
    
    beforeRebindTable : "onBeforeRebindTable",
    // it must be define like beforeRebindTable : this.onBeforeRebindTable

    Modify your code as below and try

    you can remove event names and try..

    var mytable =new SmartTable({id:"smtable",
    entitySet :"vGatewayStatuses",
    editable : false,
    persistencyKey :"varianttable",
    tableType :"ResponsiveTable",
    useExportToExcel : true,
    editTogglable : false,
    useVariantManagement : true,
    useTablePersonalisation : true,
    header:"Line Items",
    showRowCount : true,
    enableAutoBinding : true,
    demandPopin : false,
    showFullScreenButton : true,
    visible: true
    });
    mytable.placeAt("container-DirectoriesEditor---detail--detailPage-page-content");

    if you require the events, then define the event handling function.

    onInit: function() {
    var mytable =new SmartTable({id:"smtable",
    entitySet :"vGatewayStatuses",
    editable : false,
    persistencyKey :"varianttable",
    tableType :"ResponsiveTable",
    useExportToExcel : true,
    beforeExport :this.onBeforeExport,
    editTogglable : false,
    useVariantManagement : true,
    useTablePersonalisation : true,
    header:"Line Items",
    showRowCount : true,
    enableAutoBinding : true,
    demandPopin : false,
    showFullScreenButton : true,
    beforeRebindTable :this.onBeforeRebindTable,
    visible: true
    });
    mytable.placeAt("container-DirectoriesEditor---detail--detailPage-page-content");
    },
    
    onBeforeRebindTable : function(){
    
    },
    
    onBeforeExport: function(){
    
    }
    
    

    Regards,

    Vedaradhya.

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on May 03, 2019 at 01:41 PM

    Hi Vedaradhya Agraha.

    I try remove all events name when I create Smart Table and I have the same result. I don't know why header, row count and another properties not set. Maybe someone has a working example of declaring a Smart Table in JS Controller?

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.