Skip to Content

Extend controller of a standard SAP Fiori app

Previous

Extend controller of a standard SAP Fiori app

By Gregor Wolf

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:

Details

  • Start the extension using the extension pane in SAP Web IDE
  • Locate the controller to extend
  • Test the app

  1. If you’ve already worked through the tutorial Hide view element from a standard SAP Fiori app you can skip the steps 1 to 8. 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
  2. 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
  3. 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
  4. You have to login to the SAP HANA Cloud Platform. Please provide your credentials and then click Login.

    Login to the SAP HANA Cloud Platform
  5. Click OK to accept the project name.

    Extension Project Name
  6. The SAP Web IDE is launched with your extension project created.

    Project in SAP Web IDE
  7. 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
  8. In order to select the view/control to extend, change from Preview Mode to Extensibility Mode.

    Switch to Extensibility Mode
  9. 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
  10. Drill-down to Controllers > S1 and select extHookTapOnDate. Right-click on it and select Extend UI Controller Hook.

    Extend UI Controller Hook
  11. 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
  12. The extension code is displayed in the Editor panel.

    extension code is displayed
  13. 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) {
    		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());
    	}
    
  14. Then, right-click somewhere in the white space of the editor pane and select Beautify.

    beautified code
  15. Save your edits and again note that the asterisk ���*��� on the filename goes away after you click Save.

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

    select index and run
  17. A new browser tab is opened with the application running.

    running app
  18. 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
  19. 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

Updated 12/08/2016

Time to Complete

10 Min.

Beginner

Tags

Next
Back to top