Skip to Content
0

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

Apr 18 at 08:20 PM

424

avatar image
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

10 |10000 characters needed characters left 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).

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

0
* Please Login or Register to Answer, Follow or Comment.

4 Answers

Jun Wu Apr 18 at 08:27 PM
0
"antartstickwebsite.views.App", where is this view?
Share
10 |10000 characters needed characters left characters exceeded
Jun Wu Apr 22 at 05:11 PM
0

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"/>
Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Apr 20 at 11:23 AM
0

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);
    }
});
Show 3 Share
10 |10000 characters needed characters left characters exceeded

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

0
Former Member
VIPLOVE KHUSHALANI

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.

0

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

thanks

Viplove

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

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.

Show 2 Share
10 |10000 characters needed characters left characters exceeded
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.

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

0