how do i bind a JSON file to an XML View in SAPUI5?

[former_member592880]

I'm trying to bind JSON file to a xml view in SAPwebIDE using UI5. And every time I execute it gives me this error (SCRIPT5022: failed to load 'null/App.js' from ../../resources/null/App.js: 404 - Not Found)and a blank screen for output.

Please help....

View1.xml

<mvc:View controllerName="com.db.DataBinding.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
 displayBlock="true" xmlns:m="sap.m" xmlns:core="sap.ui.core">
 <App id="idAppControl">
  <pages>
   <Page title="{i18n>title}">
    <content>
     <m:Table id="tab1" items="{path : '/ProductCollection'}">
      <columns>
       <m:Column width="auto">
        <m:Label text="Product Id"/>
       </m:Column>
       <m:Column width="auto">
        <m:Label text="Product Name"/>
       </m:Column>
       <m:Column width="auto">
        <m:Label text="Category"/>
       </m:Column>
       <m:Column width="auto">
        <m:Label text="Supplier"/>
       </m:Column>
      </columns>
      <m:ColumnListItem>
       <m:Text text="{ProductId}"/>
       <m:Text text="{Name}"/>
       <m:Text text="{Category}"/>
       <m:Text text="{SupplierName}"/>
      </m:ColumnListItem>
     </m:Table>
    </content>
   </Page>
  </pages>
 </App>
</mvc:View>

View1.controller.js

sap.ui.define([
 "sap/ui/core/mvc/Controller"
], function (Controller) {
 "use strict";
 return Controller.extend("com.db.DataBinding.controller.View1", {
  onInit: function () {
   var oTable = this.getView().byId("tab1");
   var oModel = new sap.ui.model.json.JSONModel();
   oModel.loadData("./products.json");
   oTable.setModel(oModel);
  }
 });
});

[NabiZamani · Accepted solution]

You did not set a default namespace (I changed the order for a better readability):

<mvc:View
    controllerName="com.db.DataBinding.controller.View1"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:m="sap.m"
    xmlns:core="sap.ui.core"
    displayBlock="true">

However, your App control in your XMLView is using the default namespace, and that leads to the error you get. You have several options, here are a few (see my comments in the code as well):

Option 1 - make sap.m the default namespace by adding an additional namespace xmlns="sap.m" (ugly approach, but would work):

<mvc:View
    controllerName="com.db.DataBinding.controller.View1"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:m="sap.m"
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    displayBlock="true">

Option 2 - make sap.m the default namespace + remove all the "m:" in the view (my preference):

<mvc:View
    controllerName="com.db.DataBinding.controller.View1"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    displayBlock="true">
    <App id="idAppControl">
        <pages>
            <Page title="{i18n>title}">
                <content>
                    <Table id="tab1" items="{/ProductCollection}"> <!-- in your simple case this is enough -->
                        <columns>
                            <Column width="auto">
                                <Label text="Product Id"/>
                            </Column>
                            <Column width="auto">
                                <Label text="Product Name"/>
                            </Column>
                            <Column width="auto">
                                <Label text="Category"/>
                            </Column>
                            <Column width="auto">
                                <Label text="Supplier"/>
                            </Column>
                        </columns>
                        <items> <!-- best practice: use the default aggregation -->
                            <ColumnListItem>
                                <Text text="{ProductId}"/>
                                <Text text="{Name}"/>
                                <Text text="{Category}"/>
                                <Text text="{SupplierName}"/>
                            </ColumnListItem>
                        </items>
                    </Table>
                </content>
            </Page>
        </pages>
    </App>
</mvc:View>

Option 3 - add "m:" in the view:

<mvc:View
    controllerName="com.db.DataBinding.controller.View1"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:m="sap.m"
    xmlns:core="sap.ui.core"
    displayBlock="true">
    <m:App id="idAppControl">
        <m:pages>
            <m:Page title="{i18n>title}">
                <m:content>
                    <m:Table id="tab1" items="{path : '/ProductCollection'}">
                        <m:columns> <!-- "m:" is needed here as well-->
                            <m:Column width="auto">
                                <m:Label text="Product Id"/>
                            </m:Column>
                            <m:Column width="auto">
                                <m:Label text="Product Name"/>
                            </m:Column>
                            <m:Column width="auto">
                                <m:Label text="Category"/>
                            </m:Column>
                            <m:Column width="auto">
                                <m:Label text="Supplier"/>
                            </m:Column>
                        </m:columns>
                        <m:items> <!-- best practice: use the default aggregation -->
                            <m:ColumnListItem>
                                <m:Text text="{ProductId}"/>
                                <m:Text text="{Name}"/>
                                <m:Text text="{Category}"/>
                                <m:Text text="{SupplierName}"/>
                            </m:ColumnListItem>
                        </m:items>
                    </m:Table>
                </m:content>
            </m:Page>
        </m:pages>
    </m:App>
</mvc:View>

Not the question, but in a code review my additional feedback for your controller would be:

1. Use dependency injection for the JSONModel as well
2. You can pass the URL directly to the constructor, see API docs
3. No need to set the model on the table, you can set it on the view directly
   ==> usually you would the call it a "view model" and use this.getView().setModel(oModel, "view");
   But then you would also have to update you bindings by prepending "view>"

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
    "use strict";
    return Controller.extend("com.db.DataBinding.controller.View1", {
        onInit: function () {
            var oModel = new JSONModel("./products.json");
            this.getView().setModel(oModel);
        }
    });
});

[former_member592880 · Accepted solution]

IT WORKED!!!!!!!!!!!!!!

thank you very much for your help.

regards

Siddharth

[VictorHo]

Hi,

Nabi has provided a details answer.

In case you feel it's confused with the namespace error, I suggest creating a new project using a SAPUI5 template in SAP Web IDE. The template already handles all namespace stuff, so you can focus on the binding. You can follow this tutorial.

After has the SAPUI5 app structure, you can learn more about JSON binding using this document.

Let me know if you get any difficulies.

Cheer,

Victor.

[former_member592880]

it worked out with Nabi's suggestions.

Thank you very much for your help.

regards

Siddharth