SAPUI5 Using XML-File as View with "data-sap-ui-resourceroots"?

xml eclipse view sapui5

11,231

SAPUI5 is searching for resources like views, controllers or other classes by their full names.

It is assuming that every namespace part is a folder and the class/view name is the filename. If its a view the filename has to be xxx.view.xml. if its a controller the filename has to be xxx.controller.js.

The root folder where it starts its search is by default the folder of the sap-ui-core.js.

You can change the root folder by defining a data-sap-ui-resourceroots mapping. Its a javascript object that maps a namespace to a path (relative to the index.html).

With the following bootstrap tag company.myProject.view.View1 is searched for at /resources/company/myProject/view/View1.view.xml:

<script id="sap-ui-bootstrap" 
    src="resources/sap-ui-core.js"></script>

With this bootstrap tag company.myProject.View1 is searched for at /view/View1.view.xml:

<script id="sap-ui-bootstrap" 
    src="resources/sap-ui-core.js"
    data-sap-ui-resourceroots='{
      "company.myProject": "./" }'></script>

And with this bootstrap tag company.myProject.View1 is searched for at ddd/myProject/view/View1.view.xml:

<script id="sap-ui-bootstrap" 
    src="resources/sap-ui-core.js"
    data-sap-ui-resourceroots='{
      "company": "./ddd" }'></script>

Edit: Please beware that you have to use " inside of the map. ' will not work.

Edit: Clarification of folder structure

I would recommend that you put everything in a project namespace. Use this folder structure:

WebContent
- controller
  - NewView.controller.js
- view
  - NewView.view.xml
- index.html

Rename View folder to view (namespaces are camelCase by convention).
Rename newView.view.xml to NewView.view.xml (Classes/Views are PascalCase by convention)
Use data-sap-ui-resourceroots='{ "myproject": "./" }'.
Change your Controller name to myproject.controller.NewView: Controller.extend("myproject.controller.NewView", {...}); or sap.ui.controller("myproject.controller.NewView",{...});.
In the xmlview use controllerName="myproject.controller.NewView".
Instantiate the view with sap.ui.xmlview({ viewName: "myproject.view.NewView"}).placeAt("content");.

With that you don't have to add a mapping for every subfolder in your project.

11,231

Author by

Dyrdek

Junior SAP Developer

Updated on June 09, 2022

Comments

Dyrdek almost 2 years

I'm doing the SAPUI5 Walkthrough and stuck at step 4. (Walkthrough Step 4)

I'm working with Eclipse and don't know how to change this code-line so it works for my project and is going to find my view.

         data-sap-ui-resourceroots='{
        "sap.ui.demo.wt": "./"
     }'

I need to know what to insert for "sap.ui.demo.wt" when using an Eclipse project.

Thanks for any hints :)

EDIT:

Now I got a working page with a button which triggers a pop-up.

Folder structure:

SAPUI5_Test
 - WebContent
    - controller
       -> NewView.controller.js
    - view
       -> NewView.view.xml
    - index.html

index.html:

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="UTF-8">
    <title>SAPUI5 Walkthrough</title>
    <script
        id="sap-ui-bootstrap"
        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-libs="sap.m"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-preload="async"
        data-sap-ui-resourceroots='{
            "SAPUI5_Test": "./"
        }'>
    </script>
    <script>
        sap.ui.getCore().attachInit(function () {
            sap.ui.xmlview({
                viewName: "SAPUI5_Test.view.NewView"
            }).placeAt("content");
        });
    </script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

NewView.view.xml:

<mvc:View
controllerName="SAPUI5_Test.controller.NewView"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc">
<Button 
text="Say hello"
press="onShowHello"/>
</mvc:View>

NewView.controller.js

sap.ui.controller("SAPUI5_Test.controller.NewView", {
    onShowHello : function() {
        alert("Hello SAPUI5_Controller");
    }
});

So thanks for the help! And maybe this could help someone in the future :)

Dyrdek about 8 years

Ok thanks :) So I created a view in MyProject -> WebContent Can you give me an example how to set the resourceroots for that?
schnoedel about 8 years

The path you supply as resourceroot is relative to the index.html which is located inside the WebContent folder. So the WebContent folder is irrelevant for the mapping. Inside your WebContent folder you should find a myproject folder which contains your myproject.View1. Then this is the mapping to use: data-sap-ui-resourceroots='{"myproject":"./myproject"}'
Dyrdek about 8 years

Thanks schnoedel ! I think it worked. Just to sum it up. My project structure looks like this now "MyProject -> WebContent -> View -> newView.view.xml". "View" is a folder containing my view xml-file. I know added like you said schnoedel. data-sap-ui-resourceroots='{ "View": "./View" }' and below [...] sap.ui.xmlview({ viewName: "View.newView"}).placeAt("content"); [...] Made my day schnoedel ;)
schnoedel about 8 years

Great! I would recommend to use a project namespace though. Added it to my answer.
Dyrdek about 8 years

Ok thanks :) I changed everything like you said. I just have one problem that I had before. When I enter a "controllerName" into my XML View it doesn't show my button anymore. Any ideas? Controller: sap.ui.define([ "sap/ui/mvc/Controller" ], function (Controller) { "use strict"; return Controller.extend("SAPUI5_Test.controller.NewView", { }); }); XML: <mvc:View controllerName="SAPUI5_Test.controller.NewView" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"> <Button text="Say hello" press="onShowHello"/> </mvc:View>
Dyrdek about 8 years

Ok I solved it. Little mistake by me :) I'm going to edit my post above so if someone got the same problem.
Boghyon Hoffmann over 3 years

Most probably the view couldn't be found because of the wrong folder structure. webapp should contain only application resources an not the entire framework. For more information, see Folder Structure: Where to Put Your Files.