Working with table having dynamic columns

[Former Member]

Hi Experts,

My requirement is I want a table consist of dynamic number of columns in sapui5 mobile application. The number of columns will vary based on the month selected. This table is used to log efforts for a particular month for different projects. please find the layout of table which is needed.

Table Columns

----------------------------------------------------------------------------------------------------------------------------------

Day1     Day2     Day3     Day4 .........               .....               ...........               .......          DAY31

Mon       Tue       Wed     Thu         ...     .     .          .....     ....     .          ....     ....               Fri

----------------------------------------------------------------------------------------------------------------------------------

Table content:

--------------------------------------------------------------------------------------------------------------------------------    

8               4          5               6                                                                                          2

4                5               4              

---------------------------------------------------------------------------------------------------------------------------------

The other requirement is the days Mon,Tue,Wed cannot be hardcoded and have to write logic for it. I already posted the similar issue but their the answer provided was for Javascript view. But in my case I am using XML view. Please find the code snippets which I am going to use and suggest me a complete solution for it.

<Table mode="MultiSelect"

            id="idtimesheet" items= "{/Data}" columns="{/columns}"  width ="800px" >

                <columns>

                    <Column width="80px" demandPopin="true" popinDisplay="Inline" minScreenWidth="Tablet">

                    <VBox>

                       <Label text="{label}" textAlign="Center" width="60px" />

                    </VBox>

                    </Column>

                    </columns>

                <items>

                    <ColumnListItem>

                     ******************

                    ...Please provide this logic in which I want to have varying number of cells.

                    .....

                    ......  Want mapping logic for column ListItem in View

                    </ColumnListItem>

                </items>

            </Table>

In controller.js:

var oData = { columns : [ ],

            Data : [ ]};

Logic for populating header in Columns array.

var weekday = new Array(7);
        weekday[0]=  "Sun";
        weekday[1] = "Mon";
        weekday[2] = "Tue";
        weekday[3] = "Wed";
        weekday[4] = "Thu";
        weekday[5] = "Fri";
        weekday[6] = "Sat";
     
           
        for (i = 0; i < no_of_days; i++) {

            oData.columns[i] = { label : weekday[new Date(2015, 4, i+1).getDay()] + "/" + (i+1) };  //label is mapped to Label text = {label}
**********************************          

          Don't know the logic for populating listitem in column list item of table

           Want mapping logic for column ListItem

***********************************
        }
      
        var demoJSONModel = new sap.ui.model.json.JSONModel();
        demoJSONModel.setData(oData);
     this.getView().byId("idtimesheet").setModel(demoJSONModel);

Note: Please note that I am using XML view .

Thanks you for your support in advance.

Regards,

Dhiraj More

[former_member182372 · Accepted solution]

Dhiraj,

in that example i gave to you

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;alternate&quot; type=&q...

columnListItem has a lot of dynamic logic for cell and binding creation, you can declare columns binding in XML but that is the only thing you can move to XML from controller

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;alternate&quot; type=&q...

[Former Member]

Hi Maksim,

It worked. Thank you again for helping. I am not done with it yet, will require your help again in future.

Till Then thank you for your Support.

Also thank You  Joao Sousa, Juan Carlos Orta for your help and expertise. Your answer were also helpful.

Thank You,

Happy learning

Regards,

Dhiraj More

[juancarlosorta]

Sorry

var oRow= this.getView().byId("idColumnListItem");

        for (i = 0; i < 8; i++) {

           var x = new sap.m.Input({value : "{" + "data_" + (i+1) + "}"});

           var y = new sap.m.Text({ text : "{total}"});

           oRow.addCell(x).addCell(y)
        }

oTable = this.getView (). byId ( " idtimesheet ");

oTable.bindItems("tmodel>/Data", oRow);

[juancarlosorta]

Try to do as follows :

var x = new sap.m.Input({value : "{" + "data_" + (i+1) + "}"});

var y = new sap.m.Text({ text : "{total}"});

var oRow= this.getView().byId("idColumnListItem");

        for (i = 0; i < 8; i++) {
            oRow.addCell(x).addCell(y)
        }

