Skip to Content
Technical Articles
Author's profile photo Vishnupriya Varadharajan

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. Destinations%20in%20Neo
  2. Logon to CF environment and click on Destinations and choose Import Destination and choose the destination that you have saved in step 1CF%20destinationEdit 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!

 

Assigned Tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo József Huszkó
      József Huszkó

      Thank you for this awesome blog post.

      We had a problem for a few days now, and we solved it with your post (we didn't include the namespace when calling the destination).

      Thanks again, and have a great day!

      Author's profile photo Vasu Gorli
      Vasu Gorli

      Hi,

      Thank you for sharing this awesome info.

      Can we import the ‘Onpremise’ destinations in a same way.

      Regards,

      Vasu

      Author's profile photo Vishnupriya Varadharajan
      Vishnupriya Varadharajan
      Blog Post Author

      Hi,

      Steps for importing the destination to CF would remain the same but you need to connect your CF space and your Cloud Connector to make the connection successful.

       

      Regards

      Vishnupriya

      Author's profile photo Fabio Brandao
      Fabio Brandao

      Hi, is it possible to deploy an app from a CF subcount using bas to a different neo subaccount ?

      Thanks.

       

      Author's profile photo Jesus Bohorquez
      Jesus Bohorquez

      Hi Vishnupriya.

      I've followed these steps but when I run the app I get HTTP error 503 (Service Unavailable). Maybe I missed somtehing?

      This is the Destination:


      This is the manifest.json:


      This is the xs-app.json


      This is the controller where we call the service


      Regards,

      Jesus

      Author's profile photo Vishnupriya Varadharajan
      Vishnupriya Varadharajan
      Blog Post Author

      Hi Jesus,

      Is this an on-premise backend system you are trying to connect to??

       

      Thanks

      Vishnupriya

      Author's profile photo Jesus Bohorquez
      Jesus Bohorquez

      Hi Vishnupriya.

       

      This is a CPI iFlow in a separate SCP tenant.

       

      Regards

      Author's profile photo Paulo Castro
      Paulo Castro

      @vishnupriya , I tried to connect with the Northwind odata but i received a 404 error….is possible to help me?

       

       

      Author's profile photo Vishnupriya Varadharajan
      Vishnupriya Varadharajan
      Blog Post Author

      Hi Paulo,

      Can you just have https://services.odata.org/  in the URL field in the destination configuration. I see the full URL there in the snapshot.

       

      Regards

      Vishnupriya

      Author's profile photo Naveen Jain
      Naveen Jain

      Dear Vishnupriya,

      Thanks for this blog

      Regards

      Naveen Jain

      Author's profile photo Kangana Dash
      Kangana Dash

      Hi @Vishnupriya Varadharajan

       

      This (SAP Fiori Freestyle – Project Generator) seems to be Deprecated . Can you please help us how to achieve the same

      Author's profile photo Mahammad Ali
      Mahammad Ali

      screen%20shotHello,

      I have deployed the application to CF and able to access the application UI, but it is unable to fetch the odata service from backend sys. ,

      I have not used the mta.yml file but manifest.yml, my destination is on-premise system.

      For ref I have uploaded the screenshot.

      Status Code:404 Not Found
      Author's profile photo Andrey Tkachuk
      Andrey Tkachuk

      Hi All

      How should I migrate the ui5 application from the on-premises launchpad (where it is launched from the configuration.js file) to the Work Zone and deploy it in the Cloud Foundry?

      Creating a standard index.html does not help.

      I mean the standard application from ERP - Leave Request (HCM_LRQ_CRE).