Skip to Content
Product Information
Author's profile photo Yuval Morad

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

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.

Assigned tags

      89 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo paulo castro
      paulo castro

      Yes i tried to migrate from IDE to App Studio but some problems with npm, layout editor and destination.

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

      Author's profile photo paulo castro
      paulo castro

      Thanks for your attention....

      1,2,3,4) ok i did .... i think that instance was deleted ... response 401

      5) Has no localservice folder and not metadata.xml in my workspace.

      Regards

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      In case you use full_url, please ensure that the value of the url field in your destination is indeed an absolute url.

      This would mean that if you enter it in the browser and add /$metadata it will show the entities

      Last but not least I hope your service exposes OData

      Now try to create a new project using the wizard

      Author's profile photo paulo castro
      paulo castro

      Great ... i want to learn more about fiori in App Studio

      Author's profile photo paulo castro
      paulo castro

      I did this tutorial and works...

      https://developers.sap.com/tutorials/appstudio-fioriapps-create.html

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Hi Paulo

      This is a flow of Fiori for Cloud Foundry.

      A migration guide here will also follow.

      Nevertheless the goal here was a smooth migration for Fiori app deployed to ABAP stack

      Author's profile photo Paulo Castro
      Paulo Castro

      I´m waiting your next execise with the App Studio.... thanks...call me.

      Author's profile photo Timothy Muchena
      Timothy Muchena

      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

      Author's profile photo Christian Stein
      Christian Stein

      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

      Author's profile photo Konrad Grzyb
      Konrad Grzyb

      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. 

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

       

      Author's profile photo Timothy Muchena
      Timothy Muchena

      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

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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
      https://blogs.sap.com/2020/07/21/sap-fiori-development-with-sap-business-application-studio/

      Author's profile photo saket amraotkar
      saket amraotkar

      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.

       

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      No hidden steps that I can think of, see the my video in this introduction above
      https://www.youtube.com/watch?v=PFBoqhAJmP4&feature=youtu.be

      Can you deploy to $TMP a new app?

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Hi

       

      I get a "Not Authorized" error when I try to login

      Business%20Application%20Studio%20error

      Business Application Studio error

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

      Author's profile photo Timothy Muchena
      Timothy Muchena

      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

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      It look that all is ok.

      Check that url in account is http

      And in cloud connector https is defined with the right port.

      If this fails contact me in my mail and we can have a short chat or meeting

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Hi

      I have sent you an email.

      Thank you

      Author's profile photo Andreas Gall
      Andreas Gall

      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

      Author's profile photo Vaibhav Goel
      Vaibhav Goel

      Hi,

       

      npm run deploy

      is what we need.

      abap-deploy always uses create mode...

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

      Author's profile photo Andreas Gall
      Andreas Gall

      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"

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

      Author's profile photo Andreas Gall
      Andreas Gall

      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

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

       

      Author's profile photo Andreas Gall
      Andreas Gall

      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

      Author's profile photo Timothy Muchena
      Timothy Muchena

      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

      Author's profile photo Andreas Gall
      Andreas Gall

      Sorry for late answer. See Vaibhav Goel answer.

      Author's profile photo kivanc aktas
      kivanc aktas

      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,

      Kivanc

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

      Author's profile photo kivanc aktas
      kivanc aktas

      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.

      Author's profile photo Soham Shah
      Soham Shah

      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 : https://git.hanatrial.ondemand.com/p2002359850trial/migratetobas

       

      • 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

      Author's profile photo Rima Sirich
      Rima Sirich

      Hi Soham,

      This error message sounds familiar. I think the workaround documented in this blog might solve your issue: https://blogs.sap.com/2020/07/09/business-application-studio-git-workaround/

      Regards,

      Rima

      Author's profile photo Samuel Castro
      Samuel Castro

      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

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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?
      Author's profile photo Samuel Castro
      Samuel Castro

      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.

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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.

      Author's profile photo Samuel Castro
      Samuel Castro

      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?
      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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 
      Author's profile photo Samuel Castro
      Samuel Castro

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

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Thanks

      It is not supported in App Studio and we did not find manual workaround
      We will consider adding this functionality in the future

      Author's profile photo Samuel Castro
      Samuel Castro

      Thank you so much!!

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      @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”: [
              “--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 the first time…
      Author's profile photo Gordon Huang
      Gordon Huang

      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

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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?

      Author's profile photo Gordon Huang
      Gordon Huang

      Our project deployed to CF.  Only Fiory UI SAPUI5 apps are developed from Web IDE.

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

      Author's profile photo Gordon Huang
      Gordon Huang

      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.

      Author's profile photo Vikas Sreedharan
      Vikas Sreedharan

      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

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

      Author's profile photo Eva Gan
      Eva Gan

      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.

      Thanks.
      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

      https://blogs.sap.com/?p=1185903

       

      Author's profile photo Vikas Sreedharan
      Vikas Sreedharan

      SAPUI5 Changes not reflected in Running App after saving

      BAS

      Hi,

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

      <Carousel>
      	<pages>
      		<Image
      			src="https://upload.wikimedia.org/wikipedia/commons/2/28/HelloWorld.svg"
      			height="600px"/>
      // the above src url was changed
      	</pages>
      </Carousel>
      
      

       

      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.

      BAS

       

      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

      https://cockpit.eu10.hana.ondemand.com/trial/#/globalaccount

      Thanks,

      Vikas

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      This is a question to UI5 runtime team.

      Does it work when you deploy it to ABAP or CF? and only in local App Studio run fails?

      Author's profile photo deepika jain
      deepika jain

      Hi All

      How can  adjust the name in bold:  in xs-app.json / package.json file ?

       

      Regards

      Deepika jain

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      it should not be bold, give it any name

      Author's profile photo Vikas Sreedharan
      Vikas Sreedharan

      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?

      Thanks,

      Vikas

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Hi Vikas,

      Just drag and drop to the workspace, there is no import support.

      Author's profile photo Oh Hyuk
      Oh Hyuk

      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.

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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.

      Author's profile photo vijay yadav
      vijay yadav

      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%20error

      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.

      ui5.yaml

      ui5.yaml

       

      Kindly let us know, what may be wrong.

      Thanks

      Vijay

      Author's profile photo Oliver Russinger
      Oliver Russinger

      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,

      oliver

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

      Author's profile photo Oliver Russinger
      Oliver Russinger

      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:

      neo-app.json:

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

       

      in component.js:

      something like that:

      jQuery.sap.registerModulePath("tyed.mm.mat_classification", "/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

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

      OR

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

      Author's profile photo Oliver Russinger
      Oliver Russinger

      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.

       

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      ok no runtime migration, do you prefer to work with remote reuse lib from ABAP or local ones?

      Author's profile photo Oliver Russinger
      Oliver Russinger

      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

      example:

      jQuery.sap.registerModulePath(“tyed.mm.mat_classification”, “/sap/bc/ui5_ui5/tyed/mm_mat_class”);

      or is this all the same?

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      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

      Author's profile photo Oliver Russinger
      Oliver Russinger

      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

      jQuery.sap.registerModulePath(“tyed.mm.mat_classification”, “/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

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      I will check it next week and contact you if we have a solution in BAS

      Author's profile photo Oliver Russinger
      Oliver Russinger

      thanks a lot 🙂

      Author's profile photo aurelien albert
      aurelien albert

      Guys,

       

      Did you found out a solution for this ? I'm highly interested as well on this.

       

      Thanks

      Aurélien

      Author's profile photo Oliver Russinger
      Oliver Russinger

      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

      Author's profile photo Ertugrul Pehlivan
      Ertugrul Pehlivan

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

      Author's profile photo Ertugrul Pehlivan
      Ertugrul Pehlivan

      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?

      Author's profile photo Vikas Sreedharan
      Vikas Sreedharan

      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.

      /home/user/projects/w2u1

      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.

      https://11XXc0a4trial-workspaces-ws-h8rpn-theia.eu10.trial.applicationstudio.cloud.sap/destinations/ES5/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$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

      https://11XXc0a4trial-workspaces-ws-h8rpn-app1.eu10.trial.applicationstudio.cloud.sap/destinations/ES5/sap/opu/odata/IWBEP/GWSAMPLE_BASIC/$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"

      }                                            }                             }

      Thanks,

      Vikas

      Author's profile photo Konrad Grzyb
      Konrad Grzyb

      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. 

      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Please share the

      1. manifest.json
      2. package.json
      3. index.html
      Author's profile photo Konrad Grzyb
      Konrad Grzyb
      manifest.json

       

      ```
      {
        “_version”: “1.12.0”,
        “sap.app”: {
          “id”: “nox.nox-ncp”,
          “type”: “application”,
          “i18n”: “i18n/i18n.properties”,
          “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/i18n.properties”
            },
            “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”
        }
      }
      ```
      package.json

       

      ```
      {
        “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”]
        }
      }

       

      “`

       

      index.html
      “`
      <!DOCTYPE html>
      <html>
        <head>
          <meta charset=”utf-8″>
            <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
          <title>NOX NCP</title>
          <script id=”sap-ui-bootstrap”
            src=”./resources/sap-ui-core.js”
            data-sap-ui-theme=”sap_belize”
            data-sap-ui-resourceroots='{“nox.nox-ncp”: “./”}’
            data-sap-ui-compatVersion=”edge”
            data-sap-ui-oninit=”module:sap/ui/core/ComponentSupport”
            data-sap-ui-async=”true”
            data-sap-ui-preload=”async”
            data-sap-ui-frameOptions=”trusted”>
          </script>
        </head>
        <body class=”sapUiBody”>
          <div data-sap-ui-component data-name=”nox.nox-ncp” data-id=”container” data-settings='{“id” : “nox-ncp”}’></div>
        </body>
      </html>
      ```

       

      I just checked still the same problem. I would be very appreciated for any help :/
      Author's profile photo Yuval Morad
      Yuval Morad
      Blog Post Author

      Ok I think you found a bug!

      The local run fails in case of dash in the app id

      we will work on a fix.

      Until then I propose to create a new project w/o dash in the id

      e.g. replace nox.nox-ncp with nox.nox_ncp

       

      Author's profile photo Konrad Grzyb
      Konrad Grzyb

      Yes! That was the problem thank you very much! 🙂

      Author's profile photo Alfredo Semeco Blanco
      Alfredo Semeco Blanco

      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:

      xs-app.json
      {
          "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"
              }
          ]
      }

      package.json

      {
        "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": [
            "@sap/ui5-builder-webide-extension"
          ]
        }
      }
      mta.yaml
          commands:
          - npm run build
          supported-platforms: []
      resources:
      - name: destination
        parameters:
          service-plan: lite
          service-name: AppTestWeb_destination
          service: destination
        type: org.cloudfoundry.managed-service
      - name: AppTestWeb_html_repo_runtime
        type: org.cloudfoundry.managed-service
        parameters:
          service: html5-apps-repo
          service-plan: app-runtime
      - name: AppTestWeb_html_repo_host
        type: org.cloudfoundry.managed-service
        parameters:
          service: html5-apps-repo
          service-plan: app-host
      - name: uaa_AppTestWeb
        type: org.cloudfoundry.managed-service
        parameters:
          path: ./xs-security.json
          service: xsuaa
          service-name: AppTestWeb-xsuaa-service
          service-plan: application
      build-parameters:
        before-all:
        - builder: custom
          commands:
          - npm install
      ui5.yaml
      specVersion: '1.0'
      metadata:
        name: HTML5Module
      type: application
      resources:
        configuration:
          propertiesFileSourceEncoding: UTF-8
      builder:
        resources:
          excludes:
            - "/test/**"
            - "/localService/**"
        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
        - name: webide-extension-task-copyFile
          afterTask: webide-extension-task-resources
          configuration:
            srcFile: "/xs-app.json"
            destFile: "/xs-app.json"
      manifest.json
      {
          "_version": "1.12.0",
          "sap.app": {
              "id": "ns.HTML5Module",
              "type": "application",
              "i18n": "i18n/i18n.properties",
              "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"
                      }
                  }
              }
          },"sap.cloud": {
              "service": "com.sap.jalf.app"
          },
          "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": [
                              "TargetTestView"
                          ]
                      }
                  ],
                  "targets": {
                      "TargetTestView": {
                          "viewType": "XML",
                          "transition": "slide",
                          "clearControlAggregation": false,
                          "viewId": "TestView",
                          "viewName": "TestView"
                      }
                  }
              }
          }
      }

       

      Destination config CF:

       

      destination%20attributes

      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!

       

      Author's profile photo Wolfgang Röckelein
      Wolfgang Röckelein

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

      Thanks,

      Wolfgang

       

      Author's profile photo N K
      N K

      Yuval Morad

      I am getting the same issue as -

      Have posted the question as well in the forums - https://answers.sap.com/questions/13323065/sap-business-application-studio-multiple-rest-api.html?childToView=13323777#answer-13323777
      Alfredo Semeco Blanco - I see you have fixed your issue in the comments section in blog - https://blogs.sap.com/2018/10/08/using-the-destination-service-in-the-cloud-foundry-environment/
      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.
      Author's profile photo Ray Yang
      Ray Yang

      Hi,

      I see some source code is not completed. Can you please share some sample project?

      BR,

      Ray