How to create a Fiori Elements App for a RAP BO with Transport Selection

[patrick_winkler]

Introduction

In this blog post, you will learn how to create a Fiori Elements app for a RAP Business Object with Transport Selection.

The general procedure is described here. The basic principle is to include a singleton root entity in the RAP BO where the selected transport request is stored in the draft version. The singleton modeling pattern is also used to build transactional apps with multi-inline edit capabilities.

The generated RAP BO of the Business Configuration Maintenance Object ADT Wizard already includes a Transport Selection. With the latter, I show how to create a Fiori Elements app in Business Application Studio that properly handles the singleton root entity. Our goal is to configure the Fiori app to skip the Singleton entity's List Report page and automatically navigate the user to the singleton's Object Page. This hides this modeling pattern from the end user without losing the benefits.

Note that the generated BC Maintenance Object is usually used together with the Custom Business Configurations app. Sometimes, however, you cannot or do not want to use this app, but create your own custom SAP Fiori app.

To follow this blog, you should be familiar with

• ABAP RESTful Programming Model

• Business Application Studio

• Fiori Elements

This blog is relevant for:

• SAP S/4HANA On-Premises 2022 or higher

• SAP S/4HANA Cloud, Public Edition

• SAP S/4HANA Cloud, Private Edition

• SAP BTP, ABAP Environment

Generate RAP BO

As mentioned in the introduction, you can use the BC Maintenance Object ADT Wizard to create a RAP BO with Transport Selection. In this blog I want to focus on the Fiori Elements part of the story. In this tutorial, you will learn how to use the wizard. You can ignore the part of the tutorial that handles the CUBCO app.

I use the generated RAP BO of the mentioned tutorial in the following steps. The draft-enabled BO has three entities and is exposed by an OData V4 UI service.

• ErrorCodeAll (Singleton Root)

• ErrorCode

• ErrorCodeText

Generate Fiori Elements app

1. In Business Application Studio, open the "Fiori Application Generator" using Command Palette (Ctrl+Shift+P)
2. Select "SAP Fiori Elements" as "Application Type" and "List Report Page" as template. Note that you can also use the template "Form Entry Object Page". The required code adaptations are slightly different, but the effort is comparable.
3. Select the appropriate data source in which you created the RAP BO
4. Select "ZUI_ERRORCODE_O4" as the service (your example name may differ)
5. Select the Singleton Root Entity "ErrorCodeAll" as "Main entity" and "_ErrorCode" as "Navigation Entity"
6. Otherwise, use the default settings and finish the wizard.

Fiori Application Generator

Adapt Fiori Elements app to Singleton Root Entity

1. When you launch the generated SAP Fiori app, you see a list report page with one row: the singleton entity. To avoid this, adjust the webapp/Components.js file by adding the following init function:

sap.ui.define(
    ["sap/fe/core/AppComponent"],
    function (Component) {
        "use strict";
        return Component.extend("project6.Component", {
            metadata: {
                manifest: "json"
            },
            init: function () {
                Component.prototype.init.apply(this, arguments);
                this.getRouter().navTo("ErrorCodeAllObjectPage",{ key: "(1)"}, true);
            } 
        });
    }
);

During the initialization of the app, you navigate directly to the singleton object page by providing the value of the semantic key of the singleton entity. In this example, the key value is "1". Fiori Elements automatically determines whether the draft instance or the active instance must be displayed if the CDS entity for the singleton has a semantic key definition. The last argument of function navTo() allows navigation without history.

2. Edit the webapp/manifest.json file. Ensure that the singleton object page routing target "ErrorCodeAllObjectPage" has the option "editableHeaderContent" set to "false". Otherwise, an empty section for the header is displayed on the UI.

"ErrorCodeAllObjectPage": {
          "type": "Component",
          "id": "ErrorCodeAllObjectPage",
          "name": "sap.fe.templates.ObjectPage",
          "options": {
            "settings": {
              "editableHeaderContent": false,
              "entitySet": "ErrorCodeAll",
              "navigation": {
                "_ErrorCode": {
                  "detail": {
                    "route": "ErrorCodeObjectPage"
                  }
                }
              }
            }
          }
        }​

3. Although this is not mandatory, the singleton list report destination and the corresponding route are also removed from manifest.json. This way we can ensure that no one can reach the list report.
Delete the following route:

{
  "pattern": ":?query:",
  "name": "ErrorCodeAllList",
  "target": "ErrorCodeAllList"
}​

Delete the following route target:

                "ErrorCodeAllList": {
                    "type": "Component",
                    "id": "ErrorCodeAllList",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "entitySet": "ErrorCodeAll",
                            "variantManagement": "Page",
                            "navigation": {
                                "ErrorCodeAll": {
                                    "detail": {
                                        "route": "ErrorCodeAllObjectPage"
                                    }
                                }
                            }
                        }
                    }
                }

4. If you want to use the transport request selection bar, add the following annotation "transportSelection". For the attribute "selectTransportAction", you can find out the namespace by executing a GET request $metadata for the OData service that the app uses.

"ErrorCodeAllObjectPage": {
          "type": "Component",
          "id": "ErrorCodeAllObjectPage",
          "name": "sap.fe.templates.ObjectPage",
          "options": {
            "settings": {
              "content": {
                "transportSelection": {
                  "selectTransportAction": "com.sap.gateway.srvd.zui_errorcode.v0001.SelectCustomizingTransptReq",
                  "transportRequestProperty": "TransportRequestID"
                }
              },​

Done. You can start the app and check if the SAP Fiori app navigates directly to the singleton object page where the actual table content can be maintained. The "Transport" section is visible only after you have selected a transport request. The action "Select Transport" returns all modifiable transport requests of type Customizing where the user is either the owner of the request or at least one open task. The transport request must have the attribute "SAP_CUS_TRANSPORT_CATEGORY" set to "MANUAL_CUST" or "DEFAULT_CUST".

Fiori app after adjustments

You can now further extend the SAP Fiori app as required. Since you use the singleton pattern, you can, for example, activate the inline creation mode for the table entries.