How use the manifest.json to load xml views in SAPUI5 application?

[Former Member]

***********************************************************************
**************************** Component.js *****************************                                                   
***********************************************************************
jQuery.sap.declare("antartstickwebsite.Component");

sap.ui.core.UIComponent.extend("antartstickwebsite.Component", {

        metadata: 
        {
            manifest : "json"
        },
        
        init: function() {
            UIComponent.prototype.init.apply(this, arguments);
            
            var oModel = new JSONModel("app/model/homeTileContainerData.json");
            oModel.setDefaultBindingMode("OneWay");
            
            this.setModel(oModel, "homeTileContainerData");
            
            var i18nModel = new ResourceModel({bundleName : "antartstickwebsite.i18n.i18n_en"});
            i18nModel.setDefaultBindingMode("OneWay");
            
            this.setModel(i18nModel, "i18n")
            //this.getRouter().initialize();
        }
        
});

***********************************************************************
***************************** manifest.js *****************************                                                   
***********************************************************************
{
    "_version": "1.1.0",
    "sap.app": 
    {
        "_version": "1.1.0",
        "id": "antartstickwebsite",
        "type": "application",
        "i18n": "app/i18n/i18n_en.properties",
        "applicationVersion": 
        {
            "version": "1.0.0"
        },
        "title": "{{antartstick}}",
        "description": "{{antartstickwebsite}}",
        "ach": "CA-UI5-DOC",
        "resources" : "resources.json",
        "dataSources" :
        {
            "homeTileContainerData" :
            {
                "uri" : "app/model/homeTileContainerData.json",
                "type" : "JSON"
            }
        }
    },
    "sap.ui": 
    {
        "_version": "1.1.0",
        "technology": "UI5",
        "deviceTypes": 
        {
            "desktop": true,
            "tablet": true,
            "phone": true
        },
        "supportedThemes": 
        [
            "sap_bluecrystal"
        ]
    },
    "sap.ui5": 
    {
        "_version" : "1.1.0",
        "rootView" : 
        {
            "viewName" : "antartstickwebsite.views.App",
            "type" : "XML"
        },
        "dependencies" : 
        {
            "minUI5Version" : "1.30.0",
            "libs": 
            {
                "sap.ui.core" : {},
                "sap.m" : {},
                "sap.ui.layout" : {},
                "sap.ui.unified" : {},
                "sap.ui.core.mvc" : {}
            }
        },
        "contentDensities" : 
        {
            "compact" : false,
            "cozy" : true
        },
        "config" : 
        {
            "modelLocal" : "app/model/config.json"
        },
        "models" : 
        {
            "i18n" : 
            {
                "type" : "sap.ui.model.resource.ResourceModel",
                "settings" : 
                {
                    "bundleName" : "antartstickwebsite.app.i18n.i18n_en"
                }
            },
            "homeTileContainerData" :
            {
                "type" : "sap.ui.model.json.JSONModel",
                "dataSource" : "homeTileContainerData",
                "preload" : true
            }
        },
        "routing" : 
        {
            "config" : 
            {
                "routerClass" : "sap.m.routing.Router",
                "viewType" : "XML",
                "viewPath" : "antartstickwebsite.views",
                "controlId" : "app",
                "controlAggregation" : "pages",
                "transition" : "slide",
                "bypassed" :
                {
                    "target" : "home"
                }
            },
            "routes" : 
            [
                {
                    "pattern" : "",
                    "name" : "home",
                    "target" : "home"
                },
                {
                    "pattern" : "aboutme",
                    "name" : "aboutme",
                    "target" : "aboutme"
                }
            ],
            "targets" : 
            {
                "home" : 
                {
                    "viewName" : "Home",
                    "viewLevel" : 1
                },
                "aboutme" : 
                {
                    "viewName" : "AboutMe",
                    "viewLevel" : 2
                }
            }
        },
        "resources" : 
        {
            "css" : 
            [
                {
                    "uri" : "app/css/style.css"
                }
            ]
        }
    }
}

***********************************************************************
**************************** Home.view.xml ****************************                                                   
***********************************************************************
<?xml version="1.0" encoding="UTF-8" ?>
  
