BLOGS

Comment on Migrate SAP Fiori projects from SAP Web IDE to SAP Business Application Studio by Frank Li

Jan 7, 2022

Since the  release of SAP Fiori tools , we have invested heavily in  the  SAP Fiori Application Generator to create new SAP Fiori applications. The feedback and participation from  the  SAP community has been nothing short of amazing, which has enabled the SAP Fiori Application Generator to grow ,  as shared by  my  co-product owner Ian Quigley  here . But what about  your  existing projects  that   you  created in SAP  Web  IDE  and you wish to migrate to SAP Business Application Studio?   

In this blog, I will be explaining the steps you can take to migrate your projects and make use of  the  tools and wizards offered by SAP Fiori tools for the entire development lifecycle of your SAP Fiori application  (See the  feature matrix  of SAP Fiori tools) . My focus  i n this blog will be the SAP Fiori tools  M igration tool and not topics like destination configuration,  authorization,  etc.  

SAP Fiori tools comes with Migration tool  

SAP Fiori tools comes with a Migration tool which will help you move your SAP Fiori projects from other development environments, such as SAP Web IDE, to either run on SAP Business Application Studio or Visual Studio Code (VS Code).  

To get you started on migration path, it is very important that if you are new to SAP Fiori tools or SAP Business Application Studio, I would highly recommend you to spend some time on familiarizing yourself with the tools. Here are some great resources to get you started (not limited to):  

  • Create a List Report Object Page App with SAP Fiori Tools  
  • openSAP: Developing and Extending SAP Fiori Elements Apps  
  • Create an Incident Management App with SAP Fiori Elements for OData V4  
  • Simplify Development of SAP Fiori Apps with OData V4  
  • Extend SAP S/4HANA with a Custom UI on SAP Business Technology Platform  
  • Create Analytical SAP Fiori Apps Quickly and Efficiently  

Differences from Web IDE projects  

Before you migrate your existing projects, let me highlight the main project structure difference in comparison to what you were used to when using SAP Web IDE. Now, projects created/migrated with SAP Fiori tools will be structured as a NodeJS project, which means it has a node_modules folder, a package.json and associated yaml config files.  

Package.json 

– Scripts to build, test, preview, deploy, undeploy, etc.  

– Dependencies:

  • @sap/ux-specification: SAPUI5 version-specific module for Fiori elements application configuration
  • @sap/ux-ui5-tooling: Preview and command line interface tools
  • @sap/ux-ui5-fe-mockserver-middleware: OData Mock Server 

  ui5-*.yaml 

– Preview configuration for UI5 version and theme  

– Configuration for destination. E.g., deployment configurations  

Migration tool simplifies the process  

As mentioned earlier, SAP Fiori tools come with a migration tool which will help you in migrating your SAP Fiori apps. Over the past few months, based on our interaction with customers, we have covered multiple new scenarios to enable a smooth migration experience. Currently, you can use SAP Fiori tools migration tool for migrating applications which are:  

  • SAP Fiori elements V2  V4  
  • SAPUI5 Freestyle  
  • SAPUI5 Adaptation projects for use in  SAPUI5 Visual Editor tool  (not part of SAP Fiori tools) in SAP Business Application Studio   

Set up your development environment  

First, let’s ensure you have the right development environment set up including SAP Fiori tools installation. Depending on whether you are using SAP Business Application Studio or VS Code, here are some of the helpful links:  

  • SAP Business Application Studio : Follow the  Getting Started  steps to launch SAP Business Application Studio and create a dev space of type  SAP Fiori . Dev space of type “SAP Fiori” already comes with SAP Fiori tools (along with other relevant extensions) installed.  
  • VS Code : For VS Code, you would need to do some prep work like installing VS Code, NodeJS, mta tools, SAP Fiori tools extension pack, etc. It’s typically a one-time set up and you can find the steps  here .    

Import your existing project (and add version control)  

Next, before you import your project to be migrated into your workspace, I would recommend that your project is under a version control system. Why? Because some of your project’s files will be changed so that they are compatible with SAP Fiori tools. You can easily do a diff and review the changes before finalizing the migrated project.   

SAP Business Application Studio already allows you to connect to private or public repositories (See details  here ).  

SAP%20Business%20Application%20Studio%20-%20Clone%20Git%20project

SAP Business Application Studio – Clone Git project

Alternatively, you can simply drag and drop your project from your local file system to the workspace.  

The Migration Prompt gets things started  

Once you have cloned your project into the workspace, you will see a prompt from SAP Fiori tools which is notifying that you have projects in your workspace which have been identified for migration.  

SAP%20Fiori%20tools%20Migration%20Prompt

SAP Fiori tools Migration Prompt

Start Migration : Clicking on this button will take you to the Migration View from where you can migrate one or more projects at once.  

Don’t ask again : Clicking on this button will stop the migration prompt from appearing again whenever you import a project into your workspace. You can disable/enable migration prompts from the extension settings as shown below.

