Welcome to the ultimate SAP UI5, BTP, Fiori, CAPM, RAP, ABAP blog! Explore comprehensive tutorials, interview questions, and real-world examples to master SAP development. Elevate your skills in creating stunning UI5 apps, harnessing the power of BTP, and building Fiori applications. Unlock the potential of CAPM, RAP, and ABAP, and learn to integrate seamlessly with the enterprise portal. Whether you're a beginner or an experienced developer, this blog is your go-to resource for SAP expertise!
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 shellhere. 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,
herethe version of sap.ui5, sap.ui,
sap.app 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
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
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
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.
We need your help to support www.sapui5tutors.com. Please consider disabling your ad blocker while visiting this website so that we can continue to provide this content to you free of charge.
For details on turning off your ad blocker, or to add www.sapui5tutors.com to your whitelist, please read these
instructions
2 comments
Click here for commentsHello 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
ReplyHi,
ReplyThe 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.
ConversionConversion EmoticonEmoticon