Skip to Content
Actions

Get started with SAPUI5 and Routing

May 4, 2014 | 1,976 Views |
 developer centerfiorifrontendhtml5innovationjavascriptjson
Follow

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

To report this post you need to login first.

13 Comments

You must be Logged on to comment or reply to a post.

  1. Jeroen Custers

    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

    (0) 
    1. Wouter Lemaire 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

      (0) 
  2. Eli Eren

    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 🙁

    (0) 
    1. Wouter Lemaire 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

      (0) 
  4. Vinay Bedre

    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

    (0) 
  5. Jhani de Bruin

    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

    (0) 

Leave a Reply