cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

SAP UI5 Overlay Container not working from MII

Go to solution
Former Member

on ‎04-22-2014 2:00 PM

0 Kudos

Hi,

I'm unable to use the overlay container control of SAPUI5 from MII Workbench.

My code is as below(copied from Demo Kit):

<!DOCTYPE HTML>

<html>

<HEAD>

  <TITLE>Overlay Container Test</TITLE>

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

  <META http-equiv='cache-control' content='no-cache'>

  <META http-equiv='expires' content='0'>

  <META http-equiv='pragma' content='no-cache'>

  <SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid"></SCRIPT>

  <script id="sap-ui-bootstrap" type="text/javascript" 

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

  data-sap-ui-theme="sap_goldreflection"  

  data-sap-ui-libs="sap.ui.ux3, sap.ui.commons"> 

  </script> 

<script type="text/javascript">

function handler(oEvent) {

  alert("Event '"+oEvent.getId()+"' triggered");

}

var oOverlayContainer = new sap.ui.ux3.OverlayContainer();

oOverlayContainer.addContent(new sap.ui.commons.TextView({text: "Some Content ..."}));

oOverlayContainer.attachClose(handler);

oOverlayContainer.attachOpen(handler);

oOverlayContainer.attachOpenNew(handler);

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

  text: "Open Overlay Container",

  press: function(oEvent){

  if(!oOverlayContainer.isOpen()){

  oOverlayContainer.open();

  }

  }

});

oButton.placeAt("sample1");

</script>

</HEAD>

<body class='sapUiBody'>

  <div id='sample1'></div>

</body>

</HTML>

On execution, it is not displaying the content. I'm using MII 14.0 SP0. The SAPUI5 SCA file is properly installed. The ux3 library is in sap.ui folder still the overlay container is not created.

Please share your valuable thoughts.

Regards,

Prashant

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

Private_Member_14935
Active Participant
‎04-22-2014 3:49 PM
0 Kudos

Hi Prashant,

I tried the above code, the first script tag refers to /XMII/JavaScript/bootstrap.js which also loads sap-ui-core.js internally. However it doesn't load ux3 library. Followed by that script tag you again have another script tag where you explicitly load ux3 library, however the src attribute's value has to be changed to this: /sapui5/resources/sap-ui-core.js

i.e the UI5 js file should be accessible using the following url:

http|s://<host>:<port>//sapui5/resources/sap-ui-core.js

You can modify your code as shown below and try:

     <!DOCTYPE HTML>

     <html>

     <HEAD>

       <TITLE>Overlay Container Test</TITLE>

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

       <META http-equiv='cache-control' content='no-cache'>

       <META http-equiv='expires' content='0'>

       <META http-equiv='pragma' content='no-cache'>

      <!-- <SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-     libs="i5Chart,i5Grid"></SCRIPT> -->

       <script id="sap-ui-bootstrap" type="text/javascript"

       src="/sapui5/resources/sap-ui-core.js"

       data-sap-ui-theme="sap_goldreflection" 

       data-sap-ui-libs="sap.ui.ux3, sap.ui.commons">

       </script>

     <script type="text/javascript">

     function handler(oEvent) {

       alert("Event '"+oEvent.getId()+"' triggered");

     }

     

     var oOverlayContainer = new sap.ui.ux3.OverlayContainer();

     oOverlayContainer.addContent(new sap.ui.commons.TextView({text: "Some Content ..."}));

     oOverlayContainer.attachClose(handler);

     oOverlayContainer.attachOpen(handler);

     oOverlayContainer.attachOpenNew(handler);

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

       text: "Open Overlay Container",

       press: function(oEvent){

       if(!oOverlayContainer.isOpen()){

       oOverlayContainer.open();

       }

       }

     });

     oButton.placeAt("sample1");

     </script>

     </HEAD>

     <body class='sapUiBody'>

       <div id='sample1'></div>

     </body>

     </HTML>

With the above code I was able to get the overlay container.

Please try and let me know if you still face issues.

Regards,

Ria

Show replies
Show replies
Former Member
‎04-23-2014 8:06 AM
0 Kudos

Hi Ria,

Thanks a lot for your time. It works, but individually. I've a liitle more to do.

In my screen where I'm using Tabstrip, Tables and Panels it works with

  <SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid"></SCRIPT>

  <script id="sap-ui-bootstrap" type="text/javascript"

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

  data-sap-ui-theme="sap_goldreflection" 

  data-sap-ui-libs="sap.ui.table, sap.ui.commons">

  </script>

I just want to add overlay container into it.

On changing the code as below, it does not work.

      <!-- <SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-     libs="i5Chart,i5Grid"></SCRIPT> -->

       <script id="sap-ui-bootstrap" type="text/javascript"

       src="/sapui5/resources/sap-ui-core.js"

       data-sap-ui-theme="sap_goldreflection"

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

       </script>

Please suggest the changes to be made.

Regards,

Prashant

