Building Block Configuration Guide sap fiori apps rapid-deployment solution


Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE



Download 392.93 Kb.
Page2/7
Date09.01.2017
Size392.93 Kb.
#8088
1   2   3   4   5   6   7

Extend SAP-Delivered Standard Fiori Applications using SAP Web IDE


SAP Web IDE (Integrated Development Environment) is a Web based tool for developers, business experts, and designers to customize or build SAP Fiori applications SAP Web IDE offers wizards, templates, and code editors to improve developer productivity.

 Example

The steps outlined below use the example of the standard SAP Fiori app Track Purchase Order.


Prerequisites


Before starting the extension activities, you need to make sure that you met the following requirements:




Activity

Software Requirements

 Note

The software requirements sheet explains in detail which software component versions need to be installed.


The configuration of the apps is described in detail in the respective configuration guides.

Required Users

The required users have been created in the used SAP back-end system and SAP Gateway system. The user ID in must be identical in both systems.

Fiori Apps

The SAP Fiori app is fully configured and connected to an SAP back-end system.

 Note

This document uses the SAP Fiori app Track Purchase Order as an example. In case you want to replay the used example one by one, the Track Purchase Order app is expected to run properly, displaying purchase orders from the connected SAP ERP back-end system.

More Information

http://help.sap.com/fiori.


Check and Activate HTTP Service in SAP Gateway System


Use

In this step, you check the HTTP services in the SAP Gateway system (frontend system) that are required for the connection to SAP Web IDE. If these are not active, you can activate the services now.

Procedure


  1. Open an SAP Logon session and connect to the SAP Gateway System in which the extended SAP Fiori app was deployed.

  2. Access the transaction using the following navigation path:

    Transaction Code

    SICF

    SAP Reference IMG Menu

    Tools  Administration  Administration  Network  HTTP Service Hierarchy Maintenance

  3. Choose Execute.

  4. In the Virtual Hosts / Services hierarchy, choose default_host.

  5. Choose sap  bc  adt (ABAP Development Tools)

 Note

This service is used by SAP Web IDE. In case it is not active, the system cannot be called by SAP Web IDE.



  1. Check that the service is active.

 Note

If the service is active, the service name is displayed in black; if the service is inactive, the service name is grayed out.



  1. If the service is not active, right-click on the service and activate it.

Result

You have checked that the relevant HTTP services are active.


Configure SAP Web IDE


Use

In this step, you connect to the SAP Web IDE and configure the tool to connect to the SAP Gateway system which holds he SAP Fiori applications and the associated OData services.

Procedure

