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

[Former Member]

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?

[former_member232384]

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.

[former_member340030]

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

[Former Member]

Hi ,,

Thanks for the code.

How to keep my buttons on the right corner of the toolbar?/

[former_member227918]

Hi,

you just need to put one toolbar spacer before your buttons, like below:

<OverflowToolbar>
<ToolbarSpacer/>
<Button text="Edit" />
<Button text="Cancel" />
</OverflowToolbar>

Regards,Akhilesh

[Former Member]

Thank you. It's working now.