Hide Approve/Reject Buttons in Fiori Master Details Page

问题

I am looking to hide the Approve/Reject Buttons in the Details Page of a Fiori App based on certain filter conditions. The filters are added in the Master List view (Left hand side view) thru the view/controller extension. Now, if the user selects certain type of filter ( Lets say, Past Orders) - then the approve/reject button should not be displayed in the Order Details Page. This is how I have defined the buttons in the Header/Details view

 this.oHeaderFooterOptions = {
                       oPositiveAction: {                       
                        sI18nBtnTxt: that.resourceBundle.getText("XBUT_APPROVE"),
                        id :"btn_approve",
                        onBtnPressed: jQuery.proxy(that.handleApprove, that)
                       },

                   oNegativeAction: {                   
                    sI18nBtnTxt: that.resourceBundle.getText("XBUT_REJECT"),
                    id :"btn_reject",
                    onBtnPressed: jQuery.proxy(that.handleReject, that)
                   },

However at runtime, these buttons are not assigned the IDs I mentioned, instead they are created with IDs of __button0 and __button1.

Is there a way to hide these buttons from the Master List View?

Thank you.

回答1:

Recommended: SAP Fiori design principles only talk about disabling the Footer Buttons instead of changing the visibility of the Button. Read More here about Guidelines

Based on filter conditions, you can disable like this:

this.setBtnEnabled("btn_approve", false);

to enable again: this.setBtnEnabled("btn_approve", true);

Similarly you can change Button text using this.setBtnText("btn_approve", "buttonText");

Other Way: As @TobiasOetzel said use

this.setHeaderFooterOptions(yourModifiedHeaderFooterOptions);

回答2:

you can call setHeaderFooterOptions on your controller multiple times eg:

//Code inside of the controller
_myHeaderFooterOptions = {
    oPositiveAction: {                       
        sI18nBtnTxt: that.resourceBundle.getText("XBUT_APPROVE"),
        id :"btn_approve",
            onBtnPressed: jQuery.proxy(that.handleApprove, that)
        },
    oNegativeAction: {                   
        sI18nBtnTxt: that.resourceBundle.getText("XBUT_REJECT"),
        id :"btn_reject",
        onBtnPressed: jQuery.proxy(that.handleReject, that)
    }
},

//set the initial options
onInit: function () {
    this.setHeaderFooterOptions(this._myHeaderFooterOptions);
},

//modify the options in an event
onFilter : function () {
    //remove the negative action to hide it
    this._myHeaderFooterOptions.oNegativeAction = undefined;
    this.setHeaderFooterOptions(this._myHeaderFooterOptions);
},

//further code

so by manipulating the _myHeaderFooterOptions you can influence the displayed buttons.

回答3:

First, you should use sId instead id when defining HeaderFooterOptions, you can get the footer buttons by sId, for example, the Approve button.

this._oControlStore.oButtonListHelper.mButtons["btn_approve"]

Please check the following code snippet:

S2.view.controller: You have a filter event handler defined following and use EventBus to publish event OrderTypeChanged to S3.view.controller.

onFilterChanged: function(oEvent) {
    // Set the filter value, here i use hard code
    var sFilter = "Past Orders";
    sap.ui.getCore().getEventBus().publish("app", "OrderTypeChanged", {
         filter: sFilter
    });
}

S3.view.controller: Subscribe event OrderTypeChanged from S2.view.controller.

onInit: function() {
    ///
    var bus = sap.ui.getCore().getEventBus();
    bus.subscribe("app", "OrderTypeChanged", this.handleOrderTypeChanged, this);

},

getHeaderFooterOptions: function() {

    var oOptions = {

        oPositiveAction: {
            sI18nBtnTxt: that.resourceBundle.getText("XBUT_APPROVE"),
            sId: "btn_approve",
            onBtnPressed: jQuery.proxy(that.handleApprove, that)
        },

        oNegativeAction: {
            sI18nBtnTxt: that.resourceBundle.getText("XBUT_REJECT"),
            sId: "btn_reject",
            onBtnPressed: jQuery.proxy(that.handleReject, that)
        }
    };
    return oOptions;

},
handleOrderTypeChanged: function(channelId, eventId, data) {
    if (data && data.filter) {
        var sFilter = data.filter;
        if (sFilter == "Past Orders") {
            this._oControlStore.oButtonListHelper.mButtons["btn_approve"].setVisible(false);
        }
        //set Approve/Reject button visible/invisible based on other values 
        //else if(sFilter == "Other Filter") 
    }
}

来源：https://stackoverflow.com/questions/26144794/hide-approve-reject-buttons-in-fiori-master-details-page