How to Extend the SAP FIORI app HCM Timesheet Approval · 2019. 11. 12. · Extend the SAP FIORI app HCM Timesheet Approval 5 4. STEP-BY-STEP PROCEDURE This is the sequence of steps:

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

2

Document History Document Version Authored By Description

1.2 Customer Experience Group

Name changed and information updated


Added chapter about extending a view through an extension point and changed all the screenshots


First release of this guide


3

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


4

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.


5

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…


6

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


7

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


8

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


9

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 menu 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


10

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.


11

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 menu 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


12

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


13

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 menu 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


14

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


15

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


16

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 menu option File -‐> New -‐> Project

1. Open SAP Web IDE


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


17

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.


18

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.


19

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: let’s see how to ide the “Notes” button in the content part of the app

Choose the menu option File -‐> New -‐> Project

1. Open SAP Web IDE


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


20

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 it’s selected. At the same time, on the right side, the control ID is highlighted: it’s 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


21

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.


22

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


23

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 project’s 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


24

7. Let’s 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


25

11. Close the preview tab and go back to your project. Double click on the file named .project.json you can find under your project’s 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 column’s header

15. Your change has been successfully applied.

© 2014 SAP SE. All rights reserved.

SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAPBusinessObjects Explorer, StreamWork, SAP HANA, and other SAPproducts and services mentioned herein as well as their respectivelogos are trademarks or registered trademarks of SAP SE in Germanyand other countries.

Business Objects and the Business Objects logo, BusinessObjects,Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, andother Business Objects products and services mentioned herein aswell as their respective logos are trademarks or registered trademarksof Business Objects Software Ltd. Business Objects is an SAPcompany.

Sybase and Adaptive Server, iAnywhere, Sybase 365, SQLAnywhere, and other Sybase products and services mentioned hereinas well as their respective logos are trademarks or registeredtrademarks of Sybase Inc. Sybase is an SAP company.

Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services areregistered trademarks of Crossgate AG in Germany and othercountries. Crossgate is an SAP company.

All other product and service names mentioned are the trademarks oftheir respective companies. Data contained in this document servesinformational purposes only. National product specifications may vary.

These materials are subject to change without notice. These materialsare provided by SAP SE and its affiliated companies ("SAP Group")for informational purposes only, without representation or warranty ofany kind, and SAP Group shall not be liable for errors or omissionswith respect to the materials. The only warranties for SAP Groupproducts and services are those that are set forth in the expresswarranty statements accompanying such products and services, ifany. Nothing herein should be construed as constituting an additionalwarranty.

www.sap.com

Documents

How to Extend the SAP FIORI app HCM Timesheet Approval · 2019. 11. 12. · Extend the SAP FIORI app HCM Timesheet Approval 5 4. STEP-BY-STEP PROCEDURE This is the sequence of steps: