SAP Web Integrated Development Environment

How-To Guide

Provided by Customer Experience Group

Extend the SAP FIORI app HCM Timesheet

Approval

Applicable Releases:
SAP Web Integrated Development Environment 1.4
Version 1.2 - October 2014

Extend the SAP FIORI app HCM Timesheet Approval

Document History
Document Version

Authored By

Description

1.2

Customer Experience
Group

Name changed and information updated

1.1

Customer Experience
Group

Added chapter about extending a view through an

extension point and changed all the screenshots

1.0

Customer Experience
Group

First release of this guide

Extend the SAP FIORI app HCM Timesheet Approval

TABLE OF CONTENTS
1. Business Scenario ............................................................................................................................... 4
2. Background Information .................................................................................................................... 4
3. Prerequisites ...................................................................................................................................... 4
4. Step-by-Step Procedure ..................................................................................................................... 5
4.1 Creating an extension project .............................................................................................................. 5
4.2 Replacing an existing view ................................................................................................................... 9
4.3 Adding a button to the extended view ............................................................................................... 11
4.4 Extending a controller ........................................................................................................................ 13
4.5 Extending a view through an extension point .................................................................................... 16
4.6 Hiding a UI control ............................................................................................................................. 19
4.7 Extending the i18n Resource Text ...................................................................................................... 22

Extend the SAP FIORI app HCM Timesheet Approval

1.

BUSINESS SCENARIO

SAP Web Integrated Development Environment (or SAP Web IDE) is a next-generation cloud-based
meeting space where multiple project stakeholders can work together from a common web interface -connecting to the same shared repository with virtually no setup required. It includes multiple interactive
features that allow you to collaborate with your colleagues and accelerate the development of your
HTML5/UI5 applications.
2.

BACKGROUND INFORMATION

In this How-To Guide we will start off by extending an existing SAP FIORI app (HCM_TS_APV) directly from the
gateway server. We will extend an existing view; we will add a new button to it and some logic to the new button.
Finally we will see how to hide an existing control in the extended app. For some of these extensions we will use the
Extensibility Pane feature.

3.

PREREQUISITES

To connect to your SAP Web IDE system, open the browser and enter the URL of your system.

Extend the SAP FIORI app HCM Timesheet Approval

4.

STEP-BY-STEP PROCEDURE

This is the sequence of steps:

1) Create an extension project
2) Replace an existing view
3) Add a button to the extended view
4) Extend a controller
5) Extend a view through an extension point
6) Hide a UI control
7) Extending the i18n Resource Text

4.1

Creating an extension project

In this exercise we will create an extension project for the FIORI application HCM_TS_APV
...

1. Open SAP Web IDE

2. Select the highest level in your project explorer (the Local root)

3. Choose File New Extension Project

4. Click on Remote

Extend the SAP FIORI app HCM Timesheet Approval

5. Select SAPUI5 ABAP Repository

6. In the next screen, browse for your OData server

7. Enter the required credentials and click on Log In

8. Wait until you get the list of the available OData services

Extend the SAP FIORI app HCM Timesheet Approval

9. Search for HCM_TS_APV, select it in the list and click on OK

10. The Parent Application and the Extension Project Name will be compiled automatically. Do not enable the two
checkboxes and click on Next

11. Click on Finish

12. Your extension project has been created successfully

Extend the SAP FIORI app HCM Timesheet Approval

13. To check if the Fiori extension app is running correctly, select the index.html file and click on the button
Run

14. Enter the required credentials if needed

15. The application is executed

16. You have successfully created and tested your new extension project. You can close now the Application
Preview tab

Extend the SAP FIORI app HCM Timesheet Approval

4.2

Replacing an existing view

...

As our first extension exercise we are going to see how to replace an existing view in the extended
application.

Choose the m enu option File -> New -> Project

1. Open SAP Web IDE

2. Select the extension project and choose Tools Extensibility Pane

3. A new overlapping window will open. From this window, select first the S2 view, then choose Replace with
copy of the parent view and click on the OK button

4. Answer No for now to this request since we have just replaced the S2 view a copy of it, without any change at
moment

Extend the SAP FIORI app HCM Timesheet Approval

5. Keeping the extended view always selected, click on Go to Code Extension Code in the lower right corner of
the pane

6. The extension pane will be closed and the S2Custom.view.xml file will be opened on the right side

7. You have successfully extended the original S2 view.

10

Extend the SAP FIORI app HCM Timesheet Approval

4.3

Adding a button to the extended view

...

We are going to see how to add a very simple button the extended view. This button, after the extension of
its controller, will be used to display an alert message.

Choose the m enu option File -> New -> Project

1. Open SAP Web IDE

2. If not already open, double click on the S2Custom.view.xml file

3. In the source code window, just after the first <content> tag add the following line
<Button icon="sap-icon://display" tap="display"/>
Your new code should look as this:

4. Save the file

11

Extend the SAP FIORI app HCM Timesheet Approval

5. Select the index.html file in the extension project and click on Run

6. Enter again the credentials and click on Log In

7. You should be able to see a new button on the sidebar. If you click, it does nothing at moment. We will add
some code to it in the next part

8. You have successfully added a new button to the extended view. You can now close the Application Preview

12

Extend the SAP FIORI app HCM Timesheet Approval

4.4

Extending a controller

...

Here we can add some logic to the button we added in the previous chapter, by extending the view
controller.

Choose the m enu option File -> New -> Project

1. Open SAP Web IDE

2. Right click on the extension project and select New Extension

3. Check that the extension project is correct and click on Next

4. Select Extend Controller and click on Next

13

Extend the SAP FIORI app HCM Timesheet Approval

5. Choose the Controller = S2 as the controller you want to extend and Replace with = Empty Controller

6. Click on Finish

7. The new controller extension has been created. Double click on the S2Custom.controller.js name on the left
side

8. You may get the following message informing you that the file will be automatically formatted. Click on OK

14

Extend the SAP FIORI app HCM Timesheet Approval

9. Add the following code just after the first row of the source JavaScript code, then click on Save:
display:function(){
alert("Hi, you clicked on Display!");
}

10. Select the index.html file and click on Run

11. Click on the new Display button and you should get the message you have put in the code

12. You have successfully added some logic to new button. You can close now the Application Preview

15

Extend the SAP FIORI app HCM Timesheet Approval

4.5

Extending a view through an extension point

...

We may extend a view even by using some ad-hoc extension points that the developer made available for
us. One of the advantages of using an extension point is that if the original application changes, you are
pretty sure that the extended one will be still working.
In the S3 view of the application used for this example there are a couple of extension points we can use.
One is named extS3Header and another one is named extS3CostHeader. We will use the first one because
we want simply to show an additional label in the header of the S3 view, in particular in the position shown in
this picture.

Choose the m enu option File -> New -> Project

1. Open SAP Web IDE

2. Select the extension project and choose Tools Extensibility Pane

3. Expand the outline to S3 sap.m.Page sap.m.content sap.m.ObjectHeader and select the extS3Header
element. Then choose to Extend View and click on OK

16

Extend the SAP FIORI app HCM Timesheet Approval

4. The extension will be created. Choose No as the answer to the following request

5. Keeping the extension point selected, click on Go to Code Extension Code

6. You will be taken to the source code where you can insert your view extension. Type the following code
between line 1 and line 3 and save the file.
<ObjectAttribute id="ATTR001" text="{DetailModel>/EmpName}"/>
For the sake of simplicity, we are just displaying again the employee name in the header.

17

Extend the SAP FIORI app HCM Timesheet Approval

7. Run the application again and you will find a new label with the employee name in the S3 header

8. Looking at the application structure now, we see that a new file has been added to the view folder. This file is
the one containing our extension fragment

9. Looking instead at the Component.js file we see that some new lines have been added. These lines are the ones
that enable the extension fragment

10. You have successfully extended a view through an extension point.

18

Extend the SAP FIORI app HCM Timesheet Approval

4.6

Hiding a UI control

...

What about if you want to hide an existing SAPUI5 control? Nothing easier! You just need to open the
extensibility pane again and select to hide that control: lets see how to ide the Notes button in the content
part of the app

Choose the m enu option File -> New -> Project

1. Open SAP Web IDE

2. Select the extension project and choose Tools Extensibility Pane

3. Switch the preview mode to Large in order to make it easier to work on the right side

4. Click on the Show button on the first row. This will expand it

19

Extend the SAP FIORI app HCM Timesheet Approval

5. Switch from Preview Mode to Extensibility Mode from the top toolbar

6. Click on the note button and the control will turn pink. This means its selected. At the same time, on the right
side, the control ID is highlighted: its named TSA_LIST_DAYENTRY_NotesCell

7. Select the ID TSA_LIST_DAYENTRY_NotesCell, then choose Hide Control from the list and click on the OK
button

20

Extend the SAP FIORI app HCM Timesheet Approval

8. This time answer Yes to the question to refresh the page to see the changes immediately

9. Looking at the extensibility pane you can see that the control already disappeared

10. Close the extensibility pane

11. If you open the Component.js file you see that some new code has been added in the viewModifications
function in order to hide the selected control

12. If you run the application the Note button results no longer visible in the extended view. Congratulation! You
have successfully extended your app.

21

Extend the SAP FIORI app HCM Timesheet Approval

4.7

Extending the i18n Resource Text

...

You may also want to customize texts for some of the already available languages in the original application.
You can extend your application by downloading the original text files in the extension project and change
them accordingly. In this chapter we will see how to change the header text for one of the columns in the
content view.

1. Open SAP Web IDE

2. Right click on the extension project and select New Extension

3. Check that the extension project is correct and click on Next

22

Extend the SAP FIORI app HCM Timesheet Approval

4. Select the i18n Resource Text Customization and click on Next

5. Click on Finish

6. At the end of the wizard you should find under the projects root a new folder named i18n. This folder contains
all the text resources used by your application, which have been imported from the original one. In our case we
are going to change the text for one of these languages

23

Extend the SAP FIORI app HCM Timesheet Approval

7. Lets suppose we want to change the header of the second column in the content view for the Italian language.
We want to change it from Registrato to Inserito

8. Double click on the resource file related to the Italian language. The resource file will be opened on the right

9. Locate the text with the ID = TSA_RECORDED and change its value to Inserito. Then save the file

10. If you run the application you may notice that you cannot switch to the Italian language from the preview
toolbar

24

Extend the SAP FIORI app HCM Timesheet Approval

11. Close the preview tab and go back to your project. Double click on the file named .project.json you can find
under your projects root

12. Go to the supportedLanguages line and append there the it string. Then save the file

13. Run again the project. You should be able to see the Italian language among the available ones

14. Switch to Italian and check the second columns header

15. Your change has been successfully applied.

25

www.sap.com

2014 SAP SE. All rights reserved.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP
BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP
products and services mentioned herein as well as their respective
logos are trademarks or registered trademarks of SAP SE in Germany
and other countries.
Business Objects and the Business Objects logo, BusinessObjects,
Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and
other Business Objects products and services mentioned herein as
well as their respective logos are trademarks or registered trademarks
of Business Objects Software Ltd. Business Objects is an SAP
company.
Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL
Anywhere, and other Sybase products and services mentioned herein
as well as their respective logos are trademarks or registered
trademarks of Sybase Inc. Sybase is an SAP company.
Crossgate, m@gic EDDY, B2B 360, and B2B 360 Services are
registered trademarks of Crossgate AG in Germany and other
countries. Crossgate is an SAP company.
All other product and service names mentioned are the trademarks of
their respective companies. Data contained in this document serves
informational purposes only. National product specifications may vary.
These materials are subject to change without notice. These materials
are provided by SAP SE and its affiliated companies ("SAP Group")
for informational purposes only, without representation or warranty of
any kind, and SAP Group shall not be liable for errors or omissions
with respect to the materials. The only warranties for SAP Group
products and services are those that are set forth in the express
warranty statements accompanying such products and services, if
any. Nothing herein should be construed as constituting an additional
warranty.