Hi,
In this tutorial you will see how to start with SAPUI5 (OpenUI5) . It’s actually a tutorial to create a Fiori-lik UI application like in the blog : Building SAP Fiori-like UIs with SAPUI5 in 10 Exercises . But with that difference, that we use the Router component.
A video says more than words:
You can find the full project on github:
https://github.com/lemaiwo/OpenUI5-and-routing
This project also includes the other two tutorials:
Dynamic Routing in UI5: SAPUI5 with Advanced Routing
Reusable menu: SAPUI5 Application with Reusable Menu
For the other two tutorials, you need to start with this one.
Thanks to Jérémy Coppey for the audio and his help with the editing of the movie.
Feedback is more than welcome!
Kind regards,
Wouter
Hi Wouter,
Nice blog series. I have just seen the first video. I’m wondering why you use HTML views (instead of XML views) in this tutorial?
Best regards,
Jeroen
Thanks Jeroen!
I prefer html views because it feels more natural to use for the view. Other JavaScript frameworks also use html for the view. It also enables you to use basic html between the SAPUI5 html, but this does not always renders well… I also think that the rendering of html views is faster, but I’m not sure about that.
Kind regards,
Wouter
Thanks for the explanation!
Best regards,
Jeroen
just a question, why do you comment out everything on App.Controller.js
is it possible to write the code so that it exists there and not in Component.js? im just so confused by this new concept 🙁
The App.View.js only contains the navigation container without any events.It’s the parent container for all the other views that are defined in the router.
You need the Component.js because it’s integrated in the sap.m.shell component. The shell has the option to add “app” where you can define your own version of the UIComponent.
new sap.m.Shell(“Shell”,{
title:“Tutorial1”,
app: new sap.ui.core.ComponentContainer({
name : ‘com.tutorial’
})
}).
In the Component.js, you define your router and initialize your parent container, which is the App.view.js. So the UIComponent contains the link between the shell and the views.
Here you can find some more information about the best practices in SAPUI5: OpenUI5 SDK – Demo Kit
This is recently released and basicly the same concept as in the tutorial.
Kind regards,
Wouter
Awesome Wouter, I will give it a try and come back soon if stuck somewhere.
Thanks for sharing.
Warm Regards
Hemendra
Hi Wouter,
Have you also written any blog on integration such FIORI app on a Fiori Launchpad as well? This would be very helpful for many including me. Also can you explain how to run a FIORI application in a sandbox system on a local machine?
—
Regards,
Vinay
Not yet 🙂 But there is already lots of documentation about that:
How To Deploy an SAPUI5 App On Fiori Launchpad
Kind regards,
Wouter
Hi,
Thanks for the great tutorial! I need some help creating a split app view that initially shows full screen (home) and then when an item is selected it changes to a split screen (master/detail). When you go back to the home screen it will be full screen again.
Can you please assist me with this?
Thank you!
Regards
Jhani
Check my new blog:
Navigate between single full view and split view
Kind regards,
Wouter
Hi,
can you explain why we need to write the below statement in compoenet.js
sap.ui.core.UIComponent.prototype.init.apply(this);
thanks,
sankar.
This will initialize the parent UIComponent. This is required because we are extending the UIComponent.
Kind regards,
Wouter
When I run the Application in localhost, I get the following errors
1) GET http://localhost:52919/SAPUI5Tutorial1/Component-preload.js 404 (Not Found)
2) Uncaught TypeError: Cannot read property ‘apply’ of undefined
Is there any other configuration that I need to do?