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>SAPUI5 Testing</title>
    <script id="sap-ui-bootstrap"
        src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-libs="sap.m,sap.ui.commons">
    </script>
    <script>
        // Matrix + one row        
        var vma = new sap.ui.commons.layout.MatrixLayout({
          layoutFixed:false
        });
        for (var i=0; i<10; i++) {
          if (i == 0) {
            var oCell1 = new sap.ui.commons.layout.MatrixLayoutCell();
            oCell1.addContent(new sap.ui.commons.TextField({
              value : "TextField",
              width : "100%"
            }));
            
            var oCell2 = new sap.ui.commons.layout.MatrixLayoutCell({
              // this is the solution for your desired layout
              rowSpan : 10,
              height : "100%"
            });
            oCell2.addContent(new sap.ui.commons.TextArea({
              width : "100px",
              height : "100%",
              value : "Text Area"
            }));
            
            vma.createRow(oCell1, oCell2);
                              
          } else {
            vma.createRow(new sap.ui.commons.TextField({
              value : "TextField",
              width : "100%"
            }));
          }
        }
        
        vma.placeAt("uiArea");
     </script>
</head>
<body class="sapUiBody">
    <div id="uiArea"></div>
</body>
</html>
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers