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

Migrating SAP Fiori Applications from Neo to Cloud Foundry Using SAP Business Application Studio

Overview

SAP Business Application Studio enables you to develop SAP Fiori applications for various scenarios, and deploy to different target runtimes.

One of the most prominent scenarios is to develop an SAP Fiori application and deploy to the cloud environment.

In the following blog post I will guide you on migrating your application, which was developed using SAP Web IDE Full-Stack and deployed to the Neo environment, to an application using SAP Business Application Studio, which is deployed to Cloud Foundry.

If your application is deployed to the ABAP runtime please follow this blog post.

Environment Setup

  1. Create a subaccount in your global account or use an existing account and skip to Step 3.
    Create%20a%20subaccount
    Note
    : You have to enable Cloud Foundry since the SAP Fiori application runtime is on the Cloud Foundry environment.Enable%20CF
  2. For a trial account, make sure that your subaccount has an SAP Business Application Studio entitlement. If the entitlement is missing, add it from Entitlements menu.
    In addition, add entitlement to Portal or Launchpad.
    .
    Entitlement%20App%20Studio
  3. Navigate to the Subscriptions menu and search for SAP Business Application Studio.
    Click  the tile and click Subscribe.Subscribe%20App%20Studio
  4. If you plan to use the managed approuter, please subscribe to Launchpad or to Portal.
  5. In a non-trial account (skip this step for trial account) 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 the Subscriptions menu and locate the SAP Business Application Studio tile.
    2. Click Go to Application.

The SAP Business Application Studio Landing Page or Dev Spaces Manager 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.
      NOTE: Sensitive data like credentials or client secret are not imported.
    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. If your proxy type is “on-premise” make sure that your subaccount is connected to your on-premise destination with a cloud connector.

 

 

 

Migrating Your Project

During migration, you will perform the following:

  1. Import your existing project to a temporary folder.
  2. Create a shell MTA project.
  3. Add an HTML5 module.
  4. Replace the generated webapp folder with the one from the temporary folder.
  5. Adjust 3 files in the migrated project.

Then you can build deploy, and run the migrated application on Cloud Foundry.

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

Alternatively, import your project as follows:

  1. Export your project (for example,. migrationNeo project) from SAP Web IDE Full-Stack to your PC.
  2. Unzip the project on your PC.
  3. From SAP Business Application Studio, click File > Open Workspace and create a workspace in the projects folder.
  4. Drag and drop the migrationNeo project to the SAP Business Application Studio.

Create an MTA Project

  1. To create an MTA project, you can use the terminal using “yo” command or open the application wizard from welcome page, “Start from Template”.
  2. From the Template Wizard, select Basic Multitarget Application  and click Start.

 

 

 

3. Enter the name of your root project (for example, MTA) and click Finish. The project is
generated with an “mta.yaml” file.


 

 

Add an HTML5 Module

  1. Right-click the “mta.yaml” file and click Create MTA Module from Template.
    Note:
    The deprecated template can be accessed from F1->Find Command Wizard template

  2. From the Template Wizard, choose the “SAP Fiori Freestyle Module” and click Start.

  3. Enter the name of the module- use the same name as your original project from SAP Web IDE Full Stack (for example,   migrationNeo).
  4. Choose the SAPUI5 Application template tile and click Next.
  5. Choose an approuter configuration. Use the Managed Approuter if you have subscribed to Portal or Launchpad, and give a business name to your application (for example myservice), which will be reflected in the runtime URL.
  6. For the next 2 steps, use the default values.
  7. An HTML5 module named migrationNeo is added to your MTA project.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Adjust Your HTML5 Module

  1. Replace the existing webapp folder with the original webapp folder of the project, copied from SAP Web IDE Full-Stack.
  2. Open the “index.html” file or any HTML file used for running the application.
    Update the bootstrap for SAPUI5 to an absolute URL src=”https://sapui5.hana.ondemand.com/resources/sap-ui-core.js”
  3. Open the manifest.json file.
    1. Add the sap.cloud service on the root level.
          “sap.cloud”: {
              “service”: “myservice”

          },

    2. Update the datasource URL from absolute to relative,
      specifically remove any leading “/”.
      If you access the datasource in JavaScript coding, remove the leading “/”.
      For example “uri”: “/sap/opu/odata/iwfnd/RMTSAMPLEFLIGHT/”
      should be changed to “uri”: “sap/opu/odata/iwfnd/RMTSAMPLEFLIGHT/”,
    3. To integrate your application to launchpad ensure that the manifest.json includes and intent. Add under sap.app section the crossNavigation section.
    4. Open the “xs-app.json” file and ensure that you have a route to your destination.
      The route originally resided in the “neo-app.json” file.

          {
            “authenticationType”: “none”,
            “csrfProtection”: false,
            “source”: “^/sap/opu/odata/”,
            “destination”: “<your destination name>”
          },

