Migrating SAP UI5 Standalone apps from Neo to Cloud Foundry

Hi All,

This blog post helps you in migrating your standalone SAP UI5 code from Neo environment(Web IDE) to Cloud Foundry environment(SAP Business Application Studio) and also deploy the application to CF.

Pre-requisites

Import the required destinations from Neo to CF environment. We can do this by:

1.  Logging on to Neo environment and choose ‘Destinations’ and select the destination you want to migrate and click the export icon.
2. Logon to CF environment and click on Destinations and choose Import Destination and choose the destination that you have saved in step 1Edit the destination to add/modify the below properties :HTML5.DynamicDestination : true

   WebIDEUsage: odata_gen (it would have been true in Neo destination)

We are good to create a project now in SAP Business Application Studio to migrate an standalone UI5 application.

Steps :

1. Login to CF account and click on Subscriptions and select ‘Go to Application’ from SAP Business Application
2. Create a dev space
3. In the development environment, click View->Find Command and type ‘create’ in the box and choose SAP Business Application Studio : Create Project from Template option.
4. Choose SAP Fiori Freestyle – Project Generator
5. Select Cloud Foundry as the target running environment and choose SAP UI5 Application template
6. Enter a project name eg : ApprovePOPrj and click Next
7. Select Standalone Approuter for the HTML5 application
8. In Basic Attributes dialog,eEnter a HTML5 module name – this name should be the same as the project name of UI5 app in web ide. Enter namespace – eg : com.abc.po.- Copy this from existing UI5 app namespace
9. In View Name dialog, leave the default view name and choose Yes in ‘Do you want to add a data service’ and click Next
10. In Consume Services dialog, choose ‘My SAP systems’ for Select a System drop down . To have the systems in the drop down, we need to import the required destinations from Neo Environment to CF environment. This is explained in the pre-requisites section above.PS: Select My SAP Systems from drop down for all destination related data sources.Please note that the property WebIDE_Usage should be odata_gen for all odata related and odata_xsjs for xsjs integrations.
11. Choose the data source and give the path. For eg: I have chosen Northwind as the data source and have given the path as /V2/Northwind/Northwind.svc/. There are scenarios where the data source will be a Blockchain service(https://hyperledger-    fabric.cfapps.us10.hana.ondemand.com/api/v1/chaincodes/com-abc-po/latest) or we might be connecting to xsjs files with queries and NOT Odata. In such cases, there are no paths to be    given. We will just have the system url as the destination url. We have a workaround here.
    Choose the data source as Northwind and give the same path as of Northwind and we can      change the destination paths in the required files after successful creation of the project.
12. A project is generated now
13. Delete the existing web app folder in Business App Studio and copy paste the web app folder from our UI5 app in Web IDE
14. Open manifest.json file and add the data source like below :
15. Open xs-app.json , you will find the routes like below (since we have chosen Northwind as data source while creating the project) :Modify the route to include our destination like :
16. In all the controllers where we call the service, append it with namespaceProjectName like for eg:
17. In index.html – give the entire url for sap ui5 resources.
18. After doing all these changes, right click on mta.yaml file and choose BuildMTA. A mta_archives folder with XXX.mtar gets generated
19. Right click the mtar file and choose “Deploy MTA file”. The app gets deployed in CF environment. Please note that we need to login to CF from the development environment. You can do this by clicking View->Find Command and typing Login in the box
20. Go to the devspace in the cockpit to check the url of the deployed application.Accessing the app router link might give some error like Not Found. Append the packagename and project name like eg :https://xxxxxxxatrial-dev-approvepoprj-approuter.cfapps.eu10.hana.ondemand.com/comabcpoApprovePO/index.htmlApp is now deployed successfully in Cloud Foundry environment and the UI code is migrated from Web IDE to SAP Business Application Studio!

Including a theme in SCP Neo Environment to the project in SAP Business Application Studio

1. Go to theme designer in SCP Neo Environment and export the existing theme https://themedesigner-<<subaccountname>>.dispatcher.hana.ondemand.com/index.html
2. You should get a zip which has the folders Base, UI5, UR
3. Go to SAP Business Application Studio and create a folder called ‘resources’ inside webapp folder of the required project and copy the downloaded theme.
4. Include the theme path in index.htmlPlease note that the best way is to migrate and deploy the theme in CF using Theme Designer service in CF. This is just to run the test app with the theme assigned to it.

Happy Migrating!