<mvc:View 
    controllerName="antartstickwebsite.controllers.Home" 
    xmlns:core="sap.ui.core"  
    xmlns="sap.m" 
    xmlns:l="sap.ui.layout"
    xmlns:u="sap.ui.unified"
    xmlns:mvc="sap.ui.core.mvc"
    class="viewPadding"> 
    
    <u:Shell
    id="homeShell">
    
    <u:headItems>
                
        <u:ShellHeadItem
            tooltip="Menu"
            icon="sap-icon://menu2"
            press="handlePressMenu" />
            
        <u:ShellHeadItem
            tooltip="Home"
            icon="sap-icon://home"
            visible="false"
            press="handlePressHome" />
            
    </u:headItems>
    
    <u:paneContent
        id="homeMenuPaneContent">
        
        <List
        id="homeMenuList">
        
            <ActionListItem xmlns="sap.m" text="About me" type="Navigation" press="handleAboutMePress" />
            <ActionListItem xmlns="sap.m" text="Projects" type="Navigation" press="handleProjectsPress" />
            <ActionListItem xmlns="sap.m" text="Contact" type="Navigation" press="handleContactPress" />
        
        </List>
        
    </u:paneContent>
    
    <TileContainer
        id="homeTileContainer"
        tileDelete="handleTileDelete"
        tiles="{/TileCollection}">
                
        <tiles id="homeTiles">
                
            <CustomTile
                id="homeCustomTile"
                class="sapMTile">
                    
                <content id="homeContent">
                        
                    <HBox id="homeHBox">            
                                
                        <Image id ="homeImageTile" src="{src}" press="handlePressImage"/>
                                    
                    </HBox>
                        
                </content>
                    
            </CustomTile>
                
        </tiles>
                        
    </TileContainer>
                
</u:Shell>
            
</mvc:View>

***********************************************************************
************************* Home.controllers.js *************************                                                   
***********************************************************************
sap.ui.controller("antartstickwebsite.controllers.Home", {

    onInit : function (oEvent) {
        var oHomeTileContainerModel = new sap.ui.model.json.JSONModel("app/model/homeTileContainerData.json");
        this.getView().setModel(oHomeTileContainerModel);
    },
    
    handlePressMenu : function (oEvent) {
        var oItem = oEvent.getSource();
        var oHomeShell = this.getView().byId("homeShell");
        var bState = oHomeShell.getShowPane();
        oHomeShell.setShowPane(!bState);
        oItem.setShowMarker(!bState);
        oItem.setSelected(!bState);
    },

    handleAboutMePress : function (oEvent) {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("AboutMe", null);
    }
});

***********************************************************************
********************** homeTileContainerData.json *********************                                                   
***********************************************************************
{
    "TileCollection" : [
        {
            "src" : "app/img/antique_button.jpg"
        },
        {
            "src" :"app/img/artistic_button.jpg"
        },
        {
            "src" : "app/img/joystick_button.jpg"
        }
    ]
}

***********************************************************************
***************************** config.json *****************************                                                   
***********************************************************************
{
    "userLang": "en"
}

***********************************************************************
************************** AboutMe.views.xml **************************                                                   
***********************************************************************

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">

        <title>MyMaterial</title>

        <script
            id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m, sap.ui.layout"
            data-sap-ui-xx-bindingSyntax="complex"
            data-sap-ui-resourceroots='{
                "sap.ui.demo.myFiori": "./"
            }' >
        </script>

        <script>
            new sap.m.Shell({
                app : new sap.ui.core.ComponentContainer({
                    name : "sap.ui.demo.myFiori" }) 
            }).placeAt("content");
        </script>

    </head>
    <body class="sapUiBody" id="content">
    </body>
</html>

***********************************************************************
*********************** AboutMe.controllers.js ************************                                                   
***********************************************************************
sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function(Controller) {
    "use strict";
    return Controller.extend("antartstickwebsite.controllers.AboutMe", {
        onInit: function () {
            var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
            oRouter.getRoute("aboutMe").attachMatched(this._onRouteMatched, this);
        },
        _onRouteMatched : function (oEvent) {
            var oArgs, oView;
            oArgs = oEvent.getParameter("arguments");
            oView = this.getView();
            oView.bindElement({
                path : "/Views(" + oArgs.viewId + ")",
                events : {
                    dataRequested: function () {
                        oView.setBusy(true);
                    },
                    dataReceived: function () {
                        oView.setBusy(false);
                    }
                }
            });
        }
    });
});

