Skip to Content

Use Template on non-visual aggregation for inserting into existing bound sap.m.Table

For reference, this question first appeared on StackOverflow (though unfortunately unanswered to date hence why included here):

stackoverflow.com/questions/27291047/use-template-on-invisible-table-for-inserting-into-existing-bound-sap-m-table

I have a requirement to display a list of "spare parts" in an sap.m.Table but there is the ability if one of these "spare parts" has a related "spare part" (e.g. A heavy duty version, a light version, etc) , that you can click a button on the row and display these related "spare parts" by inserting them immediately below the "spare part" in question.

While I can get the sap.m.Table doing what I want to do using the insertItems method, I would like to take advantage of templates and binding to create a temporary sap.m.Table; bind it to the relationship that returns these alternate spare parts; and reuse the template for a row to give me an array of ColumnListItems which I can insert into the Table at the right place.

Unfortunately, doing this, a sap.m.Table has a feature that if it is not displayed, it doesn't actually make the Odata call and leverage the template function.

To explain possibly much clearer, refer to this jsbin: http://jsbin.com/sihofu/4/edit?html,js,output

Any better ideas on how to generate template output for a binding without using a sap.m.Table? (My next step is to look at UI5 code to see how function templates work with aggregations which may give me the answer)

The specific code to look at in the jsbin example is as follows:

var oTable2 = new sap.m.Table();

oTable2.attachUpdateFinished(

function() {

console.log("But this one doesn't");

// What I'm trying to do here is insert these entries below Key 1

});

oTable2.bindAggregation("items", { path: "/ExampleSecondaryValues", template: oTemplate, });

Thanks, Matt

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

1 Answer

  • Best Answer
    Posted on Jan 05, 2015 at 06:23 AM

    Back from Holidays now and solved this problem with a bit of brute force by simply enhancing/extending the sap.m.table control slightly.

    The problem was if the control was invisible, nothing was rendered, and some optimisation within UI5 core means that in the case nothing is rendered, the AfterRender event is not called on the control and this event is what fires the UpdateFinished event.

    I won't debate whether that optimisation is appropriate or not, but to fix this I simply extended the table control with a new control which looks like as follows:

      sap.m.Table.extend("view.Table", {
          renderer: function(oRm, oControl) {
              oRm.write("<span"); 
              oRm.writeControlData(oControl);
              oRm.write("></span>");
          }
      });
    
    

    e.g. Simply always rendering something in the render function, causes the AfterRender event to be called; which in turns allows the sap.m.Table to fire the UpdateFinished event which allows me to then safely get the rendered template items to insert in my visible table.

    Would love to know a much better way of doing this (possibly using the template control or similar), but this works okay to solve the problem.

    Cheers,

    Matt

    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.