SAP Web IDE is a browser-based tool for which the recommended access is using the SAP HANA Cloud. You can use the directions included in the Set up your SAP Web IDE on HANA Cloud how-to guide. As the guide describes you can replace the example system settings included in the document with the specific system settings to connect to your own SAP Gateway system. (The newest version of this document can be found here: http://scn.sap.com/docs/DOC-55882).

Result

You have configured SAP Web IDE to connect to your own SAP Gateway system.



 Note

When you use the SAP Web IDE, you will need to ensure that SAP HANA Cloud Connector is running on your local machine. To achieve this you need to run the file go.sh (on Mac OS X) or go.bat (on MS Windows) before you logon to the SAP Web IDE environment in your Internet browser.


Extend Track Purchase Orders App


Use

In this step, you create an extension project for the standard SAP Fiori app Track Purchase Order and make several extensibility modifications in the extension project.

Pre-requisites

The standard SAP Fiori app Track Purchase Order and the associated OData server MM_PURORD_TPO are available in the SAP Gateway system.


Create Extension Project for Track Purchase Orders App


Use

In this step, you create an extension project for the standard SAP Fiori app Track Purchase Order. All of the extensibility changes that you carry out will be made to the extension project, leaving the standard SAP code unchanged.

Procedure


  1. Open SAP Web IDE.

  2. Choose File → New → Extension Project.

  3. In screen New Extension Project → 1 Parent Application and Name, select Open extension project in extensibility pane.

  4. Choose Remote…→ SAPUI5 ABAP Repository.

  5. In the dialog box Select Application from SAPUI5 ABAP Repository, select in System, where is the id for SAP Gateway system.

  6. In the list of applications, choose the following entry:

    Application

    Description

    MM_PURORD_TPO

    TPO Upload Wave 2

  7. Choose OK.

The field Extension Project Name is populated with the default value MM_PURORD_TPOExtension.

  1. Choose Next.

  2. In screen 2 Confirm, choose Finish.

Result

You have created an extension project MM_PURORD_TPOExtension for the SAP Fiori app Track Purchase Orders.


Hide Title Field


Use

In this step, you hide the title for the detail screen of an item in the purchase order.



 Caution

According to SAP Fiori guidelines each screen requires a title. Therefore this is not a recommended practice, but is included to illustrate how this can be achieved.

Procedure


  1. Open SAP Web IDE.

  2. Select the extension project MM_PURORD_TPOExtension

  3. Choose Tools → Extensibility Pane.

A new window is displayed showing the initial master/detail sections of the app, with a side bar Outline. The initial view of the Outline side bar shows all elements. Firstly, all views are displayed with their full hierarchy; secondly, all controllers are displayed.

 Caution

Both the view and controller share the same name, for example Main. Therefore, when you are creating an extension in the Outline side bar, you must ensure that you are making the extension to the correct element type.



  1. In the Outline side bar, select the view POItem.

  2. Choose POItem → POTItemPage → sap.m.customHeader → sap.m.Bar → sap.m.contentMiddle → POItemHeaderText.

  3. In the drop-down box Possible Extensions, choose HideControl.

  4. Choose OK.

Result

You have hidden the text for the purchase order item.



 Note

You can populate the preview of the app with data from back-end system directly in SAP Web IDE. Just perform the search as using the regular FIORI app.


Hide Field on SAP Fiori Screen by Code Modifications


Use

In this step, you hide the technical name of the material and the corresponding field label in the detail screen of the purchase order item. This example shows how you can achieve the changes by making changes to a custom version of the code for the view.



Procedure



  1. Open SAP Web IDE.

  2. Select the extension project MM_PURORD_TPOExtension

  3. Choose Tools → Extensibility Pane.

  4. In the Outline side bar, select the view POItem.

  5. In the drop-down box Possible Extensions, choose Replace with a copy of the parent view and choose OK.

  6. In the dialog box Application Changed, choose Yes.

  7. In the Outline side bar, select the view POItemCustom (Replacement for POItem).

  8. Choose Go to Code → Extension Code.

  9. In the dialog box Information, choose OK.

  10. In the code for POItemCustom.view.xml change the visible attribute of the text for field Material label to ‘false’.


    Code before change


    Code after change


  11. In the code for POItemCustom.view.xml change the visible attribute of the text for field Material ID to ‘false’.

Code before change

D Description

Code after change

D}"/>

After you have made the changes the relevant section of coding is as follows

 Syntax





  1. Choose Save.

Result

You have hidden the text and the label for the technical name of the material in the detail screen of the purchase order item.





 Note

You can quickly check the result in the preview by navigating via the menu Tools -> Extensibility Pane.


Change Label (Usage of Language File)


Use

In this step, you change the label for Plant on the purchase order item details screen. The usage of custom specific language files enables you to change the field labels without changing the SAP delivered code.

Procedure


  1. Open SAP Web IDE.

  2. Select the extension project MM_PURORD_TPOExtension.

  3. Choose File → New → Folder.

  4. Enter the Folder Name

    Folder name

    i18n

  5. Select the created folder i18n.

  6. Choose File → New → File

    File name

    i18n_custom_xx.properties

    (replace xx with the language needed, for example de for Germany or en for English)



     Caution

    Make sure you use small characters!

  7. Enter the following values in the previous step created language file:

    Code

    XFLD_Plant=XXX Description

    (replace XXX with the label change of your choice).

  8. Save your changes.

  9. In the code for Component.js change code as follows:

Code before change

config:{

},


Code after change

config: {

"sap.ca.i18Nconfigs":{

"bundleName":"ui.s2p.mm.purord.tracking.MM_PURORD_TPOExtension.i18n.i18n_custom"

}

},

After you have made the changes the relevant section of coding is as follows

 Syntax

Choose Save.

Result

You have changed the label of a field on the purchase order item details screen.






Change Label (View Replacement)


Use

In this step, you change the label for Plant on the purchase order item details screen. A view replacement is carried through in this example. You would use this technique only in case you want to change coding of this view with your own code. This is just a simple example of a view replacement.



 Caution

Since you will replace the original, SAP delivered view with your own one the field label change of the previous chapter will not be visible any more.

