How to Enable Multi-Origin Capability in SAP FIORI Apps

SAP Mobility Services

HOW TO ENABLE MULTI-ORIGIN CAPABILITY IN SAP FIORI APPS

-Ashish Singh/Principal Consultant-SAP Mobility Services

Applicable Releases: SAP Project Fiori Program

Version 1.0 March 2014

© Copyright 2014 SAP AG. All rights reserved. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, 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.

SAP “How-to” Guides are intended to simplify the product implementatio n. While specific product features and procedures typically are explained in a practical business context, it is not implied that those features and procedures are the only approach in solving a specific business problem using SAP NetWeaver. NetWeaver. Should you wish to receive additional information, clarification clarification or support, please refer to SAP Consulting.

Any software coding and/or code lines / strings (“Code”) included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent. negligent. Disclaimer Some components of this product are based on Java™. Any code change in these components may cause unpredictable and severe malfunctions and is therefore expressively expressively prohibited, as is any decompilation of these components.

Any Java™ Source Code delivered with this product is only to be used by SAP’s Support Services and may not be modified or altered in any way.

© Copyright 2014 SAP AG. All rights reserved. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, 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.

SAP “How-to” Guides are intended to simplify the product implementatio n. While specific product features and procedures typically are explained in a practical business context, it is not implied that those features and procedures are the only approach in solving a specific business problem using SAP NetWeaver. NetWeaver. Should you wish to receive additional information, clarification clarification or support, please refer to SAP Consulting.

Any software coding and/or code lines / strings (“Code”) included in this documentation are only examples and are not intended to be used in a productive system environment. The Code is only intended better explain and visualize the syntax and phrasing phrasing rules of certain coding. SAP does not warrant the correctness and completeness of the Code given herein, and SAP shall not be liable for errors or damages caused by the usage of the Code, except if such damages were caused by SAP intentionally or grossly negligent. negligent. Disclaimer Some components of this product are based on Java™. Any code change in these components may cause unpredictable and severe malfunctions and is therefore expressively expressively prohibited, as is any decompilation of these components.

Any Java™ Source Code delivered with this product is only to be used by SAP’s Support Services and may not be modified or altered in any way.

Document History Document Version

Description

1.0

First release version

Typographic Conventions

Icons

Type Style

Description

Icon

Example Text

Words or characters quoted from the screen. These include field names, screen titles, pushbutton labels, menu names, menu paths, and menu options. Cross-references to other documentation

Example text

Emphasized words or phrases in body text, graphic titles, and table titles

Example text

File and directory names and their paths, messages, names of variables and parameters, source text, and names of installation, upgrade and database tools.

Example text

User entry texts. These are words or characters that you enter in the system exactly as they appear in the documentation.

EXAMPLE TEXT

Variable user entry. Angle brackets indicate that you replace these words and characters with appropriate entries to make entries in the system. Keys on the keyboard, for example, F2 or ENTER.

Description Caution Note or Important Example Recommendation or Tip

Table of Contents 1.

Getting started........................................................................................................................... 1

2.

What is Multi-Origin feature in Fiori Apps? ...............................................................................1

3.

Prerequisites.............................................................................................................................. 1

4.

Downloading Fiori App Source Code ....................................................................................... 2

5.

Importing Fiori App Source Code into Eclipse ........................................................................ 5

6.

Extending a SAP Fiori App’s Source Code .............................................................................. 8

7.

Creating a SAPUI5 Extension Project in Eclipse...................................................................... 9

8.

Create Component.js file in Extension Project ...................................................................... 10

9.

Handling Multi-Origin capability for Line Item Detail Screen. ................................................ 11 9.1.1

Changing Component.js file in your Extension Project ................................. 11

9.1.2

Extending S3 Controller .................................................................................. 12

9.1.3

Extending S4 Controller. ................................................................................. 12

10.

Uploading customized SAP Fiori App Code ........................................................................ 13

11.

Configure Service in Gateway system ..................................................................................17

12.

Changing Fiori Tile URL for Multi-Origin .............................................................................. 18

13.

Testing your Fiori Application via browser .......................................................................... 20

14.

Appendix ............................................................................................................................... 23 14.1 ABAP Team Provider Wizard Tool .............................................................................. 23

Extending SAP Fiori Apps

1.

Getting started

