cancel
Showing results for 
Search instead for 
Did you mean: 

Panel not visible in UI5 App

Former Member
0 Kudos

Hi,

This might be very ordinary, but I am stuck with it.

I am trying to create a simple login form and for the purpose I am using panel with matrix layout. Now the problem is when I test the application I can't see the Panel.

Following code is in my index .html page

<!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"

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

  </script>

  <script>

  sap.ui.localResources("firstapp");

  var view = sap.ui.view({id:"idV_view1", viewName:"firstapp.view1", type:sap.ui.core.mvc.ViewType.JS});

  view.placeAt("content");

  </script>

  </head>

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

  <div id="content">

  </div>

  </body>

</html>

And this code is in createContent method. In developer guide, under the Panel control tutorial it refers to placeAt method. If we use that for the panel, what happens to the view? Where do we place it?

//Create a panel instance

  var oPanel = new sap.ui.commons.Panel({width:"350px"});

  //Set title for panel

  oPanel.setText("Login");

  //Create a Matrix Layout of 2 columns

  var oMatrix = new sap.ui.commons.layout.MatrixLayout({layoutFixed: true, width:'300px', columns: 2});

  oMatrix.setWidths("100px","200px");

  //Create a simple form within the layout

  var oLabel = new sap.ui.commons.Label({text:"Username"});

  var oInput = new sap.ui.commons.TextField({width:'100%'});

  oLabel.setLabel(oInput);

  oMatrix.createRow(oLabel,oInput);

  oLabel = new sap.ui.commons.Label({text:"Password"});

  oInput = new sap.ui.commons.TextField({width:'100%'});

  oLabel.setLabel(oInput);

  oMatrix.createRow(oLabel, oInput);

  //Add the form to Panel

  oPanel.addContent(oMatrix);

  return oPanel;

Thanks for your help.

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

Attaching screen shot from Chrome debugging

Former Member
0 Kudos

Fixed it myself. Really bad...problem was oLabel.setLabelFor is correct method but I used oLabel.setLabel.

Answers (0)