S4 HANA Public Cloud : How to create Fiori tiles for BTP -BPA form triggers for automations

[munipkumar]

Hello Community,

We have built form trigger for a process automation that we have built on BTP -Build process automation, we are able to test the form trigger with the generated Url link for the form.

But how can we create a Fiori tile on S4 HANA public cloud Fiori launch pad for this BPA form  where the business users can have access to these tile and trigger the automations.

We have tried to create tile using Custom Catalog but question here is that we can give a static Url in the custom catalog app, but when the BTP sub account is different is for Dev and Prod environments then BPA form link will also be changing. in this case how can we create a Fiori tile which will dynamically points to the correct BPA form in all the environments ( Dev and prod).

SAP Build Process Automation  SAP Build SAP S/4HANA Cloud Public Edition SAP Fiori 

[OwenLiu]

Added BTP tag.

[AndreasMuno]

Thank you for your question, @munipkumar.

To ensure that your Fiori tile dynamically points to the correct BPA form in different environments (development, test, and production) in an SAP S/4HANA Cloud Public Edition 3-system landscape, you can follow these steps:

1. URL Alias Configuration:

   • Use URL aliases or URL parameters that dynamically adjust based on the current environment.

2. Destination Configuration in SAP Cloud Platform:

   • Configure destinations in the SAP Cloud Platform for each environment. Make sure each destination points to the respective system (development, test, or production).

3. Component.js Configuration:

   • Enhance the Component.js file of your custom application to determine the environment dynamically. You can achieve this by reading specific environment variables.

4. Dynamic URL Calculation:

   • Programmatically get the URL based on the environment within the controller of your UI5 application.

Here's a more detailed approach to the solution:

Step-by-Step Approach

1. Creating Destinations in SAP Cloud Platform

Create destinations named logically, such as DEV, TEST, and PROD.

Example:

• Destination 1: DEV_BPA_FORM
• Destination 2: TEST_BPA_FORM
• Destination 3: PROD_BPA_FORM

2. Adding Destinations to XSAPUI5 Component.js

Enhance the Component.js of the Fiori application to read the environment and dynamically adjust the URL.

Example:

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "my/custom/application/model/models"
], function (UIComponent, Device, models) {
    "use strict";

    return UIComponent.extend("my.custom.application.Component", {

        metadata: {
            manifest: "json"
        },

        init: function () {
            UIComponent.prototype.init.apply(this, arguments);
            
            // Initialize router
            this.getRouter().initialize();

            // Set device model
            this.setModel(models.createDeviceModel(), "device");

            // Dynamically set the BPA URL based on the environment
            this.setBPAFormURL();
        },

        setBPAFormURL: function() {
            var oEnvironment = this.getMetadata().getManifest()["sap.cloud"]["environment"];
            var sBPAURL;

            switch(oEnvironment) {
                case "development":
                    sBPAURL = "https://dev-bpa-form-url";
                    break;
                case "test":
                    sBPAURL = "https://test-bpa-form-url";
                    break;
                case "production":
                    sBPAURL = "https://prod-bpa-form-url";
                    break;
                default:
                    jQuery.sap.log.error("Unknown environment: " + oEnvironment);
            }

            this.setModel(new sap.ui.model.json.JSONModel({
                bpaFormURL: sBPAURL
            }), "bpaModel");
        }
    });
});

 3. Using URL in View

Bind the URL in your view to new model properties as defined.

Example (XML view):

<Button text="Open BPA Form" press="onOpenBPAForm"/>

Example (Controller):

onOpenBPAForm: function() {
    var sBPAURL = this.getView().getModel("bpaModel").getProperty("/bpaFormURL");
    sap.m.URLHelper.redirect(sBPAURL, true);
}

4. Configure the Fiori Tile

Ensure that the Fiori tile setup in the Fiori Launchpad Designer does not use hardcoded URLs.

Example:

• In the Semantic Object and Action fields of the tile, use navigation based on the logic.
• Utilize semantic objects like #BPAForm-display which internally routes to relevant URL using the JavaScript logic explained.

In this method, the application reads the environment and sets the appropriate URL for the BPA form ensuring that users are directed to the correct environment-specific URL dynamically. This approach minimizes the chances of hardcoding errors and environment mismatches. Ensure appropriate testing in all environments post implementation.

If this solves your request please mark accordingly. Thank you.