Throughout the guide, you will learn how to enable multi-origin capability in SAP Fiori Wave 2 Transactional Apps. The example used for this guide is the Time Approval and Travel Expense Approval Fiori Wave 2 Apps. Throughout this guide, said scenario will be extended so the end user can also see the “ MultiOrigin” capability when viewing the Fiori App.

2.

What is Multi-Origin feature in Fiori Apps?

Multi-Origin is feature in the Fiori Apps through which if a Gateway Service has multiple system aliases defined in gateway configuration, then at run time the gateway service goes to each of the

backend system, based on the user’s roles in the backend system and executes the Gateway Service. If you have such a scenario for e.g for a given Fiori Wave 2 App that you need to show work

items from multiple backend systems based on the end user’s roles then this document can be used to help enable that functionality if it is missing. If multiple system aliases are assigned to a Gateway service, then the service will be called in at least the system identified as the default system alias. The Fiori Application’s UI needs certain additional steps to enable Multi-Origin capability.

3.

Prerequisites 





You should have an Eclipse installation which has the latest version of the SAPUI5 Application Development feature installed. This could be your own (custom) Eclipse installation or the readily available SAPUI5 Eclipse. You have Fiori Wave 2 App like Time Approval or Travel Expense Approval app installed that needs multi-origin capability. You should be aware of your present SAP Fiori system architecture. This includes knowing which systems are involved, i.e. the target SAP ERP and NetWeaver Gateway component.

March 27, 2014 1


4.

Downloading Fiori App Source Code

The first step you need to take for modifying a SAP Fiori App is to download the original Web App. For this step, you will need to know which system the SAP Fiori Web Apps are hosted on your SAP Netweaver Gateway system.

Tip:

You can use ABAP Team Provider plugin in Eclipse then you can use that to download/upload and update the web content files in Gateway system from your project in Eclipse directly and do that instead of this option below. Refer to Appendix section in the document.

For convenience, the NetWeaver UI Add-On (UI_INFRA) includes the executable program UI5/UI5_REPOSITORY_LOAD which can be used to download, upload, and delete SAPUI5 applications. The steps below use Time Approve Fiori App as an Example App that needs Multi-Origin feature.

Tip:

1. Task: 2.

3.

When a SAPUI5 application is hosted on an SAP system, it is typically uploaded as a Business Server Page. As a consequence, you can also access the SAPUI5 application files using WebDav. In addition, you can edit files directly in the ABAP Workbench (transaction SE80) or any ABAP-enabled Eclipse installation. However, none of these options will be covered any further in this How-To Guide.

Logon to the appropriate SAP system and go to transaction SE38. Enter /UI5/UI5_REPOSITORY_LOAD in the Program field Run (F8) to run the SAPUI5 repository synchronization program. and click

Next, specify the SAPUI5 application you wish to download. In order to download the SAP Fiori App for Time Approval, use hcm_ts_apv as Name of SAPUI5 Application. Ensure that the Download option is selected. Click Run (F8).

March 27, 2014 2


4.

You will be prompted to select the local directory into which the Web App source files should be saved. Please ensure that the directory you chose is empty. Any files contained in the folder may be deleted before the download process starts. Chose and confirm a target directory.

5.

Depending on your system configuration, you may see a security prompt. Grant permanent file system access by checking Remember My Decision and clicking Allow .

6.

Next, you will see a summary of actions that are about to be taken. Scroll down and click .

March 27, 2014 3


7.

You will be prompted to specify an External Codepage . Leave the field empty and confirm by clicking on the checkmark button . The download process will be initiated.

8.

Depending on your system configuration, you may see another security prompt. Grant permanent file system access to the downloader by checking Remember My Decision and clicking Allow .

9.

The download process may take a couple of minutes. When the process has finished, the SAP Frontend status bar will display a success message.

March 27, 2014 4


5.

Importing Fiori App Source Code into Eclipse

In order to modify a SAP Fiori scenario, it is recommended to do so with an Eclipse installation which has the SAPUI5 Application Development feature installed. This simplifies the development process because you can rely on useful tools such as code completion and app preview. We will now create a new Eclipse project containing the SAP Fiori scenario source code.

10. Task:

Start Eclipse and select File → New → Project … .

11.

Choose SAPUI5 Application Development → Application Project and click Next .

12.

Next, configure the new project as follows: Project Name:

Hcm_ts_apv

Target Device:

Mobile

Deselect Create

. an Initial View

Click F i n i s h .

March 27, 2014 5


13.

