Hello there!
I'm just starting out with SAP ui5 and have been working on a demo application. I've just finished creating a launch page, making use of generic tiles however I've run into a problem using tileContent to populate the tiles with information. If I add a new sap.suite.ui.commons.TileContent object and try to run the app, I get a blank screen instead of the launch page.
When debugging in Google Chrome, I get the following error: Uncaught TypeError: Cannot read property 'hasStyleClass' of null.
At first I thought the problem might be due to the formatting, but when I took the tiles out of any horizontal layout/grid formatting, the issue remained.
I was wondering if anyone else has encountered this problem or knows of a possible work around?
Here is my code so far:
index.html:
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metahttp-equiv='Content-Type'content='text/html;charset=UTF-8'/>
<scriptsrc="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ui.commons, sap.suite.ui.commons, sap.ui.core"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
sap.ui.localResources("cddemoapp");
var app = new sap.m.App("app", {initialPage:"idlaunchpage1"});
//var app = new sap.m.App("app", {initialPage:"idlaunchpage2"});
var page = sap.ui.view({id:"idlaunchpage1", viewName:"cddemoapp.launchpage", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
var page2 = sap.ui.view({id:"idlaunchpage2", viewName:"cddemoapp.views.taskView", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page).addPage(page2);
</script>
<!-- stylesheet for tiles -->
<linkrel="stylesheet"type="text/css"href="CDDemoStylesheets/tilesStylesheet.css"/>
<linkrel="stylesheet"type="text/css"href="CDDemoStylesheets/pageStylesheet.css"/>
</head>
<bodyclass="sapUiBody"role="application">
<divid="content"></div>
</body>
</html>
Here is the JavaScript view code:
sap.ui.jsview("cddemoapp.launchpage", {
/**SpecifiestheControllerbelongingtothisView.
*Inthecasethatitisnotimplemented,orthat"null"isreturned,thisViewdoesnothaveaController.
*@memberOfcddemoapp.launchpage
*/
getControllerName : function() {
return"cddemoapp.launchpage";
},
/**IsinitiallycalledonceaftertheControllerhasbeeninstantiated.ItistheplacewheretheUIisconstructed.
*SincetheControllerisgiventothismethod,itseventhandlerscanbeattachedrightaway.
*@memberOfcddemoapp.launchpage
*/
createContent : function(oController) {
//
// jQuery.sap.require("sap.ui.core.IconPool");
// var iconPool = new sap.ui.core.IconPool;
// var aNames = sap.ui.core.IconPool.getIconNames();
// var iconUrl = sap.ui.core.IconPool.getIconURI("menu2");
//
//Panel Definitions
// var headerPanel = new sap.ui.commons.Panel({
//
// id: "header",
// width: "100%",
// height: "10%",
// showCollapseIcon: false
// });
varleftPanel = new sap.ui.commons.Panel({
id: "leftPanel",
width: "10%",
headerToolbar : new sap.m.Toolbar({
visible: false,
height: "0%"
}),
content : new sap.m.Label("barLeftPanelText", {text:"Username"}),
showCollapseIcon: false,
expandable: false
});
varbar = new sap.m.Bar({
id: "pageBar",
contentLeft : []
});
// var pageSummaryText = new sap.m.Text("pageSummaryText", {
//
// text: "PROJECTS: Mandate 4|Design 6|Delivery 3|Commissioning 4"
// });
//
varpageHeader = new sap.m.Text("pageHeader", {text: "Your Business Area"});
/*
* Tile definitions
*/
// var taskFooter = new sap.suite.ui.commons.TileContent("taskFooter", {
// footer: "1 task overdue"
// });
var taskTile = new sap.suite.ui.commons.GenericTile("tasks", {
header: "Tasks",
subheader: "Approvals Outstanding",
size: "M",
frameType: "OneByOne",
//
tileContent: [
// //
// new sap.suite.ui.commons.TileContent("taskFooter", { //this is the issue - when added the entire page is unable to render.
// footer: "1 task overdue",
// unit: "EUR",
// size: "S",
// content: [
////////
////////
////// ]
// })
],
// // press: function(){alert("you picked Tasks!")} - works!
// press: function(){oController.pressTask();}
});
var newsTile = new sap.suite.ui.commons.GenericTile("newsTile", {
backgroundImage:"images/tunnelBuilding.png",
size: "M",
frameType: "TwoByOne"
});
var projectProcessTile = new sap.suite.ui.commons.GenericTile("pprocessTile", {
header: "Project Processes",
subheader: "Delayed Stage Approvals",
size: "M",
frameType: "OneByOne"
});
var projectSpendTile = new sap.suite.ui.commons.GenericTile("pspendTile", {
header: "Top 3 Project Spend",
size: "M",
frameType: "OneByOne"
});
var assetDataTile = new sap.suite.ui.commons.GenericTile("assetDataTile", {
header: "Asset Data Capture",
subheader: "Q1 Performance",
size: "M",
frameType: "OneByOne"
});
var convoTile = new sap.suite.ui.commons.GenericTile("convoTile", {
header: "Our Innovation Centre",
subheader : "Collaboration and Blogs",
size: "M",
frameType: "TwoByOne"
});
var siteRisksTile = new sap.suite.ui.commons.GenericTile("siteRisksTile", {
header: "Update Site Risks",
subheader:"SSRAs Submitted by Team",
size: "M",
frameType: "OneByOne"
});
var injuriesTile = new sap.suite.ui.commons.GenericTile("injuriesTile", {
header: "Lost Time Injuries",
subheader:"Q1 2014 Total Hours",
size: "M",
frameType: "OneByOne"
});
var documentsTile = new sap.suite.ui.commons.GenericTile("docsTile", {
header: "My Documents",
subheader : "3 New Docs| 2 Updated",
size: "M",
frameType: "TwoByOne"
});
/*
* Horizontal Layout
*/
var hLayout1 = new sap.ui.layout.HorizontalLayout("h1", {
content: [taskTile,
newsTile, projectProcessTile]
});
var hLayout2 = new sap.ui.layout.HorizontalLayout("h2", {
content: [projectSpendTile,
assetDataTile, convoTile]
});
var hLayout3 = new sap.ui.layout.HorizontalLayout("h3", {
content: [siteRisksTile,
injuriesTile, documentsTile]
});
/*
* Grid Layout
* */
var grid = new sap.ui.layout.Grid("launchTiles", {
defaultIndent : "L1 M1 S1",
defaultSpan : "L12 M12 S12",
vSpacing: 1,
content: [hLayout1, hLayout2, hLayout3],
});
/*
* Page Definition
*/
/*
* Menu Definition
*/
var MainMenu = new sap.ui.commons.Menu("sideMenu",{});
var tasksItem = new sap.ui.commons.MenuItem("menuTasks",{text: "Tasks"}); //Icon must be not larger than 16x16 px
MainMenu.addItem(tasksItem);
var newsItem = new sap.ui.commons.MenuItem("menuNews",{text: "News"});
MainMenu.addItem(newsItem);
var projectProcessItem = new sap.ui.commons.MenuItem("menuPPA",{text: "Project Processes"});
MainMenu.addItem(projectProcessItem);
var topProjectSpendItem = new sap.ui.commons.MenuItem("menuProject", { text:"Project Spend"});
MainMenu.addItem(topProjectSpendItem);
var assetDataItem = new sap.ui.commons.MenuItem("menuAData", { text: "Asset Data"});
MainMenu.addItem(assetDataItem);
var convoItem = new sap.ui.commons.MenuItem("menuConvo", {text: "Chat"});
MainMenu.addItem(convoItem);
var siteRItem = new sap.ui.commons.MenuItem("menuSiteR", {text: "Site Risks"});
MainMenu.addItem(siteRItem);
var injuriesItem = new sap.ui.commons.MenuItem("menuInjuries", {text: "Injuries"});
MainMenu.addItem(injuriesItem);
var documentsItem = new sap.ui.commons.MenuItem("menuDocs", {text: "Documents"});
MainMenu.addItem(documentsItem);
returnnew sap.m.Page({
id: "launchPage",
title: "Your Business Unit",
showHeader: false,
showNavButton: true,
headerContent: [
//new sap.ui.commons.Button("menuIcon", {icon:"sap-icon://drop-down-list"})
],
content: [ new sap.m.Toolbar("toolBar", {
content: [
// new sap.ui.commons.Button("menuIcon", {
// icon:"sap-icon://drop-down-list",
// }),
new sap.m.ToolbarSpacer("space1", {
width: "50%"
}),
new sap.ui.commons.MenuButton("menuButton", {
width: "6%",
icon: "sap-icon://menu2",
tooltip: "Menu"
}).setMenu(MainMenu)
] //end of toolBar content
}),
new sap.m.Text("title", {
text: "Your Business Unit",
}),
grid
//
],
// press: function(){alert("you picked Tasks!")} - works!
press: function(){oController.pressTask();}
});
}
});