Private_Member_14935
Active Participant
‎04-23-2014 8:22 AM
0 Kudos

Hi Prashant,

Are you using or planning to use i5Chart and i5Grid in your page?

If possible share the code that you are trying that includes Tabstrip, Tables, Panels and Overlay container. I'm curious to know why the code doesn't work for you.

Regards,

Ria

Former Member
‎04-23-2014 1:05 PM
0 Kudos

Hi Ria,

Below is my code which is working without overlay container. On clicking the add button, overlay container should open.

<!DOCTYPE HTML>

<HTML>

<HEAD>

  <TITLE>UI5</TITLE>

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

  <META http-equiv='cache-control' content='no-cache'>

  <META http-equiv='expires' content='0'>

  <META http-equiv='pragma' content='no-cache'>

  <SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid"></SCRIPT>

  <script id="sap-ui-bootstrap" type="text/javascript" 

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

  data-sap-ui-theme="sap_goldreflection"  

  data-sap-ui-libs="sap.ui.commons,sap.ui.table"> 

  </script> 

<script type="text/javascript">

// Create a TabStrip instance

var oTabStrip1 = new sap.ui.commons.TabStrip("TabStrip1");

oTabStrip1.setWidth("100%");

oTabStrip1.setHeight("300px");

// 1. Tab1

var oLayout1 = new sap.ui.commons.layout.MatrixLayout("Matrix1", {columns: 1, width: "100%"});

oLayout1.setWidths(['150px']);

  var Equipment_Rows;

  var currData;

  var Equip_ID = 0;

  var Equip_Desc;

  var Equip_Type;

  var Last_Calib;

  var Next_Calib;

  var count = 0;

  //Create a panel instance

  var oPanel1 = new sap.ui.commons.Panel({

  width : "100%",

  showCollapseIcon: false,

  });

  //Set the title of the panel

  oPanel1.setTitle(new sap.ui.core.Title({

  text : "Equipment"

  }));

  oPanel1.addButton(new sap.ui.commons.Button({

  text : "Add",

  tooltip: "Add equipment",

  lite: true,

      icon : "sap-icon://add-equipment",

  id : 'add' + i,

  press : function() {

  alert("overlay container should open");

  }

  }));

  //Table here

  var oTable = new sap.ui.table.Table({

  //title: "Dynamic Table",

  id : 'equiptable',

  visibleRowCount: 5,

  firstVisibleRow: 1,

  selectionMode: sap.ui.table.SelectionMode.Single,

  navigationMode: sap.ui.table.NavigationMode.Paginator,

  fixedColumnCount: 5,

  editable:false

  });

  // define the Table columns

  var oControl1 = new sap.ui.commons.TextView({text:"{EquipID}"}); // short binding notation

  oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "SAP Equipment ID"}), template: oControl1}));

  var oControl2 = new sap.ui.commons.TextView({text:"{EquipDesc}"}); // short binding notation

  oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Equipment Description"}), template: oControl2}));

  // create a JSONModel, fill in the data and bind the Table to this model

  var oEquipmentModel = new sap.ui.model.json.JSONModel();

  oTable.setModel(oEquipmentModel);

  oTable.bindRows("/modelData");

  oPanel1.addContent(oTable);

  oLayout1.createRow(oPanel1);

  oTabStrip1.createTab("Equipment",oLayout1);

// Attach the TabStrip to the page

  oTabStrip1.placeAt("sample1");

</script>

</HEAD>

<body class='sapUiBody'>

  <div id='sample1'></div>

</body>

</HTML>

On commenting the below line, I do not get any output:

<SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid"></SCRIPT>

Even though I am not using the i5chart and i5grid, I guess some control in the code are dependent on bootstrap.js.

Regards,

Prashant

former_member185280
Active Contributor
‎04-23-2014 1:35 PM
0 Kudos

Try loading the overlay or ux3 library using the require function instead of a script tag:

https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/ModularizationConcept.html

Regards,
Christian

Private_Member_14935
Active Participant
‎04-23-2014 6:56 PM
0 Kudos

Hi Prashant,

I tried your above code and also added the part to add the overlay container on click of "Add" button.

It works fine.

Please find below the code that worked for me:

<!DOCTYPE HTML>

<HTML>

<HEAD>

  <TITLE>UI5</TITLE>

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

  <META http-equiv='cache-control' content='no-cache'>

  <META http-equiv='expires' content='0'>

  <META http-equiv='pragma' content='no-cache'>

<!--  <SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid"></SCRIPT> -->

  <script id="sap-ui-bootstrap" type="text/javascript"

  src="/sapui5/resources/sap-ui-core.js"

  data-sap-ui-theme="sap_goldreflection" 

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

  </script>

<script type="text/javascript">

// Create a TabStrip instance

var oTabStrip1 = new sap.ui.commons.TabStrip("TabStrip1");

oTabStrip1.setWidth("100%");

oTabStrip1.setHeight("300px");

// 1. Tab1

var oLayout1 = new sap.ui.commons.layout.MatrixLayout("Matrix1", {columns: 1, width: "100%"});