You should see the newly created project in the Project Explorer . Eclipse created the basic boilerplate SAPUI5 folder structure. We will now import the SAP Fiori source code. Expand the newly created project, right-click on the WebContent folder and click Import… .

14.

Choose General → File System and click OK .

15.

Select the import directory into which you downloaded the SAP Fiori App source code (refer to Task 4). Check the checkbox next to the top folder in the selection screen to ensure that all files and sub-folders are imported. Click Finish to initiate the import process.

March 27, 2014 6


16.

The boilerplate SAPUI5 folder structure may contain a few files that might also exist in the SAP Fiori App source directory, e.g. index.html. Please click Yes to All when asked whether you would like to overwrite these files.

March 27, 2014 7


6.

Extending a SAP Fiori App’s Source Code

Having completed the previous steps, you now can browse and edit the source code of the SAP Fiori App you downloaded. At this point, you need to know which files to edit in order to achieve the anticipated change. Please make a note of Configuration.js file in the WebContent folder of your project which has the std SAP Fiori App’s source code downloaded in the previous steps. Refer to screen shot below for Project structure of std SAP Fiori App for Time Approval. Open Configuration.js file in Eclipse and check the “serviceURL” parameter. Open Component.js and make a note of std SAP Component for this App i.e hcm.mgr.approve.timesheet You will need to reference this component later in the Extension project.

First Check if the “;mo” switch is already there in the service url or not. If it is not there then the instructions below would be helpful to add it.

Open the “view” folder in your project and look for file starting with “S4”. If you have any files starting with s4 like S4.VIEW or S4. Controller as seen below then instructions in section 7 need to be implemented.

March 27, 2014 8


7.

Creating a SAPUI5 Extension Project in Eclipse

In this how-to guide, we want to add a SWITCH for Enabling Multi-Origin feature. Create a new SAPUI5 Project by doing File New SAP UI5 APPLICATION DEVELOPMENT PROJECT

March 27, 2014 9


Name the project “ z_hcm_ts_apv” as the Name of the Project. Deselect “Create an Initial View” option.

8.

Create Component.js file in Extension Project

After project is created in Eclipse right click W ebContent folder in project and select “NewFile”. Enter “Component.js” as File name. Your project structure should look like the image below:

March 27, 2014 10