Procedure


  1. Open SAP Web IDE.

  2. Select the extension project MM_PURORD_TPOExtension.

If you have already created the file for the customized view POItemCustom.view.xml, carry out the following steps 3 to 4. Otherwise carry out steps 5 to 12.

  1. Choose view → POItemCustom.view.xml.

  2. Proceed to step 13.

If you have not already created the file for the customized view POItemCustom.view.xml, carry out the following steps 5 to 12.

  1. Choose Tools → Extensibility Pane.

  2. In the Outline side bar, select the view POItem.

  3. If you have already created the file for the customized view POItemCustom.view.xml, go to step nn.

  4. In the drop-down box Possible Extensions, choose Replace with a copy of the parent view.

  5. In the dialog box Application Changed, choose Yes.

  6. In the Outline side bar, select the view POItemCustom (Replacement for POItem).

  7. Choose Go to Code → Extension Code.

  8. In the dialog box Information, choose OK.

  9. In the code for POItemCustom.view.xml change the label text for field Plant Name.

Code before change


Code after change


After you have made the changes the relevant section of coding is as follows

 Syntax





  1. Choose Save.

 Note

This modification will hard-code the changed text for any user who uses the extended version of the app. In some cases this may be appropriate, for example, for providing a personalized version of the app. However, if you are providing modified texts that need to be translated you must change the respective entries for each language and version for the text variable XFLD_Plant in the text file i18n.


Please check the chapter ‘Change a Field Label’ of the Eclipse example for further reference.

Result


You have changed the label of a field on the purchase order item details screen.




Add Field Showing Item Type Description


Use

In this step, you add a new field to the order details screen. The new field shows the description of the item type. This is an example of information that is available in the OData service that can be added to the front end.



 Example

In this example the field that is added is included in each item of the purchase order, so that this is a new column with a title text Description.



Procedure



  1. Open SAP Web IDE.

  2. Select the extension project MM_PURORD_TPOExtension.

  3. Choose Tools → Extensibility Pane.

  4. In the Outline side bar, select the view S3.

  5. In the drop-down box Possible Extensions, choose Replace with a copy of the parent view.

  6. Choose OK.

  7. In the dialog box Application Changed, choose Yes.

  8. In the Outline side bar, select the view S3Custom (Replacement for S3).

  9. Choose Go to Code → Extension Code.

  10. In the dialog box Information, choose OK.

  11. In the code for S3Custom.view.xml, add a new column to the view. You add this column between the columns for XCAP_Invoiced and XCAP_Paid.

After you have made the changes the relevant section of coding is as follows

Code to be added







Description

 Syntax





  1. Add a cell to the view. You add this cell after the cells for information for invoicing, which are the cells for InvoicedDate, QuantityInvoiced and so on.

After you have made the changes the relevant section of coding is as follows

Code to be added





Description

 Syntax

Choose Save.






Replace View


Use

In this step, you replace the master view with an extension of the view. In this extension you make coding changes to change the default filter selection for purchase orders. As this extension changes the logic of the processing within the app, you make the changes to the coding in an extension of the controller file, rather than the view file itself.



 Note

In this procedure you will create an extension of the relevant controller file. In the initial version of the extension, all coding is inactive. You will then activate the coding for the specific aspects that you wish to customize, in this example the default number of days for the filter. All other coding in the extension remains inactive. When the app is executed by the user, the coding of the standard app is merged with the activated coding of the extension.



Procedure



  1. Open SAP Web IDE.

  2. Select the extension project MM_PURORD_TPOExtension.

  3. Choose Tools → Extensibility Pane.

  4. In the Outline side bar, select the controller S2.

  5. In the drop-down box Possible Extensions, choose Extend with a copy of the parent controller.

  6. Choose OK.

  7. In the dialog box Application Changed, choose Yes.

  8. In the Outline side bar, select the controller S2 Custom (Extension for S2).

  9. Choose Go to Code → Extension Code.

  10. In the code for S2custom.controller.js, change the default filter for purchase orders from the last 7 days to the last 30 days. This is achieved by uncommenting out the code in the extension and changing the relevant value. You will need to make the changes in two separate parts of the code of the controller.

Code before change

