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:

Step 3: Launch SAP Web IDE

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.

Step 4: Log into SAP Cloud Platform

You have to log into the SAP Cloud Platform. Please provide your credentials and then click Login.

Step 5: Accept the project name

Click OK to accept the project name.

The SAP Web IDE is launched with your extension project created.

Step 6: Open the graphical extensibility pane

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.

Step 7: Switch to extensibility mode

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

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

Step 8: Explore the graphical pane

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.

Step 9: Hide control

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

Step 10: Refresh the view

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

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

Step 11: Show extended elements

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.