title: Consuming OData V4 from SAPUI5
body: <p>I am trying to use OData V4 with SAPUI5. Although it seems quite straight forward, I am facing couple of issues.</p>
  
  <p>I am using sap.ui.layout.sample.SimpleFormToolbar sample from Demokit. Implemented a OData V4 service to display the data in the simple form. </p>
  
  <p>Changes i have done in this app: <br>
  1. manifest.json and <br>
  2. Page.view.xml for Context Binding of form control <br>
  3. Removed code reference to mockdata in controller and index.html <br></p>
  
  <p>However, I am not able to get data with following errors:</p>
  
  <pre><code>2019-07-07 08:58:23.736110 Failed to update path /Suppliers(12345)/Country - **Error: Must not change a property before it has been read**
  
  **Uncaught Error: Must not change a property before it has been read**
  </code></pre>
  
  <p>Another error is related batch mode. I have not implemented any batch processing in Odata impl.</p>
  
  <pre><code>2019-07-07 08:58:24.279114 **$batch failed** - Error: Network error
  2019-07-07 08:58:24.281175 Failed to read path /Suppliers(12345) - Error: **HTTP request was not processed because $batch failed**
  </code></pre>
  
  <p>The code i am using is:</p>
  
  <p>//manifest.json</p>
  
  <pre><code>{
      "_version": "1.12.0",
      "sap.app": {
          "id": "sap.ui.layout.sample.SimpleFormToolbar",
          "applicationVersion": {
              "version": "1.0.0"
          },
          "dataSources": {
            "supplierOData": {
              "uri": "https://supplierappp1014576trial.hanatrial.ondemand.com/SupplierApp/SupplierService.svc/",
              "type": "OData",
              "settings": {
                "odataVersion": "4.0"
              }
            }
          }
      },
      "sap.ui5": {
          "rootView": {
              "viewName": "sap.ui.layout.sample.SimpleFormToolbar.Page",
              "type": "XML",
              "async": true
          },
          "dependencies": {
              "libs": {
                  "sap.ui.layout": {}
              }
          },
          "models": {
              "": {
                  "dataSource": "supplierOData",
                  "settings" : {
                      "synchronizationMode" : "None"
                  }
              }
          },
          "config": {
              "sample": {
                  "files": [
                      "Page.view.xml",
                      "Page.controller.js",
                      "manifest.json"
                  ]
              }
          }
      }
  }
  </code></pre>
  
  <p>//Page.view.xml</p>
  
  <pre><code>&lt;mvc:View
      controllerName="sap.ui.layout.sample.SimpleFormToolbar.Page"
      xmlns:l="sap.ui.layout"
      xmlns:f="sap.ui.layout.form"
      xmlns:mvc="sap.ui.core.mvc"
      xmlns:core="sap.ui.core"
      xmlns="sap.m"&gt;
      &lt;VBox class="sapUiSmallMargin"&gt;
          &lt;f:SimpleForm id="SimpleFormToolbar"
              binding="{/Suppliers(12345)}"
              editable="true"
              layout="ResponsiveGridLayout"
              labelSpanXL="4"
              labelSpanL="3"
              labelSpanM="4"
              labelSpanS="12"
              adjustLabelSpan="false"
              emptySpanXL="0"
              emptySpanL="4"
              emptySpanM="0"
              emptySpanS="0"
              columnsXL="2"
              columnsL="1"
              columnsM="1"
              singleContainerFullSize="false"
              ariaLabelledBy="Title1" &gt;
              &lt;f:toolbar&gt;
                  &lt;Toolbar id="TB1"&gt;
                      &lt;Title id="Title1" text="Address" level="H4" titleStyle="H4"/&gt;
                      &lt;ToolbarSpacer /&gt;
                      &lt;Button icon="sap-icon://settings"/&gt;
                      &lt;Button icon="sap-icon://drop-down-list" /&gt;
                  &lt;/Toolbar&gt;
              &lt;/f:toolbar&gt;
              &lt;f:content&gt;
                  &lt;Toolbar ariaLabelledBy="Title2"&gt;
                      &lt;Title id="Title2" text="Office" level="H5" titleStyle="H5"/&gt;
                      &lt;ToolbarSpacer /&gt;
                      &lt;Button icon="sap-icon://settings"/&gt;
                  &lt;/Toolbar&gt;
                  &lt;Label text="Name" /&gt;
                  &lt;Input value="{SupplierName}" /&gt;
                  &lt;Label text="Street/No." /&gt;
                  &lt;Input value="{Street}"&gt;
                  &lt;/Input&gt;
                  &lt;Input value="{HouseNumber}"&gt;
                      &lt;layoutData&gt;
                          &lt;l:GridData span="XL2 L1 M3 S4" /&gt;
                      &lt;/layoutData&gt;
                  &lt;/Input&gt;
                  &lt;Label text="ZIP Code/City" /&gt;
                  &lt;Input value="{ZIPCode}"&gt;
                      &lt;layoutData&gt;
                          &lt;l:GridData span="XL2 L1 M3 S4" /&gt;
                      &lt;/layoutData&gt;
                  &lt;/Input&gt;
                  &lt;Input value="{City}" /&gt;
                  &lt;Label text="Country" /&gt;
                  &lt;Select id="country" selectedKey="{Country}"&gt;
                      &lt;items&gt;
                          &lt;core:Item text="England" key="England"/&gt;
                          &lt;core:Item text="Germany" key="Germany"/&gt;
                          &lt;core:Item text="USA" key="USA"/&gt;
                      &lt;/items&gt;
                  &lt;/Select&gt;
                  &lt;Toolbar ariaLabelledBy="Title3"&gt;
                      &lt;Title id="Title3" text="Online" level="H5" titleStyle="H5"/&gt;
                      &lt;ToolbarSpacer /&gt;
                      &lt;Button icon="sap-icon://settings"/&gt;
                  &lt;/Toolbar&gt;
                  &lt;Label text="Web" /&gt;
                  &lt;Input value="{Url}" type="Url" /&gt;
                  &lt;Label text="Twitter" /&gt;
                  &lt;Input value="{Twitter}" /&gt;
              &lt;/f:content&gt;
          &lt;/f:SimpleForm&gt;
      &lt;/VBox&gt;
  &lt;/mvc:View&gt;
  </code></pre>
  
  <p>//Page.controller.js</p>
  
  <pre><code>sap.ui.define([
          'jquery.sap.global',
          'sap/ui/core/mvc/Controller',
          'sap/ui/model/json/JSONModel',
          'sap/ui/model/odata/v4/ODataModel'
      ], function(jQuery, Controller, JSONModel, ODataModel) {
      "use strict";
  
      var PageController = Controller.extend("sap.ui.layout.sample.SimpleFormToolbar.Page", {
  
          onInit: function (oEvent) {
              console.log("hello");
  
              jQuery.get({
                  url: "/SupplierService/SupplierService.svc/Suppliers(12345)",
                  success: function(data) {
                      console.log( "Recieved data: " + data);
                  },
                  error: function(error) {
                      // your error logic
                      console.log("Error while requesting odata: " + error);
                  }
              });
  
  
          }
  
      });
  
  
      return PageController;
  
  });
  </code></pre>
  
  <p>//index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="expires" content="0"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Fullscreen – with toolbar&lt;/title&gt;
  
      &lt;script id="sap-ui-bootstrap"
          src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
          data-sap-ui-theme="sap_belize"
          data-sap-ui-resourceroots='{
              "sap.ui.layout.sample.SimpleFormToolbar": "./",
              "sap.ui.demo.mock": "mockdata"
          }'
          data-sap-ui-compatVersion="edge"
          data-sap-ui-async="true"
          data-sap-ui-preload=""
          data-sap-ui-frameOptions="trusted"
          data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"&gt;
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body class="sapUiBody" id="content"&gt;
      &lt;div data-sap-ui-component
          data-name="sap.ui.layout.sample.SimpleFormToolbar"
          data-height="100%"
          data-id="container"
          data-settings='{"id" : "sap.ui.layout.sample.SimpleFormToolbar"}'
          style="height: 100%"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have added jquery call just to see if the odata is working or not.</p>
  
  <p>Command used for CORS issue: "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp</p>
  
  <p>I am actually pointing to odata service in the same project. The same is deployed on Sap Cloud: <a href="https://supplierappp1014576trial.hanatrial.ondemand.com/SupplierApp/SupplierService.svc/" rel="nofollow noreferrer">https://supplierappp1014576trial.hanatrial.ondemand.com/SupplierApp/SupplierService.svc/</a></p>
  
  <p>Thanks for your time.</p>
  
  <ul>
  <li>EDIT:</li>
  </ul>
  
  <p>Added the solution as an answer below.</p>