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.
   
   Note: You have to enable Cloud Foundry since the SAP Fiori application runtime is on the Cloud Foundry environment.
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.
   .
   
3. Navigate to the Subscriptions menu and search for SAP Business Application Studio.
   Click  the tile and click Subscribe.
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.

5. Launch SAP Business Application Studio:

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