How to Extend the SAP FIORI App HCM Timesheet Approval
April 1, 2017 | Author: nikebara | Category: N/A
Short Description
Download How to Extend the SAP FIORI App HCM Timesheet Approval...
Description
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
2
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
3
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.
4
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
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
6
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
7
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
8
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
9
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 tag add the following line 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. 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: let’s 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 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
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 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
Extend the SAP FIORI app HCM Timesheet Approval
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
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 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
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.
View more...
Comments
