Migrating SAP Fiori Applications from SAP Web IDE to SAP Business Application Studio

Introduction

PLEASE CHECK THE NEW MIGRATION BLOG

https://blogs.sap.com/2022/01/06/migrate-sap-fiori-projects-from-sap-web-ide-to-sap-business-application-studio/

SAP Business Application Studio (aka BAS) is the evolution of SAP Web IDE. It is a modular development environment, built on “Eclipse Theia”, an open-source IDE that embraces the Microsoft VS Code experience. It aims to improve time to value of the developers, provide a modern development experience and allow simple integration with SAP’s services and systems.

In this blog post, I will guide you through migrating an SAP Fiori application from SAP Web IDE to SAP Business Application Studio. The SAP Fiori application consumes an S/4 HANA on-prem service and is deployed to the SAP UI5 Repository on ABAP environment.

You can also watch my video or a a video from UI5Con showing a new application development, or you can also check my blog post regarding SAP Fiori application development.

For migration of SAP Fiori application from Neo to Cloud Foundry follow this blog post.

The environment setup below only needs to be performed one time.

Environment Setup

1. Create a subaccount in your global account or use an existing account and skip to Step three.
   Note: You do NOT have to enable Cloud Foundry since the SAP Fiori application runtime is on the ABAP environment.
2. For trial account, Make sure that your subaccount has an SAP Business Application Studio entitlement. If the entitlement is missing, add it from Entitlements menu.
   .
   
3. Navigate to the Subscriptions menu and search for SAP Business Application Studio. Click on the tile and click Subscribe.
4. Assign yourself to a developer role:
   1. Navigate to Security > Trust Configuration.
   2. Click the sap.default link.
   3. Enter your email address.
   4. Click Assign Role Collection.
   5. Select “Business_Application_Studio_Developer” from the dialog box.

      5. Launch SAP Business Application Studio:

1. 1. Navigate to Subscriptions menu and locate the SAP Business Application Studio tile.
   2. Click Go to Application.

The SAP Business Application Studio Dev Spaces UI opens.

6. Create an SAP Fiori Dev Space:

1. 1. Click Create Dev Space.
   2. Enter a name for the dev space.
   3. Select the SAP Fiori type (from the left side).
   4. Click Create Dev Space.
   5. Launch the dev space by clicking on the dev space name.

7. Import your destination:

1. 1. Navigate to your Neo account and export the existing destination required for the SAP Fiori app to your PC.
   2. Navigate to Connectivity > Destinations in your new subaccount and import the existing destination.
   3. Make sure that the following properties are set in Additional Properties of the destination:
      1. HTML5.DynamicDestination = true
      2. WebIDEEnabled = true
      3. WebIDEUsage = odata_abap,dev_abap
         In case your service is not an abap catalog, add WebIDEUsage = odata_gen
         Do NOT maintain both odata_abap and odata_gen as WebIDEUsage.
      4. HTML5.Timeout = 60000
   4. Make sure that your subaccount is connected to your on-prem destination with
      a cloud connector.

Migrating your Project

During migration, you import your existing project, adjust four files and run the application in SAP Business Application Studio.

Import your project

You can clone your project from GIT using the command line in SAP Business Application Studio.
Note: See Connecting to External Systems for more information on using a destination with Cloud Connector as your GIT on-prem setup.

Alternatively, import your project as follows:

1. 1. Click File > Open Workspace and create a workspace in the projects folder.
   2. Export your project (e.g. “onprem” project) from SAP Web IDE Full Stack to your PC.
   3. Unzip the project on your PC.
   4. Drag and drop the project to the SAP Business Application Studio.

Adjust your project

Only 4 files should be changed to enable your SAP Fiori app to run on Application Studio:

1. Create an “xs-app.json” file under the project’s root folder to enable the local run.This file replaces the “neo-app.json” file, which is not required.
2. Adapt the “package.json” file with the relevant required dev-dependencies, such as code assist, build, and local run.
3. Adapt the “ui5.yaml” file to include the relevant SAPUI5 build tasks.
4. Adapt “index.html” to use absolute SAPUI5 URL.

xs-app.json File

1. Create the file under the project’s root folder (e.g. “onprem”) folder.
2. Copy the following snippet and enter your destination name. This snippet:
   1. Adds a route to your “on-prem” destination.
   2. Adds a route to enable the local run.

{
"authenticationMethod": "none",
"routes":
[
{
"authenticationType": "none",
"csrfProtection": false,
"source": "^/sap/opu/odata/",
"destination": "<YourDestination>"
},
{
"source": "^(.*)$",
"target": "$1",
"service": "html5-apps-repo-rt"
}
]
}

package.json File

If no specific dev-dependencies/scripts are added,
replace the content with the following snippet and adjust the name in bold:

{
  "name": "onprem",
  "version": "0.0.1",
  "devDependencies": {
    "@sapui5/ts-types": "1.71.x",
    "@sap/ui5-builder-webide-extension": "1.0.x",
    "@sap/approuter": "8.1.x",
    "@sap/html5-repo-mock": "1.6.x"
  },
  "scripts": {
    "build": "ui5 build --include-task=generateManifestBundle generateCachebusterInfo",
    "start-local": "node node_modules/@sap/html5-repo-mock/index.js"
  },
  "ui5": {
    "dependencies": [
      "@sap/ui5-builder-webide-extension"
    ]
  }
}

ui5.yaml File

If no specific SAPUI5 build tasks are added, replace the content with the following snippet and adjust the “nameSpace” value in bold:

specVersion: '1.0'
metadata:
  name: onprem
type: application
resources:
  configuration:
    propertiesFileSourceEncoding: UTF-8
builder:
  customTasks:
  - name: webide-extension-task-updateManifestJson
    afterTask: generateVersionInfo
    configuration:
      appFolder: webapp
      destDir: dist
  - name: webide-extension-task-resources
    afterTask: webide-extension-task-updateManifestJson
    configuration:
      nameSpace: ns

Test your SAP Fiori Application

1. Perform an npm install from the terminal.
2. Create a run configuration from the run panel.
3. Bind your destination in the run configuration.
4. Locally run your app accessing your remote service.

Your app is running in a new browser tab.

Build and deploy your SAP Fiori Application

1. Perform an npm run build from the terminal.
2. Execute “abap-deploy” and answer the questions from the terminal.

Your app is deployed to the ABAP system.

Conclusions

You have accomplished the following tasks:

1. Setup SAP Business Application Studio development environment.
2. Migrate an SAP Fiori application consuming ABAP on-prem service from SAP Web IDE to SAP Business Application Studio.
3. Test the application locally and deploy it to ABAP.

You can continue and learn about SAP Fiori development using SAP Business Application Studio in this blog post.