9    Creating and Extending Transactional Apps

This chapter demonstrates how to create and extend transactional apps. A complete example app is also presented to illustrate the extension process.

In Chapter 8, we discussed all the options available in SAP Web IDE to create or extend an SAP Fiori application, and in Chapter 7 we looked at the basic OData concepts and how to create an OData service. In this chapter, we’ll begin tying all the pieces together as we walk through the end-to-end process of creating and extending transactional apps.

In the first part of this chapter, we’ll explore the process of creating transactional apps (see Section 9.1). We’ll start by outlining some basics of app creation using a template in SAP Web IDE, and then we’ll cover the end-to-end process of creating a transactional app. In the second part of this chapter, we’ll explore how to extend a transactional app. We’ll start our discussion in Section 9.2 with an overview of the extension process and examine various extension layers in the architecture and the skills required to extend each of these layers. In Section 9.2.1, Section 9.2.2, and Section 9.2.3, we’ll describe the end-to-end extension process for each layer of the architecture, with an example based on the My Quotations transactional app.

9.1    Creating Transactional Apps

In this section, we’ll walk you through the step-by-step process of creating a transactional app with a template from SAP Web IDE. In the previous chapter, we examined the different templates available as part of SAP Web IDE. In this section, we’ll focus on the UI layer of the transactional app. In a real-world scenario, you’ll create an OData service and then create the UI layer. However, in Chapter 7, we covered the basics of OData creation and the extension process, so you should be able to create an OData service by this point. In this section, we’ll therefore use an existing OData service to create the app.

You can create simple to very complex apps using SAP Web IDE. The main purpose of this section is to show you how to create a transactional app and publish it to SAP Fiori launchpad. We’ll use an SAP Fiori worklist application template and the SR018_SO_TRACKING_SRV OData service to build the app.

9.1.1    Create a New Project Using a Template

In this step, we’ll use a template in SAP Web IDE and integrate it with an existing OData service. Follow these steps:

  1. Log in to SAP Web IDE.
  2. Select New Project from a Template.
  3. Select the SAP Fiori Worklist Application template, then click Next (see Figure 9.1).
    SAP Fiori TemplatesSAP Fioritemplate

    Figure 9.1    SAP Fiori Templates

  4. Enter a Project Name, and click Next (see Figure 9.2).
  5. Select the back-end server connection from the dropdown menu, then enter “SRA018_SO_TRACKING_SRV” in the Search field to search for the SRA018_SO_TRACKING_SRV OData service (see Figure 9.3).
  6. Select the OData service and click Next.
    Project Name

    Figure 9.2    Project Name

    Selecting OData Service

    Figure 9.3    Selecting OData Service

  7. Enter or select the following details in Project Settings and Page 1 Section (see Figure 9.4):
    • Project Namespace: “TrackSalesOrders”
    • Title: “Sales Order Tracker”
    • OData Collection: SalesOrders
    • Item Title: SalesOrderNumber
    • Numeric Attribute: TotalAmount
    • Units Attribute: Currency
    • Status Attribute: ShippingStatusCode
    • Attribute: OrderDate
    Project Settings and Page 1 Section

    Figure 9.4    Project Settings and Page 1 Section

  8. Scroll down, enter or select the following details in Page 2 Section and Navigation Section, then click Next (see Figure 9.5):
    • Title: “Sales Order Details”
    • Attribute 1: PO
      Page 2 Section and Navigation Section

      Figure 9.5    Page 2 Section and Navigation Section

    • Attribute 2: ShipToAddressLine2
    • OData Navigation: OrderItems
    • Attribute 1: Description
    • Attribute 2: Quantity
    • Attribute 3: PricePerUnit
  9. Click Finish to complete the project creation.

9.1.2    Test the App with Mock Data

In this step, you’ll test the app you created in the previous step with mock data and check whether the fields are showing the data correctly. Follow these steps:

  1. From the TrackSalesOrder project folder, right-click index.html, then select Run • Run with Mock Data (see Figure 9.6).
    Run with Mock Data

    Figure 9.6    Run with Mock Data

    The first screen shows the page 1 section (see Figure 9.7).
    Page 1 Section

    Figure 9.7    Page 1 Section

  2. Clicking a sales order’s row will take you to the second screen, which shows the fields from Page 2 Section and Navigation Section (see Figure 9.8).
    Page 2 Section and Navigation Section Fields in App

    Figure 9.8    Page 2 Section and Navigation Section Fields in App

9.1.3    Deploy the App to the ABAP Back-End Server

In the previous steps, you successfully created and tested the app. Next, we’ll show you how to deploy the app to the back-end server. Follow these steps:

  1. Right-click the project and select Deploy • Deploy to SAPUI5 ABAP Repository (see Figure 9.9).
    Deploying the App

    Figure 9.9    Deploying the App

  2. Enter the Name, the Description, and a Package. Click Next (see Figure 9.10).
    Application DetailsTransactional appdetails

    Figure 9.10    Application Details

  3. Click Finish to complete the deployment.

You’ve now successfully created the app and deployed it to the back-end server. Next, you’ll set up the app in SAP Fiori launchpad and create a catalog and tiles. You’ll follow the same steps as in Chapter 4, Section 4.6, so we’ll just include the high-level steps in the next section.

9.1.4    Publish the App to SAP Fiori Launchpad

In this step, you’ll publish the new app to SAP Fiori launchpad. Follow these steps:

  1. Log in to the back-end server, and check the service via Transaction SICF, which you deployed previously (see Figure 9.11).
    Maintain Service

    Figure 9.11    Maintain Service

  2. Create a new launchpad via Transaction LPD_CUST (see Figure 9.12).
    New Launchpad

    Figure 9.12    New Launchpad

  3. Enter the application URL parameter of the service (see Figure 9.13).
    Application URL

    Figure 9.13    Application URL

  4. Enter the Application Alias and the SAPUI5 component details (see Figure 9.14).
    Application AliasApplicationalias

    Figure 9.14    Application Alias

  5. Log in to SAP Fiori launchpad designer and create a new catalog (see Figure 9.15).
    New Launchpad CatalogCatalog

    Figure 9.15    New Launchpad Catalog

  6. Add a new target mapping, and enter the following details (see Figure 9.16):
    Target MappingTargetmapping

    Figure 9.16    Target Mapping

  7. Next, create a new tile with the following details (see Figure 9.17):
    • Title: Enter “Sales Order Tracker”.
    • Icon: Select an icon.
    • Semantic Object: Enter “SalesOrders”.
    • Action: Enter “tracker”.
    New TileTilesnew

    Figure 9.17    New Tile

  8. Create a new role in the ABAP system, then assign the launchpad catalog and user to the role (see Figure 9.18).
    Maintain Role

    Figure 9.18    Maintain Role

  9. Log in to SAP Fiori launchpad; you should now see the new Sales Order Tracker app in the catalog.
  10. Add the app to your My Home group or any group, then launch the app (see Figure 9.19).
    New Transactional App

    Figure 9.19    New Transactional App

You’ve successfully created and deployed a transactional app to the ABAP server and then published the app to SAP Fiori launchpad. Next, we’ll explain how to extend a transactional app.