Convert Standard Fiori Application to Hybrid Mobile App

Hi Guys,

in this post,we will look into how to convert standard fiori application to hybrid mobile application using Mobility feature of Webide.

There are so many posts already available for converting the web application to mobile application using the Mobility feature of webide.But Those all posts cover  the custom UI5 application that you build from scratch and then convert that to Mobile application.Here we will focus on Standard application only.

Difference between Folder Structure of Standard app and Custom App is as show below.

Standard App Structure                             Custom UI5 App Structure

As you can see,In Custom UI5 app created from Template,It creates the structure containing webapp folder and some files outside the webapp folder.

If you see the folder structure of Standard it involves the everything in one Folder that’s main folder.

You will not be even able to find the index.html file there.That’s the main issue if you go with Mobility Feature of Webide.

SAP Mobility of Web Ide feature only works if your folder contains the webapp folder like the Custom Fiori App.

Now if you somehow copy paste the files from Standard Application under webapp folder then try to run,It will not work as Standard code contains the path which doesnt contain webapp folder navigation as What about index.html.So here are the steps you follow and your application will work for mobility.

Step 1:-

Import your standard application code in Web ide Via Import->from SAP ABAP Repository.

Step 2:– Export the Same Project and Again Reimport with Different Folder Structure.

Reason for above step to do is if you directly copy paste the files from standard app folder to other , it does not run  if you have copy pasted your files /ApplicationFolder/webapp

Step 3 :- Move below files from /ApplicationFolder/webapp to /ApplicationFolder(Outside the webapp folder)

neo-app.json

resources.json

version.json

Step 4:-Create Index.html File Outside the Webapp folder Blank.

Step 5:- There is one extended_runnable_file.html present in your folder structure.So if you go back to your downloaded zip file for standard application,under main folder there will be one file Extended_runnable_file.html.

You just copy the code from that file and paste to index.html in webide that you just created.

Step 6:- Right Click on the index.html File and Run.If its working fine as per the expectation

then Right click on main Folder and click on Mobility–>Enable as Hybrid Mobile Project

Step 7:- Select Proper Cordova Settings by Again Right clicking followed by Build and Generate Mobile App.

Test the Application in Mobile/Tablet device After that ,It Should run As its running  in Browser.