Skip to Content
Product Information

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

Introduction

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 on-prem service and is deployed to the ABAP environment.

You can also watch this video from UI5Con showing a new application development.

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.Create%20a%20subaccount
    Note
    : You do NOT have to enable Cloud Foundry since the SAP Fiori application runtime is on the ABAP environment.Enable%20CF
  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.
    .
    Entitlement%20App%20Studio
  3. Navigate to the Subscriptions menu and search for SAP Business Application Studio. Click on the tile and click Subscribe.Subscribe%20App%20Studio
  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.

Trust

Role

      5. Launch SAP Business Application Studio:

    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. 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. 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
      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. 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.4.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

index.html File

If SAPUI5 bootstrap refers to relative URL, adjust the “src” value in bold:

     <script id="sap-ui-bootstrap"
     src= "https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

 

Delete files

The following files and folders can be deleted:
“.che” folder, “.user.project.json”, “extensionDocu.properties”, “neo-app.json”,
“package-lock.json”
, “readme.txt”

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.

26 Comments
You must be Logged on to comment or reply to a post.
    • Hi Paulo,

      I think that the “check connection” on the CF cockpit is not stable.

      I noticed the following:

      1. It is internet and not on-prem destination
      2. It is not an abap-catalog but probably success factors api
        1. catalog
          or
        2. direct service
      3. My proposal would be then to replace the existing WebIDEUsage value to: odata_gen
      4. In case the the url in the destination refers the absolute service add the following property
        WebIDEAdditionalData = full_url

      Please update me if metadata.xml was generated under localService folder, It might be related to the project generation.

      Contact me for any issues

       

      Regards

      Yuval

  • Did almost everything and only one thing seems not to be working. Connection test to my on-prem system is failing. Destination is howevever reachable in the cloud connector.

    I managed to connect to the ES5 trial system.

    What am I missing

    Destination%20config%20in%20Cloud%20Foundry%20Trial

    Destination config in Cloud Foundry Trial

    /
    Destination%20config%20in%20Cloud%20Foundry%20Trial
  • It is great you made the ES5 work!

    I think that the check connection button in the cockpit for on prem is not that stable.

    The real validation is if you get the on-prem system in App Studio during project creation.

    1. Check the link to cloud connector I added in the import destination section of this blog post.

    2. Verify you did not forget to allow access to sub path after adding your on-prem system to your CF account in the cloud connector.

    https://help.sap.com/viewer/cca91383641e40ffbe03bdc78f00f681/Cloud/en-US/e7d4927dbb571014af7ef6ebd6cc3511.html

     

  • Hi

    Thanks for the feedback.

    My cloud connector config is the same as the one that I am using for connecting with WebIDE. Access to subpath is allowed

     

  • /
    Business%20Application%20Studio%20error
    • Hi

      I can only think about three reasons: destination attributes, wrong credentials, and cloud connector set up.

      For the first:

      Please check the destination attributes

      1. HTML5.DynamicDestination = true
      2. WebIDEEnabled = true
      3. WebIDEUsage = odata_abap,dev_abap

      For the second:

      Check that from the browser that you can access the service with your credentials

      For the third please verify that it is the correct account mapped in the cloud connector

      Regards

      Yuval

      • Hi

         

        Thanks again for your response

        First – is as per your suggestion.

        Second – I can access the service with my credentials in the browser and also in the webide.

        For cloud connector account mapping, I am using the subaccount-subdomain ID – a guid-like string of characters

        Thanks

        /
  • Hi Yuval,

    thanks for this blog. Successfully added an existing Fiori app (with ABAP service) into SAP Business Application Studio and actually could run it. Yeah!

    But when I want to deploy the application to our on-premise Gateway system with “abap-deploy” it always runs the deployment with mode “create” and fails since the application already exists on the Gateway system.

    Is there a way to run “abap-deploy” with “update” or whatever mode?

    Thanks

    Andreas

  • Hi Andreas,

    Happy to hear hope it was smooth.

    I think your initial deploy failed or went half way due to timeout thus I propose the following:

    1. add the following attribute to the destination HTML5.Timeout = 60000
    2. Create a new app and give it a new name or namespace (the app id in manifest is the separator)
    3. Deploy it should be in create mode
    4. In case you redeploy we check if the app exists and do not ask the BSP name again and use an update mode

    In case you fail please update me.

    also have a look here
    https://www.youtube.com/watch?v=PFBoqhAJmP4&feature=youtu.be&t=8

    Regards

    Yuval

    • Hi Yuval,

      thanks for your update.

      The trouble I have is that I don’t have an “inital deployment”. I have an existing app which has been developed in WebIDE.

      I migrated the project into the SAP Business Application Studio, did some further development and wanted to redeploy the app. Again, the app already exists on the gateway system.

      But when I run the deployment I go through the prompt process and all works fine till the point where it checks if an app exists since the deployment always runs in “create mode”. This would be the first deployment from SAP Business Application Studion but with an existing application.

      The German text states “SAPUI5-ABAP-Repository with name ZYX already exists”

      /
  • Hi Andreas

    Does deployment work for other apps?

    Please make sure that the BSP folder in se80 is the one you enter in app name question of the deploy terminal.

    And that the client is the correct one.

    If problem persist contact me in mail and we will solve it in a short chat

    Regards

    Yuval

    • Hi Yuval,

      I tried to deploy a new “test app” into $TMP which looked too at begin but also faild with error message “Failed to deploy Application: <Invalid backend response received by SCC: io.netty.handler.codec.TooLongFrameException: HTTP header is larger than 8192 bytes..>”

      Edit: this test app itself has been deployed to the system despite the error message…

       

      With the other appliction the name of the application I enter during the prompt is exactly the one which exits in our package in SE80.

      The client is the same since we only have one working client on the system e.g. 101

      Regards, Andreas

      • Hi Andreas

        Can you have a look here

        https://launchpad.support.sap.com/#/notes/2875647

        Possible root causes could be

        • The app has no descriptor at all (manifest.json)
        • The app has been deployed incompletely and the descriptor is missing
        • The app has not been build and sources have been deployed
        • The sap.app/id has changed in the manifest.json

        In addition contact me in mail if problem persists

        Regards

        Yuval

         

        • Hi Yuval,

          for the 8192 byte error we adjusted our cloud connector according to SAP note 2875647 (https://launchpad.support.sap.com/#/notes/2875647). A completely new created application in Business Application Studio can be deployed to the ABAP repository but we get a “<bad gateway>” error although the /ui2/ and /ui5_ui5/ path have been whitelisted in the cloud connector. The application though is deployed anyhow.

          If I redeploy this newly created application the abap_deploy runs in “update” mode with no errors. 

          But again, when I want to deploy an application migrated from WebIDE and which also exists on the gateway system I run into the same error saying that the application already exits (of course, I deployed it last week). The deployment mode is still “create”.

          Regards, Andreas

          edited on Aug 04, 10:37 am

  • Thanks for the blog. Very informative.

    While migrating one of my UI5 apps from Web IDE, I am facing an issue. I hope you can help me with the issue.

     

     

    • When I’m trying to clone this GIT in BAS using Command GIT Clone command as shown below:

     

    But I get below Error:

    Request clone failed with message: Cloning into ‘/home/user/migratetobas’… fatal: could not read Username for ‘https://git.hanatrial.ondemand.com’: No such device or address

     

     

    Whamt am I doing wrong here? How can I clone my GIT Repository so that I can migrate my project from WEB IDE to BAS?

    Thanks,

    Soham