Extend and Develop Guide Me

Guide Me SAP Best Practice Documentation Document Version: 1.0 2015-04-14

CUSTOMER

Extend and Develop SAP Fiori Apps

2

Customer

2015 SAP SE or an SAP affiliate company. All rights reserved.


Typographic Conventions

Typographic Conventions

Type Style Description

Example Words or characters quoted from the screen. These include field names, screen titles,

pushbuttons labels, menu names, menu paths, and menu options.

Textual cross-references to other documents.

Example Emphasized words or expressions.

EXAMPLE Technical names of system objects. These include report names, program names,

transaction codes, table names, and key concepts of a programming language when they

are surrounded by body text, for example, SELECT and INCLUDE.

Example Output on the screen. This includes file and directory names and their paths, messages,

names of variables and parameters, source text, and names of installation, upgrade and

database tools.

Example Exact user entry. These are words or characters that you enter in the system exactly as they

appear in the documentation.

Variable user entry. Angle brackets indicate that you replace these words and characters

with appropriate entries to make entries in the system.

EXAMPLE Keys on the keyboard, for example, F2 or ENTER .


Document History

Customer

2015 SAP SE or an SAP affiliate company. All rights reserved. 3

Document History

Version Date Change

1.0 2015-04-14 Initial version.

4

Customer



Table of Contents

Table of Contents

1 Intro 5

2 Start 6

3 Enhance 9 3.1 Hide an Object 9 3.2 Change a Label 13

4 Deploy 17 4.1 Deploy App and Register to SAP Fiori Launchpad 17 4.2 Assign the App in the SAP Fiori Launchpad 20


Customer


1 Intro

SAPs user experience (UX) strategy includes the design and development of delightful applications which adhere

to the SAP Fiori UX design principles. SAP Fiori applications can be deployed in the cloud or on premise and are

updated frequently. Be sure to experience SAP Fiori applications in the cloud if you would like to stay up to date on

the latest SAP Fiori cloud capabilities.

This guide will walk you through steps to extend an SAP Fiori app by yourself. The following extension use cases

are described:

Hide an Object

Change a Label

Create your own tailored extension app customized to your needs. Enjoy!

6

CUSTOMER



2 Start

Using the SAP Web IDE environment, you can extend the SAP delivered Fiori apps easily. The following steps are

the same no matter which, app you extend. In a nutshell, the following steps describe how an extension project in

the SAP Web IDE environment is created.

Procedure

1. Choose from the top menu.

2. Choose the Develop Apps option.

3. The Select an app to extend or edit selection dialog appears.

You have two options to choose from:

Option 1 SAP Content

Select an app of your choice from the list. This list contains all apps that are available in the SAP Fiori

cloud. Once an app is selected, an extension project in the SAP Web IDE environment is created.

Option 2 My Content

If you have already extended an app, the My Content list provides an overview which app has already

been extended. Choosing an item from this list will take you to SAP Web IDE and the project you have

already created for this app before so you can edit your code.


Customer


Note: Only Option 1 SAP Content is described here. For Option2 My Content, the process is nearly

the same.

4. Choose the SAP Web IDE button to create an extension project.

Note: The name of the selected app in displayed in the header.

5. Confirm the External Commands Confirmation dialog box

Note: Depending on your choice a different extension project will be created.

6. Enter your credentials for the SAP HANA Cloud Platform and choose Login if required.

8

CUSTOMER



7. In the Extension Project Name dialog box, enter the Project Name and choose OK.

Result

You are now logged in SAP Web IDE. A folder was created with the app code in the left pane under Local.

You are ready to go to adapt your selected SAP Fiori app.


Customer


3 Enhance

Following the Enhance section, you create your own tailored extension app customized to your needs. The

following use cases are described:

Hide an Object

Change a Label

3.1 Hide an Object

Use

Using the Approve Purchase Order and My Leave Requests app as an example, this section describes how to

hide an object. You can hide complete screen areas or specific fields customized to your needs. No coding needs

to be adapted manually. SAP Web IDE supports here with an intuitive user interface.

Prerequisite

You have already accessed SAP Web IDE as described in Start.

Example 1: Approve Purchase Order

In this example, the field Employee and Company Code are hidden from the User Interface. See here a screenshot

of the original app:

10

CUSTOMER



1. Select the folder of the app under Local in the left pane.

2. From the menu, choose Tools > Extensibility Pane to open the Extensibility Pane.

3. You must switch from Preview Mode to Extensibility Mode. From the menu, choose Preview Mode and

switch to Extensibility Mode in the dropdown.

4. Once you hover the mouse over the app displayed, the respective fields or areas are highlighted. The

corresponding elements are displayed in the Outline pane on the right.

5. Select the element you want to hide. In this example, we use the Employee field (element:

ObjectHeaderAttributeCreatedByName) and Company Code (element: POInformationCompany).

6. Right-click the selected element in the Outline pane and choose Hide Control from the dropdown.

7. Confirm the dialog box to refresh the application.


Customer


8. In the Preview Mode, check the output of the app. The field Employee is now hidden.

9. From the menu, choose Preview Mode and switch to Extensibility Mode in the dropdown again.

10. Choose the Company Code field.

11. Right-click the selected element in the Outline pane and choose Hide Control from the dropdown.

12. Choose Hide Control option.

13. Confirm the dialog box to refresh the application.

14. You have now hidden the Company Code field in addition:

12

CUSTOMER



15. Close the outline view by choosing the cross in the upper right corner

16. Save your edits.

Note

You can easily undo your changes by selecting the hidden object in the Outline pane. Right mouse and

choose the option Remove Extension.

Result

You have hidden the objects of your choice. For deploying your changes to the SAP HANA Cloud platform and to

