title: SAPUI5 root view
body: <p>I have a problem with rootview. I want create 2 views (login form and home with navigation list). </p>
  
  <p>this is my home view:</p>
  
  <p><a href="https://i.stack.imgur.com/kfxQq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kfxQq.png" alt="Home View"></a></p>
  
  <p>I want when I clicked menu in left (root item 1, 2, etc), show content form (just content and still showing menu). I success when root view set to home view but in login view have menu component (navigation list). I want set root view to Home when i load home view, and set root view to other (exclude Home view) when i load login view.</p>
  
  <p>Component.js :</p>
  
  <pre><code>sap.ui.define([
      "sap/ui/core/UIComponent"
  ], function (UIComponent) {
      "use strict";
  
      return UIComponent.extend("sap.ui.demo.Component", {
  
          metadata: {
              manifest: "json"
          }, 
  
          createContent : function() {
              // create root view
              var oView = sap.ui.view({
                  id : "mainContents",
                  viewName : "sap.ui.demo.template.App",
                  type : "XML", // &lt;-- change this to JSON
                  viewData : {
                      component : this
                  }
              });
  
              // done
              return oView;
          },  
  
          init: function () {
              // call the init function of the parent
              UIComponent.prototype.init.apply(this, arguments);  // calling parent UIComponents
  
              // create the views based on the url/hash
              this.getRouter().initialize();                      // initializing router
  //            this.i18nModel();                                 // set i18n model
          },
  
          i18nModel : function(){
              var i18nModel = new ResourceModel({
                  bundleName: "sap.ui.demo.template.i18n.i18n"
              });
              this.setModel(i18nModel, "i18n");               
          }
  
      });
  
  });
  </code></pre>
  
  <p>manifest.json:</p>
  
  <pre><code>{
    "_version": "1.1.0",
    "sap.app": {
      "_version": "1.1.0",
      "id": "sap.ui.demo.template",
      "type": "application",
      "i18n": "i18n/i18n.properties",
      "title": "{{appTitle}}",
      "description": "{{appDescription}}",
      "applicationVersion": {
        "version": "1.0.0"
      }
    },
    "sap.ui": {
      "_version": "1.1.0",
      "technology": "UI5",
      "deviceTypes": {
        "desktop": true,
        "tablet": true,
        "phone": true
      },
      "supportedThemes": [
        "sap_hcb",
        "sap_bluecrystal",
        "sap_belize"
      ]
    },
    "sap.ui5": {
      "_version": "1.1.0",
      "rootView": 
          {
            "viewName": "sap.ui.demo.template.Home",
            "type": "XML",
            "id": "app"
          }
      ,
      "dependencies" : {
        "minUI5Version": "1.30",
        "libs": {
          "sap.ui.core": {},
          "sap.m": {},
          "sap.tnt": {},
          "sap.ui.layout": {}
        }
      },
      "models": {
        "i18n": {
          "type": "sap.ui.model.resource.ResourceModel",
          "settings": {
            "bundleName": "sap.ui.demo.template.i18n.i18n"
          }
        }
      },
      "routing": {
        "config": {
          "routerClass": "sap.m.routing.Router",
          "controlId": "mainContents",
          "viewType": "XML",
          "controlAggregation": "pages",
          "viewPath": "sap.ui.demo.template",
          "async": true
        },
        "routes": [
          {
            "pattern": "",
            "name": "first",
            "target": "first"
          },
          {
            "pattern": "home",
            "name": "home",
            "target": "second"
          },
          {
            "pattern": "page1",
            "name": "page1",
            "target": "page1"
          },
          {
            "pattern": "login",
            "name": "login",
            "target": "login"
          },
          {
            "pattern": "mainContents",
            "name": "mainContents",
            "target": "mainContents"
          }
        ],
        "targets": {
          "first": {
            "viewName": "Index"
          },
          "second": {
            "viewName": "Home"
          },
          "page1": {
            "viewName": "Page1"
          },
          "login": {
            "viewName": "Index"
          },
          "mainContents": {
            "viewName": "Home"
          }
        }
      }
    }
  }
  </code></pre>
  
  <p>I if set root view to Home :</p>
  
  <p><a href="https://i.stack.imgur.com/HXHIN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HXHIN.png" alt="Login false"></a></p>
  
  <p>I want to this:</p>
  
  <p><a href="https://i.stack.imgur.com/gCcHZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gCcHZ.png" alt="login true"></a></p>
  
  <p>when I set rootview to App, login true but home view false.</p>
  
  <p>App view:</p>
  
  <pre><code>&lt;mvc:View
      xmlns="sap.m"
      xmlns:mvc="sap.ui.core.mvc"
      displayBlock="false"&gt;
  
      &lt;App id="mainContents" class="blueBackground"&gt;
      &lt;/App&gt;
  
  &lt;/mvc:View&gt;
  </code></pre>
  
  <p>How to fix this problem about rootview?</p>
  
  <p>Thanks. Bobby.</p>