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 S/4 HANA on-prem service and is deployed to the SAP UI5 Repository on ABAP environment.

You can also watch this video from UI5Con showing a new application development, or check this blog post regarding SAP Fiori 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
        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. 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.5.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

SAPUI5 bootstrap can refer to relative URL then it will be consumed from ABAP runtime and not from CDN. Adjust the “src” value in bold:

     <script id="sap-ui-bootstrap"  
      src= "./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.

45 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
    • Hi Timothy,

      I guess I can totaly agree on your statement “Did almost everything and only one thing seems not to be working” and I still get the simple error message as you above.

      Unfortunatelly here is no reply to your question. Have you managed to solve this problem in the meanwhile and may be you can share the solution with me.

      Thank you in advance

      Christian

  • 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

          • Hi Andreas

             

            Did you manage to find a solution for the deployment error? I am getting the same error when deploying if the app already exists in the backend system.

            Thanks

  • 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

  • Hi Yuval,

    thanks for the blog. I have a question about run configuration: Is there any way to change run mode?. I would like to run my app as Sap Fiori LaunchPad Sandbox, but standalone mode avoid that.

    Thanks in advance.

    Samuel

    • Hi Samuel

      Yes just choose the right file when creating a run configuration.

      1. Can you share a screenshot of the chosen file in run configuration?
      2. Can you share which template and wizard used in project creation?
      3. Can you share any error you got if at all in local run?
  • I migrated a previous project from my Web IDE following this blog, and everthing was ok untill run configuration. Here you got some screenshots

    1- All files availables for run configuration

    File%20options%20for%20run%20configuration

    I choose index.html

    index.html

    index.html

    I used SAPUI 5 Application template in web IDE to originally create this project.

    Last but not least this is the error I got everytime I try to run my project

    I got an If clause in my controller where this.getOwnerComponent().getComponentData().startupParameters is called. but running with that configuration it seems that getComponentData is undefined.

    If I try to run my app in Web IDE as SAP Fiori LaunchPad Sandbox, everything is ok, but in Web Application mode the error is exactly the same.

     

    • We do not have an option in the wizard for component based run.

      Please share the application type from manifest.json.

      In which method of the controller did you add this start up line? as far as I know it is not part of the UI5 basic template.

      • This is my app application type:

        servicecatalog.connectivityComponentForManifest
        I am using that start up line in onInit() method.
        Can I change my run configuration file to set  Component.js as run initial file and delete –standalone arg to force component based run?
        • I would like to check this:

          1. Please share the app type from manifest.json
            e.g.    “type”: “application”,
          2. Please confirm the line of code you added in the onInit() is
            this.getOwnerComponent().getComponentData().startupParameters 
          • 1-This is my app type: “application”

            2-This is the line of code that produce the error

            if (typeof (this.getOwnerComponent().getComponentData().startupParameters.contrato) !== “undefined”)

          • You should have now component / FLP run option

            Please delete package-lock file and update package.json with new bold version

             “devDependencies”: {
                “@sap/html5-repo-mock”: “1.6.x”
              },
            Perform npm install

            Update the section in launch.json reflecting your run configuration from

            “args”: [
                    “–standalone”,
                    “/nsmyapp/index.html”,
                    “ui5”,
                    “{\”version\”:\”.\”}”
                  ],
            to
            “args”: [
                    “–flp”,
                    “relative”,
                    “–ui5”,
                    “{\”version\”:\”.\”}”
                  ],
            Run your app and get all apps in the workspace in one FLP, it takes time to load…
  • Hi Yuval, great article on this topic.  I need some further guidance though. 

    Our project has multiple modules including a commonly shared library module.  All modules except the common one are runnable in Cloud Foundry Fiori launchpad.  Those modules have their own xs-app.json and package.json files.  Our project has been implemented in production.  All development was done in WebIDE and we would like to migrate it to BAS.  The whole project source code is moved to BAS and can be built and deployed to production successfully using the mta.yaml file.  However, we are unable to get local run to work – failed to consume SAP Hana on-premise system ODATA services and other external restful services.  Any suggestions to make this work shall be appreciated very much. 

    Thanks

    • Hi,

      This is a migration guide of tool(Web IDE App Studio not runtime which stays the same ABAP.

      Can you specify where is your project deployed to is it deployed to CF?

      Does it include only Fiori UI or is it a fullstack app developed in Web IDE?

        • please make sure the data source url in the manifest has no leading slash.

          In addition share the

          1. project structure

          2. package.json xs-app.json and ui5.yaml of the html5 module

          3. package.json of the root

          4. mta.yaml

          • Thank you so much for the help.  I’ll send the files in the list through email.  There is no package.json file of the project root,  no ui5.yaml files for each module either.

  • Hi Yuval,

    W.r.t ‘ Migrating your Project‘,

    After downloading project as zip file from WebIDE to local machine,

    I could not find a way to import the zip file to Work Space in Cloud Foundry Dev Space.

    I am using trial Cloud Foundry Dev Space.

     

    Step iv says, ‘Drag and drop the project to the SAP Business Application Studio‘,

    But I could not drag and Drop zip file from local Machine to Work Space.

     

    Can you elaborate more on how to import a zip file from local machine to WorkSpace in Cloud Foundry Dev Space.

     

    In Cloud WebIDE Neo Trial, we can import a zip file from local machine to WebIDE WorkSpcae.

    Thanks,

    Vikas

    • Hi

      The drag and drop should work.

      Please attach a screen of the target panel you drop it in

      You can also use git clone

      Import option is not supported