9.2    Extending Transactional Apps

Many customers want to customize their SAP Fiori apps beyond the standard applications delivered by SAP. The ability to extend transactional and other SAP Fiori apps is useful when, for example, you want to add a field, hide nonrelevant controls, replace a standard view with a custom view, or add a custom OData service. Depending on the application type and extension requirements, you can enhance one or multiple content layers.

Figure 9.20 shows the system landscape of a transactional app. The landscape is comprised of three main layers:

1. SAP Business Suite layer
   This layer contains the business logic and back-end data. You can extend the SAP Business Suite layer if the back-end logic and the content required for the app extension don’t exist.
2. SAP Gateway layer
   This layer maintains the connections to the back-end system and allows users to create OData services. You can extend the SAP Gateway layer (OData) if the back-end logic and the content required for the app enhancement are present in the SAP Business Suite layer but not exposed to the SAP Gateway server.
3. UI layer
   This layer contains the product-specific UI add-ons, SAPUI5 control library, and SAP Fiori launchpad. You can extend the UI layer if the back-end logic and the content required for the app extension are present in the SAP Gateway layer but not exposed to the UI layer.

Figure 9.20    Architecture

Table 9.1 lists the knowledge/skill required to extend each of these layers.

Content Layer	SAPUI5	HTML5, JavaScript	SAP Fiori Specific UI Development	ABAP	SAP Gateway	SAP Business Suite
UI	Yes	Yes	Yes
SAP Gateway				Yes	Yes
SAP Business Suite				Yes		Yes

Table 9.1    Skill Matrix

Extending a transactional app end to end includes many different steps in each of the content layers; we’ve broken the app extension process down into nine steps (see Figure 9.21). Each of these steps can be performed by different teams based on existing skillsets.

Figure 9.21    High-Level Steps

Extending transactional apps is modification-free with this approach, so any upgrade to standard SAP Fiori apps won’t be impacted. We’ll walk you through each of these steps in more detail in the next sections. However, let’s first review the tools and transaction codes that you need to extend each layer:

• ABAP back-end server
  • Transaction SE80 (ABAP Object Navigator)
  • Transaction SE11 (ABAP Dictionary)
• UI layer
  • SAP Web IDE or Eclipse with ABAP Repository Team Provider
• ABAP front-end server
  • Transaction SEGW (Gateway Service Builder)

With that high-level introduction completed, let’s dive straight into the steps for extending a transactional app by using an example based on the My Quotations transactional app. You’ll extend the app by adding the State field to the standard app (see Figure 9.22); that is, you’ll display the State field in Ship to address.

Figure 9.22    My Quotations Standard App

9.2.1    Extend the SAP Business Suite Layer

The first step in the extension process is to append the ABAP DDIC structure of the OData service with the new field in the back-end server (SAP Business Suite layer) so that you can use the new Region field in the UI layer.

Region/State

Region and State are the same. Region is the field from the DDIC structure, and State is the title that you’re adding in the app.

To add a field to the app, you need to find the package and DDIC structure details. To do so, refer to the SAP Fiori app-specific online help at http://help.sap.com/fiori and navigate to the App Extensibility section of the My Quotations app information.

After you have the package details, follow these steps:

1. Log in to the ABAP back-end system.
2. Run Transaction SE80.
3. From the dropdown list, choose Package, and click the down arrow button (see Figure 9.23).
   

   Figure 9.23    Object Navigator

4. Click the Information System button in the pop-up window.
5. Enter “*ODATA_MY_QUOTATION” in the Package field (see Figure 9.24).
   

   Figure 9.24    Search Package

6. Click Continue , or press (Enter).
7. Select the ERP_SD_ODATA_MY_QUOTATION package and click Continue (see Figure 9.25).
   

   Figure 9.25    Select Package

8. On the left side, drill down to Dictionary Objects • Structures (see Figure 9.26).
   

   Figure 9.26    Navigate to Structures

9. From the list of structures shown in Figure 9.27, double-click TDS_ODATA_QUOTATION_PARTNER_IN to view the structure details.
   

   Figure 9.27    Selecting Partner Structure

10. Click Append Structure (see Figure 9.28).
    

    Figure 9.28    Selecting Append Structure

11. Enter “ZQUOTATION_PARTNER_EXTN” in the Append Name field (see Figure 9.29). Click Continue , or press (Enter).
    

    Figure 9.29    Append Name

12. Enter “Partner Extension for My Quotations” in the Short Description field.
13. Add the following details, as shown in Figure 9.30:
    • Component: “REGION”
    • Typing Methods: “Types”
14. Click the Predefined Type button to enable the Data Type and Length fields. Enter the remaining details, as follows (see Figure 9.30):
    • Data Type: “CHAR”
    • Length: “3”
    • Short Description: “Region”
    

    Figure 9.30    Adding New Fields

15. Check for errors by clicking .
16. Click Save .
17. Click Local Object/Package.
18. Click Save.
19. Activate the structure by clicking Activate .
20. Now, check if the new field is added to the partner structure. Double-click TDS_ODATA_QUOTATION_PARTNER, and you should see the Region field added to the structure (see Figure 9.31).
    

    Figure 9.31    Appended Structure

You’ve successfully added a new field to the structure!

9.2.2    Extend the SAP Gateway Layer

In Chapter 7, we discussed OData concepts in general and walked through a simple OData service example. In addition, we looked at the different options for redefining an OData service created in SAP Gateway and external services such as BOPF, SAP BW queries, and GenIL. With SAP Gateway Service Builder, you can extend the OData service using the redefine technique, which lets you reuse the business objects and services from your existing SAP system landscape.

SAP Gateway Service Builder is an OData-compliant modeling environment that provides developers with a set of tools for creating and maintaining an OData service. This tool provides options for both experienced developers and less experienced developers. Experienced developers can define a new service, whereas less experienced developers can import existing definition files or use content generators to expose the data for simple consumption. In addition, this tool also empowers nonprogrammers to build applications using wizards and templates.

Redefine and Extend the OData Service

A standard SAP-delivered project will be the starting point for the extension project. Let’s now look at how to extend an OData service by using the redefine technique in SAP Gateway Service Builder. Follow these steps:

1. Log in to the ABAP front-end server.
2. Run Transaction SEGW.
3. Create a new project by clicking the Create Project icon (see Figure 9.32).
   

   Figure 9.32    Create New Project Icon

4. On the next page, enter the following project details (see Figure 9.33):
   • Project: “ZLORD_MY_QUOTATION”
   • Description: “OData Service Extension for My Quotation”
5. Click Local Object.
6. In the new project, right-click Data Model Redefine and select OData Service (GW) (see Figure 9.34).
7. Enter the following details (see Figure 9.35):
   • Technical Service Name: “LORD_MY_QUOTATION_SRV”
   • Version: “1”
   

   Figure 9.33    Selecting Package

   

   Figure 9.34    Redefining OData Service

   

   Figure 9.35    Selecting Standard SAP OData Service

8. Click Next.
9. Select all the fields by clicking (see Figure 9.36).
   

   Figure 9.36    Selecting All OData Artifacts

10. Click Finish.
11. Expand Data Model • Entity Types • Partner (see Figure 9.37).
    

    Figure 9.37    Partner Entity Type Properties

12. Double-click Properties.
13. Append a new row by clicking .
14. Enter the following details in the new row (see Figure 9.38):
    • Name: “State”. This is the property that is visible externally to the OData.
    • EDM Core Type: “Edm.String”. This is the EMD data for each property.
    • Max Length: “25”. This property is the length of the data type.
    • Label: “State”. This field’s content is used by OData.
    After you enter all the fields, your screen should look similar to the one shown in Figure 9.38.
    

    Figure 9.38    Adding New Field

15. Finally, on the same screen as the preceding options, select Region from the value help for ABAP Field Name (see Figure 9.39). With the ABAP Data Dictionary binding, you’ll be able to know the EDM data type and the length of the entity type as well.
    

    Figure 9.39    Selecting Region Field

16. Click the Check Project Consistency icon at the top left to check for errors.
17. Click Generate Runtime Objects .
18. Verify the Model Provider Class (MPC), Data Provider Class (DPC), and Service Registration details, and click Continue (Figure 9.40).
    

    Figure 9.40    Model Provider Class, Data Provider Class, and New OData Service Registration

    More Information

    See Chapter 7, Section 7.2 for details about the MPC, DPC, and service definition.

19. Select Local Object on the next screen (see Figure 9.41).
    

    Figure 9.41    Local Object

20. SAP Gateway service builder will generate the following runtime artifacts (see Figure 9.42):
    • Data Provider Base Class
    • Data Provider Extension Class
    • Model Provider Base Class
    • Model Provider Extension Class
    • Registered Model
    • Registered Service
    

    Figure 9.42    Runtime Artifacts

