Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Migrating Fiori Apps from WebIDE to VS Code for Development

christianjsosa
Participant
‎04-29-2022 7:39 AM
Since WebIDE will no longer be supported by SAP in the future[1], current Fiori Apps need to be migrated to the newer generation development environments like Visual Studio Code (VS Code onwards) or the Business Application Studio.

** March 2023 Update **************************

Just recently the WebIDE started displaying a friendly reminder to start the migration:


WebIDE friendly reminder to start migration


It also provides resources about the migration to SAP Business Application Studio:

** End of the March 2023 Update **************************

Requirement


The source code for a Fiori Extension project (My Timesheet V3 [2]) needs to be migrated from its current development environment (WebIDE) to VS Code. The App must be runnable and a versioning control system must be used to track all changes from the very beginning of the migration.

Solution


As a starting point, the following items are needed to carry out the migration:

  • The working Fiori Application is available as a *.zip file exported from WebIDE.

  • VS Code is installed with "SAP Fiori Tools - Extension Pack".

  • The target SAP System is configured in VS Code.


Get the project to VS Code


Extract the exported *.zip file to the desired projects directory for VS Code "C:\PathToVSCodeProjects\zcj_from_webide". We then open VS Code and start a new Terminal:


Initial screen on VS Code with a new terminal


Navigate to the created directory with the extracted *.zip files:
$ cd "C:\PathToVSCodeProjects\zcj_from_webide"

Open a new workspace from the command line:
$ code .

The newly created workspace should now open in a new VS Code window and look like follows:


File structure of the newly created workspace



Commit an initial version of the code


Versioning control with git is fully integrated in VS Code:


Initialize a new git repository



Migrate the Project to VS Code


VS Code requires certain configurations to be carried out before the App can be launched like in the WebIDE. Fortunately, the installed SAP Fiori Tools provide a wizard to perform this migration automatically. We start it by pressing Ctrl + Shift + P -> Migrate Project for use in Fiori tools.


Launching the migration wizard


The migration wizard should automatically locate the app, provided that the correct directory was opened. We only need to set the correct (and previously configured) ABAP System and press 'Start Migration'


Migration wizard launched


After the project is successfully migrated, npm install is started automatically and the result should look like this:


Migration in process



Run the App


By now, the "Debug and Run" panel of VS Code should show some available configurations. We now run the first option and wait for a new browser tab to open (you might have to explicitly allow this):


Run configurations were generated



Special case for Fiori Extensions


For Freestyle Apps this step is not needed, since the Application should already run normally. You can now skip to Step n if that's the case.

In case of Fiori Extensions, it is very likely, that the App will show some error like this:


Application is now runnable, but still has errors


The browser's developer tools (F12) show that in our case, the common SAP library 'hcm/fab/lib/common/library.js' could not be loaded:


Error description from browser development tools


This is because the WebIDE uses the file neo-app.json to configure additional resources to be made available to the Fiori Extension. We solve this by setting the appropriate parameters within the ui5.yaml configurations:


Missing dependencies added to ui5.yaml



          - path: /resources/hcm/fab/lib/common

            pathPrefix: /sap/bc/ui5_ui5/sap/HCMFAB_COMMON

            url: https://your.own.domain/

            destination: YOUR_OWN_DESTINATION

We now relaunch our App and it should now work normally:


App works normally after loading missing dependencies



Cleanup


Remove WebIDE specific folders and commit changes:


WebIDE specific files and folders are deleted



Wrap-up


If everything went well, our versioning history should roughly match our previous steps:


Version history after migration



Benefits of using VS Code



  • Automatic reload of the App after changing any file.

  • Testing framework WDIO/WDI5 is fully integrated in VS Code. [3]

  • Apps can be tested on local mobile devices with little effort. See parameter '--accept-remote-connections' on UI5 Tooling.


Downsides of using VS Code



  • No Annotations manager as of now (April 2022) [4]

  • No Wizard to develop Extensions, as available on the WebIDE (although there is one similar solution for the BAS, which does not quite work in VS Code yet) [5]


References


[1] SAP WebIDE Trial Update: https://blogs.sap.com/latest/sap-web-ide-trial-update/#:~:text=On%20November%2013%2C%202020%20the,St...

[2] My Timesheet (Version 3/Fiori 2.0): https://fioriappslibrary.hana.ondemand.com/sap/fix/externalViewer/#/detail/Apps('F3074')/W24

[3] Use WDIO and WDI5 for testing UI5 apps: https://blogs.sap.com/latest/use-wdio-and-wdi5-for-testing-ui5-apps/

[4] Next-generation Annotation Modeler: https://blogs.sap.com/latest/provide-your-input-on-the-next-generation-annotation-modeler/

[5] Adaption project generator for BAS: https://blogs.sap.com/latest/adaptation-project-your-one-stop-tool-for-extending-sapui5-applications...
Labels in this area
Popular Blog Posts