Skip to Content
avatar image
Former Member

IconTabBar - switch tab after confirmation

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!

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Jan 16, 2017 at 09:47 AM

    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

    Add comment
    10|10000 characters needed characters exceeded