SAP UI5 Boilerplate with XML View for JSFiddle or Other Code Playgrounds

UI5

Here is a super simple SAP UI5 boilerplate in JSFiddle with an XML View. You can use it to try things out without the entanglement of a complete SAP UI5 application. Furthermore, it is a great way to demonstrate problems or bugs you stumbled upon to someone else.

Just fork the boilerplate and recreate the problem or bug in the forked boilerplate. Then share the link to your created mini-application. Now it is possible for anyone to view and debug your enhanced boilerplate.

Besides JSFiddle you can use of course another code playground. Just copy the HTML code snippet into the HTML block and the JavaScript code snippet in the JavaScript block of the respective code playground. Then run the code playground. Great alternatives to JSFiddle are JSBin, CodePen, or Plunker.

SAP UI5 Boilerplate HTML

<!-- SAP UI5 bootstrap -->
<script 
    id="sap-ui-bootstrap" 
    type="text/javascript" 
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
    data-sap-ui-libs="sap.m" 
    data-sap-ui-theme="sap_belize">
</script>

<!-- create XML view -->
<script 
    id="my-xml-view" 
    type="text/xmldata">

    <mvc:View 
        controllerName="myController"
        xmlns="sap.m"
        xmlns:mvc="sap.ui.core.mvc">
        <App>
            <Page title="SAP UI5 Boilerplate XML View - https://inui.io/ - All About SAP UI5">
                <content>
	            <Link
                    class="sapUiTinyMarginTop sapUiTinyMarginBegin"
                    text="Visit inui.io"
                    href="https://inui.io/"
                    target="blank">
           	    </Link>
                </content>
            </Page>
        </App>
    </mvc:View>

</script>

<!-- SAP UI5 bootstrap -->
<body class="sapUiBody">

    <div id="content"></div>

</body>

SAP UI5 Boilerplate JavaScript

// create view's controller
sap.ui.controller("myController", {
  
    onInit: function() {
    
    }
  
});


// place the view in the HTML's content area
sap.ui.view({

    viewContent: jQuery('#my-xml-view').html(),
    type: sap.ui.core.mvc.ViewType.XML

}).placeAt("content");
No Comments

Get A COMPLETE SAP Modules Overview infographic (free)

Plus, receive for free SAP tips & insights and all future infographics that are only shared with the private newsletter subscribers. 

Complete SAP modules/components overview infographic.
Categories
Latest Poll
Essential Ressources

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu