Skip to Content
avatar image
Former Member

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

***********************************************************************
**************************** 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

Add comment
10|10000 characters needed characters exceeded

  • 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.

  • Get RSS Feed

4 Answers

  • Apr 18 at 08:27 PM
    "antartstickwebsite.views.App", where is this view?
    Add comment
    10|10000 characters needed characters exceeded

  • Apr 22 at 05:11 PM

    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"/>
    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Apr 20 at 11:23 AM

    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);
        }
    });
    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Apr 23 at 12:03 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      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); 
          }
      });