IconTabBar - switch tab after confirmation

[former_member231693]

Hello,

I have a question on using IconTabBar

I want to control the switching process of the tabs as follows:

if I want to switch to another tab, there will be a MessageBox showing up, asking if I am sure to leave the current tab, if I press OK, then the tab will be switched. If I press cancel, I will stay in the current tab.

I have tried a few methods, but failed. I wonder if there is a way to achieve this?

Thanks!

[former_member340030 · Accepted solution]

Hi Natalie Zhang ,

You need to handle this on select event of sap.m.IconTabBar control. Please check out this sample code below:

View (XML)

1. <mvc:View
2. xmlns:l="sap.ui.layout"
3. xmlns:mvc="sap.ui.core.mvc"
4. xmlns="sap.m">
5. <IconTabBar
6. id="idIconTabBar"
7. select="onSelectTab"
8. selectedKey = "key1"
9. class="sapUiResponsiveContentPadding">
10. <items>
11. <IconTabFilter
12. icon="sap-icon://hint" key="key1" >
13. <Text text="Info content goes here ..."/>
14. </IconTabFilter>
15. <IconTabFilter
16. icon="sap-icon://attachment"
17. key="key2" >
18. <Text text="Attachments go here ..."/>
19. </IconTabFilter>
20. <IconTabFilter
21. icon="sap-icon://notes"
22. key="key3">
23. <Text text="Notes go here ..."/>
24. </IconTabFilter>
25. <IconTabFilter
26. icon="sap-icon://group" key="key4">
27. <Text text="People content goes here ..."/>
28. </IconTabFilter>
29. </items>
30. </IconTabBar>
31. </mvc:View>

Controller (JS)

1. sap.ui.define([
2. 'sap/ui/core/mvc/Controller',
3. 'sap/m/MessageBox'
4. ],function(Controller,MessageBox){
5. "use strict";
6. return Controller.extend("sap.m.sample.IconTabBar.IconTabBar",{

onInit:function(){

this._selectedKey = this.getView().byId("idIconTabBar").getSelectedKey();

},

onSelectTab:function(oEvent){

var skey = oEvent.getParameter("key");

var src = oEvent.getSource();
var self = this;

1. MessageBox.confirm(
2. "Do you want to switch to new tab?",{
3. onClose:function(action){
4. if(action ==="OK"){
5. self._selectedKey = skey;
6. }
7. else{
8. src.setSelectedKey(self._selectedKey);
9. }
10. }
11. }
12. );

}

});

thanks

Viplove