0

I am writing a simple application in Web IDE Personal Edition which is to be deployed on On-Premise ABAP system.

App.view.xml

<mvc:View
  controllerName="databinding1.controller.App"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true"
>
  <Button text="Submit"/>
  <Input
    value=""
    placeholder="Full Name"
    width="50%"
  />
</mvc:View>
  • Application Name : DataBinding1
  • Application is stored in "workspace" folder.

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Data Binding1</title>
    <script id="sap-ui-bootstrap"
      src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_bluecrystal"
      data-sap-ui-libs="sap.m"
      data-sap-ui-bindingSyntax="complex"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-preload="async"
      data-sap-ui-resourceroots='{
        "databinding1": "./"
      }'
    ></script>
    <script>
      sap.ui.getCore().attachInit(function () {
        new sap.ui.core.ComponentContainer({
          "name":"databinding1"
        }).placeAt("content");
      });
    </script>
  </head>
  <body class="sapUiBody" id="content"></body>
</html>

Error Message in Console: enter image description here

If I remove the controllerName from App.view.xml, then the view loads successfully.

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
mritzi
  • 39
  • 8
  • You have a syntax error in your controller. Replace `sap.ui.core.mvc.Controller` with `sap/ui/core/mvc/Controller` when requiring controllers, as mentioned in https://stackoverflow.com/a/49020578/5846045. – Boghyon Hoffmann Feb 08 '21 at 10:19

2 Answers2

2

You try to use the sdk provided by the sapui5 page, this is a request to another server which is not within the same system. The Error is a typical behaviour of the browser to prevent cross site scripting. You can fix your issue with the sapui5 proxy resource servlet for your sap resource (also works for odata, but this is another servlet => simple proxy servlet).

You should setup a resource servlet. Within your application you have to distinguish if you should use the proxy or not, check out the link:

https://sapui5.hana.ondemand.com/#docs/guide/2d3f5fb63a2f4090942375df80abc39f.html

Remote path for sapui5 sdk stored within sap:

http://<yourdomain>/sap/public/bc/ui5_ui5/resources/sap-ui-core.js

Make sure to activate the repository in TA: SICF default_host>public>bc>ui5_ui5 right click and press activate

Beka
  • 343
  • 2
  • 8
0

For those who actually want to handle cross-origin resources while developing: Web IDE offers a proxy mechanism which we can leverage by adding destination files:


For the question author:

[...] cannot load https://sapui5.hana.ondemand.com/resources/sap.ui.core.mvc.Controller.

That error message shows that the browser tried to load a file named sap.ui.core.mvc.Controller.js which doesn't exist (404). The main cause is not the same-origin policy here.

In the App.controller.js file, you must have defined the dependencies with an invalid syntax. Instead of dots (.), use slashes (/) in between as the API sap.ui.define awaits an array of module paths (not module names).

sap.ui.define([
  "sap/ui/core/mvc/Controller" // instead of "sap.ui.core.mvc.Controller"
], function(Controller) {
  ...
});
Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170