Build, Deploy, and Run your SAP Fiori Application

  1. Right-click the “mta.yaml” file and choose Build MTA. 
    A transportable MTA_0.0.1.mtar file is created under the mta archive folder.

 

 

 

 

 

 

 

 

 

 

 

2. Connect to your target Cloud Foundry space with the following steps:

    1. From the toolbar choose View->Find Command.
    2. In the dialog enter CF login.
    3. Enter your credentials.
    4. Choose an organization and space.

3. Right click the “MTA_0.0.1.mtar” file and deploy your MTA project to Cloud Foundry.

4. After the deploy is complete, go to your cockpit and click  HTML5 Applications from the
menu. Run your application clicking the application name.

Conclusions

You have accomplished the following tasks:

  1. Setup an SAP Business Application Studio development environment.
  2. Migrated an SAP Fiori application consuming from the Neo environment to the Cloud Foundry environment using SAP Business Application Studio.
  3. Run your deployed application on Cloud Foundry.

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

Assigned tags

      15 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Deviprasad Sahoo
      Deviprasad Sahoo

      Hi Yuval,

      Really its nice blog and very helpful.

      Could you please let us know, following this approach can we migrate extension apps from WebIDE --> BAS and deploying in Cloud Foundry.

      We are facing error while doing so.

      Could you please help us if there is any other approach to follow.

       

      Regards,

      Deviprasad

       

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

      Hi

      Extension apps are not supported in BAS.

      The functionality is covered using adaptation projects

      Author's profile photo Alejandro Sensejl
      Alejandro Sensejl

      Hi Yuval Morad,

      we have about 450 apps we want to move from WebIDE to BAS.
      The manual guide in the blog seems not suitable for that many apps.
      Is there some automatic approach for this?

      Also we do not want to force devs to use BAS.
      Do I understand correctly that apps are not compatible with WebIDE anymore once they were moved to BAS (and source git repo also updated with BAS version)?

      Cheers,
      Alej

       

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

      I am not aware of automated migration tool from Neo to CF.

      Please try to migrate ONE app and check if it is compatible for you, as there are changes in the manifest datasource to relative url.

       

      Author's profile photo toptech tunisie
      toptech tunisie

      Hi excellent blog thank you!

      How to integrate 3rd party services as HUBSPOT  using Open Connectors and Business Application Studio? it's easy to do it using sap web ide but  I want to integrate my app to Cloud Foundry Using SAP Business Application Studio and thank you

      Author's profile photo Mahammad Ali
      Mahammad Ali

      Hi Yuval Morad,

      I have migrated from Neo to CF but I'm getting a 404 not found error and I have checked in cloud connector no logs are available, My request is not even reaching the cloud connector.i have on premise system, please find the screenshot

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

      Can you check if the destination works in service center panel?

      Author's profile photo Mahammad Ali
      Mahammad Ali

      Hi,

      Thanks for the quick reply, yes the destination is reachable.

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

      I meant in BAS service center left panel

      Author's profile photo Mahammad Ali
      Mahammad Ali

      oh sorry,

      please find the below screen shot.

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

      Please share the destination configuration

      Author's profile photo Mahammad Ali
      Mahammad Ali

      please find the screenshot config%20details

      config details

      I have tried with Basic Authentication as well.

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

      please keep only host url in the destination see if it works.

       

      Author's profile photo Mahammad Ali
      Mahammad Ali

      Hi Yuval Morad,

      tried but no luck 🙁

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

      please set a short teams call 10:30 CET