Data Modeling for controls using XML views(SAPUI5)

[mahesh_z]

Hello ,

I am trying to create Table control using XML view and binding data to it through controller onInit method.

XML View Code is as follows :

<core:View xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core">

    <l:VerticalLayout width="100%">

        <l:content>

            <Text id="description" class="marginAll" />

            <Table id="idProductsTable" items="{       

                path:'/businessData'

            }">

                <headerToolbar>

                    <Toolbar>

                        <Label text="Products"></Label>

                    </Toolbar>

                </headerToolbar>

                <columns>

                    <Column>

                        <Label text="Product" />

                    </Column>

                    <Column>

                        <Label text="Supplier" />

                    </Column>

                    <Column>

                        <Label text="Dimensions" />

                    </Column>

                </columns>

                <items>

                    <ColumnListItem>

                        <cells>

                            <ObjectIdentifier title="{COUNTRY}" text="{COUNTRY}" />

                        </cells>

                        <Text text="{REGION}"></Text>

                        <Text text="{CITY}"></Text>

                    </ColumnListItem>

                </items>

            </Table>

        </l:content>

    </l:VerticalLayout>

</core:View>

Controller onInit method Code is as follows :

var oData = {

            businessData : [ {

                'COUNTRY' : "Canada",

                'CITY' : "Toronto",

                'REGION' : "US",

                'LANGUAGE' : "English"

            }, {

                'COUNTRY' : "China",

                'CITY' : "Bejeing",

                'REGION' : "Ashia",

                'LANGUAGE' : "Chinese"

            } ]

        };

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

        demoJSONModel.setData(oData);

        sap.ui.getCore().getElementById("idProductsTable").setModel(

                demoJSONModel);

Same thing when i tried with JS views , it worked however through XML view , I am getting empty table.

Is the data modeling correct for XML views?

Thanks,

Mahesh.

[ChandraMahajan · Accepted solution]

Hi,

add  data-sap-ui-xx-bindingSyntax="complex" in bootstrap script.

see example code JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;icon&quot; href=&quot;h...

and XML example code at sapui5bin/SinglePageExamples/ODataDateTableFilter.html at master · qmacro/sapui5bin · GitHub

Regards,

Chandra

[mahesh_z · Accepted solution]

Hi Chandra,

Thanks a lot for your help. Its working fine for me now after adding the line inside index.html.

As suggested by Sakthivel , I added controllerName and one more change i have done in controller .

//	sap.ui.getCore().byId("idProductsTable").setModel(demoJSONModel);
	this.getView().byId("idProductsTable").setModel(demoJSONModel);

Thanks ,

Mahesh.

[Former Member · Accepted solution]

Hi Mahesh,

I don't think its required for you to add data-sap-ui-xx-bindingSyntax="complex" ! I guess the only issue was not adding the controllerName. Can you try without bindingSyntax?

Regards

Sakthivel

[mahesh_z · Accepted solution]

Hi Sakthivel ,

I tried without data-sap-ui-xx-bindingSyntax="complex" and again the table is empty, Added that line again and data started coming. I guess this line is needed.

Thanks ,

Mahesh.

[Former Member · Accepted solution]

Okay!! But i don't see you doing any complex binding there! Are you formatting the bind data in your controller ?

[Former Member · Accepted solution]

I've got it ! The reason for that is you bind items as below,

     <Table id="idProductsTable" items="{    

                path:'/businessData'

            }">

This pattern is followed if you wanna add a formatter/sorter/grouping.

As you don't do any of those you can bind items as below &  it doesn't require  data-sap-ui-xx-bindingSyntax="complex".

<Table id="idProductsTable" items="{/businessData}">

[mahesh_z · Accepted solution]

Hey,

I tried this , and this worked as well without any change in index.html

Thanks a lot for your help.

Thanks,

Mahesh

[Former Member]

You've missed the controllerName property in the xml!

<core:View xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" controllerName="your-controller-name">

Regards

Sakthivel