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.

/wp-content/uploads/2015/07/01_752112.png /wp-content/uploads/2015/07/02_752113.png /wp-content/uploads/2015/07/03_752150.png

Open the Web IDE

Continuing from the previous chapter where we located the “My Leave Request” app. Click the “Extend” button

/wp-content/uploads/2015/07/101_752153.png

Click the “Get Started” button.If you are a SAP employee skip step 3-5.

/wp-content/uploads/2015/07/102_752154.png
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)

/wp-content/uploads/2015/07/103_752155.png
To register enter your Name, Email and a Password, accept the Conditions and click Register

/wp-content/uploads/2015/07/104_752162.png
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.

/wp-content/uploads/2015/07/105_1_752163.png /wp-content/uploads/2015/07/105_2_752164.png
Wait a few seconds for the account generation

Click the “Extend” icon and then select “Develop Apps” option

/wp-content/uploads/2015/07/08_1_752172.png
In the search field type “leave” to easily locate the “My Leave Request” app we want to extend

/wp-content/uploads/2015/07/09_752173.png
Launch “SAP Web IDE”, which is the recommended tool to develop and extend Fiori and SAPUI5 apps directly from the Fiori Cloud Demo

/wp-content/uploads/2015/07/10_752180.png
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

/wp-content/uploads/2015/07/14_752181.png

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!

/wp-content/uploads/2015/07/201_752182.png

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

/wp-content/uploads/2015/07/204_752195.png

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

/wp-content/uploads/2015/07/205_752196.png

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

/wp-content/uploads/2015/07/207_752197.png
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()); 

                               } 

                }

});

/wp-content/uploads/2015/07/208_752204.png

Beautify it (Edit > Beautify)

/wp-content/uploads/2015/07/209_752214.png

And do not forget to save!

/wp-content/uploads/2015/07/210_752215.png

Click the “Run” icon to test the application. Choose index.html in the pop up

/wp-content/uploads/2015/07/211_752213.png

A new browser tab is opened with the application running in it

Test it with a single date selected

/wp-content/uploads/2015/07/213_1_752206.png

Test it with a date range

/wp-content/uploads/2015/07/214_752205.png

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

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Daniel Seehof

    When I’m clicking “Launch Web IDE” in order to extend an existing Fiori application I’m getting a simple HTTP 403 – Forbidden error. Following the tutorial to the letter – any suggestions?

    (0) 
  2. Sajan Mathew

    Hi

    I get an error on the below line of the code 

    var index = arr.length – 1;

    ” error:Syntax Error: ESLint (syntax-parse) : Unexpected  token ILLEGAL”

     

    Full code

    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()); 

                                   } 

                    }

    });

     

     

    (0) 
  3. Mauricio Pinheiro Predolim

    Hi. I have a doubt about extensibility.

    Do i have to connect on-premisse with Hana Cloud Connector or just configure Destinations on SAP Cloud Platform? Whats the difference between both?

    Best regards!

    (0) 

Leave a Reply