title: Extending SAPUI5 Applications
body: <p>I tried to acquaint myself with extending SAPUI5 Applications. To do this I used the <strong>splitapp</strong> in the folder <code>test-resources/sap/m/demokit</code></p>
  
  <p>As specified in the Developer Guide - Extending SAPUI5 Applications you only have to create the <code>Component.js</code> for a the custom application project. Now there are 2 questions:</p>
  
  <ol>
  <li>How can you bootstrap the extended Application without having a index.html?</li>
  <li>How do you solve relative path-problems (e.g inside the function <code>createContent</code>)?</li>
  </ol>
  
  <p>My current solution is to copy the <code>index.html</code> from the <strong>splitapp</strong>, paste it into <strong>splittapp-ext</strong> and modify all the paths...but this solution doesn't seems to be very modular:</p>
  
  <p>original index.html (splitapp):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv='X-UA-Compatible' content='IE=edge' /&gt;
      &lt;meta charset="UTF-8"&gt;
  
      &lt;title&gt;'sap.m.SplitApp' Demo Application&lt;/title&gt;
  
      &lt;script id='sap-ui-bootstrap' type='text/javascript'
          src='../lib/openui5/resources/sap-ui-core.js'
              data-sap-ui-theme='sap_bluecrystal'
              data-sap-ui-libs='sap.m'
              data-sap-ui-resourceroots='{
                  "res": "./",
                  "sap.ui.demo.splitapp" : "./",
                  "view" : "./view",
                  "model" : "./model",
                  "util" : "./util"
          }' &gt;
      &lt;/script&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
  
      &lt;script&gt;    
          new sap.m.Shell("Shell", {
              title : "sap.m splitapp",
              showLogout : false,
              app : new sap.ui.core.ComponentContainer({
                  name : 'sap.ui.demo.splitapp'
              }),
              homeIcon : {
                  'phone' : 'img/57_iPhone_Desktop_Launch.png',
                  'phone@2' : 'img/114_iPhone-Retina_Web_Clip.png',
                  'tablet' : 'img/72_iPad_Desktop_Launch.png',
                  'tablet@2' : 'img/144_iPad_Retina_Web_Clip.png',
                  'favicon' : 'img/favicon.ico',
                  'precomposed': false
              }
          }).placeAt('content');
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body class='sapUiBody' id="content"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>modified index.html (splitapp-ext):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv='X-UA-Compatible' content='IE=edge' /&gt;
      &lt;meta charset="UTF-8"&gt;
  
      &lt;title&gt;'sap.m.SplitApp' Demo Application&lt;/title&gt;
  
      &lt;script id='sap-ui-bootstrap' type='text/javascript'
          src='../lib/openui5/resources/sap-ui-core.js'
              data-sap-ui-theme='sap_bluecrystal'
              data-sap-ui-libs='sap.m'
              data-sap-ui-resourceroots='{
                  "res": "../splitapp",
                  "sap.ui.demo.splitapp" : "../splitapp",
                  "view" : "../splitapp/view",
                  "model" : "../splitapp/model",
                  "util" : "../splitapp/util"
          }' &gt;
      &lt;/script&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="../splitapp/css/style.css"&gt;
  
      &lt;script&gt;    
          new sap.m.Shell("Shell", {
              title : "sap.m splitapp",
              showLogout : false,
              app : new sap.ui.core.ComponentContainer({
                  name : 'sap.ui.demo.splitapp'
              }),
              homeIcon : {
                  'phone' : 'img/57_iPhone_Desktop_Launch.png',
                  'phone@2' : 'img/114_iPhone-Retina_Web_Clip.png',
                  'tablet' : 'img/72_iPad_Desktop_Launch.png',
                  'tablet@2' : 'img/144_iPad_Retina_Web_Clip.png',
                  'favicon' : 'img/favicon.ico',
                  'precomposed': false
              }
          }).placeAt('content');
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body class='sapUiBody' id="content"&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>For the 2. question I do not have a modular solution.
  The anonymous function <code>createContent</code> inside <code>Component.js</code> of the <strong>splitapp</strong> defines a relative path to the JSON-models. The models cant't be found inside the <strong>splitapp-ext</strong> Application. The only way I found is to modify the <code>Component.js</code>:</p>
  
  <pre><code>createContent : function () {
      // create root view
      var oView = sap.ui.view({
          id : "app",
          viewName : "view.App",
          type : "JS",
          viewData : { component : this }
      });
  
      // --&gt; WORKAROUND: add the module path to the JSON-paths
      var rootPath = jQuery.sap.getModulePath("sap.ui.demo.splitapp");
  
      // set navigation model
      // load the global data model
      var oJSONDataModel = new sap.ui.model.json.JSONModel(rootPath + "/model/data.json");
      oView.setModel(oJSONDataModel);
  
      // load the global image source model
      var oImgModel = new sap.ui.model.json.JSONModel(rootPath + "/model/img.json");
      oView.setModel(oImgModel, "img");
  
      // done
      return oView;
  }
  </code></pre>
  
  <p>Is there a better way to extend a SAPUI5 Application?</p>