Skip to Content
Product Information

Migrating SAP Fiori Applications 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.Create%20a%20subaccount
    : 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.
  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.



      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",
"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": [

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'
  name: onprem
type: application
    propertiesFileSourceEncoding: UTF-8
  - name: webide-extension-task-updateManifestJson
    afterTask: generateVersionInfo
      appFolder: webapp
      destDir: dist
  - name: webide-extension-task-resources
    afterTask: webide-extension-task-updateManifestJson
      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”, “”, “neo-app.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.



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.

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




  • 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 config in Cloud Foundry Trial

    • 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


      • For me I just omit this message as what I understand there can not be popup for login info like user and password (that is why please try later). You can check the response with network developer tools there is 200 code for tenant request. When you connect application to this destination it should work. 

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


  • 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


    • Hi

      The cloud connection check in the cockpit cloud foundry for on-prem destination is probably not working well.

      I propose to check if you can perform one of the following:

      1. Create a new project and consume a service from on-prem
      2. Run locally after binding in run configuration to your on-prem
      3. Deploy

      Have also a look at this walk-through published today

      • Hi Yuval,


        Yes Check connection in destination does not work properly when we configure destination in CF via cloud connector, whereas we can access destination in our UI5 development in BAS even though it shows error while testing connection.


        Also step 1,2 works well, but deployment stuck with error:

        Failed to deploy Application: <Request failed with status code 403>


        where as i have followed:

        1. open terminal using project in workspace
        2. run command–> npm run build
        3. run command–> abap-deploy
        4. it shows below options:
        5. Specify the source folder path for deployment … ./dist
          ✔ Select a target ABAP system › SAPXX (http://sapxx:8XXX : 100)
          ✔ Enter an application name … ztestproj
          ✔ Enter a description for the application …
          ✔ Enter a package for the deployed application … zfioriXX
          ✔ Enter a transport request for the deployed application … CXXXXXX
        6. The “ztestproj” application is being deployed to ABAP in ‘create’ mode.
          Failed to deploy Application: <Request failed with status code 403>


        Please add-in in case there are any hidden steps to deploy ui5 app from BAS to on-premises SAP system.



        • No hidden steps that I can think of, see the my video in this introduction above

          Can you deploy to $TMP a new app?

  • /
    • 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



      • 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


  • 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?



  • 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



    • 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



    • 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

        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 has changed in the manifest.json

        In addition contact me in mail if problem persists




        • Hi Yuval,

          for the 8192 byte error we adjusted our cloud connector according to SAP note 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 Yuval,

          I have created mta project and added extended Fiori App that normally runs on NEO- Portal and my purpose is migrate these apps to the CF – Portal. When I try to create mtar archive the terminal giving error as below:

            Process Failed With Error
          Error Message:
          Failed to read manifest.json for project caallapv: ENOENT: no such file or directory, open 'mtafolder/standard_old_fioriapp/webapp/manifest.json'

          What is your suggesting to migrate Fiori apps that has no descriptor file (manifest.json) ?


          Kind regards,


          • You need a manifest sonce it is a requirment for HTML5 Repository in CF.

            The min information inside is app id and version.

            I propose that you create a simple UI5 app for CF with your app name on BAS, and replace the webapp folder with you webapp folder

          • Many thanks! I was planning the same but didn’t sure about what is the minimum info needed for manifest. I will let you know about the result.

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


    • My app is residing in GIT :


    • 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 '': 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?



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


    • 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


    I choose 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:

        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
          • 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")

          • @samuelcastromolina

            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”: [
            “args”: [
            Run your app and get all apps in the workspace in one FLP, it takes time to load the first time…
  • 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. 


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



    • 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

  • Hi Yuval,

    I work find with the migrate part, but how to deploy to the cloud foundry? Because I copy from web ide and it’s no include file contain mta.yaml file and approuter folder. And also how to create launchpad through the migrate method.

    • Hi Eva,

      This blog refers to migration of app deployed to ABAP stack.

      For migration of an app deployed using Web IDE to Neo to an app deployed using App Studio to Cloud foundry check this blog


  • SAPUI5 Changes not reflected in Running App after saving



    I made change in App.view.xml file, i.e the image url of a carousel was changed.

    // the above src url was changed


    The explorer image of folders is below.


    The folders have a ‘M’ letter near it.

    The changes I did are saved, but still the ‘M’ letter is near the folder names.



    And when I run the configuration, the image corresponfing to url which was before change is shown.

    Tried creating a new run configuration, but still the image from old url is shown.

    The image from new url is not shown


    I tried stopping, starting devspace, but still problem remains, any suggestions.


    Please note, I am using trial version of web Cloud Foundry



  • Importing files / folders from Local Machine to Trial Work Space.

    Hi Yuval,

    Under Section 'Migrating your Project' -> 'Import your project'
    For trial environment,
    Is there any option to copy folder from local machine to Work Space.
    Because in Menu there is no option.

    Also copying from Windows explorer to BAS Explorer does not work.
    In WebIDE there was option to import zip file from local Machine to WebIDE

    For moving folders with in trial environment,
    Is GIT the only option?



  • Hello Yuval.

    Thanks for your blog post.

    I have a question.

    How can I download source code from S4HANA on-premise server?

    WebIDE has an import menu to download source code from a SAP server,

    but I can’t find anything similar on BAS.

    Is the git an only way to manage source code?


    Thanks in advance.


    • Hi

      Currently yes, git is the source control, ABAP is the runtime environment and in the UI5 Repository your BSP app should not function as source control, e.g test folder should appear only in source code and component preload should appear only in BSP app and not in the source control.

  • Hi Yuval.

    Thank you for the blog.

    I have migrated my application from WEBIDE to BAS. It is working as expected.

    But when I am deploying the application from BAS, it is getting deployed in Create mode and is giving an error as:

    Failed to deploy Application: <SAPUI5 ABAP Repository with name “X” already exists SAPUI5 ABAP Repository with name “X” already exists>


    deploy error

    Can you please help me on this.

    Does the error related to the spec version in ui5.yaml file, i have set it as 1.0 as suggested.




    Kindly let us know, what may be wrong.



  • Hi Yuval,


    we moved an app from webide(productive) to bas(trial), moving worked but we have troubles in testing there.


    we have a neo-app.json with a lot of entries like (loading components):

    "path": "/sap/bc/ui5_ui5/tyed/mm_mat_class",
    "target": {
    "type": "application",
    "name": "matclassification"
    "description": "matclassification"


    where when in webide the source should be loaded from cloud (neo) , and the /sap/bc path is the path in abap backend.

    it would be great if there would be an example how to do this in xs-app.json


    and will be there one day a tool that can convert from webide to bas?


    as we are not sure, if we should migrate to Bas^ß, when is it worth to migrate, how much is the effort^ß

    we have a lot of fiori apps build with webîde, a  many common components etc.

    best regards,


    • Hi

      I think there is a plan for migration tool from Neo to CF.

      But in your case the runtime is not migrated and stays ABAP, so it is not relevant.

      If I get it right you consume a reuse lib in your application.

      1. Do you fetch it also locally or consume the remote lib only in testing?

      2. Can you share the manifest, the component.js and index.html or any other file where you refer to the reuse lib

      3. BAS is not beta and except tools for reuse library you can try and work with it

      If needed and not solved we can have next week a call and migrate your apps

      • Hello yuval,

        thanks for your reply.

        we are consuming the common components only in testing, they are all deployed to backend, it is just useful if we changes this common components and want to test in webide in another application.

        over the time we have some different approaches for consuming,mostly we do it like that:


        "path": "/sap/bc/ui5_ui5/tyed/mm_mat_class",
        "target": {
        "type": "application",
        "name": "matclassification"
        "description": "matclassification"


        in component.js:

        something like that:"", "/sap/bc/ui5_ui5/tyed/mm_mat_class");


        the application mm_mat_class is also in abap backend and in cloud deployed


        I know bas is not beta, and so we are thinking about to move from Neo to CloudFoundry and therefor we have to migrate our fiori-content.


        But we have time, we are just playing around with the trial version, so that's why i asked if there will come a tool that does all this manual steps for me 😉 - bas is cool for developing, but not as easy to handle for all the deploying tasks , but we have not done much in the trial version til now.


        regrads oliver


        • So

          This blog refer to tool migration and runtime stays ABAP, in addition reuse lib consumption not covered since we did not deliver tools for it.

          I can propose the following:

          1. Describe the specific runtime migration you plan, is it Neo to CF or you stay in ABAP

          2. Send a sample git sandbox app of the reuse lib and its consumption app and we can check it and propose what to change


          Set a one hour call next Monday and we will migrate online

          • hello yuval,


            just one question befor i can send you samples.

            what do you mean with neo to CF or stay in abap.


            we have everything deployed in abap backend - just for testing we use common libraries deployed to cloud platform (neo) , and we use webIde just for developing.

            we are not planning to have an apps or parts of apps running in cloud or running on abap Cloud , we push everything to Erp(and soon s/4) backend.


          • in Webide with the neo-app.json above we  have the possiblity that in WebIde the shared Sources are loaded from cloudPlatform, and when we are onPremise for sure the libraries are loaded from backed.


            If this is also possible when we are in BAS than  very nice, and what would be the steps.


            deploying all apps to CF first , and how has the xs-app.json file look like or the coding for loading comparable to


  “”, “/sap/bc/ui5_ui5/tyed/mm_mat_class”);

            or is this all the same?

          • Hi

            I prefer you would not need to deploy to CF, for me it sounds wrong.

            If you want to run with local reuse lib since it is keep changed by you, fetch it from git.

            If you do not own it it should be loaded from ABAP on runtime.

            We should check how, any way as offered please decide if to share sample sandbox app in git hub and its reuse lib.

            Or we can meet next week and check it on your real app

          • oh i see, now i understand. ok we would fetch from abap and if we nned we would fetch from local. that makes sense for us.


            for the above example in neoapp

            “path”: “/sap/bc/ui5_ui5/tyed/mm_mat_class”,
            “target”: {
            “type”: “application”,
            “name”: “matclassification”
            “description”: “matclassification”

            and in the code

  “”, “/sap/bc/ui5_ui5/tyed/mm_mat_class”);


            how should this be changed to always load from abap backend in xs-app.js ?

            regards oliver

          • hi aurelien,

            for my understanding bas always loads from abap backend or it loads the source if you have them imported in your bas workspace.

            in webide it loads sources with my example above also from the cloud.

            i have no idea if or how this could be done with bas, but we have at the moment only the trial version and made no further investigations.

            So for the moment we still have no urgent plans to migrate to bas as webide will be supported anywas as long as users have productive accounts there.


            regards oliver

  • Hi Everyone,

    I get the following error while deploying fiori project from BAS. Is there anyone have an idea?

    "Failed to deploy Application: <Request failed with status code 403>"

    • and also looked at the /n/iwfnd/error_log. I get the following error.

      “No service found for namespace ‘/UI5/’, name ‘ABAP_REPOSITORY_SRV’, version ‘0001’”.

      This service is not available in gw. I found the following note in sap help. On the system I want to deploy, fes 1.53.9. Now, will I not be able to deploy from the beginning on systems below 1.60?

  • For Migration projects, Unable to establish connection at Runtime, But gets connected in preview mode.

    Hi Yuval,


    While creating a new project using Template and ES5 connectivity, works fine at Run time.

    But for migrating projects runtime DB connection error occurs.


    I had copied open sap course ui51, w2u1 folder to Workspace.


    Created the 4 files, /home/user/projects/w2u1/xs-app.json, package.json, ui5.yaml

    Using 'npm init', 'ui5 init', 'npm install' commands.


    In Workspace, click index.html->Open In Preview, data is fetched.

    Using F12, Ctrl+R, below URL was obtained.$metadata?sap-language=EN


    But when I run the app, all features works fine except DB connection.

    At run time, the url is pointing to$metadata?sap-language=EN

    which fails.


    Only difference I see in url is DesignMode-theia, RunTime-app1.


    Are you aware of such problems.


    Also while Migrating from webide the folders under w2u1 are  webapp, node_modules

    And Files ui5.yaml, xs-app.json, package.json, package-lock.json

    Also deleted neo-app.json file.


    When I create a new project using Template, the folder structure is

    Directory: HTML5Module,testes5-approuter

    Files: mta.yaml  package.json


    In HTML5Module folder, the folders are webapp and files are package.json,  tsconfig.json,  ui5.yaml,   xs-app.json


    When I start with a new project from template, everything works fine, no issues.

    My concern is with Migration of project with DB connection.

    In the Migration project approuter folder is missing,

    Is something wrong?


    Below is xs-app.json file


    "authenticationMethod": "none",

    "routes": [ {

    "authenticationType": "none",

    "csrfProtection": false,

    "source": "^/sap/opu/odata/iwbep/GWSAMPLE_BASIC/",

    "destination": "ES5" },


    "source": "^(.*)$",

    "target": "$1",

    "service": "html5-apps-repo-rt",

    "authenticationType": "xsuaa" } ] }


    In Manifest.json below entry is there

    "dataSources": {

    "ES5": {

    "uri": "/destinations/ES5/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/",

    "type": "OData",

    "settings": {

    "odataVersion": "2.0"

    }                                            }                             }



  • I did all the steps and I get “Failed to load resource: the server responded with a status of 503 ().”  When I create the project from scratch with the same settings all works fine.

    I have OData destination connected. I checked xs-app.json and ui5.yaml file, Component.js, index.html and all the rest of the files. I migrated all the code from working project to the migrated one and still the same error. 

      • manifest.json


          “_version”: “1.12.0”,
          “”: {
            “id”: “nox.nox-ncp”,
            “type”: “application”,
            “i18n”: “i18n/”,
            “applicationVersion”: {
              “version”: “1.0.0”
            “title”: “{{appTitle}}”,
            “description”: “{{appDescription}}”,
            “sourceTemplate”: {
              “id”: “servicecatalog.connectivityComponentForManifest”,
              “version”: “0.0.0”
            “dataSources”: {
              “MY_SOURCE”: {
                “uri”: “/sap/opu/odata/sap/MY_SOURCE/”,
                “type”: “OData”,
                “settings”: {
                  “localUri”: “localService/metadata.xml”,
                  “annotations”: [“annotation0”]
              “annotation0”: {
                “type”: “ODataAnnotation”,
                “uri”: “localService/annotation0.xml”,
                “settings”: {
                  “localUri”: “localService/annotation0.xml”
            “crossNavigation”: {
              “inbounds”: {}
          “sap.ui”: {
            “technology”: “UI5”,
            “icons”: {
              “icon”: “sap-icon://batch-payments”,
              “favIcon”: “”,
              “phone”: “”,
              “phone@2”: “”,
              “tablet”: “”,
              “tablet@2”: “”
            “deviceTypes”: {
              “desktop”: true,
              “tablet”: true,
              “phone”: true
          “sap.ui5”: {
            “flexEnabled”: false,
            “rootView”: {
              “viewName”: “nox.nox-ncp.view.App”,
              “type”: “XML”,
              “async”: true,
              “id”: “root”
            “dependencies”: {
              “minUI5Version”: “1.65.6”,
              “libs”: {
                “sap.m”: {},
                “sap.ui.comp”: {
                  “minVersion”: “”
                “sap.ui.core”: {},
                “sap.ui.export”: {
                  “minVersion”: “”
                “sap.ui.fl”: {
                  “minVersion”: “”
                “sap.ui.layout”: {},
                “sap.ui.unified”: {
                  “minVersion”: “”
                “sap.uxap”: {
                  “minVersion”: “”
            “contentDensities”: {
              “compact”: true,
              “cozy”: true
            “models”: {
              “i18n”: {
                “type”: “sap.ui.model.resource.ResourceModel”,
                “settings”: {
                  “bundleName”: “nox.nox-ncp.i18n.i18n”
              “@i18n”: {
                “type”: “sap.ui.model.resource.ResourceModel”,
                “uri”: “i18n/”
              “currencies”: {
                “type”: “sap.ui.model.json.JSONModel”,
                “settings”: {},
                “uri”: “model/Currencies.json”,
                “preload”: true
              “”: {
                “type”: “sap.ui.model.odata.v2.ODataModel”,
                “settings”: {
                  “defaultOperationMode”: “Server”,
                  “defaultBindingMode”: “OneWay”,
                  “defaultCountMode”: “Request”,
                  “useBatch”: false
                “dataSource”: “MY_SOURCE”,
                “preload”: true
              “settings”: {
                “type”: “sap.ui.model.json.JSONModel”,
                “settings”: {},
                “preload”: true,
                “uri”: “”
              “offices”: {
                “type”: “sap.ui.model.json.JSONModel”,
                “settings”: {},
                “preload”: true
              “clients”: {
                “type”: “sap.ui.model.json.JSONModel”,
                “settings”: {},
                “preload”: false
              “products”: {
                “type”: “sap.ui.model.json.JSONModel”,
                “settings”: {},
                “preload”: true
            “resources”: {
              “css”: [
                  “uri”: “css/style.css”
            “routing”: {
              “config”: {
                “routerClass”: “sap.m.routing.Router”,
                “viewType”: “XML”,
                “async”: true,
                “viewPath”: “nox.nox-ncp.view”,
                “controlAggregation”: “pages”,
                “controlId”: “root”,
                “transition”: “slide”,
                “viewLevel”: 1,
                “bypassed”: {
                  “target”: “targetNotFound”
              “routes”: [
                  “pattern”: “/”,
                  “name”: “routeHomePage”,
                  “target”: “targetHomePage”,
                  “titleTarget”: “”
                  “pattern”: “office/{office}/:?query:”,
                  “name”: “routeMaster”,
                  “target”: “targetMaster”,
                  “titleTarget”: “”
                  “name”: “routeProduct”,
                  “pattern”: “office/{office}/product/{product}/:?query:”,
                  “target”: “targetProduct”,
                  “titleTarget”: “”
              “targets”: {
                “targetHomePage”: {
                  “viewName”: “HomePage”,
                  “viewId”: “homePage”,
                  “transition”: “slide”,
                  “viewLevel”: 2,
                  “title”: “Strona Ustawień”
                “targetMaster”: {
                  “viewName”: “Master”,
                  “viewId”: “master”,
                  “transition”: “slide”,
                  “viewLevel”: 3,
                  “title”: “Strona Produktów”
                “targetProduct”: {
                  “viewName”: “Product”,
                  “viewId”: “product”,
                  “viewType”: “XML”,
                  “viewLevel”: 4,
                  “title”: “Strona Produktu”
                “targetNotFound”: {
                  “viewName”: “NotFound”,
                  “transition”: “show”
          “sap.platform.hcp”: {
            “uri”: “webapp”,
            “_version”: “1.1.0”


          “name”: “nox-ncp”,
          “version”: “0.0.1”,
          “description”: “”,
          “private”: true,
          “devDependencies”: {
            “@ui5/cli”: “2.2.6”,
            “@sapui5/ts-types”: “1.71.x”,
            “@sap/ui5-builder-webide-extension”: “1.0.x”,
            “@sap/approuter”: “8.5.1”,
            “@sap/html5-repo-mock”: “1.6.0”
          “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”]




        <!DOCTYPE html>
            <meta charset=”utf-8″>
              <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
            <title>NOX NCP</title>
            <script id=”sap-ui-bootstrap”
              data-sap-ui-resourceroots='{“nox.nox-ncp”: “./”}’
          <body class=”sapUiBody”>
            <div data-sap-ui-component data-name=”nox.nox-ncp” data-id=”container” data-settings='{“id” : “nox-ncp”}’></div>


        I just checked still the same problem. I would be very appreciated for any help :/
  • Hi Yuval Morad


    Great blog thanks. I this moment, i have a app SAPUI5 html5 in my BAS IDE. I am trying to consume a API REST (Internet) using Destination. I have 2 scenarios:

    but before I show you key config about my project:

        "welcomeFile": "/index.html",
        "authenticationMethod": "route",
        "logout": {
            "logoutEndpoint": "/do/logout"
        "routes": [
                "source": "^/confiar",
                "destination": "confiar",
                "target": "/$1"
                "source": "^(.*)$",
                "target": "$1",
                "service": "html5-apps-repo-rt",
                "authenticationType": "xsuaa"


      "name": "apptestweb",
      "version": "0.0.1",
      "devDependencies": {
        "@sap/ui5-builder-webide-extension": "1.0.x",
        "@ui5/cli": "2.2.6",
        "eslint": "5.16.x",
        "@sap/eslint-plugin-ui5-jsdocs": "2.0.x",
        "@sapui5/ts-types": "1.71.x",
        "bestzip": "2.1.4",
        "rimraf": "3.0.2",
        "@sap/approuter": "9.3.0",
        "@sap/html5-repo-mock": "2.0.0"
      "ui5": {
        "dependencies": [
        - npm run build
        supported-platforms: []
    - name: destination
        service-plan: lite
        service-name: AppTestWeb_destination
        service: destination
      type: org.cloudfoundry.managed-service
    - name: AppTestWeb_html_repo_runtime
      type: org.cloudfoundry.managed-service
        service: html5-apps-repo
        service-plan: app-runtime
    - name: AppTestWeb_html_repo_host
      type: org.cloudfoundry.managed-service
        service: html5-apps-repo
        service-plan: app-host
    - name: uaa_AppTestWeb
      type: org.cloudfoundry.managed-service
        path: ./xs-security.json
        service: xsuaa
        service-name: AppTestWeb-xsuaa-service
        service-plan: application
      - builder: custom
        - npm install
    specVersion: '1.0'
      name: HTML5Module
    type: application
        propertiesFileSourceEncoding: UTF-8
          - "/test/**"
          - "/localService/**"
      - name: webide-extension-task-updateManifestJson
        afterTask: generateVersionInfo
          appFolder: webapp
          destDir: dist
      - name: webide-extension-task-resources
        afterTask: webide-extension-task-updateManifestJson
          nameSpace: ns
      - name: webide-extension-task-copyFile
        afterTask: webide-extension-task-resources
          srcFile: "/xs-app.json"
          destFile: "/xs-app.json"
        "_version": "1.12.0",
        "": {
            "id": "ns.HTML5Module",
            "type": "application",
            "i18n": "i18n/",
            "applicationVersion": {
                "version": "1.0.0"
            "title": "{{appTitle}}",
            "description": "{{appDescription}}",
            "resources": "resources.json",
            "ach": "ach",
            "sourceTemplate": {
                "id": "html5moduletemplates.basicSAPUI5ApplicationProjectModule",
                "version": "1.40.12"
            "crossNavigation": {
                "inbounds": {
                    "intent1": {
                        "signature": {
                            "parameters": {},
                            "additionalParameters": "allowed"
                        "semanticObject": "Dynamic",
                        "action": "display",
                        "title": "{{appTitle}}",
                        "info": "{{appTitle}}",
                        "subTitle": "{{appSubTitle}}",
                        "icon": "sap-icon://sales-order"
        },"": {
            "service": ""
        "sap.ui": {
            "technology": "UI5",
            "icons": {
                "icon": "",
                "favIcon": "",
                "phone": "",
                "phone@2": "",
                "tablet": "",
                "tablet@2": ""
            "deviceTypes": {
                "desktop": true,
                "tablet": true,
                "phone": true
        "sap.ui5": {
            "flexEnabled": false,
            "rootView": {
                "viewName": "ns.HTML5Module.view.TestView",
                "type": "XML",
                "async": true,
                "id": "TestView"
            "dependencies": {
                "minUI5Version": "1.60.1",
                "libs": {
                    "sap.ui.core": {},
                    "sap.m": {},
                    "sap.ui.layout": {}
            "contentDensities": {
                "compact": true,
                "cozy": true
            "models": {
                "i18n": {
                    "type": "sap.ui.model.resource.ResourceModel",
                    "settings": {
                        "bundleName": "ns.HTML5Module.i18n.i18n"
            "resources": {
                "css": [
                        "uri": "css/style.css"
            "routing": {
                "config": {
                    "routerClass": "sap.m.routing.Router",
                    "viewType": "XML",
                    "async": true,
                    "viewPath": "ns.HTML5Module.view",
                    "controlAggregation": "pages",
                    "controlId": "app",
                    "clearControlAggregation": false
                "routes": [
                        "name": "RouteTestView",
                        "pattern": "RouteTestView",
                        "target": [
                "targets": {
                    "TargetTestView": {
                        "viewType": "XML",
                        "transition": "slide",
                        "clearControlAggregation": false,
                        "viewId": "TestView",
                        "viewName": "TestView"


    Destination config CF:



    destination attributes



    The escenarios are:


    1-  Run The app  from SAP BAS local IDE: When i run  my app and the app consume (request http) the endpoint destination,  I am getting the next message ERROR:  ." Make sure that the destination is set correctly and that your credentials are valid".


    2- Deploy the app in CF and run it: When i run  my app and the app consume (request http) the endpoint destination,  I am getting a 404 NOT FOUND Message


    Apreciate your help with this issue that i have.


    Thanks so much!


    • Hi Alfredo Semeco Blanco ,

      were you already able to resolve this problem in the local BAS preview? Cause I get the same error message there (but I only get the error in a trial account. In our partner account this is working), Unfortunatly due to the problem described in note 3010638 I can't check the connection in the BTP Cockpit, SCC however reports the trial account as connected).




  • Yuval Morad

    I am getting the same issue as -

    Have posted the question as well in the forums -
    Alfredo Semeco Blanco - I see you have fixed your issue in the comments section in blog -
    Could you please help with what are the changes you have made? Any pointers, please reply back to the fourm question above posted will help.