on 01-04-2015 1:43 PM
Ladies and Gentlemen,
one thing keeps bothering me. For sap.m.StandardTile we have the brilliant sap.m.TileContainer, but I won't find anything similar for the sap.suite.ui.commons.GenericTile. Basically I'm looking for a control that contains the GenericTiles and will resize & center them automatically, depending on the device.
Can anyone help?
Thank you so much in advance,
Steffen
Hi Guys,
I want code two section with three generic tiles in each on same page.
Section 1:(title)
tile1 tile2 tile3
Section 2:(title)
tile1 tile2 tile3
I tried to code in two panel but all generic tiles goes in panel 1.
my view.js code for your reference.
jQuery.sap.includeStyleSheet("mysecondapp/myStyle.css");
sap.ui.jsview("mysecondapp.myFirstPage", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf mysecondapp.myFirstPage
*/
getControllerName : function() {
return "mysecondapp.myFirstPage";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf mysecondapp.myFirstPage
*/
createContent : function(oController) {
//Create a panel instance
var oPanel = new sap.ui.commons.Panel({expandable:false});
//Set the title of the panel
oPanel.setTitle(new sap.ui.core.Title({text: "Our Services"}));
//Tile Section
var projectProcessTile1 = new sap.suite.ui.commons.GenericTile("pprocessTile1", {
header: "Project Processes",
subheader: "Delayed Stage Approvals",
size: "M",
frameType: "OneByOne"
});
var projectProcessTile2 = new sap.suite.ui.commons.GenericTile("pprocessTile2", {
header: "Project Processes",
subheader: "Delayed Stage Approvals",
size: "M",
frameType: "OneByOne"
});
var projectProcessTile3 = new sap.suite.ui.commons.GenericTile("pprocessTile3", {
header: "Project Processes",
subheader: "Delayed Stage Approvals",
size: "M",
frameType: "OneByOne"
});
var projectProcessTile4 = new sap.suite.ui.commons.GenericTile("pprocessTile4", {
header: "Project Processes",
subheader: "Delayed Stage Approvals",
size: "M",
frameType: "OneByOne"
});
//Add the form to the panels content area
oPanel.addContent(projectProcessTile1);
oPanel.addContent(projectProcessTile2);
oPanel.addContent(projectProcessTile3);
oPanel.addContent(projectProcessTile4);
//Second Panel
//Create a panel instance
var oPanel1 = new sap.ui.commons.Panel({expandable:false});
//Set the title of the panel
oPanel1.setTitle(new sap.ui.core.Title({text: "Our Services"}));
//Tile Section
var projectProcessTile5 = new sap.suite.ui.commons.GenericTile("pprocessTile5", {
header: "Project Processes",
subheader: "Delayed Stage Approvals",
size: "M",
frameType: "OneByOne"
});
var projectProcessTile6 = new sap.suite.ui.commons.GenericTile("pprocessTile6", {
header: "Project Processes",
subheader: "Delayed Stage Approvals",
size: "M",
frameType: "OneByOne"
});
var projectProcessTile7 = new sap.suite.ui.commons.GenericTile("pprocessTile7", {
header: "Project Processes",
subheader: "Delayed Stage Approvals",
size: "M",
frameType: "OneByOne"
});
var projectProcessTile8 = new sap.suite.ui.commons.GenericTile("pprocessTile8", {
header: "Project Processes",
subheader: "Delayed Stage Approvals",
size: "M",
frameType: "OneByOne"
});
//Add the form to the panels content area
oPanel.addContent(projectProcessTile5);
oPanel.addContent(projectProcessTile6);
oPanel.addContent(projectProcessTile7);
oPanel.addContent(projectProcessTile8);
var page = new sap.m.Page({
title: "Title",
content: [
oPanel, oPanel1
]
});
return page;
}
});
Regards,
Dhiraj
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Dhiraj,
this is happening because you actually do insert all your tiles in the first Panel.
//Add the form to the panels content area
oPanel.addContent(projectProcessTile5);
oPanel.addContent(projectProcessTile6);
oPanel.addContent(projectProcessTile7);
oPanel.addContent(projectProcessTile8);
should be
//Add the form to the panels content area
oPanel1.addContent(projectProcessTile5);
oPanel1.addContent(projectProcessTile6);
oPanel1.addContent(projectProcessTile7);
oPanel1.addContent(projectProcessTile8);
because you named your second Panel "oPanel1". May I suggest different names like oPanel1 and oPanel2 for the next time?
Besides I am glad to help you, but I am not sure if this thread is the right place to ask. Please open you own thread for your next question.
Hi Steffen,
I found a way to display generic Tiles in a TileContainer. I created a normal TileContainer and inserted CustomTiles. Then I created a Style Class for the CustomTiles so they look like a GenericTile:
.myCustomTile {
width: 23.5rem;
height: 11rem;
border: 1px solid #dddddd;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
background-color: #ffffff;
margin: 0.5rem;
}
Then I added that StyleClass to the CustomTiles and after that I created a GenericTile in the content aggregation of the CustomTile like this:
<CustomTile class="myCustomTile">
<content>
<suite:GenericTile
size="M"
frameType="TwoByOne"
press="press"
backgroundImage="data/NewsImage1.png">
<suite:tileContent>
<suite:TileContent footer="August 21, 2013" size="M">
<suite:content>
<suite:NewsContent
size="M"
contentText="SAP Unveils Powerful New Player Comparison Tool Exclusively on NFL.com"
subheader="SAP News">
</suite:NewsContent>
</suite:content>
</suite:TileContent>
</suite:tileContent>
</suite:GenericTile>
</content>
</CustomTile>
Thats all I had to do for now. Of course I have to watch the behaviour of the TileContainer with this big Tiles but at least it is possible to display GenericTiles in a TileContainer.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi ,
It's been a while since January but :
Did you succeed to use both "two by one" any "one by one" tiles in the container ?
It seems the two sizes conflicts because if you insert "two by one" near "one by one" the first one
override the second.
What about the container drag and drop functionality ? Did you encounter any problems ?
Thanks,
Arie.
User | Count |
---|---|
86 | |
10 | |
10 | |
10 | |
7 | |
6 | |
6 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.