Skip to Content

Hide view element from a standard SAP Fiori app


Hide view element from a standard SAP Fiori app

By Gregor Wolf

This tutorial shows you how to hide a view element from a standard SAP Fiori app.

You will learn

In this tutorial you will learn how to hide a view element from a standard SAP Fiori app. The app that you will extended in this tutorial is “My Leave Requests”. The key steps are:


  • Start the extension using the extension pane in SAP Web IDE
  • Locate the view element to hide
  • Test the app

  1. Please make sure that you have worked through the tutorial Getting started with the SAP Fiori, Demo Cloud Edition. Log into the SAP Fiori Demo Cloud Edition and locate the group Human Capital Management. Click on the My Leave Requests tile.

    SAP Fiori launchpad group Human Capital Management
  2. Open the Standard app and familiarize yourself with how it appears. To start extending the app click on the gear wheel icon on the top right beside your name and choose Develop Apps:

    Options menu
  3. You will be forwarded to a screen called “Create App Extension” where you find instructions for the next steps. Click the Launch SAP Web IDE button. You may have to click this button twice as the new tab may remain empty on the first attempt.

    Create App Extension
  4. You have to login to the SAP HANA Cloud Platform. Please provide your credentials and then click Login.

    Login to the SAP HANA Cloud Platform
  5. Click OK to accept the project name.

    Extension Project Name
  6. The SAP Web IDE is launched with your extension project created.

    Project in SAP Web IDE
  7. With your extension project folder selected, the graphical extensibility pane is the easiest way to preview the app and extend it. Start it via Tools > Extensibility Pane.

    Extensibility Pane
  8. In order to select the view/control to extend, change from Preview Mode to Extensibility Mode.

    Switch to Extensibility Mode
  9. You’ll see that hovering over the views/controls on the left highlights them in sync in the Outline pane on the right.

  10. Clicking a control in the graphical pane or in the Outline pane will change its color in the graphical pane to pink and highlights it in the Outline pane in blue. You can continue to hover over the graphical pane.

    Control selected
  11. There are several ways to extend a control. You will use the Outline pane to make the change. Select the Legend either in the graphical pane or the Outline pane. Go to the Outline pane, right click the blue highlighted item LRS4_LEGEN and select Hide Control

    Hide Control
  12. You receive a notification that the change was implemented. Click Refresh to view the change.

    Control was hidden
  13. Note that the legend is now gone from the graphical pane, but still present (listed as hidden) in the outline pane.

    legend is gone from the graphical pane but present in the outline pane
  14. An interesting feature of the Web IDE is to view a list of controls that are extended. Select Show extended elements in the Outline Pane filter pulldown menu.

    Show extended elements
  15. You will see that the legend you just hid is the only control shown.

    Show extended elements details

Congratulations, you’ve successfully hid a view element from a SAP Standard Fiori app.

Next Steps

Updated 12/22/2016

Time to Complete

10 Min.



Back to top