21. Whenever you redefine an OData service, SAP Gateway service builder generates the new OData service with the DPC and MPC. The DPC is used to code your CRUD methods and function import methods. You can define all back-end logic in redefined methods of the DPC extension class. The MPC is used to define the data model; using the code-based implementation methods, you can create entities, properties, and so on.
22. SAP Gateway Service Builder generates the base class and extension class after you generate a project. The base class inherits its code from the minimal SAP Gateway abstract class /IWBEP/CL_MGW_PUSH_ABS_DATA, and the extension class is created for both MPC and DPC by SAP Gateway Service Builder, which is inherited from the base class.

You’ve successfully extended the OData service! In the next section, we’ll register the OData service.

Register the OData Service

The next step is to register the OData service. To expose the OData service you created in the previous step, you must create an entry in the service catalog in the SAP Gateway system (front-end server). A custom OData service is always developed on top of the SAP Gateway add-on installed in the back-end server. To register the service on the front-end server, follow these steps:

1. Select the Service Maintenance folder from your project.
2. Select your SAP Gateway hub system and click Register (Figure 9.43).
   

   Figure 9.43    Registering Service

3. Select Local Package.
4. Click Continue .

Test the OData Service

After the service is registered, the final step is to test the OData service. In the next steps, we’ll test the service via a quotation ID available in the back-end system. You can select any quotation available in your back-end system to check if the OData service is responding correctly.

Follow these steps:

1. Run Transaction /IWFND/MAINT_SERVICE (on the SAP front-end server).
2. In the list, double-click the service you created in the previous section.
3. Click Gateway Client (see Figure 9.44).
   

   Figure 9.44    Running Gateway Client

4. In the line Request URI, replace “?$format=xml” with “$metadata”.
5. You should now see the State property under the Partner entity type (see Figure 9.45).
   

   Figure 9.45    State Property

6. In the Request URI line, replace “?format=xml” with the following text: “QuotationHeaderSet('<your QuotationID>')?$expand=PartnerSet”.
   • For example: QuotationHeaderSet('20000030')?$expand=PartnerSet
7. You should now see the State field populated with the data (see Figure 9.46).

Quotation ID

We’ll be testing with quotation ID 20000030, but you can use any quotation ID available in the back-end you’re using.

Figure 9.46    State Value

Now, let’s verify the data with the back-end server. Follow these steps:

1. Log in to the SAP ERP back-end system.
2. Run Transaction VA23.
3. Enter any quotation ID available in your system and press (Enter).
4. From the menu bar, navigate to Goto • Header • Partner.
5. Double-click the partner function Ship-to party.

You should now see the same value in the State field in the back-end as well (refer to Figure 9.46 and Figure 9.47).

Figure 9.47    Back-End Data

9.2.3    Extend the UI Layer

The next step is to add the new field to the UI layer. SAP delivers the SAPUI5 project for every SAP Fiori transactional app. You can get the details of a specific app from the online help at http://help.sap.com/fiori. Figure 9.48 shows the SAPUI5 application details for the My Quotations transactional app.

Figure 9.48    SAPUI5 Application

In Chapter 8, we covered all the basic options available in SAP Web IDE to extend an SAPUI5 app. Let’s now explore those options in greater detail. In this section, you’ll extend the My Quotations SAPUI5 app by adding the State field to the UI layer. SAP provides extension points for extending standard views of the application with custom content. You can get the extension points details from the app-specific help page (see Figure 9.49). In addition, the Extension wizard in SAP Web IDE lists all the extension points available for a specific view or fragment, as we’ll discuss in our example.

Figure 9.49    Extension Points

In Chapter 2, we discussed the customizations that are supported in the standard SAPUI5 app. In this section, you’ll implement the view extension by using extension points to insert custom content (i.e., you’ll add the State field to the S3.view.xml view).

The following are the high-level steps that you need to follow to extend the UI layer for transactional apps:

1. Create a new extension project using the SAP-delivered standard application.
2. Replace the OData service with the custom OData service.
3. Identify extension points and views.
4. Publish the custom application to the ABAP Repository.
5. Configure the app on SAP Fiori launchpad.
6. Configure and test the application in SAP Fiori launchpad.

Create a New Extension Project

The first step in this process is to create a new extension project by importing the original SAPUI5 application for the My Quotations app. Refer to Figure 9.48 for the technical name of the SAPUI5 app. Follow these steps to create a new project:

1. Log in to SAP Web IDE.
2. Click New Extension Project from the welcome screen, or navigate to File • New • Extension Project from the menu bar (see Figure 9.50).
   

   Figure 9.50    New Extension Project

