How To Extend A SAP Fiori App (HCM - TS - APV) From Remote Using The Extensibility Pane PDF

SAP River Rapid Development Environment
How-To Guide
Provided by Customer Experience Group
Extend a SAP FIORI app (HCM_TS_APV) from

remote using the extensibility pane
Applicable Releases:
SAP River Rapid Development Environment 1.0
Version 1.0 - May 2014
Extend a SAP FIORI app (HCM_TS_APV) from remote using the extensibility pane
Document History
Document Version
Authored By
Description
1.0
Customer Experience
Group
First release of this guide
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 ..............................................................................................................10
4.3 Adding a button to the extended view ............................................................................................12
4.4 Extending a controller ....................................................................................................................14
4.5 Hiding a UI control .........................................................................................................................17
1.
BUSINESS SCENARIO
SAP River Rapid Development Environment (or SAP River RDE) 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 River RDE system, open the browser and enter the URL of your system.
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) Hide a UI control
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 River RDE

2. Select the highest level in your project explorer (the Local root)
3. Choose File New Extension Project
4. Click on Remote
5. Select your OData server and click on OK
6. Enter the credentials provided by your instructor and click on Log In
7. Wait until you get the list of the available OData services
8. Search for HCM_TS_APV, select it in the list and click on OK
9. The Application location and the Extension Project name will be compiled automatically. Click on
the down arrow at the bottom of the page to go to the next screen
10. Click on Finish
11. Your extension project has been created
12. To check if the Fiori extension app is running correctly, select the index.html file and click on the
button Run
13. Enter the credentials provided by your instructor
You have successfully created and tested your new extension project
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.
Choos e th e men u op tio n File -> New -> P r ojec t

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 Extend button
10
4. Click on OK
5. Double click on the S2Custom.view.xml file and it will open on the right side
6. 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.

2. 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"/>
and paste it just below this one
4. Your new code should look as this:
5. Save the file
12
6. Select the index.html file in the extension project and click on Run
7. Enter again the credentials you have been given by the instructor and click on Log In
8. 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
9. Close the Page Preview by clicking on the x symbol
You have successfully added a new button to the extended view
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.

2. Right click on the extension project and select New Extension
3. Check that the extension project is correct and move forward
14
4. Select Extend Controller
5. Choose the Controller = S2 as the controller you want to extend
6. Click on Finish
7. The new controller extension has been created
15
8. 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!");
}
9. Select the index.html file and click on Run
10. Click on the new Display button and you should get the message you have put in the code
You have successfully added some logic to new button
16
4.5
Hiding a UI control
...
As a final exercise we are going to see how to hide an existing control in a view. In particular we will see how
to ide the Notes button in the content part of the app

2. Select the extension project and choose Tools Extensibility Pane
17
3. A new overlapping window will open. From this window, select first the button you want to hide. On
the left pane you will get the name of the control that needs to be hidden. In this case its
TSA_LIST_DAYENTRY_NotesCell, then choose Hide Control from the list and click on the OK
button
4. Looking at the extensibility pane you can see that the control already disappeared
5. Close the extensibility pane
18
6. 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
7. Select the index.html file and click on Run
8. The Notes button is no longer visible in the extended view
9. Congratulation! You have successfully extended your app.
19
www.sap.com
2014 SAP AG. 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 AG 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 AG 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.

How To Extend A SAP Fiori App (HCM - TS - APV) From Remote Using The Extensibility Pane PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

How To Extend A SAP Fiori App (HCM - TS - APV) From Remote Using The Extensibility Pane PDF

Uploaded by

Copyright:

Available Formats

SAP River Rapid Development Environment

Provided by Customer Experience Group

Extend a SAP FIORI app (HCM_TS_APV) from

First release of this guide

Business Scenario ................................................................................................................................. 4

Background Information ...................................................................................................................... 4

Step-by-Step Procedure ....................................................................................................................... 5

This is the sequence of steps:

Creating an extension project

1. Open SAP River RDE

3. Choose File New Extension Project

5. Select your OData server and click on OK

6. Enter the credentials provided by your instructor and click on Log In

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

10. Click on Finish

11. Your extension project has been created

13. Enter the credentials provided by your instructor

Replacing an existing view

1. Open SAP River RDE

6. You have successfully extended the original S2 view.

Adding a button to the extended view

1. Open SAP River RDE

4. Your new code should look as this:

5. Save the file

9. Close the Page Preview by clicking on the x symbol

You have successfully added a new button to the extended view

1. Open SAP River RDE

3. Check that the extension project is correct and move forward

4. Select Extend Controller

5. Choose the Controller = S2 as the controller you want to extend

7. The new controller extension has been created

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

You have successfully added some logic to new button

Choos e th e men u op tio n File -> New -> P r ojec t

1. Open SAP River RDE

5. Close the extensibility pane

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

8. The Notes button is no longer visible in the extended view

9. Congratulation! You have successfully extended your app.

2014 SAP AG. All rights reserved.

You might also like