Extending SAPUI5 Applications

0
votes

I tried to acquaint myself with extending SAPUI5 Applications. To do this I used the splitapp in the folder test-resources/sap/m/demokit

As specified in the Developer Guide - Extending SAPUI5 Applications you only have to create the Component.js for a the custom application project. Now there are 2 questions:

  1. How can you bootstrap the extended Application without having a index.html?
  2. How do you solve relative path-problems (e.g inside the function createContent)?

My current solution is to copy the index.html from the splitapp, paste it into splittapp-ext and modify all the paths...but this solution doesn't seems to be very modular:

original index.html (splitapp):

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

    <title>'sap.m.SplitApp' Demo Application</title>

    <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"
        }' >
    </script>

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script>    
        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');
    </script>

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

modified index.html (splitapp-ext):

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

    <title>'sap.m.SplitApp' Demo Application</title>

    <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"
        }' >
    </script>

    <link rel="stylesheet" type="text/css" href="../splitapp/css/style.css">

    <script>    
        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');
    </script>

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

For the 2. question I do not have a modular solution. The anonymous function createContent inside Component.js of the splitapp defines a relative path to the JSON-models. The models cant't be found inside the splitapp-ext Application. The only way I found is to modify the Component.js:

createContent : function () {
    // create root view
    var oView = sap.ui.view({
        id : "app",
        viewName : "view.App",
        type : "JS",
        viewData : { component : this }
    });

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

Is there a better way to extend a SAPUI5 Application?

2
sapui5extending

2 Answers

0
votes

You can try the extension of an app using SAP Web IDE . You can find the trial links on SAP SCN . The whole idea of Component based approach is to enable the applications to be launched in a broader context such as a Fiori Launchpad . If you want to test it locally, you might consider setting up a local launchpad sandbo from this link: Set up local Fiori Launchpad.

0
votes

It is possible to run a local test version of launchpad (with limitations).

first three search results

detailed wiki

As for the second question, remember that control is looking for a model matching the bind path inside on itself, later on parents, and bubbling up to the core. So, setting a model to one view is not best option. You can set model directly to the Component.js as whole application have access there, or just for testing, to the core - sap.ui.getCore().setModel(myModel). This is an example from ui documentation of proper definition of Component.js with assigned models (for version 1.30, for previous ones you probably won't use 'define'):

sap.ui.define([
   "sap/ui/core/UIComponent",
   "sap/ui/model/json/JSONModel",
   "sap/ui/model/resource/ResourceModel"
], function (UIComponent, JSONModel, ResourceModel) {
   "use strict";
   return UIComponent.extend("sap.ui.demo.wt.Component", {
      metadata : {
            manifest: "json"
      },
      init : function () {
         // call the init function of the parent
         UIComponent.prototype.init.apply(this, arguments);
         // set data model
         var oData = {
            recipient : {
               name : "World"
            }
         };
         var oModel = new JSONModel(oData);
         this.setModel(oModel);

         // set i18n model
         var i18nModel = new ResourceModel({
            bundleName : "sap.ui.demo.wt.i18n.i18n"
         });
         this.setModel(i18nModel, "i18n");
      }
   });
});

Similar sample documented in openui5 you can find here:

component and model sample