Extend a Fiori Application with SAP Web IDE Part 1

In this blog, I will show you how to extend a standard SAP Fiori application (here: Purchase Order Approval)  using a SAP Web IDE. The different possibilities of extending a Fiori app view are shown:

Part 1: hide a control,

Part 2: extend by implementing an extension point & replace a view

Part 3: replace a service

Start creating a new Extension Project

+++new Version:  SAP Web IDE 1.16 +++ (for more Informations about the new Features look here  )

Start SAP Web IDE from your browser

Click on Local folder and start by creating a new extension project (File > New > Extension Project)

From step 1 in the wizard, click Remote…, and select SAPUI5 ABAP Repository to access the remote SAP Gateway system which has the
standard SAP Fiori PO Approval application deployed.

In the Select Application from SAPUI5 ABAP Repository dialog, select your SAP Gateway System.

NOTE: Please be aware that the server used in this blog is just an example, thus you may not have granted access to it.

All available applications on you system are shown.

Search for “purchase” to show search and filter capabilities

Select MM_PO_APV Approve Purchase Orders and click OK.

You may change the proposed project name to e.g. POApprovalExtended or leave it as proposed by SAP Web IDE ‘MM_PO_APVExtension’ Then click Next.

Check Open Extension Project in extensibility pane and click Finish.  An extension project is created in your workspace

If authentication is required, enter User Name and PW for your SAPGateway system.

The application Preview Pane automatically opens in Preview Mode. Once the application is loaded and the data has been fetched from the backend, you can see that the application is fully running.

Explore the features of the preview. Display the app in the different screen sizes. When in Small size, change the orientation.

At the end, go back to Large or Medium size.

.

In the application Outline, select the Show property Extensible Elements in the drop down list

Toggle to Extensibility Mode by clicking Preview Mode down arrow. Notice that the app gets a shadow.
Hover the mouse of the controls in the app. Notice how views are highlighted and the scrolling occurs automatically.

Extend the app by hiding an existing control

In the app, navigate to the view S4 by scrolling down in the detail view until you see the Items table, click on an item.

Note:  You may need to toggle off Extensibility Mode, because in Extensibility Mode you cannot navigate to other views.

We are going to hide the Pricing Conditions in the view S4.

Make sure you are in Extensibility Mode.

Select the Pricing Condition at the bottom of the view. To highlight the control you need to point the mouse pointer to the right or left side of the table.
Alternatively, you may select in the Outline the PricingCondTable under S4.

Select Hide Control in the drop-down of Extend to hide it – busy indicator appears, followed by a popup message saying the extension was added successfully.

Alternatively, you can right-click on PricingCondTable in the Outline and select Hide Control

A pop-up window appears to indicate that the control is successfully hidden. Click Yes to refresh the application.

Navigate to S4 view and show the control was hidden

In Outline section, under Show field, drop down to select Extended Elements.  Now, you can see that under S4 element PricingCondTable is listed as Hidden.

Close the Extensibility Pane by clicking on the X on the top right

In the next part I will show you how you can extend an Fiori App by implementing an extension point and how you can replace a view.

More Web IDE stuff published by Technology RIG 🙂

See you

Claudi