I'm trying to add Page into IconTabFilter and i've got, but only the title is projected on the screen.
IconTab view :
createContent : function(oController) {
var oPage = new sap.m.Page({title: "IconTab",showHeader: false});
var oIconTab = new sap.m.IconTabBar ("idTabBar",{});
var itemBar1 = new sap.m.IconTabFilter({
key:"tab1",
icon:"sap-icon://database",
content:[ new sap.ui.view({id:"idTabIcon",viewName:"prova5.tabIcon1", type:sap.ui.core.mvc.ViewType.JS})
]
})
oIconTab.addItem(itemBar3);
oPage.addContent(oIconTab);
return oPage;
}
content of IconTabFilter view:
createContent : function(oController) {
var oPage = new sap.m.Page({
title: "Icon Tab Page 1",
showNavButton: true,
navButtonPress: oController.navButtonMethod
});
var obutton = new sap.m.Button({text: "hello"});
oPage.addContent(obutton);
return oPage;
}
any solution?
The problem appears when using sap.m.Page in your view as a return value in the createContent function. If the usage of sap.m.Page in your view is not necessary for your purpose try to return another control (e.g. sap.m.FlexBox). That solved the problem for me.
Try to Inspect Elements and find out div and in the
class ".sapMITBContent" add height in Pixel around 500px and you will get page visible.
Related
I am trying to create a screen on which I have a Panel. The main Panel has another Panel and this Panel has a Grid which has four HBoxes, and each HBox finally has a Button.
onInit:function(){
oMainPanel.removeAllContent();
var oHbox1 = new sap.m.HBox(jQuery.sap.uid());
var oHbox2 = new sap.m.HBox(jQuery.sap.uid());
var oHbox3 = new sap.m.HBox(jQuery.sap.uid());
var oHbox4 = new sap.m.HBox(jQuery.sap.uid());
var oPanel ;
var oGrid;
for (var i = 0; i < 4; i++) {
oGrid = new sap.ui.layout.Grid(jQuery.sap.uid(),{
hSpacing: 1,
vSpacing: 1,
content: [oHbox1,oHbox2,oHbox3,oHbox4]
});
oPanel = new sap.m.Panel(jQuery.sap.uid(),{
headerText: "Some Text",
expandable: true,
expanded: true,
width:"100%",
content:[oGrid]
});
jQuery.sap.delayedCall(100, this, function() {
});
oMainPanel.addContent(oPanel);
}
I can see the content in each HBox, but only for the last Panel. I think these are being overlapped. How can I display the content of all the HBoxes in all Panels?.
You are trying to use the same instances of HBox as content of different Grids. You need to create a new instance for each Panel.
Try doing something like:
oGrid = new sap.ui.layout.Grid(jQuery.sap.uid(),{
hSpacing: 1,
vSpacing: 1,
content: [new sap.m.HBox(), new sap.m.HBox(),
new sap.m.HBox(), new sap.m.HBox()]
or initialize your variables (oHbox1, oHbox2, etc) inside the loop
I solved this problem by using the forEach instead of for loop.
hey guys not sure if this is a bug or theres something I'm doing wrong, or the CSS style sheets im using are making this error, but im racking my brain on how to fix this.
I have the following code bellow in a loop, ever since I put it in a loop it no longer works as setting the selected button I had a search and some one said try set selected key, I also tried this and no luck. Now I have put them both in and it sets the selected value to neither button. I'll show you screenshots of what I mean. Any ideas on fixing it would be great.
for(var i = 0; i < results.length; i++) {
//Create buttons dynamically
var segmentItemYes = new sap.m.SegmentedButtonItem({text :"Yes", press: [this.onSEYesPress, this]});
var segmentItemNo = new sap.m.SegmentedButtonItem({text :"No", press: [this.onSENoPress, this]});
var segmentedButton = new sap.m.SegmentedButton({items : [segmentItemYes, segmentItemNo]});
//TODO:Doesn't work currently - How do we set default state?
segmentedButton.setSelectedButton(segmentItemNo);
segmentedButton.setSelectedKey(segmentItemNo);
Below is the Image the top part is what I'm getting (I clicked on no to show you what exactly happens. The bottom one is with the setSelectedKey removed but still set to no. any ideas? This is in a JS controller and it gets placed in to an xml fragment if this makes a difference or not.
I got it to work as follows, by binding the selected key to a model:
var segmentItemYes = new sap.m.SegmentedButtonItem( {
text: "Yes",
key: "foo"
});
var segmentItemNo = new sap.m.SegmentedButtonItem( {
text: "No",
key: "bar"
});
var segmentedButton = new sap.m.SegmentedButton( {
items: [segmentItemYes, segmentItemNo],
selectedKey: {
path: "test>/key"
}
});
var model = new sap.ui.model.json.JSONModel({
key: "bar"
});
sap.ui.getCore().setModel(model, "test");
Im using the following code to display simple button,when you click on tab 2 and return to the old tab the button is removed,any idea how do put it permanent in tab1 ?
This is the controller shell
onInit: function() {
this.oViewBuffer ={};
this.oViewBuffer.btn = sap.ui.jsview("codetalk.Main");
var oShell = sap.ui.getCore().byId("main-shell");
oShell.setContent(this.oViewBuffer.btn);
},
onWorksetItemSelected:function(oEvent){
var oShell = sap.ui.getCore().byId("main-shell");
var key = oEvent.getParameter("key");
oShell.setContent(this.oViewBuffer[key]);
}
This is the JS view
createContent : function(oController) {
var oButton = new sap.ui.commons.Button({
text:"Hello Test",
tooltip:"This is toolTip",
press:function(){
alert("test alert");
}
});
return oButton;
}
This is the view of the shell
createContent : function(oController) {
var oButton = new sap.ui.ux3.NavigationItem({
key:"bth",
text:"Tab 1"
});
var oMusicStore = new sap.ui.ux3.NavigationItem({
key:"btn2",
text:"Tab 2"
});
var oShell = new sap.ui.ux3.Shell({
id:"main-shell",
appTitle:"Demo",
worksetItems:[oButton,oMusicStore],
worksetItemSelected:[oController.onWorksetItemSelected,oController]
});
return oShell;
}
first I'd recommend removing the "-" in your shell id (UI5 Dev Guide) and using camel case instead.
secondly you're calling your view with your button in the Init function but once that's done you handle your worksetItems with your controller and set the worksetItem according to your key. So far so good.
But your worksetItems aren't associated with any content so there's no reason for your shell to show you the button when you click on your first Tab
I'd recommend something like initializing your views with IDs and ste the content in your shell controller according to that id
Example:
var oViewButton = sap.ui.view("bth",{
viewName : "codetalk.Main",
type : sap.ui.core.mvc.ViewType.JS
)} //do that in your view where you define your Shell
//do the same for your view with the musicstore also in the view with the Shell
//your id of the view must match the key of your worksetItem
in your shell's controller do this:
onWorksetItemSelected : function(oEvent){
var oShell = sap.ui.getCore().byId("mainShell");
var key = oEvent.getParameter("key");
var oView = sap.ui.getCore().byId(key);
oShell.setContent(oView);
}
this solution will bypass the content aggregation of your Shell but at least it worked for me.
In shell view.js remove second last line
Example
"worksetItemSelected:[oController.onWorksetItemSelected,oController]"
It might work
I tried to implement split app feature in my mobile application .But after navigating to the Detail2 page a "back" navigation button is put , which does not work when pressed .
I have placed my code below : (Revert back if you need more info on that)
view.js file (content) :
sap.ui.jsview("split_app.first_view", {
getControllerName : function() {
return "split_app.first_view";
},
createContent : function(oController) {
var olist1 = new sap.m.StandardListItem({
type: sap.m.ListType.Active,
title: "to detail 1",
tap: function(){
osplit.toDetail("detail1");
}
});
var olist2 = new sap.m.StandardListItem({
type: sap.m.ListType.Active,
title: "to detail 2",
tap: function(){
osplit.toDetail("detail2");
}
});
var otext = new sap.m.Label({
text: "first label",
});
var osplit = new sap.m.SplitApp("split");
var odetail1 = new sap.m.Page("detail1", {
title: "first details",
content: [
otext
]
});
var odetail2 = new sap.m.Page("detail2",{
title: "second Details",
showNavButton: true,
navButtonPress: function(){
osplit.toMaster("masterPage");
app.back();
},
content: [
new sap.m.Label({
text: "second label"
})
]
});
var omaster1 = new sap.m.Page("masterPage", {
title: "master page",
content:[
new sap.m.List({
items : [ olist1, olist2 ]
}) ]
});
osplit.addMasterPage(omaster1);
osplit.addDetailPage(odetail1).addDetailPage(odetail2);
osplit.setMode("ShowHideMode");
return new sap.m.Page({
title: "Title",
content: [
osplit
]
});
}
Assuming you want to navigate one step back in your Detail Area (right side) you can call the backDetail() function of your SplitApp Object when clicking on the back button (navButtonPress):
osplit.backDetail();
The same function works for back navigation in your Master Area (left side):
osplit.backMaster();
If you want to navigate back within your app object, make sure that there is a previous page you come from and all pages are known to the App object (probably in your index.html file):
I´ve just tested your code and it worked for me to navigate within the SplitApp using above mentioned functions as well as navigating back in the App with the following declaration (in your index or wherever you host the App object):
var app = new sap.m.App();
var init = sap.ui.view({
id : "idinit",
viewName : "stackovertest.init",
type : sap.ui.core.mvc.ViewType.JS
})
var page = sap.ui.view({
id : "idsplit_app1",
viewName : "stackovertest.split_app",
type : sap.ui.core.mvc.ViewType.JS
});
app.addPage(init);
app.addPage(page);
After coming from the init page you can use
app.back();
Hopefully this helps you.
I am creating an Application that consist of a Panel,
This panel contains a Tab-Panel and a Form-Panel. (Initially, Form-Panel is Hidden)
The Tab-Panel has a Tab, which contains a List.
When Tapped on a List-Item it dose the following
Shows the Form-Panel
Hides the Tab-Panel
My Problem is When it does so , The form do not show any scroll bars, How ever when i change the orientation of the device(iPhone) and then it allows me to scroll.
Can anyone explain me if i am doing it correctly, or is there any better way to achieve this functionality, or can the Main Panle be changed with a view Port ?
A small example will be really great.
Below is my Code (i will try to keep it simple)
Decleration of List and Event Listener
var lstRequestTracker = new Ext.List({
itemTpl : '{emplFirstName} {emplLastName}'
,store : storeRequestTracker
,fullscreen: true
});
lstRequestTracker.on('itemtap', function( oThis, index, item, event) {
var rec = oThis.getStore().getAt(index);
tpnlMyForms.hide();
fpnlOnBoard.show();
//pnlMain.doComponentLayout();
fpnlOnBoard.doComponentLayout();
});
Code for declaring the Main-Panel, Tab-Panel and The Form-Panel
var tpnlMyForms = new Ext.TabPanel({
tabBar : {dock : 'bottom', layout:'hbox'}
,fullscreen : true
,defaults : {scroll: 'vertical', layout:'fit'}
,items : [ {
title : 'Request Tracker'
,items : [lstRequestTracker]
,iconCls: 'time'
}
]
});
var fpnlOnBoard = new Ext.form.FormPanel({Contains form Fields});
Ext.setup({
onReady: function() {
var pnlMain = new Ext.Panel({
fullscreen : true
,dockedItems: [{dock:'top', xtype:'toolbar',title:'STARS'}]
,layout: 'fit'
,items : [tpnlMyForms,fpnlOnBoard]
});
fpnlOnBoard.hide();
}// eo onReady Function
});
Have you tried giving your formPanel a scroll option (scoll: 'horizontal') ? I really don't know wether this will help, but I remember I also had a form a few days ago and this was the solution. That had nothing to do with the device orientation by the way, but who knows..