Click “See Demo In Action” to experience Fiori applications available from SAP
You can experience with various applications by clicking the relevant tile that launches the application. We’ll try “My Leave Request”. This is the application we’d like to extend.
Open the Web IDE
Continuing from the previous chapter where we located the “My Leave Request” app. Click the “Extend” button
Click the “Get Started” button.If you are a SAP employee skip step 3-5.
If you aren’t registered click on Register. If you have an Account enter your User Credentials and Click Log On (skip step 4 and 5)
To register enter your Name, Email and a Password, accept the Conditions and click Register
You will get an email, there click on the Activation Button. Go back to your Fiori Logon (see Step 3) and log on with your new credentials.
Wait a few seconds for the account generation
Click the “Extend” icon and then select “Develop Apps” option
In the search field type “leave” to easily locate the “My Leave Request” app we want to extend
Launch “SAP Web IDE”, which is the recommended tool to develop and extend Fiori and SAPUI5 apps directly from the Fiori Cloud Demo
Confirm the extension project generation by clicking “OK”
Provide your credentials
You can change the name of the extension project. Click “OK” to proceed.
The SAP Web IDE is launched with the generated extension project
Extending a Fiori Application - Extending a Controller
For this part of the exercise, you will modify the application’s logic. Whenever a user click a date or a range – a “toast” with the selection will appear at the bottom of the screen.
The graphical extensibility pane (“Tools > Extensibility Pane”) is the easiest way to preview the app and extend it. If Extensibility Pane is grey, check if you have selected your project!
Provide your HCP credentials (if required)
And preview the application
First we need to find the extension point for the user selecting a date.
In the “Outline” pane filter for “Show extensible elements”, drill-down “Controllers > S1”
Select “extHookTapOnDate”, right-click on it and select “Extend UI Controller Hook". extHookTabOnDate is the Controller which is used when we choose a date or a date range
We’ll receive a notification that the extension code stub was created. We’ll open the extension code directly from the notification. Click “Go to extension Code”
The extension code is available in the Editor pane
Replace the hook implementation comment with the following blue marked code. The Code Snippet checks whether we have selected a single day or a range of dates. The result is shown in a small pop up which is called “toast”.