sap.ui.controller("ui.s2p.mm.purord.tracking.MM_PURORD_TPOExtension.view.S2Custom", {

// sFilterLastNDays: 7,

// sFilterWithAlerts: false,

// sSearchText: "",

// sFilterKey: "FILTER7",

// oFilterDialog: null,

// onInit: function() {


Code after change

sap.ui.controller("ui.s2p.mm.purord.tracking.MM_PURORD_TPOExtension.view.S2Custom", {

sFilterLastNDays: 30,

// sFilterWithAlerts: false,

// sSearchText: "",

sFilterKey: "FILTER30",

// oFilterDialog: null,

onInit: function() {




Code before change

// this.oFilterDialog.setSelectedPresetFilterItem("FILTER7");

// }


Code after change

this.oFilterDialog.setSelectedPresetFilterItem("FILTER30");

}


After you have made the changes the relevant sections of coding are as follows

 Syntax

....






  1. Choose Save.

Result

You have replaced the view, and changed the coding to of the extension to change the default value for the filter for searching for purchase orders.






Test your Extension in SAP Web IDE


Use

In this step, you test the extension to the Track Purchase Order within the SAP Web IDE.

Procedure


  1. Open SAP Web IDE.

  2. Select the extension project MM_PURORD_TPOExtension

  3. Select the file index.html.

  4. Choose Run → Run.

 Note

If you do not have back-end data for the purchase orders available in the SAP Gateway system choose Run → Run with Mock Data.

Result

You have started a test version of the app extension, and you can verify that the extensions you have made are correctly implemented.


Deploy Extension Project


Use

In this step, you deploy the created extension project for the standard SAP Fiori app Track Purchase Order into the ABAP Repository of your on premise Gateway system. From this repository and front-end server, all your SAP Fiori apps and this extension are made available for the end users. With this step, you leave your personal SAP Web IDE environment and make your app available for end users or other developers. Additionally, you check the correct deployment and the specific extension parameters you need to setup the app in the SAP Fiori Launchpad.

Optionally, you may share your personal SAP Web IDE project by exporting the project to a local drive for further distribution or by synchronizing it with a Git repository. Nevertheless, the final app must be deployed to a SAP Gateway with SAP Fiori Launchpad.

 Note

The usage of a Git repository is not part of this document.

The deployment that you carry out will create a new BSP Application including the extension project, leaving the standard SAP code and standard SAP Fiori app unchanged. Further distribution of the SAP code will be managed by transport requests within the SAP Gateway front-end server.

 Note

Within the ABAP workbench the SAP UI5 applications are stored in the same way as BSP Applications used to be stored. Hence the SAP UI5 applications code line can be found in the same way as BSP applications even if they are no BSP Applications.

Procedure


  1. Open SAP Web IDE.

  2. Select and right-click on the extension project MM_PURORD_TPOExtension

  3. Choose Deploy → Deploy to SAPUI5 ABAP Repository.

  4. Select the SAP Gateway System (frontend system) from the drop-down list.

  5. Enter your user credentials for the SAP Gateway System (frontend system) if requested.

  6. Choose Next.

  7. Enter a valid name (15 char max.) and description for the future BSP Application, e.g. Z_MM_PURORD_Ext and Track Purchase Order Extension

  8. Choose a valid package to add the changes to an existing transport request or choose $TMP for a local object in the ABAP Repository.

 Caution

In this example, a local object must be created using package $TMP.



  1. Choose Next.

  2. Choose Finish.

Next you must check that the correct extension project deployment exists in the ABAP Repository of SAP Gateway System (frontend system).

  1. Open a SAP Logon session and connect to the SAP Gateway System in which the extended SAP Fiori app was deployed.

  2. Access the transaction using the following navigation path:.

    Transaction Code

    SE80

    SAP Reference IMG Menu

    Tools  ABAP Workbench  Overview  Object Navigator

  3. Choose Local Objects and use your user name.

  4. Choose Display to search.

  5. Drill-down trough to BSP Library → BSP Applications.

  6. Check that Z_MM_PURORD_EXT exists.

Result

You have deployed the extension project to the ABAP Repository of the SAP Gateway System (frontend system) that is dedicated to deliver the SAP Fiori Launchpad and all SAP Fiori apps.




Download 392.93 Kb.

Share with your friends:
1   2   3   4   5   6   7



The database is protected by copyright ©ininet.org 2024
send message
    Main page
united states
total number
vast majority
federal government
other side
next generation
supreme court
information contained
current state
executive director
national association
middle east
east coast
general assembly
private sector
west coast
same time
united kingdom
total amount
united nations
full range
highest level
soviet union
european union
national academy