sap river rapid development environment how-to guide · 2019. 11. 12. · select the highest level...

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

2

Document History

Document Version Authored By Description

1.0 Customer Experience

Group

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 ..............................................................................................................10 4.3 Adding a button to the extended view ............................................................................................12 4.4 Extending a controller ....................................................................................................................14 4.5 Hiding a UI control .........................................................................................................................17


4

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.


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


6

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

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


8

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


9

13. Enter the credentials provided by your instructor

You have successfully created and tested your new extension project


10

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


11

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.


12

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. Choos e th e men u op tio n File -> New -> Projec t


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


13

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


14

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. Choos e th e men u op tio n File -> New -> Projec t


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

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


15

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


16

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


17

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

Choos e th e men u op tio n File -> New -> Projec t


2. Select the extension project and choose Tools Extensibility Pane


18

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

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


19

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.

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

www.sap.com

sap river rapid development environment how-to guide · 2019. 11. 12. · select the highest level...

Documents