Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

Working with table having dynamic columns

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

Tags:
Former Member
replied

Dhiraj,

in that example i gave to you

JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;alternate&quot; type=&quot;application/jso…

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=&quot;application/jso…

0 View this answer in context
Not what you were looking for? View more on this topic or Ask a question