Fiori Question - Hide Save as Tile button (bottom right hand corner)

[michael_pang4]

Hi All,

We are trying to hide the "Save as Tile" button at the bottom right corner of the Fiori app.

Can someone please advise on how this can be achived? (not just the option, but the whole button -> please see attached).

We are hoping to either use theme designer (CSS) or Enhancement with JQuery to acheive this.

Looking at the source code for the button, there doesn't seem to be a unique id or class that can identify the option. 

<button type="button" id="__button12" data-sap-ui="__button12" tabindex="0" class="sapMBtn sapMBtnDefault sapMBtnIcon sapMFocusable">

<div class="sapMBtnContent">

<span id="__button12-img" data-sap-ui="__button12-img" data-sap-ui-icon-content="" style="font-family:'SAP-icons'" class="sapMBtnCustomIcon sapUiIcon sapUiIconMirrorInRTL">

</span>

</div>

</button>

Thanks, regards Michael.

[former_member182862 · Accepted solution]

Hi Michael

if you look at your controller class, you should be able to find the function call, setHeaderFootOptions.

This button appears because it is in the buttonList array.

-D

[michael_pang4 · Accepted solution]

Thanks for the suggestion Dennis. It has pushed me in the right direction.

I've set a breakpoint at the getHeaderFootOptions, and the buttonList array is empty.

In the oHeaderFooterOptions, I see buttonList which is empty, oEditBtn (Object) and oJamOptions (oBject).

What I noticed is that in Fiori ushell framework, the CommonHeaderFooterHelper.js will automatically add some buttons to the screen for Jam settings.

My solution: I added the following two lines in my code to suppress the button:

this.oHeaderFooterOptions.oJamOptions = null;

this.oHeaderFooterOptions.bSuppressBookmarkButton = true;

It is somewhat unfortunate that the buttons that got generated have ID's like _button_12 which means the number could indeed change over time. Should there be a more unique ID, then we could have used CSS/theme designer to suppress the buttons.

[former_member182862 · Accepted solution]

HI Michael.

did you try

this.oHeaderFooterOptions.buttonList = []

-D

[michael_pang4 · Accepted solution]

So I have but it did not work.

The bit of code in the ushell js CommonHeaderFooterHelper.js

 defineFooterRight : function(oController, oPage, iFooterRightCount, bIncludeGenerics, bIncludePosNeg) {

 var bHasButton = false;
 // standard Buttons
 if (oController._oHeaderFooterOptions.oEditBtn) {
 var oBtnMeta = {};
 jQuery.extend(oBtnMeta, oController._oHeaderFooterOptions.oEditBtn);
 oBtnMeta.style = sap.m.ButtonType.Emphasized;
  oController._oControlStore.oButtonListHelper.ensureButton(oBtnMeta, "b", iFooterRightCount);
  bHasButton = true;
 } else /* if (bIncludePosNeg) */{
 if (oController._oHeaderFooterOptions.oPositiveAction) {
 var oBtnMeta = {};
 jQuery.extend(oBtnMeta, oController._oHeaderFooterOptions.oPositiveAction);
 oBtnMeta.style = sap.m.ButtonType.Accept;
  oController._oControlStore.oButtonListHelper.ensureButton(oBtnMeta, "b", iFooterRightCount);
 bHasButton = true;
 }
 if (oController._oHeaderFooterOptions.oNegativeAction) {
  var oBtnMeta = {};
 jQuery.extend(oBtnMeta, oController._oHeaderFooterOptions.oNegativeAction);
 oBtnMeta.style = sap.m.ButtonType.Reject;
  oController._oControlStore.oButtonListHelper.ensureButton(oBtnMeta, "b", iFooterRightCount);
 bHasButton = true;
 }
 }

 // App specific buttons
 if (oController._oHeaderFooterOptions.buttonList) {
 for (var i = 0; i < oController._oHeaderFooterOptions.buttonList.length; i++) {
 var oBtnMeta = {};
 jQuery.extend(oBtnMeta, oController._oHeaderFooterOptions.buttonList[i]);
 oBtnMeta.style = sap.m.ButtonType.Default;
  oController._oControlStore.oButtonListHelper.ensureButton(oBtnMeta, "b", iFooterRightCount);
 bHasButton = true;
  }
 }
 if (bIncludeGenerics) {
 var aGenButtons = this.getGenericButtons(iFooterRightCount, oController,
 oController._oControlStore.oButtonListHelper);
 bHasButton = bHasButton || aGenButtons.length > 0;
 }
 bHasButton = this.defineShareButton(oController) || bHasButton;
 return bHasButton;
 },

As you can see even if the buttonList is empty, the Save As Tile button is indeed generated in the last line with the "defineShareButton" method.

[former_member182862 · Accepted solution]

Hi Michael

I am not too sure about the defineShareButton function thing.

Can you do on more test?

set oHeaderFooterOptions.additionalShareButtonList = []

Thanks

-D

[michael_pang4 · Accepted solution]

Hi Dennis,

I've added the code you asked, still doesn't do the trick.

Cheers

Michael.

[former_member182862 · Accepted solution]

Sorry I ran out of idea, I believe that somewhere in your code is adding this button. At least the version of sap.ca library allows me to not show any buttons

Thanks

[michael_pang4 · Accepted solution]

Thanks Dennis.

I have pointed out above that the ushell code provided by SAP adds the button, not me.

It's part of the JAM settings, and it can be removed using my code snippet above.

