Skip to Content
Author's profile photo Babu Ganesh V

FIORI – How to hide Catalog button on FIORI launchpad/hide what ever you don’t want to see

You do not want your users to see the Catalog button or use its feature on the FIORI launchpad ?

If you are already on SP09 of SAPUI addon – please refer to this blog – FIORI Launchpad SP09 – How to – Standalone, headerless, embeded ….

There is no out of the box way to do this as of today, in the meantime I will suggest a workaround to achieve this. this may not be the best solution but this will work, please comment if there is a better approach.

Prerequisites –

Find out using Chrome’s Inspect Element Feature to identify technical details of what you want to hide.

  • Launch the FIORI launchpad in Chrome
  • Press F12 key on your keyboard to open Chrome Developer tools
  • Click on the first Icon on the developer tools window

               Inspect_Element.PNG

  • Move your mouse on the Launchpad and Click an object on the launchpad that you want to hide (Catalog Button / Search field / anything else)

               Choose.PNG

  • Once you click on the object you will notice that in the developer tool window, the html tag of the selected object is displayed

               html.PNG

  • Not always will it be the actual line you are looking for – but Chrome will help you to get closer to what you are looking for 🙂
  • You see that the <span> tag does not contain any css emements – so this tag will not be helpful
  • Click on its neighbors(html tags) and see where they are pointing to.
  • After initial set of trials you will see that <a tabindex=0 ……. this line has a CSS element “class = sapUiUfdShellHeadItm” and this may be helpful,
  • You can test within chrome to see if this css element will be helpful to hide your button/element
  • Click on the tag <a tabindex=0 ….>
  • On the right side of the Developer tools in Chrome, you will find the actual CSS styles of the Class sapUiUfdShellHeadItm,
  • You can do a “what if analysis” by changing the CSS elements of this style
  • Click on an empty spot near the definition of sapUiUfdShellHeadItm,
  • This will allow you to add another attribute to the CSS Style sapUiUfdShellHeadItm
  • Type in ‘display: none;’ (if display property is already defined you can as well modify its property rather than adding one)
  • Once you have added this you will notice that the button/element you wanted to hide is no more visible on the screen
  • You now know the CSS definition you should be modifying.

Now you know what needs to be hidden, lets us see how to achieve this without modifying the standard SAP Code.


1) Create a theme as a copy of Blue Crystal (as an example) – you can refer to any of the existing blogs on how to create a custom theme – SAP Fiori – UI Theme Designer by Masayuki Sekihara

 

2) In the Theme Designer, you can use Expert mode to edit/override the CSS definition.

3) Under Expert mode, In addition to the actual definition of CSS Class sapUiUfdShellHeadItm, add the property “display:none;” to it

     css.PNG

4) Publish your Theme

5) Launch your FIORI launchpad with the new theme specified in the url parameter, (http://myserver:port:…..FioriLaunpad/index.html?sap-theme=<yournewtheme>@………) refer to the blog written by Masayuki Sekihara if you do not know the parameters used to call custom theme – How to set a theme parameter to SAP Fiori launchpad

You no longer see what you do not want to see –

Babu Ganesh V

Customer Experience Group

SAP Labs India Pvt Ltd

Bangalore

Assigned tags

      12 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Aviad Rivlin
      Aviad Rivlin

      Very nice blog. Thanks for sharing Babu!

      Just to add, we are working to provide a permanent solution for this scenario of "disabling personalization" in the coming SPs.

      Author's profile photo Babu Ganesh V
      Babu Ganesh V
      Blog Post Author

      Thanks Aviad,

      Author's profile photo Agnieszka Szczepankiewicz
      Agnieszka Szczepankiewicz

      Very useful..Thank you

      Author's profile photo Babu Ganesh V
      Babu Ganesh V
      Blog Post Author

      In SP09 of SAPUI addon, you can achieve the above without much efforts - FIORI Launchpad SP09 - How to - Standalone, headerless, embeded ....

      Author's profile photo Shiva Virambil
      Shiva Virambil

      Hi Babu,

      Nice blog in adding the custom css for the theme.

      Could you please help me on the below

      I believe this will be supported for only Standard Application which was predefined,Please let me know,is there any way to send parameters Standalone,Header less to Custom FIORI App.

      Thanks,

      Shiva.

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Hi

      I have tried this solution and have hit a snag. I want to hide some tiles but they all seem to have the same CSS class name. How do I make a distinction between the different tiles?

      Thank you

      Author's profile photo Former Member
      Former Member

      Hi Babu,

      I am trying to hide 2 buttons of My Accounts app (CRM) which occurs while creating account (Corporate Account & Account Group). But these buttons belong to the same class, if I add property display:none, the whole add button with options gets hidden. Currently, I want only Individual Account to be displayed in the Create option. How Can I achieve this?

      Capture1.PNG

      Author's profile photo Laxman Chittepu
      Laxman Chittepu

      Very nice blog, Thanks.....

      Author's profile photo Former Member
      Former Member

      Hi,

      For Search Field .

      Instead at CSS level ,You can also use in controller Level ,

      this._oControlStore.oMasterSearchField;

      1.this._oControlStore.oMasterSearchField.clear();

      2.this._oControlStore.oMasterSearchField.refresh();

      3.this._oControlStore.oMasterSearchField.setVisible(false);

      4.this._oControlStore.oMasterSearchField.setEnabled(false);

      Regards

      Srinivas S

      Author's profile photo Devisha Bhavik
      Devisha Bhavik

      Hi Babu,

      I am trying to achieve this and trying to change the CSS. But looks like when I open Theme designer and go to CSS tab, it does not show the existing CSS files there but only have option to add custom CSS.

      Does it have to do with the newer/older version?

      I have SAP_UI 740 14 version.

      SAP_GWFND 740 013.

      See below...

      Theme.png

      Author's profile photo Agnieszka Szczepankiewicz
      Agnieszka Szczepankiewicz

      Hi Devisha,

      Theme Designer does not show the existing CSS files. You need to add your own CSS in the CSS tab. Please read the article above that shows the steps using F12 debugging tool.

      Thanks,

      Aga

      Author's profile photo Devisha Bhavik
      Devisha Bhavik

      Thank you for quick response. That clarifies it. I misunderstood as to change the value in the existing CSS.

      -Bhavik