cancel
Showing results for 
Search instead for 
Did you mean: 

display columns and data dynamically from odata into sap.m.table

Former Member
0 Kudos

Hi,

Please share any sample code to display columns and data dynamically from odata/JSon into sap.m.table. Please share recommended ways to achieve dynamic column names as well into sap.m.table

Regards,

Koti Reddy

Accepted Solutions (1)

Accepted Solutions (1)

ChandraMahajan
Active Contributor
0 Kudos

Hi Koti,

Refer this thread sapui5 - Dynamic binding of table column and rows - Stack Overflow and example provided into it.

you can find working example at JS Bin - Collaborative JavaScript Debugging</title> <link rel="alternate" type=&q...

This example is based on sap.ui.table but you can easily code one for sap.m.table

Regards,

Chandra

Former Member
0 Kudos

Thank you for working example.

If there is any working example with XML View scenario , please share it.

Regards,

Koti Reddy

Former Member
0 Kudos

Hello Koti,

For a XML View example you could check the OpenUI5 Explored application:

OpenUI5 Explored

Best,

Deyan

Qualiture
Active Contributor
0 Kudos

C'mon guys... Now you have the working Javascript code, it should be no problem at all to convert it yourself to XML

Answers (1)

Answers (1)

Former Member
0 Kudos

Tried like below.

XML View :

<Table id="tbl" inset="true" multiSelect="true"   selectionMode="MultiToggle" mode="MultiSelect"

items="{ path: '/EntitySet'}">

<columns>

</columns>

<items>

<ColumnListItem>

</ColumnListItem>

</items>

</Table>

Controller : I used odatamodel reading to display data.

var sTemplate = new sap.m.ColumnListItem();

var oTable = sap.ui.getCore().byId("viewid").byId("tbl");

addColumns(oTable, param1,param2, sTemplate);

sap.ui.getCore().byId("view id").byId("tbl").bindItems({

                path : "/EntitySet",

                template : sTemplate,

                filters : filters}

In addColumns , I read entityset model to display column properties and display.

Regards,

Koti Reddy

Qualiture
Active Contributor
0 Kudos

Another approach which might work as well in your case, is to have two models, one for your data (named model "data"), and one for the columns (which is generated from the data properties, named model "meta")

Your table would then look like this:


<Table id="tbl" inset="true" multiSelect="true" selectionMode="MultiToggle" mode="MultiSelect"

items="{data>/rows}" columns="{meta>/cols}">

    <columns>

        <Column>

            <Text text="{meta>name}" />

        </Column>

    </columns>

    <items>

        <ColumnListItem cells="{meta>/cols}">

            <cells>

                <Text text="{parts:[{path:'meta>name'},{path:'data>'}], formatter:'.formatItem'}" />

            </cells>

        </ColumnListItem>

    </items>

</Table>

The formatter function is needed to get the value (based on column name) from your data model:


formatItem : function (colname, dataObj) {

    return dataObj[colname];

}

And on a sidenote, instead of using


sap.ui.getCore().byId("view id").byId("tbl")

it's generally better (and shorter) to simply use:


this.getView().byId("tbl");

Former Member
0 Kudos

Regarding dynamic columns, example is really good!!

I used this.getView().byId("tbl");  upto yesterday but this syntax is working sometimes but not always . I believe this variable may be interpreting something based on user navigations.

Eventhough I used same syntax for 2 id's at same place , it is working for some id and not working for someother ids.

but other syntax is working always as per my observation.

Regards,

Koti Reddy

Qualiture
Active Contributor
0 Kudos

Object 'this' can vary of course, depending on where it's called from; if called from an inner function, then 'this' will represent the encapsulating object or class, and not the controller.