OpenUI5 Master-Detail Demo

by Yamini Sontakke

HTML

<!-- This demo consumes data from a remote OData-Service -->
<!-- Therefore you must relax browser security settings ("same origin"-policy) -->
<!-- For example, start Chrome from the console with following parameters: -->
<!-- chrome.exe --user-data-dir="C:/YOUR_ALTERNATIVE_CHROME_DIR" --disable-web-security -->
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-test-mobile="true" data-sap-ui-xx-bindingsyntax="complex" data-sap-ui-libs="sap.m"></script>

<!-- This is the initial "app-view" -->
<!-- There's also a JS-version of it at the beginning of the JavaScript section (line 92). -->
<!-- All other views are pure JS-views but one can directly replace them with their XML counterparts. -->
<!-- Just don't forget to embed the XML-structure in a script tag with type "sapui5/xmlview" to prevent JSFiddle -->
<!-- from 'executing' it. To reference the view one has to use the property "viewContent" and not "viewName" (as done with JS-views) -->
<!-- For more info about referencing of different view types in JSFiddle, please, go to line 500 in the JavaScript section -->
<script id="app-view" type="sapui5/xmlview">
    <mvc:View
    xmlns:layout="sap.ui.commons.layout"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    displayBlock="true"> 
        <SplitApp id="splitApp"> 
        </SplitApp>  
   </mvc:View>
</script>

JavaScript

/**
 *  Master-Detail Demo App based on SAPUI5/OpenUI5
 *
 * This app is an example of the Master-Detail view pattern
 * It is based on SAPUI5/OpenUI5.
 *
 * I'm not sure if everything that belongs to a "proper" OpenUI5 (or Fiori-Style?) App can be found here,
 * so I welcome any kind of input that can make this demo a little bit better.
 *
 * Because we're evaluating SAPUI5/OpenUI5 in our company, I think the best thing one
 * can do is to sit down and write an App just by using the minimal amount of "coder's toys".
 * So, no extra libraries, no cool Editors/IDE's.
 *
 * Nothing but JavaScript, the libs & docs from SAP,...and JSFiddle. :)
 *
 * We know SAPUI5 only for a week but the library seems very stable and mature. No wonder, it's from SAP and it exists for some
 * years.
 *
 * I hope this little demo will be of some use to the community.
 *
 * There's also a more complex version that can run under Visual Studio (IIS) or NodeJS: https://github.com/brakmic/OpenUI5_Table_Demo 
 *
 * Regards,
 * Harris Brakmic
 *
 * advarics GmbH, Innsbruck (Austria)
 * Branch Office - Bochum (Germany)
 * http://www.advarics.net
 *
 * Created: 22. Dec. 2014
 * License: OpenSource (MIT), what else? ;)
 */

/**********************************************************************
 * Changelog:
 *
 * 24. Dec. 2014: Added XML-views. Please, go to line 506 for more info.
 *
 **********************************************************************/

/**
 * @name App-Settings
 *
 * All globals should go here
 */
jQuery.sap.declare('advarics.global.Settings');
advarics.global.Settings = {
    //toggle extra logging info
    WITH_LOGGING: true
};
/**
 * @name Logger
 */
jQuery.sap.declare('advarics.util.Logger');
advarics.util.Logger = {
    write: function (msg) {
        var date = new Date();
        if (window.console && advarics.global.Settings.WITH_LOGGING) {
            console.log('[' + date.toLocaleTimeString('en-EN') + '], ' + msg);
        }
    }
};
/**
 * @name Formatter
 *...