Technical Articles
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.
in step 5 i didn't found main folder. Please let me know another way to do that
There is no code generated in resources.json in the manifest section
I am getting the following error to build the standard fiori app to custom fiori app