Skip to Content
author's profile photo Sunil Kumar Maurya
1
Sunil Kumar Maurya
Aug 19, 2015 at 08:33 AM

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

17 Views

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