Skip to Content

Extend controller of a standard SAP Fiori app

0 %
Extend controller of a standard SAP Fiori app
// Explore More Tutorials

Extend controller of a standard SAP Fiori app


This tutorial shows you how to extend the controller of a standard SAP Fiori app.

You will learn

In this tutorial you will learn how to extend the controller of 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 controller to extend
  • Test the app

Step 1: Log into the SAP Fiori Demo Cloud Edition

If you’ve already worked through the tutorial Hide view element from a standard SAP Fiori app you can skip the steps 1 to 6. 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
Step 2: Open the Standard app

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

Create App Extension
Step 4: Log into the SAP Cloud Platform

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

Login to the SAP Cloud Platform

Click OK to accept the project name.

Extension Project Name

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

Project in SAP Web IDE
Step 5: 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.

Extensibility Pane
Step 6: Switch view to extensibility mode
  1. In order to select the view/control to extend, change from Preview Mode to Extensibility Mode.
Switch to Extensibility Mode
Step 7: Show extensible elements

The first step is to find the extension point for the user selecting a date. In the Outline pane filter for Show extensible elements.

Show extensible elements
Step 8: Extend UI controller hook

Drill down to Controllers > S1 and select extHookTapOnDate. Right-click on it and select Extend UI Controller Hook.

Extend UI Controller Hook
Step 9: Open extension code

A notification that the extension code stub was generated appears. This time open the extension code directly by clicking on Open Extension Code.

Open Extension Code

The extension code is displayed in the Editor panel.

extension code is displayed
Step 10: Replace comment with code

In S1Custom.controller.js, replace the hook implementation comment // Place your hook implementation code here with the code below.

var arr = this.cale.getSelectedDates();
if (arr.length === 1) {[0]);
} else if (arr.length > 1) {
var index = arr.length - 1;
var orderedArr = [];
for (var date in arr) {
orderedArr.sort(); Date(orderedArr[0]).toDateString() + " - " + new Date(orderedArr[index]).toDateString());
Step 11: Beautify the code

Then, right-click somewhere in the white space of the editor pane and select Beautify.

beautified code
Step 12: Save your edits

Save your edits and again note that the asterisk ( * ) on the filename goes away after you click Save.

code saved
Step 13: Run code to test

Test out your changes by selecting the index.html file and clicking the Run icon.

select index and run

A new browser tab is opened with the application running.

running app
Step 14: Test with single date

Test it with one date, by clicking on a single day and notice the toast displayed at the bottom of the screen.

toast for a single day
Step 15: Test with date range

Test it with a date range by clicking on another day (the second date can be before or after the first date selected).

toast multiple days

Congratulations, you’ve successfully extended a controller of a SAP Standard Fiori app.

Next Steps

Back to top