Skip to Content
Product Information

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 SAP Fiori application and deploy the cloud environment

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

In case your application is deployed to ABAP runtime please follow this guide.

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 have to enable Cloud Foundry since the SAP Fiori application runtime is on the Cloud Foundry 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.
    In addition add entitlement to Portal/Launchpad.
    .
    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. In case you plan to use managed approuter please subscribe to Launchpad or to Portal.
  5. In non trial account assign yourself to a developer role, otherwise skip this step:
    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 Landing page or 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 to a temporary folder, create a shell MTA project add HTML5 module, replace the generated webapp folder with the one from temporary folder, and adjust three files in the migrated project.

Then you can build and 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-prem setup.

Alternatively, import your project as follows:

  1. Export your project (e.g. “migrationNeo” project) from SAP Web IDE Full-Stack to your PC.
  2. Unzip the project on your PC.
  3. In 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 MTA project

  1. Click on the top toolbar File > New Project from Template.

  2. In the opened editor choose “Basic Multitarget Application” tile and press Start.

 

 

3. Fill the name of your root project e.g. MTA and press Finish. The project is generated with
mta.yaml file.


 

 

Add HTML5 Module

  1. Right click on the mta.yaml file and choose
  2. In the opened editor choose “SAP Fiori Freestyle Module” and press Start.
  3. Fill the name of the module, it should be the same name as your original project from SAP Web IDE Full Stack e.g. “migrationNeo”.
  4. Choose “SAPUI5 Application” template tile and press Next.
  5. Choose approuter configuration. Use “Managed Approuter” if you have subscribed to Portal/Launchpad, and give a business name to your application e.g. “myservice” which will be reflected in the runtime url.Using “Standalone Approuter” will require application runtime for each project and is not the proposed solution in this guide.
  6. The next 2 steps can be kept with default values, then 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 index.html file or any html 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
    1. Add the sap.cloud service on the root level.
          “sap.cloud”: {
              “service”: “myservice”

          },

    2. Update datasource url from absolute to relative, namely remove any leading “/”.
      In case you access the datasource in javascript coding remove the leading “/”.For example “uri”: “/sap/opu/odata/iwfnd/RMTSAMPLEFLIGHT/”

      changed to    “uri”: “sap/opu/odata/iwfnd/RMTSAMPLEFLIGHT/”,

    3. Open xs-app.json and ensure you have a route to your destination.
      The route originally resided in 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 on mta.yaml file and choose “Build MTA” as a result a transportable MTA_0.0.1.mtar file is created under mta archive folder.

 

 

 

 

 

 

 

 

 

 

 

2. Connect to your target Cloud Foundry space, this is done once:

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

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

4. After the deploy is completed go to your cockpit and choose “HTML5 Applications” menu
and run your application.

Conclusions

You have accomplished the following tasks:

  1. Setup SAP Business Application Studio development environment.
  2. Migrate an SAP Fiori application consuming from Neo environment using SAP Web IDE Full-Stack to Cloud Foundry environment using SAP Business Application Studio.
  3. Run your deployed application on Cloud Foundry.

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

Be the first to leave a comment
You must be Logged on to comment or reply to a post.