Skip to Content

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

To report this post you need to login first.

11 Comments

You must be Logged on to comment or reply to a post.

  1. 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.

    (0) 
  2. 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

    (0) 
  3. Simran Suri

    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

    (0) 
  4. Srinivas Achar

    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

    (0) 
  5. 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

    (0) 
    1. 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

      (0) 

Leave a Reply