3. Click Remote, then choose SAPUI5 ABAP Repository (see Figure 9.51).
   

   Figure 9.51    Selecting Remote System

4. Select your SAP Gateway system.
5. Search for “sd_myquotes” (see Figure 9.52).
6. Choose the sd_myquotes app, and click OK.
7. Enter the Extension Project name, and click Next (see Figure 9.53).
   

   Figure 9.52    Selecting SAPUI5 Component

   

   Figure 9.53    Extension Project

8. Uncheck the Open extension project in extensibility pane checkbox, and click Finish (see Figure 9.54).

Figure 9.54    Completing Extension Project

You’ve successfully created a new extension project using the original application, so you should now see the extension project created under your projects folder. Remember, modifications made to this project won’t impact the actual application.

Replace the OData Service with the Custom OData Service

Next, you’ll replace the OData service. The standard My Quotations app is developed using the standard LORD_MY_QUOTATION_SRV OData service. To add the new Region field to the app, you must replace the standard OData service with the custom OData service you created in Section 9.2.2. Follow these steps to replace the OData service:

1. Right-click the new project folder, then select New • Extension (see Figure 9.55).
   

   Figure 9.55    New Extension

2. Check your extension project name and click Next (see Figure 9.56).
   

   Figure 9.56    Verifying Project

3. Choose Replace Service and click Next (see Figure 9.57).
   

   Figure 9.57    Choosing Replace Service

4. Choose Service Catalog from the listed sources.
5. Select the connection for your SAP system.
6. Search for “ZLORD_MY_QUOTATION_SRV” (see Figure 9.58). Click Next.
   

   Figure 9.58    Selecting New Service

7. Drill down to check if the new field is displayed (see Figure 9.59). Click Next.
   

   Figure 9.59    Checking for New Field

8. Click Finish.

Identify the Extension Points and Views

You’ve successfully created an extension project and replaced the OData service. Let’s now add the new field to the UI layer. For that, you first need to identify the view and then the extension points of that view. Perform the following steps to add a field in the custom view:

1. Right-click your project, and select New • Extension.
2. Verify the extension project location and click Next.
3. Choose Extend View/Fragment and click Next (see Figure 9.60).
4. Select S3.view.xml from the View/Fragment dropdown list to display the extension points available for that view.
5. Select Extension Point and click Next (see Figure 9.61).
   

   Figure 9.60    Extend View

   

   Figure 9.61    Extending S3 View

   Extension Point Tag

   The extension point tag in the XML view indicates the position at which you can insert your custom content.

6. Click Finish. You should now see the S3 extension point under sap.ui. viewExtensions in the component.js file (see Figure 9.62).
   

   Figure 9.62    Extension Point

   Extension Configuration

   The component.js file contains the extension configuration, which has the following properties:

   • sap.ui.viewExtensions
     This is used to provide custom view content in standard SAP applications.
   • sap.ui.viewModifications
     This is used for modifying certain properties of controls in standard SAP applications.
   • sap.ui.viewReplacements
     This is used to replace a view with a custom view in standard SAP applications.
   • sap.ui.ControllerExtensions
     This is used for replacing a controller with a custom controller in standard SAP applications.
7. You should now see a new extended view under the Views folder. Double-click the extended view to open it in the code editor (see Figure 9.63).
   

   Figure 9.63    New Field

8. Add the following code:

   <Label text="{i18n>EXT_STATE}" /><Text text="{shipTo>/State}" />

9. Click Save.
10. Right-click the project folder, then select New • Folder.
11. Create a folder with the name i18n.
12. Right-click the new i18n folder, then select New • File.
13. Create a file with the name i18n_custom.properties (see Figure 9.64).
    

    Figure 9.64    i18n Files

14. Double-click the i18n_custom.properties file, then enter “EXT_STATE=State”.
15. Click Save.

Publish the Custom Application to the ABAP Repository

The next step is to publish your custom application to the ABAP Repository.

Right-click your project and select Deploy • Deploy to SAPUI5 ABAP Repository (see Figure 9.65).

Figure 9.65    Deploying App

Configure and Test the App in SAP Fiori Launchpad

After the app is published to the ABAP Repository, you need to follow the same steps as in Chapter 4 to make this app available to users on SAP Fiori launchpad. After you publish and launch the app from SAP Fiori launchpad, you should see the new State field added to the app (see Figure 9.66).

Figure 9.66    Extended App