oLayout1.setWidths(['150px']);

  var Equipment_Rows;

  var currData;

  var Equip_ID = 0;

  var Equip_Desc;

  var Equip_Type;

  var Last_Calib;

  var Next_Calib;

  var count = 0;

  //Create a panel instance

  var oPanel1 = new sap.ui.commons.Panel({

  width : "100%",

  showCollapseIcon: false,

  });

  //Set the title of the panel

  oPanel1.setTitle(new sap.ui.core.Title({

  text : "Equipment"

  }));

var i = 1;

function handler(oEvent) {

  alert("Event '"+oEvent.getId()+"' triggered");

}

var oOverlayContainer = new sap.ui.ux3.OverlayContainer();

oOverlayContainer.addContent(new sap.ui.commons.TextView({text: "Some Content ..."}));

oOverlayContainer.attachClose(handler);

oOverlayContainer.attachOpen(handler);

oOverlayContainer.attachOpenNew(handler);

  oPanel1.addButton(new sap.ui.commons.Button({

  text : "Add",

  tooltip: "Add equipment",

  lite: true,

      icon : "sap-icon://add-equipment",

  id : 'add' + i,

  press : function() {

  alert("overlay container should open");

if(!oOverlayContainer.isOpen()){

  oOverlayContainer.open();

  }

  }

  }));

  //Table here

  var oTable = new sap.ui.table.Table({

  //title: "Dynamic Table",

  id : 'equiptable',

  visibleRowCount: 5,

  firstVisibleRow: 1,

  selectionMode: sap.ui.table.SelectionMode.Single,

  navigationMode: sap.ui.table.NavigationMode.Paginator,

  fixedColumnCount: 5,

  editable:false

  });

  // define the Table columns

  var oControl1 = new sap.ui.commons.TextView({text:"{EquipID}"}); // short binding notation

  oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "SAP Equipment ID"}), template: oControl1}));

  var oControl2 = new sap.ui.commons.TextView({text:"{EquipDesc}"}); // short binding notation

  oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Equipment Description"}), template: oControl2}));

  // create a JSONModel, fill in the data and bind the Table to this model

  var oEquipmentModel = new sap.ui.model.json.JSONModel();

  oTable.setModel(oEquipmentModel);

  oTable.bindRows("/modelData");

  oPanel1.addContent(oTable);

  oLayout1.createRow(oPanel1);

  oTabStrip1.createTab("Equipment",oLayout1);

// Attach the TabStrip to the page

  oTabStrip1.placeAt("sample1");

</script>

</HEAD>

<body class='sapUiBody'>

  <div id='sample1'></div>

</body>

</HTML>

I have not referred to /XMII/JavaScript/bootstrap.js rather to the 2nd script tag which refers to "/sapui5/resources/sap-ui-core.js" and included "sap.ui.ux3" in the data-sap-ui-libs attribute of the script tag.

Do try and let me know if your issue is resolved.

Regards,

Ria

Former Member
‎04-24-2014 1:36 PM
0 Kudos

Hi Ria,

Thanks a lot. It worked. I really appreciate your help.

I've encountered another issue with reading the values from sapui5 table with the below code:

     selMatIndex = oTableMat.getSelectedIndex();

     selMat = oTableMat.getRows()[selMatIndex].getCells()[0].getValue();

When I am selecting an item from table whose selMatIndex is <= visibleRowCount (set to 10), it works fine. But, when I am selecting a row where selMatIndex is > visibleRowCount, I am getting the error in browser(F12) as:

Unable to get property 'getCells' of undefined or null reference

I hope getRows() gets all the rows in  the table, instead of the visible ones only?

Regards,

Prashant

Private_Member_14935
Active Participant
‎04-25-2014 4:09 PM
0 Kudos

Hi Prashant,

The getRows() method returns only the visible rows of the table.

Regards,

Ria

Former Member
‎04-26-2014 7:36 AM
0 Kudos

Thanks Ria.

I've resolved it by oModel.getProperty().

Regards,

Prashant

Answers (1)

Answers (1)

Former Member
‎04-22-2014 2:11 PM
0 Kudos

Hi Prashant,

Check the error in the browser's developer help i.e. press F12

What is the UI5 library version on your server?

Regards,

Rohit Negi.

Show replies
Show replies
Former Member
‎04-22-2014 2:50 PM
0 Kudos

Hi Rohit,

Thanks for your quick reply.

Browser exception is as below:

Failed to load resource: the server responded with a status of 404 (Not Found) http://<ip>:50000/XMII/JavaScript/resources/messages_en_US.properties

Failed to load resource: the server responded with a status of 404 (Not Found) http://<ip>:50000/XMII/CM/SandBox/Prashant/resources/sap-ui-core.js

Uncaught TypeError: Cannot read property 'OverlayContainer' of undefined OverlayContainer.irpt:21

My SAPUI version is 1.18.9

Regards,

Prashant

Ask a Question