deploy the app on the Fiori Launchpad, carry out the steps in Deploy.

Example 2: My Leave Requests

Prerequisite

You have already accessed SAP Web IDE as described in Start.

Procedure

In this example the Notes field in the My Leave Requests application is hidden.

1. Select the folder of the app under Local in the left pane.

2. From the menu, choose Tools > Extensibility Pane to open the Extensibility Pane.

3. You must switch from Preview Mode to Extensibility Mode. From the menu, choose Preview Mode and

switch to Extensibility Mode in the dropdown.

4. Choose the Note area

5. Right-click the selected field in the Outline pane and choose Hide Control.


Customer


6. Confirm the Application Changed dialog box.

7. Choose the label of the Note field to hide the label as well.

Note

You might need to change to Extensibility Mode again.

Result

You have hidden the notes area and label.

3.2 Change a Label

You can change field labels in the way the SAP Fiori app talks in your enterprise specific language, for example,

you can change the labels for different languages. Using the example app Approve Purchase Order, this section

showcases how to change a field label, a button label and the title of a screen area.

Prerequisite

You have already entered the SAP Web IDE environment as described in Start.

Procedure

1. In SAP Web IDE, select the folder of the Extension Project that was created under Local in the left pane.

14

CUSTOMER



2. Right-click the selected project and choose New -> Extension.

3. A wizard for the creation of the Extension Project creation is displayed. Choose Next since the Extension

Project location is already prefilled.

4. Select i18n Resource Text Customization and choose Next.


Customer


5. Choose Finish and confirm the Authentication Dialog which may show up.

A new folder i18n including the language files was created. This example describes how to change the labels

using the English language file. See here a screenshot of the original app highlighting the labels to be changed in

this example:

6. Double-click the file i18_en.properties to open it and to adapt labels for English.

7. Change the title of a screen area: To change the title of the detail screen, search for the property

DETAIL_TITLE

16

CUSTOMER



8. Make the following changes:

Code before change DETAIL_TITLE=Purchase Order

Code after change DETAIL_TITLE=Purchase Order Details

9. Change a field label: To change the Purchase Order field label, make the following edits:

Code before change view.PurchaseOrder.purchaseOrderLabel=Purchase Order

Code after change view.PurchaseOrder.purchaseOrderLabel=Purchase Order ID

10. Change a button label: To change the Check button, make the following edits:

Code before change XBUT_APPROVE=Approve

Code after change XBUT_APPROVE=Approve now

11. Save your changes.

12. From the menu, choose Run -> Run as -> SAP Fiori Component to preview the app.

13. Check your changes in the preview:

Result

You have adapted labels for the selected languages. For deploying your changes to the SAP HANA Cloud platform

and to deploy the app on the Fiori Launchpad, carry out the steps in Deploy.


Customer


4 Deploy

In this step, you deploy your created extension project to the SAP HANA Cloud Platform (HCP) and to the SAP

Fiori Launchpad. Your extended app can then be accessed from SAP Fiori Launchpad.

4.1 Deploy App and Register to SAP Fiori Launchpad

Procedure

1. Right-click the Extension Project you want to publish and choose Deploy -> Deploy to SAP HANA Cloud

Platform.

18

CUSTOMER



2. In the Deploy to SAP HANA Cloud Platform dialog box enter a version ID and choose Activate. Finalize the

dialog and choose Deploy.

3. Your project has been deployed to SAP HANA Cloud Platform.

4. Choose Register to SAP Fiori Launchpad.


Customer


5. Choose Next

6. Enter a Title and, optionally, a Subtitle of your choice.

7. Choose Next.

20

CUSTOMER



Note

The assignment to a Group is optional. Once you assign it to a group, the next step Assgin the App in the

SAP Fiori Launchpad is optional as well. In this example, the app will show up in the group my Apps in

the Fiori Launchpad.

If you assign no group here, you must walk through.

8. Finalize the 4 Confirmation dialog and choose Finish.

9. Confirm the Successfully Registered dialog box.

Result

You have deployed your extension project to the SAP HANA Cloud Platform and registered the app to the SAP

Fiori Launchpad.

4.2 Assign the App in the SAP Fiori Launchpad

This step describes how to make the app visible in the SAP Fiori Launchpad.

Procedure

1. Access the SAP Fiori Launchpad.

2. Choose the Show/hide group panel button in the upper right corner to open the group panel.


Customer


3. Open the Tile Catalog.

4. Search for your extended app. You can set a filter on the catalog since you have already assigned the app in

the previous step in the Register to Fiori Launchpad wizard in step 3 Assign.

5. Choose the + at the bottom of the app tile. Select a group of your choice.

22

CUSTOMER



6. Choose OK.

7. Go back to the Launchpad and find your app.

Result

Your extended app is accessible via the SAP Fiori Launchpad.

www.sap.com/contactsap


No part of this publication may be reproduced or transmitted in any

form or for any purpose without the express permission of SAP SE

or an SAP affiliate company.

The information contained herein may be changed without prior

notice. Some software products marketed by SAP SE and its

distributors contain proprietary software components of other

software vendors. National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company

for informational purposes only, without representation or warranty

of any kind, and SAP or its affiliated companies shall not be liable for

errors or omissions with respect to the materials. The only

warranties for SAP or SAP affiliate company 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.

SAP and other SAP products and services mentioned herein as well

as their respective logos are trademarks or registered trademarks of

SAP SE (or an SAP affiliate company) in Germany and other

countries. All other product and service names mentioned are the

trademarks of their respective companies. Please see

www.sap.com/corporate-en/legal/copyright/index.epx for

additional trademark information and notices.

Material Number:

Documents

Extend and Develop Guide Me