1. Open Component.js file in Eclipse. 2. Decide the name of your Z Component. For e.g for reference a sample name such as “zhcm.mgr.approve.timesheet.Component” was given to this customer component. 3. Paste this code: jQuery.sap.declare("zhcm.mgr.approve.timesheet.Component"); sap.ui.component.load({ name : "hcm.mgr.approve.timesheet", Notice the “Component” name in the statement sap.ui.component.load references Standard SAP Component name that you noted in step 4 above. Notice the “name” Config section references Standard SAP Service for the Fiori App. name

1.

After opening Configuration.js file look for the “serviceURL” property in the serviceList section.

2. Add “;mo/” at the very end of the file. 3. Notice the “;mo” switch that has been added at the end of the “serviceURL” property in the serviceList section in the example above. 4. In the above code first a reference is made to the standard SAP Fiori App for Time Approval and then the Extension Component is called.

9.

Handling Multi-Origin capability for Line Item Detail Screen.

Please note sections below only apply if you are have Line Item Detail Screen which render from Line Item to Line Item Detail screen i.e if you have any S4 Screens in your standard or custom SAP Fiori App project then these sections below apply.

9.1.1

Changing Component.js file in your Extension Project In order to handle Multi-Origin feature for transition from Line Items S3 to Line Item Details

Screen S4, one needs to add custom “route” as seen in the example in the code snippet below "itemdetailExt" is a custom route that has definedin component.js with a new parameter called

“SAP__Origin”. You can define any new route name that you like but please make a note of it as it will be referenced in several places as mentioned below. This route needs a custom listener which is explained below in section for s4 Controller Extension. This new route will be triggered from S3 custom controller extension.

March 27, 2014 11


jQuery.sap.declare("ztravel.expense.approve.Component"); sap.ui.component.load({ name : "travel.expense.approve", url : jQuery.sap.getModulePath("ztravel.expense.approve") + "/../fin_te_apv" });

9.1.2

Extending S3 Controller

Create a new file called “S3Enhancement.controller.js” file in your Extension Project in the view folder.

In order to pass “SAP__Origin” Param from S3 to S4 , first retrieve the “ SAP__Origin” param from the S3 Controller in the “onInit” Method.

Then pass this parameter in the “moveToItemDetail” method in the call to new “Route” that you have defined in your component.js file above. The “moveToItemDetail” method is generic method that you can search in standard SAP UI5 code for this method. Also note that for the code snippet below first the “moveToItemDetail” method was copied

from standard SAP Fiori App code and then an “Override” of the method was done for Multi Origin capability.

Inspect the code in the code snippet below and ensure that you have added “SAP__Origin” param in the call to the new route for e.g sap_origin:this.oServerName. This variable “oServerName” is any variable name that you chose to use in your project. sap.ui.controller("ztravel.expense.approve.view.S3Enhancement", { onInit : function() { this.fnSuper_moveToItemDetail = travel.expense.approve.view.S3.prototype.moveToItemDetail; The only new Lines of code that was added to accept MULTI-ORIGIN related ”SAP__Origin” parameter are: this.oServerName = splitParam[0].split("=")[1]; In method onInit sap_origin:this.oServerName,  In method moveToItemDetail “

”

var context = new sap.ui.model.Context( this.getView().getModel(), "/" + oEvent.getParameter( "arguments" ).contextPath); this.wId = context.sPath.substring(context.sPath.indexOf( "workitem_id" ) + 13, context.sPath.length 2);

9.1.3

Extending S4 Controller.

Create a new file called “S4Enhancement.controller.js” file in your Extension Project in the view folder.

March 27, 2014 12


Refer to code section below. Retrieve the “SAP__Origin” parameter from “arguments” in the “onInit” function. Insert this parmeter in the collection for your S4 screen as shown below in the code snippet for

“ReceiptsCollection” as an example. Check the standard Code in S4 screen of your Fiori App and look for Collection which is used to display details on Line Item Detail Screen. Use this collection to replace

the code snippet below where the “SAP__Origin” parameter is being added. Please ensure that you are using the same “Route” name that you have defined in your earlier step.

Build the “detailcontextpath” also as seen in example below.

sap.ui.controller("ztravel.expense.approve.view.S4Enhance ment", { onInit : function () { var view = this.getView(); var that = this; this.oRouter.attachRouteMatched(function (oEvent) { Only 2 new lines of code should have been added for “SAP__Origin” with the name of your collection as this: that.sap_origin = oEvent.getParameter("arguments").sap_origin; var receiptsPath = "ReceiptsCollection(SAP__Origin=" + <<> Note: “ReceiptCollection ” is just an example in this document. You would have to inspect the code in S4.controller.js file in the “onInit” method to

see what is the main collection name being used for the screen S4 for the Fiori App that you are working with.

10. Uploading customized SAP Fiori App Code Tip:

You can use ABAP Team Provider plugin in Eclipse then you can use that to download/upload and update the web content files in Gateway system from your project in Eclipse directly and do that instead of this option below. Refer to Appendix section in the document.

After locally customizing a SAP Fiori App to your requirements, the next step is to upload the modified SAP Fiori App so it becomes available on the server. You can either overwrite the old application or you can specify a new location at which the end users will be able to access the new application. We will once again use the executable program /UI5/UI5_REPOSITORY_LOAD for the upload process.

17. Task:

Logon to the appropriate SAP system and go to transaction SE38. The appropriate system is the same system from which you downloaded the source code earlier.

March 27, 2014 13


18.

Next, enter a name for the application you are uploading into the field Name of SAPUI5 Application. Please note that there is a 15-character limit. Also, for this example, please ensure the application name begins with a Z . The application name will later be the name of your Business Server Application. As a consequence, the application name will also show up in the final URL. Run (F8). Ensure that the Upload option is selected. Click

19.

You will be prompted to choose the source directory for upload. Find and select the location of the WebContent folder of your Eclipse Extension project that you created in the previous step.

20. You might be asked whether you want to grant access to your files. Choose Remember My Decision and click on Allow .

21.

Next, you will see a summary of actions that are about to be taken. Scroll down and

March 27, 2014 14


click

.

22. Before the upload process begins, you will be asked a few additional parameters. For this example, use $TMP as package name.

23. Depending on your system configuration, you may see security prompts for every file that is uploaded to the SAP ERP system. You can change this behaviour in the SAP Frontend Security Settings. It is highly recommended to do so. To change the security settings, open the SAP GUI Configuration application. You may find this application in the “SAP Front End ” folder in your operating system’s start menu. Open the Security -Tab and choose Security Settings. Click Open Security Configuration . You will see a list of files and folders SAP GUI has previously accessed on your computer. Select the entry which represents the WebContent folder in your Eclipse workspace with the action “Read”. Click on Edit . Change Action to Allow and save your changes. Also refer to Figure 1 for more information.

March 27, 2014 15


Figure 1: Changing Security Settings

March 27, 2014 16


11. Configure Service in Gateway system Go to transaction /iwfnd/maint_service in your Gateway system and look for the service for which you are attempting to have Multi-Origin support. Maintain multiple system aliases for this service. See screen shots below. The end user must have a Role in the backend system to have authorization to execute the oData Service. You might not need to define the roles during adding new Entries as the current logged in user’s roles in the backend system will be checked.

Ensure one of the System Alias is set to “DEFAULT” for the Fiori App Service that needs MultiOrigin.

March 27, 2014 17


12. Changing Fiori Tile URL for Multi-Origin In order to change the “Dynamic Data” of the Fiori tile, that updates the tile counter, please see details below:

This step will take some inspection of the oData Calls in the network tab when user comes to Home Page and then goes inside the Fiori Application by inspecting the oData calls. The objective is that the Counter value in the tile needs to show the “workitem” count by looking at all the backend systems that the Fiori application service is configured for Multi-Origin. For example please see below for Fiori Shopping Cart Approval app the oData Call url for the “$count” as seen below:

March 27, 2014 18


Another example for Time Approval App, when you go inside the App grab the URL from the network tab of your browser as seen below that ends with “Time_Pending” and suffix it with “$count”.

The new url for this Tile in Fiori Admin Page should be like : /sap/opu/odata/sap/SRA010_TIMESHEET_APPROVAL_SRV/Time_Pending /$count Instead of current one which is : /sap/opu/odata/sap/SRA010_TIMESHEET_APPROVAL_SRV/Summary

March 27, 2014 19


After applying changes described in section 6 and 7 for Multi-Origin then perform this step for changing the Dynamic Data of the tile.

13. Testing your Fiori Application via browser Now you can test your modified application.

Task: 1. 2. 3. 4. 5.

Go to Fiori LAUNCHPAD

Click on “Approve TimeSheets” Tile Open the network tab in the browser. Notice the browser HTTP call ending with “Time_Pending”. Refer to screen shots below

March 27, 2014 20


Search for “SAP__Origin” tag in the browser response. You should see the system Alias that you have defined for this service in /iwfnd/maint_Service in your gateway system for the call ending with “Time_Pending”. If there are 2 system aliases defined and assuming the test user has Roles in both the backend systems for the corresponding System Alias you should see 2 unique entries for “SAP__Origin” tag each having the unique system Alias that was defined in step 8 of GW Service Maintainance. Other tests. TEST FOR LINE ITEM DETAILS Assuming instructions in section 7 have been followed. Click on any of the line items in the S3 screen as seen below.

March 27, 2014 21


March 27, 2014 22


http://localhost:8080/fin_te_apv/testresources/sap/ushell/shells/sandbox/fioriSandbox.html?sap-ui-preload=%20#MyFioriObject0display&/itemdetailExt/'UG_ECC'/000000355749/001/?receipts= Notice the above URL for Line Item Details screen it should now have the “SAP__Origin” parameter with the value based on your configuration and user role.

Remove the “;mo” from the URL and refresh the browser.

Notice in the browser response you do NOT see “SAP__Origin” being returned in the content area. You have now enhanced the standard SAP Fiori App for Time Approval for Multi-Origin Capability.

14. Appendix 14.1 ABAP Team Provider Wizard Tool You can upload the app skeleton manually or by using the Team Provider wizard, which is a tool available in the SAPUI5 Eclipse by default. The Team Provider enables you to submit and retrieve code changes regularly and to resolve code change conflicts in a distributed development. We suggest that you upload the app skeleton with the Team Provider 1.

Right click on the custom project in Eclipse and choose Share project… from the context menu.

2. Select SAPUI5 ABAP Repository.

March 27, 2014 23


3. Specify the target system, your user name, and password. You can also use single-sign on. 4. On the next screen, specify the BSP repository. You can define a new system or choose from the systems already available. After completing the steps above, the project is shared and you can submit the local files from the project. Right click on the project and choose Team > Submit from the context menu. Make sure that you only upload the required files from the WebContent folder.

March 27, 2014 24

How to Enable Multi-Origin Capability in SAP FIORI Apps

Recommend Documents