The suggestion you have can help hide customer buttons only, not SAP buttons.

[former_member182862 · Accepted solution]

Hi Michael

if you can get the handle of ushell object, you can override defineShareButton function to return false 🙂

-D

[Former Member]

Hi Karan,

  In my case I didn't disturb the existing functionality of s3 controller.. I just added one line "this.oHeaderFooterOptions.bSuppressBookmarkButton = true;" in the onInIt() method hook. If you need to  hide forward button  then I think the above code by Nicola  should work . Also check which view is actually getting called (s3.view.xml or s3_header.view.xml) and extend accordingly for hiding the forward button.

Regards,

Muthu.

[Former Member]

Hello experts,

I had implemented this change in an extended version of Approve Requisitions app.

I hid the share button extending the S3_header.view with the following code:

onDataLoaded: function(e) {
  var t = this;
  var l = {
  oPositiveAction: {
  sI18nBtnTxt: t.resourceBundle.getText("XBUT_APPROVE"),
  onBtnPressed: jQuery.proxy(t.openApproveRejectDialog, t, ['approve'])
  },
  oNegativeAction: {
  sI18nBtnTxt: t.resourceBundle.getText("XBUT_REJECT"),
  onBtnPressed: jQuery.proxy(t.openApproveRejectDialog, t, ['reject'])
  },
  buttonList: [/*{
  sId: "btn_Forward",
  sI18nBtnTxt: "XBUT_FORWARD",
  onBtnPressed: jQuery.proxy(this.handleForward, t)
  }*/],
  onBack: jQuery.proxy(function() {
  if (sap.ui.Device.system.phone) {
  window.history.go(-1)
  }
  }, this),
  bSuppressBookmarkButton : true
  };
  //alert(sap.ui.getVersionInfo().version);
  if (this.extHookSetHeaderFooterOptions) {
  l = this.extHookSetHeaderFooterOptions(l)
  }
  this.setHeaderFooterOptions(l)
  }

I set bSuppressBookmarkButton : true in this extended view in the onDataLoaded method. I tried to extend the S3.view with no effect so i change to the S3_header.view and it works.

I hope that my message can be helpful.

Regards,

Nicola.

bSuppressBookmarkButton : true

[Former Member]

I am able to hide it in my fiori enhancement application.

I created an extension project for Approve PR application and replaced S3 controller.

In the onInit() method, the standard code is used ,along with that

this.oHeaderFooterOptions.bSuppressBookmarkButton = true; is added.

Regards,

Muthu

[karanbahl]

Hi Muthu,

In my case, I want to hide the forward button and I have written code in the S3Custom controller via extension.

However, my S3Custom Controller is not getting loaded, any idea what could be the issue?

I have written the below code in the extension controller:

extHookSetHeaderFooterOptions: function(l) {

  //                         // Place your hook implementation code here

                                    var t = this;

                        var l = {

                                    oPositiveAction: {

                                                sI18nBtnTxt: t.resourceBundle.getText("XBUT_APPROVE"),

                                                onBtnPressed: jQuery.proxy(t.openApproveRejectDialog, t, ['approve'])

                                    },

                                    oNegativeAction: {

                                                sI18nBtnTxt: t.resourceBundle.getText("XBUT_REJECT"),

                                                onBtnPressed: jQuery.proxy(t.openApproveRejectDialog, t, ['reject'])

                                    },

                                    onBack: jQuery.proxy(function() {

                                                if (sap.ui.Device.system.phone) {

                                                            window.history.go(-1)

                                                }

                                    }, this)

                        };

//                      if (this.extHookSetHeaderFooterOptions) {

//                                  l = this.extHookSetHeaderFooterOptions(l)

            //          }

                        this.setHeaderFooterOptions(l)

  }

});

I have tried both Web IDE and Fiori Extension approach. Any suggestions?

Regards,

Karan

[Former Member]

Hello Experts,

Is this removal of save as tile requires some gateway configurations to be done ? Or we can achieve it with UI code change.

Please throw some light. Even I am facing difficulties in locating the code for save as tile.

Thanks in advance.

[Former Member]

All, this button is also causing a lot of confusion in my project.

Is there any standard way (SPRO Configuration etc) that I can just keep Approve, Forward and Reject buttons only and remove the "Save as Tile" option.

Regards,

Rajan Murthy

[Former Member]

Hi Rajan,

Please see my last response above...

You need to set bSuppressBookmarkButton property as FALSE on this.setHeaderFooterOptions({ ... call.

Regards,

Andre

[Former Member]

Define bSuppressBookmarkButton as false.

For example:

// Standard application buttons (Remove Forward)
  this.setHeaderFooterOptions({
            oPositiveAction: {
                sI18nBtnTxt: that.resourceBundle.getText("XBUT_APPROVE"),
                onBtnPressed: jQuery.proxy(that.handleApprove, that)
            },
            oNegativeAction: {
                sI18nBtnTxt: that.resourceBundle.getText("XBUT_REJECT"),
                onBtnPressed: jQuery.proxy(that.handleReject, that)
            },
            onBack: jQuery.proxy(function() {
                //Check if a navigation to master is the previous entry in the history
                var sDir = sap.ui.core.routing.History.getInstance().getDirection(this.oRouter.getURL("master"));
                if (sDir === "Backwards") {
                    window.history.go(-1);
                } else {
                    //we came from somewhere else - create the master view
                    this.oRouter.navTo("master");
                }
            }, this),
            bSuppressBookmarkButton : true
        });