Skip to Content
0

IconTabBar - switch tab after confirmation

Jan 16, 2017 at 08:30 AM

136

avatar image
Former Member

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!

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

VIPLOVE KHUSHALANI Jan 16, 2017 at 09:47 AM
0

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

Share
10 |10000 characters needed characters left characters exceeded