UI5
No Comments

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

Screenshot of jsfiddle.

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");

Most Recent Articles

Will SAP UI5 replace the SAP Web UI?

SAP Full Forms

More Similar Articles

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