I am trying to place a Business Card control within an Overlay Container in UI5, after pressing an enter button. My code isn't working and I can't seem to figure out why. Any help with this is appreciated. My code is as follows:
var oButton2 = new sap.ui.commons.Button({
text : "Enter",
style: sap.ui.commons.ButtonStyle.Emph,
width: "75px",
press : function() {var oOverlayContainer = new sap.ui.ux3.OverlayContainer();
oOverlayContainer.open();
oOverlayContainer.addContent(
function() {var oVCard = new sap.suite.ui.commons.BusinessCard({
firstTitle: new sap.ui.commons.Label({id:"vcard1-name-label",text:"White, Helen",tooltip:"White, Helen"}),
iconPath: "/XMII/CM/MIIDemos/TimeAttendance/images/AtoS_sm.jpg",
secondTitle: "Sales Contact at Customer Side",
imageTooltip:"White, Helen",
width: "424px"
});
var oContentCard = new sap.ui.commons.layout.MatrixLayout({widths:["20px", "100px"]});
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({hAlign:sap.ui.commons.layout.HAlign.Center});
oCell.addContent(new sap.ui.commons.TextView({text:"Phone:"}));
oContentCard.createRow(oCell, new sap.ui.commons.TextView({text:"+41 (635) 457-2875"}));
oCell = new sap.ui.commons.layout.MatrixLayoutCell({hAlign:sap.ui.commons.layout.HAlign.Center});
oCell.addContent(new sap.ui.commons.TextView({text:"E-Mail:"}));
oContentCard.createRow(oCell, new sap.ui.commons.TextView({text:"helen.white#company.com"}));
oContentCard.createRow(new sap.ui.commons.TextView({text:"Address:"}), new sap.ui.commons.TextView({text:"Diermar-Hopp Allee 16"}));
oVCard.setContent(oContentCard);
}
);
}
})
You're passing function not its result, you should do this:
var oButton2 = new sap.ui.commons.Button({
text : "Enter",
style: sap.ui.commons.ButtonStyle.Emph,
width: "75px",
press : function() {var oOverlayContainer = new sap.ui.ux3.OverlayContainer();
oOverlayContainer.open();
oOverlayContainer.addContent(
(function() {var oVCard = new sap.suite.ui.commons.BusinessCard({
firstTitle: new sap.ui.commons.Label({id:"vcard1-name-label",text:"White, Helen",tooltip:"White, Helen"}),
iconPath: "/XMII/CM/MIIDemos/TimeAttendance/images/AtoS_sm.jpg",
secondTitle: "Sales Contact at Customer Side",
imageTooltip:"White, Helen",
width: "424px"
});
var oContentCard = new sap.ui.commons.layout.MatrixLayout({widths:["20px", "100px"]});
var oCell = new sap.ui.commons.layout.MatrixLayoutCell({hAlign:sap.ui.commons.layout.HAlign.Center});
oCell.addContent(new sap.ui.commons.TextView({text:"Phone:"}));
oContentCard.createRow(oCell, new sap.ui.commons.TextView({text:"+41 (635) 457-2875"}));
oCell = new sap.ui.commons.layout.MatrixLayoutCell({hAlign:sap.ui.commons.layout.HAlign.Center});
oCell.addContent(new sap.ui.commons.TextView({text:"E-Mail:"}));
oContentCard.createRow(oCell, new sap.ui.commons.TextView({text:"helen.white#company.com"}));
oContentCard.createRow(new sap.ui.commons.TextView({text:"Address:"}), new sap.ui.commons.TextView({text:"Diermar-Hopp Allee 16"}));
oVCard.setContent(oContentCard);
return oVCard;
})()
);
});
Make sure you have added the following libs also:
data-sap-ui-libs="sap.ui.commons, sap.ui.ux3, sap.suite.ui.commons"
Related
I am currently having an error while using sap.m.Input, with the suggestion items
when I click on the list of suggestion:
controller
ch: function() {
var filters = [];
var TBLot = sap.ui.getCore().byId("idTableLot");
var item = sap.ui.getCore().byId("prd").getSelectedKey();
var filterL = new Filter("DCI", FilterOperator.EQ, item.toUpperCase());
var filterWhs = new Filter("Magasin", FilterOperator.EQ, GlobalWarehouse);
filters.push(filterL);
filters.push(filterWhs);
// ...
},
view
var oItemTemplateP = new sap.ui.core.ListItem({
key: "{ItemName}",
additionalText: "{U_CMC_RP_CDC}",
text: "{ItemName}"
});
new sap.m.Input({
id: "prd",
autocomplete: true,
showSuggestion: true,
enableSuggestionsHighlighting: true,
suggestionItems: {
path: "/itm",
template: oItemTemplateP
},
change: [oController.ch, oController]
});
You must be using an old version of UI5. The method getSelectedKey was introduced in 1.44. To see which UI5 version the app is running with, press Ctrl+Shift+Left Alt+P.
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.
I have a table when I try to bind the column of this table to a json data. It works in one of my tables and in other tables it doesn't show anything. I checked content and the way I get the json data and it is exactly the same in all tables.
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Names"}),
template:
new sap.ui.commons.Link({
text:"{name}",
})
}));
the table that shows the content sits in shell and other tables that show nothing sit inside sap.ui.ux3.ThingGroup. I am wondering if the reason that I don't see the binding is because of ThingGroup or not? because as soon as I change the sap.ui.commons.Link to sap.ui.commons.TextView it works.
The cut down version of my code is:
addLayerTable: function(){
var jsonData1 = {
"layers" : []
};
$.getJSON(URI, {}).done(function(data) {
if(data.layers !== undefined){
$.each(data.layers, function(i, field) {
jsonData1.layers.push({
"name" : field
});
});
}
layerDetailPage(jsonData1);
}).fail(function() {
alert("Error while reading layers Data or layers do not exist");
});
var oTable = new sap.ui.table.Table({
rows:{
path:"/layers",
},
width: "900px",
visibleRowCount: 10,
navigationMode : sap.ui.table.NavigationMode.Paginator
});
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Names"}),
template:
new sap.ui.commons.Label({
text:"{name}"
})
}));
function layerDetailPage(layerData){
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(layerData);
sap.ui.getCore().setModel(oModel, "layerModel");
oTable.setModel(oModel);
};
var oFC1 = new sap.ui.ux3.ThingGroup();
oFC1.addContent(oTable);
return oFC1;
}
As soon as I change the sap.ui.commons.Label to TextView, names become visible. but at the moment nothing. Funny enough if I add a press function to my table and try to get the name of the row in the table it works although it is not visible.
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 have a problem with a window that contains a TabGroups "there are 5 tabs"
the window and there appears that the window of the first tab that appears but when I clik on anything else happens.
I have a main window that contains views and each view refers to a file js
js file contents that I have after clicking my view is the one I just posted
In addition to the icons of the tab does not appear as
Another concern the back button when I click on it nothing happens and I can not assign an image to this button here
can you help me please
here is the code
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('white');
// create tab group
var tabGroup = Titanium.UI.createTabGroup({
barColor:'black'
});
// create base UI tab and root window
var win1= Titanium.UI.createWindow({
//modal:true,leftNavButton:boutonRetour, // ajout bouton retour
title:'Récentes',
backgroundColor:'white'
});
//win.add(boutonRetour);// bouton retour
var var1 = Titanium.UI.createTab({
icon:'images/icons/recentes_off.png',
title:'var1',
window:win1
});
var win2= Titanium.UI.createWindow({
title:'var2',
backgroundColor:'white'
});
var var2 = Titanium.UI.createTab({
//icon:'recentes_on.png',
title:'var2',
window:win2
});
var win3= Titanium.UI.createWindow({
title:'var3',
backgroundColor:'white'
});
var var3 = Titanium.UI.createTab({
//icon:'recentes_on.png',
title:'Thèmes',
window:win3
});
var win4 = Titanium.UI.createWindow({
title:'var4',
backgroundColor:'white'
});
var var4 = Titanium.UI.createTab({
//icon:'recentes_on.png',
title:'var4',
window:win4
});
var win5 = Titanium.UI.createWindow({
title:'var5',
backgroundColor:'white'
});
var var5 = Titanium.UI.createTab({
// icon:'recentes_on.png',
title:'var5',
window:win5
});
// add tabs------------------------------------------
tabGroup.addTab(var1);
tabGroup.addTab(var2);
tabGroup.addTab(var3);
tabGroup.addTab(var4);
tabGroup.addTab(var5);
// open tab group-----------------------------------------
tabGroup.open();
// -------------------ajout bouton Retour --------------------
var ButtonRetour = Ti.UI.createButtonBar({
labels: ['Retour'],
backgroundColor: '#ae4041',
backgroundImage: 'images/back.png',
color: '#ffffff'
});
ButtonRetour.addEventListener('click', function(){
win.close();
});
win1.leftNavButton = ButtonRetour;
// ---------------fin --------------------
none of your windows have a URL to tell Ti where to get the js file
Ti.UI.createWindow({
url: 'link/to/js/file.js',
title: 'Window Title',
backgroundColor: '#fff'
});
each of your windows defined need to have a URL if you are going to link to them by added them to a tab like so window: win1
as for the icon no showing up the image path is probably incorrect.