Extend a Fiori Application with SAP Fiori Demo Cloud Edition Part 1

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