Hi,

It's the first time I need use the manifest.json to load xml views in SAPUI5 application.

Perhaps, someone can help me regarding my code.

Thanks in advance.

MEHEUST Ewen

[saurabh_vakil]

Jun is absolutely spot on - you need to have an App.view.xml with an App control with the id app declared within it (as you have configured it in the rootView property in manifest.json).

[Former Member]

Hi Saurabh,

Thank you for your response.

I know I need to have an App.view.xml and App.controllers.js in my application. I don't put this part of code here, because I know my issue isn't cause by App code. I add this part of code just below.

Ewen.

[former_member239103]

Routing and Navigation can be used to navigate to XML views with the registered routes in "manifest.json".

See wolkthrough section Step 31. - Step 33. of SAPUI SDK.

[Former Member]

Hi Miklos,

I know routing and navigation can be use to navigate to XML views with the registered in "manifest.json". Tha'ts why I used the manifest.json. The problem it's in my case it doesn't work. Since I use the manifest.json, I can't see my Home view data.

Have you an idea where could my problem come from, regarding my code above ?

Thanks in advance for your response.

Ewen.

[former_member239103]

I assume you initialize the router in Component.js and routes registered in manifest.json and the target of the route points to a valid view name. Views are placed in webapp/view, and the view name follows the "Myview.view.xml" pattern. In your example you use App.views.xml which is not correct. Then call the navTo function as bellow.

sap.ui.controller("antartstickwebsite.controllers.App", {
    goTo : function (routeTemplate) {
	var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
	oRouter.navTo(routeTemplate); 
    }
});

[junwu]

when you ask question, why not put the error msg here? and you don't even mention what problem you have now.

<App id="app"><mvc:XMLView viewName="antartstickwebsite.views.Home" id="Home"/></App>

try removing the

<mvc:XMLView viewName="antartstickwebsite.views.Home" id="Home"/>

[Former Member]

Hi Jun,

I add this view with her controller in attachement.

Thanks you for your help.

Ewen.

***********************************************************************
**************************** App.views.xml ****************************                                                   
***********************************************************************



<?xml version="1.0" encoding="UTF-8" ?>  

<core:View 
    controllerName="antartstickwebsite.controllers.App"
    xmlns:core="sap.ui.core" 
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc" 
    displayBlock="true">
    
    <App id="app">
    
        <mvc:XMLView viewName="antartstickwebsite.views.Home" id="Home"/>
    
    </App>
    
</core:View>


***********************************************************************
************************* App.controllers.js **************************                                                   
***********************************************************************

sap.ui.controller("antartstickwebsite.controllers.App", {


    to : function (pageId, context) {        
        var app = this.getView().app;
    },
    back : function (pageId) {
        this.getView().app.backToPage(pageId);
    }
});

[former_member340030]

Hi ..

Why did you put this line of code in App.view.xml:

<mvc:XMLView viewName="antartstickwebsite.views.Home" id="Home"/>

Just Remove this line <App id="app"></App> is only requires which will act as containers to your views (Home.view.xml). If You could see you declare App.view.xml as your root view and mention the controlaggregation as pages and blank hash route as Home.view.xml .. This all together means you App.view.xml with App Container will make Home.view.xml as the first view .. So nee to mention XMLView in App.view.xml

Let me know if you still have doubts in this ..

Thanks

Viplove

[Former Member]

Hi Viplove,

I put my main xml view (Home.views.xml) in my App.view.xml, like we teach me. Before, the data of my Home.views.xml were visible. After, I need to load other xml views from my Home.views.xml. That's why I change my code in Component.js and use the manifest.json. Since, the data of my Home.views.xml aren't loaded. If I replace the App.views.xml by the Home.views.xml as the first view in the manifest.json, my data will appear again?

Thanks for your help.

Ewen.

[former_member340030]

Just remove that line of code which i mention in my previous comment from the App.view.xml..

thanks

Viplove

[junwu]

"antartstickwebsite.views.App", where is this view?