cancel
Showing results for 
Search instead for 
Did you mean: 

How to add control and other entity in view and see at runtime

sunil1101
Advisor
Advisor
0 Kudos

Hi

I have created very simple SAPUI5 application project, which creates 3 main files

CreateNewSolution.Controller.js

CreatenewSolution.view.js

index.html

html code has generated by default

<!DOCTYPE HTML>

<html>

  <head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

  <script src="resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  data-sap-ui-libs="sap.ui.commons,sap.ui.ux3, sap.ui.table,sap.m"

  data-sap-ui-theme="sap_bluecrystal">

  </script>

  <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

>

  <script>

  sap.ui.localResources("createnewsolution");

  var view = sap.ui.view({id:"idCreateNewSolution1", viewName:"createnewsolution.CreateNewSolution", type:sap.ui.core.mvc.ViewType.JS});

  view.placeAt("content");

  </script>

  </head>

  <body class="sapUiBody" role="application">

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

  </body>

</html>

and have added few text type fields in "createnewSolution.view"

createContent : function(oController) {

  var matlayout = sap.ui.sap.ui.commons.layout.MatrixLayout({

  id : 'matrix1;

  layoutFixed:false

  });

  var oInput1 = new sap.ui.commons.TextField('input1');

  oInput1.setTooltip("This is a tooltip");

  var oInput2 = new sap.ui.commons.TextField('input2');

  oInput2.setTooltip("This is a tooltip");

  var oInput3 = new sap.ui.commons.TextField('input3');

  oInput3.setTooltip("This is a tooltip");

  var oInput4 = new sap.ui.commons.TextField('input4');

  oInput4.setTooltip("This is a tooltip");

  var oInput5 = new sap.ui.commons.TextField('input5');

  oInput5.setTooltip("This is a tooltip");

  var aControls = [];

  var oButton = new sap.ui.commons.Button({

  id : this.createId("MyPush"),

  text : "Click Here",

  });

  //oButton.attachPress(oController.doIt);

  matlayout.createRow(oInput1);

  matlayout.createRow(oInput2);

  matlayout.createRow(oInput3);

  matlayout.createRow(oInput4);

  matlayout.createRow(oInput5);

  matlayout.createRow(oButton);

  }

When I deploy the the project I cant see anything on UI except blue blank screen.

I debug it in crome browser but getting below error

"Uncaught TypeError: Cannot read property 'ui' of undefined "

Please help me to understand how view work in html, here what is wrong.

Regards

Sunil

Accepted Solutions (0)

Answers (2)

Answers (2)

Former Member
0 Kudos

adding to robin comments, I see a typo in your code . please rectify it

var matlayout = new sap.ui.commons.layout.MatrixLayout({

  id : 'matrix1;

  layoutFixed:false

  });

Qualiture
Active Contributor
0 Kudos

As the bootstrap script implies, it is looking for the SAPUI5 libs in a relative path (resources/sap-ui-core.js).

You can either check if the SAPUI5 libs are available in that path on your web server, or, alternatively for testing purposes, use the full absolute path instead: https://sapui5.hana.ondemand.com/resources/sap-ui-core.js