oTable = this.getView (). byId ( " idtimesheet ");

oTable.bindItems("tmodel>/Data", oRow);

[joao_sousa2]

i is undefined. You are using the "i" variable outside the FOR.

[joao_sousa2]

You can't define a truly dynamic view in XML (in 1.28 you will have expression binding but not now). With some hacking you can make columns for 29, 30 and 31 visible or not according to a model (with attributes has29, has30, has31), but that's more trouble then it is worth, when you can control that logic in JavaScript.

In 1.28 you will be able to use expressions to control the visibility of those 3 columns (basically IFs inside the binding), which will be a better solution but right now to do what you want, you should add the columns and columnlistitem in the controller.

      var ocolumnListItem = this.getView().byId("idColumnListItem");
        for (i = 0; i < 8; i++) {
            ocolumnListItem.addCell(new sap.m.Input({         
                value : "{" + "data_" + (i+1) + "}"
            })
        }
            ocolumnListItem.addCell(new sap.m.Text({
                text : "{total}"

Have you tried building a template in a similar manner (instead of using an existing ColumnListItem), and then use  bindAggregation("items", "/Data", oTemplate) to bind it? It should work.

[Former Member]

Hi juan,

I managed to define dynamic columns Header. I will explain below:

    <columns>

                    <Column width="80px" demandPopin="true" popinDisplay="Inline" minScreenWidth="Tablet">

                    <VBox>

                       <Label text="{label}" textAlign="Center" width="60px" />

                    </VBox>

                    </Column>

                    </columns>

Here I have used Label which is bind to property {label} and in controller I am populating this {label }. I have populated 9 values in {label} to display 9 columns.

Now the problem is same I want to do for items(i.e. Rows). I can't keep cells in columnlist item constant. I tried to do it by taking reference of ColumnListItem but then when I am entering values in the field and pressing enter that value is dissapearing. Please have a look into code:

View.xml:

<Table mode="MultiSelect"

            id="idtimesheet" items= "{tmodel>/Data}" columns="{tmodel>/columns}" width ="800px" >

                <columns>

                <Column width="80px" demandPopin="true" popinDisplay="Inline" minScreenWidth="Tablet">

                    <VBox>

                       <Label text="{tmodel>label}" textAlign="Center" width="60px" />

                    </VBox>

                    </Column>

                    </columns>

                <items>

                    <ColumnListItem id ="idColumnListItem" >

                    </ColumnListItem>

                </items>

            </Table>

In Controller:

      var ocolumnListItem = this.getView().byId("idColumnListItem");

        for (i = 0; i < 8; i++) {
            ocolumnListItem.addCell(new sap.m.Input({        
                value : "{" + "data_" + (i+1) + "}"
            })
        }
            ocolumnListItem.addCell(new sap.m.Text({
                text : "{total}"

But it  is not working Properly.

Thank You,

[juancarlosorta]

Hi Dhiraj , I think you should think better in a suitable control for the solution you are looking for .

I propose such a list of months and when you click on any automatically go to another page with a table with the columns you need.

var data = {months: [{month: "Jan"},{month:"Feb"}...]}

var model = new sap.ui.model.json.JSONModel();

model.setData(data);

var list = new sap.m.List({

  headerText:"Months"

  });

list.bindItems({

       path : "/names",

       template : new sap.m.StandardListItem({

            title: "{month}",

            type: sap.m.ListType.Navigation,

            press:function(evt){

            var oBindingContext = evt.getSource().getBindingContext();

            page2.setBindingContext(oBindingContext);

            app.to("page2");

  }

  })

  });

When using xml view, you can not add dynamic columns unless the columns are binding to their respective values ​​in the model( experts correct me if I'm wrong ) .

To do this, you have to retrieve it from the controller with javascript like this:

oTable = this.getView (). byId ( " idtimesheet ") // reference to the id of the table view in xml

and adding the columns that you need as well :

oTable.addColumn (new sap.ui.table.Column ({

            label: x ,

            template : new sap.ui.commons.TextView () bindProperty ("x" , x ) .

   } ) ) ;

Regards