SAPUI5 Application Project Structuring

SAPUI5 Application Project Structuring
With the release of latest update of SAPUI5, project structure has been changed slightly. All the configuration that used to be maintained in the configuration file is now managed by manifest.json , moreover it takes care of routing, which previously was maintained by component.js. Similarly, there have been many more changes. An example with the latest project structure is shown.
This is a sample project structure, which almost covers every aspect.
The WebContent contains all the folders, including Component-preload.js, Component.js, index.html , and manifest.json.  Gulpfile  and node_modules are of no use here, it is mainly used to create the Component-preload.js file.
·         The First change that you notice is, now the controller files are kept separate in the controller folder, and not in the view folder itself. The controller folder include all the javascript files.
·         Then comes the CSS folder, which include customizing the sap ui5 application. Add any css files in this folder.
·         Next is the i18n folder, which is used for Globalization purpose. It includes i18n files for particular languages.
·         localService and test folder is used for mockserver, which consists of mockdata , metadata,  mockserver.js and testService.html which acts an index.html file for the mockserver.
·         model folder consists of the formatter.js file.
·         util folder consists the dialog.js file, if it is used in a particular project, and similarly the fragment files are contained in the view folder.
·         Next comes the view folder, which now purely consists only the views, both xml or maybe javascript files too. Moreover, it also includes the fragment files too.
·         Component-preload.js file is mainly used for optimization purpose, it is created using grunt operations or maybe using gulpfile.
·         Component.js file is used here for declaring the models, (odata, json, or i18n)but in the latest version of sapui5, that step is also done in the manifest.json file.
                Moreover, here the router initialization is also done.
·         Index.html file serves the same purpose here, we declare the shell  here. And all the library files are loaded in index.html. Mainly there is no change in the index file. It serves the same purpose similar to what it used to serve in previous versions.
·         Manifest.json file here is used to declare the OData, here  the version of sap.ui5, sap.ui, is done. Moreover, the routes are defined here itself, and not in the component.js file.

Go through my video from Youtube, on Project Structuring:

In the First session I have covered, views, controllers, Component.js, and Manifest.json


In the Second Session, I have covered the models, i.e JSON model


In the third Session, I have covered the Internationalization topic 

Next Post »


Click here for comments
27 April 2017 at 04:03 ×

Hello all, am trying to build my application with standard Project Structure and Am getting a blank screen. I think the Component.js is not pointing to the manifest.json because if I clear all the code on the manifest.json it does not impact on the application, I still get a blank screen. I suspect my issue is with the Component.js or a Version related issue. Please can someone help me. Please find below Index.html, Component.js and manifest.json

Sanjo Thomas
27 April 2017 at 09:44 ×


The eclipse version you are using is Eclipse Juno, which doesn't support manifest.json. Try using Eclipse Neon, which supports latest version of sapui5 toolkit. It would surely work fine.