SAP%20Fiori%20tools%20-%20Extension%20settings%20for%20Migration%20Prompt

SAP Fiori tools – Extension settings for Migration Prompt

Migration View lets you migrate multiple projects  

In case you do not start migration right away when prompted, you can always use the command  “Fiori: Migrate Projects for use in Fiori tools”  which will open the same migration view from where you can migrate your projects.  

Let’s talk about the Migration View now. The migration view has been designed to accommodate migrating multiple projects at once with some input from the user for each project, if needed.   

SAP%20Fiori%20tools%20-%20Migration%20View

SAP Fiori tools – Migration View

In my example above, I ha ve  one project in my workspace  that can be  migrated,   and  it s  listed  in the migration view As a user ,  I can fill in the columns and then  click on  “Start Migration ”.   When I select a project from the list by clicking on  the  checkbox, this project will be migrated when the Start Migration button is clicked. Note: The Start Migration button will be disabled until at least one project has been selected  

In Migration view, columns represent the following:  

Column Name    Description   Module Name   Module name comes from the manifest.json id or pom.xml   Project Path   The file path to the location of the project   SAP System   A dropdown detailing the SAP system that should be used in migration. The dropdown lists all the saved systems in VS Code or all the destinations available in SAP Business Application Studio. Selecting an SAP System from the dropdown sets the hostname and client automatically   Destination   A free-text field that by default contains the system name from the project being migrated. It should default to the destination from the source project neo-app.json. Destination is only used by Fiori tools in SAP Business Application Studio and not in VS Code. To allow a project to be compatible with SAP Business Application Studio and VS Code please provide a Destination and Hostname that is accessible to both. It is recommended to use a destination for the Frontend Server which has SAPUI5 libraries installed rather than connecting to the backend OData server directly.   Hostname   An input box detailing the backend hostname to be used in migration. Should be a valid URL or blank. This hostname is only used by SAP Fiori tools in VS Code.   SAP Client   An optional numeric field detailing the SAP client to be used in migration. Should be provided in case the client is not the system default.   UI5 Version   An optional field detailing the UI5 Version to be used in migration. Defaults to the version from neo-app.json if defined. Otherwise, “Latest”.  

Once you click on the “Start Migration” button, the selected projects will be migrated by the SAP Fiori tools migration tool.   

SAP%20Fiori%20tools%20-%20Migration%20Results%20View%20and%20Application%20Information%20Page

SAP Fiori tools – Migration Results View and Application Information Page

After the project or projects are migrated, you can expect the following:  

  • Migration Results view will show you the result of the migration process.   
  • Application Information ” will be open automatically if only one project is migrated. If multiple, you can click on the “View Info” under Actions column to open Application Information page of respective project.  
  • A new terminal tab for each migrating project outputting logs for the npm install process.   

Last, but not least, after migrating your project(s), please make sure that your application runs locally, and you are able to use the SAP Fiori tools options. The easiest way is to launch the “Application Information” page of each project and run some options like Preview Application, Open Page Map, Open Guided Development, etc.  

So, let us wrap up some pre-requisites for a successful migration process:  

  • Make sure you have an active  subscription  to SAP Business Application Studio.  
  • We recommend you get some hands-on practice with SAP Fiori tools and SAP Business Application Studio.   
  • Verify that the destination in your SAP BTP subaccount is  configured  correctly. Any issue with destination will prevent you from previewing applications with live backend data.  
  • Set up a version control system for the project you will migrate.  

A note on re-usable libraries in migrated projects  

Please note that migration of SAPUI5 re-usable libraries is not required for use in a migrated SAP Fiori application using Fiori tools. But loading re-use libraries has changed. Routing is no longer performed by the neo-app.json file. So, when you want to preview your application, you have 2 options here based on your use case:  

  1. Reuse library will be loaded automatically from the Frontend server based on the “Destination” you had chosen in the migration view during migration. Migrated project’s webapp/utils/locate-reuse-lib.js attempts to load the reuse library from the Frontend server.  
  2. Reuse library can be loaded from workspace too. After migration, you can clone a Reuse library in your workspace and follow these  instructions  for using a wizard to configure new routing. Routing is configured in ui5*yaml file(s) as described here  https://www.npmjs.com/package/@sap/ux-ui5-tooling#3-serve-static .

What’s Next?  

  • Your feedback is important. Please reach out to us if you have any issues during the migration process.  
  • You can create incidents with SAP Fiori tools using component “CA-UX-IDE”  
  • Feel free to contact myself Sushant Priyadarshi,Ian Quigley or Austin Devine (send us an email)
  • If you haven’t already signed up,  I would  also like to invite you to participate in the  SAP Fiori elements and SAP Fiori tools Roundtable , where you can share your experiences with the development team and other SAP Fiori development experts.  
  • And stay tuned! We have lined up some nice blogs on topics around Deployment, Destination validations, etc.  

For the SAP UX Engineering team,  

Sushant Priyadarshi  

Related Posts