Skip to Content
Author's profile photo Wouter Lemaire

Get started with SAPUI5 and Routing

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.

/wp-content/uploads/2014/05/routing_441035.png

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

Assigned Tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      Thanks for the explanation!

      Best regards,

      Jeroen

      Author's profile photo Former Member
      Former Member

      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 🙁

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      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

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Awesome Wouter, I will give it a try and come back soon if stuck somewhere.

      Thanks for sharing.

      Warm Regards

      Hemendra

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Not yet 🙂 But there is already lots of documentation about that:

      How To Deploy an SAPUI5 App On Fiori Launchpad

      Kind regards,

      Wouter

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Check my new blog:

      Navigate between single full view and split view

      Kind regards,

      Wouter

      Author's profile photo sankara rao bhatta
      sankara rao bhatta

      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.

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      This will initialize the parent UIComponent. This is required because we are extending the UIComponent.

      Kind regards,

      Wouter

      Author's profile photo Maruthi Revankar
      Maruthi Revankar

      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?