For this blog, we use the SAP Fiori Demo Cloud Edition.
We will begin by locating the “My Leave Request” App and launch SAP Web IDE in your browser.
We will extend a Controller Hook of the S1 view, and used the Layout to extend a replaced view (Part 2) and deploy it to our Fiori Launchpad (FLP) (Part 3).
Part 1: Open the SAP Fiori Demo Cloud Edition, Extend the S1 view
Part 2: Add A Control with the Layout Editor
Part 3: Deploying to the SAP Fiori Launchpad
Locating Fiori Application
For this part of the exercise, you will access a library of Fiori applications that are available from SAP Fiori Demo Cloud Edition in order to choose the application to extend (customize).
Open the SAP Fiori Demo Cloud Edition
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”.
sap.ui.controller("hcm.emp.myleaverequests.hcmempmyleaverequestsExtension.view.S1Custom",
{
extHookTapOnDate:function() {
var arr = this.cale.getSelectedDates();
if (arr.length=== 1) {
sap.m.MessageToast.show(arr[0]);
} else if (arr.length > 1) {
var index = arr.length - 1;
var orderedArr = [];
for (var date in arr) {
orderedArr.push(Date.parse(arr[date]));
}
orderedArr.sort();
sap.m.MessageToast.show(new Date(orderedArr[0]).toDateString() + " - " + new Date(orderedArr[index]).toDateString());
}
}
});
Beautify it (Edit > Beautify)
And do not forget to save!
Click the “Run” icon to test the application. Choose index.html in the pop up
A new browser tab is opened with the application running in it
Test it with a single date selected
Test it with a date range
Close the Preview Tab
In the next part we will replace the S1 view and extend the new view with the layout editor.
More Web IDE stuff published by Technology RIG
See you
Claudi