on 09-17-2014 1:07 PM
Hi,
I'm using IconTabBar and for IconTabFilter, I'm replacing the icon : "sap-icon://hint" with my custom image. Custom Image is displaying in place of icon But, clicking on that, tab select functionality is not working.
But it is working with sap-icon://hint or with text also. Any one please suggest me how to replace the sap-icon with custom image and the tab select functionality.
Below is my code.
this.tabBar = new sap.m.IconTabBar({
expanded : "{device>/isNoPhone}",
items: [
new sap.m.IconTabFilter({
key: "MyHistory",
icon: "img/history-gray.png",
text : "My History",
}),
new sap.m.IconTabFilter({
key: "MyWatchList",
icon: "img/watch-list.png",
text : "My Watch List",
})
],
Hi Hima,
Tab selection should be working with a custom image. See below jsbin for example.
http://jsbin.com/boqawoxeyilo/2/edit
Can you replace icon with below url to see if that works?
Regards,
Kimmo
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Kimmo,
Thanks for your reply. Custom image is displaying in place of sap-icon. But on click of tab, nothing was happening. But, on clicking on sap-icon, the tab functionality is working.
If I selected, Sap-icon, tab control is working. But on click of "My Watch List" image or "My History" it is not working. But the tab select functionality is working with removal of custom images.
Please suggest. I'm using SAP version 1.18
Hi Nikhil,
Here is my code
View Code:
this.tabBar = new sap.m.IconTabBar({
expanded : "{device>/isNoPhone}",
items: [
new sap.m.IconTabFilter({
key: "MyHistory",
icon : "img/watch.png",
text : "My History",
}),
new sap.m.IconTabFilter({
key: "MyWatchList",
text : "My Watch List",
}),
new sap.m.IconTabFilter({
key: "MyActions",
icon: "sap-icon://hint",
text : "My Actions",
}),
],
select:function(oEvent){
jQuery('#loader').show();
setTimeout(oController.tabSelect(oEvent), 1000);
}
});
Controller Code:
tabSelect:function(evt)
{
var tabShow = evt.getParameter("key");
if(tabShow == "MyHistory")
{
jQuery('#loader').show();
this.historyList(evt);
}
else if(tabShow == "MyWatchList")
{
jQuery('#loader').show();
this.watchList(evt);
}
else if(tabShow == "MyActions")
{
jQuery('#loader').show();
this.OpenActions(evt);
}
else
return evt;
},
Hi HIma,
Try removing your controller code and put the following code in view
this.page = new sap.m.Page({
title : 'tile',
showNavButton : jQuery.device.is.phone,
navButtonTap : function(){},
content : [ this.tabBar,
]
});
var oapp = new sap.m.App();
oapp.addPage(this.page);
oapp.placeAt("content");
and check the output. I believe you are having issue in the controller code.
Regards,
Nikhil
Firstly pardon me, I dindt see your requirement for tab select functionality. This is working for me:
view
sap.ui.jsview("test_tab2.Main", {
/** 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 test_tab2.Main
*/
getControllerName : function() {
return "test_tab2.Main";
},
/** 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 test_tab2.Main
*/
createContent : function(oController) {
this.tabBar = new sap.m.IconTabBar({
expanded : "{device>/isNoPhone}",
items: [
new sap.m.IconTabFilter({
key: "MyHistory",
icon : "images/001.jpg",
text : "My History",
}),
new sap.m.IconTabFilter({
key: "MyWatchList",
text : "My Watch List",
}),
new sap.m.IconTabFilter({
key: "MyActions",
icon: "sap-icon://hint",
text : "My Actions",
}),
],
select:function(oEvent){
jQuery('#loader').show();
setTimeout(oController.tabSelect(oEvent), 1000);
}
});
this.page = new sap.m.Page({
title : 'tile',
content : [ this.tabBar,
]
});
var oapp = new sap.m.App();
oapp.addPage(this.page);
oapp.placeAt("content");
}
});
Controller:
tabSelect:function(evt)
{
var tabShow = evt.getParameter("key");
if(tabShow == "MyHistory")
{
jQuery('#loader').show();
alert("my histroy");
this.historyList(evt);
}
else if(tabShow == "MyWatchList")
{
jQuery('#loader').show();
alert("my watch");
this.watchList(evt);
}
else if(tabShow == "MyActions")
{
jQuery('#loader').show();
alert("my action");
this.OpenActions(evt);
}
else
return evt;
},
See the output.
Regards,
Nikhil
User | Count |
---|---|
84 | |
25 | |
12 | |
9 | |
6 | |
6 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.