Extend the SAP FIORI app HCM Timesheet Approval

Transcription

1 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 October 2014

2 Document History Document Version Authored By Description 1.2 Customer Experience Group 1.1 Customer Experience Group 1.0 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 2

3 TABLE OF CONTENTS 1. Business Scenario Background Information Prerequisites Step- by- Step Procedure Creating an extension project Replacing an existing view Adding a button to the extended view Extending a controller Extending a view through an extension point Hiding a UI control Extending the i18n Resource Text

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. 4

5 ... 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 5

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 6

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 7

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 8

9 Choose the menu option File - > New - > Project 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. 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 9

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. 10

11 Choose the menu option File - > New - > Project 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. 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

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 12

13 Choose the menu option File - > New - > Project 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. 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

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 14

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 15

16 Choose the menu option File - > New - > Project 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. 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

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. 17

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. 18

19 Choose the menu option File - > New - > Project 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: let s see how to ide the Notes button in the content part of the app 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

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 20

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. 21

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 22

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 23

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 24

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. 25

26 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, 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.