Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
        
        <title>Mobile App with data-bound List</title>
        
        <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons" 
                data-sap-ui-xx-bindingSyntax="complex"
                data-sap-ui-theme="sap_bluecrystal"></script>
        <!-- load the mobile lib "sap.m", the layout lib and the "sap_bluecrystal" theme -->
        
        
        <script type="text/javascript">
            
            var upperRow = new sap.ui.commons.layout.MatrixLayoutRow().setHeight("50px");
​
            var cellUL = new sap.ui.commons.layout.MatrixLayoutCell();
            cellUL.addContent(new sap.m.Label({ text:"Upper Left"}));
            upperRow.addCell(cellUL); 
          
            var cellUR = new sap.ui.commons.layout.MatrixLayoutCell();
            cellUR.addContent(new sap.m.Label({ text:"Upper Right"}));
            upperRow.addCell(cellUR); 
          
            var lowerRow = new sap.ui.commons.layout.MatrixLayoutRow().setHeight("50px");
​
            var cellLL = new sap.ui.commons.layout.MatrixLayoutCell();
            cellLL.addContent(new sap.m.Label({ text:"Lower Left"}));
            lowerRow.addCell(cellLL); 
          
            var cellLR = new sap.ui.commons.layout.MatrixLayoutCell();
            cellLR.addContent(new sap.m.Label({ text:"Lower Right"}));
            lowerRow.addCell(cellLR); 
          
          
             var matrix = new sap.ui.commons.layout.MatrixLayout();
             matrix.addRow(upperRow); 
             matrix.addRow(lowerRow); 
          
            // create the page holding the List
            var page1 = new sap.m.Page({
                content : matrix
            });
​
            
            // create a mobile App holding the pages and place the App into the HTML document
            var app = new sap.m.App({
                pages: [page1]
            });
            app.setHeight("500px");
            app.placeAt("content");
            
            // set the model to the App; it will be propagated to the children
            app.setModel(model);
            
        </script>
        
    </head>
    <body id="content" class="sapUiBody">
    </body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
bnc-rainmanpro
0viewers