Skip to Content
avatar image
Former Member

Disable page footer buttons or footer for one particular icontabfilter ..

Hi All,

In detail screen, I have placed a footer with "cancel" and "submit" buttons.

I need to display this footer only for one icon tab filter and disable the footer or buttons for other two icon tab filters.

How do i do that?

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Jan 19, 2017 at 07:53 AM

    Hi Lalitha ,

    You need to do this in the "select" event of icon tab bar

    View (XML):

    <Page id="page">

    <IconTabBar

    id="idIconTabBar"

    select="handleIconTabBarSelect"

    > ...........

    </IconTabBar>

    <footer>

    <Toolbar enabled = {footer>enable}>

    <ToolbarSpacer/>

    <Buttontext="Accept"type="Accept"/>

    <Buttontext="Reject"type="Reject"/>

    <Buttontext="Edit"/>

    <Buttontext="Delete"/>

    </Toolbar>

    </footer>

    </Page >

    controller (JS):

    handleIconTabBarSelect :function(oEvent){

    var skey = oEvent.getParameter("key"); //getting selected IconTabfilter key

    if (key = "<hidefilterkey>") // compares with the key of IconTabfilter where you want to disable the footer

    {

    //here you need to disable the footer , you can disable it in two ways one is to get the footer Toolbar by Id and set enabled property false //(.setEnabled(false)) and second way is through binding (attaching model to enabled property of the footer toolbar) and change the enabled //property bind value to false

    this.toggleFooterToolbar(false); // second way

    }

    else

    {

    /here you need to enable the footer , you can enable it in two ways one is to get the footer Toolbar by Id and set enabled property true //(.setEnabled(true)) and second way is through binding (attaching model to enabled property of the footer toolbar) and change the enabled //property bind value to true

    this.toggleFooterToolbar(true);// second way

    }

    },

    toggleFooterToolbar:function(value) {

    var enable = {enable :value};

    var model = new sap.ui.model.json.JSONModel();

    model.setData(enable);

    this.getView().byId("page").setModel(model,"footer");

    this.getView().byId("page").bindElement("footer>/");

    }

    thanks

    Viplove

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jan 19, 2017 at 08:52 AM

    The best way to control UI is binding.

    If you have a model, property that is define a behavior of buttons.

    It is very easy to hide or show your buttons.

    Bind it to the property 'visible' of button,and add some formatter or expression binding.

    Add comment
    10|10000 characters needed characters exceeded