Skip to Content

OpenUI5 with bootstrap for the design


This blog is an extension on my previous blog about Nested UI routing in OpenUI5.

Nested UI Routing in OpenUI5

There I talked about navigation between pages without changing the whole page but only some parts of it. One of the advantages of this concept is that it can have a master page, which is the index.html page. In the previous blog I’ve created this page by using HTML and CSS. You can’t design this page with the OpenUI5 components when working with this concept. The OpenUI5 components are only available when they are attached to the different parts (DIVs) of the master page.

So we have one design in the master page (index.html) with multiple components/views in it. Besides HTML and CSS we could also use a front-end framework like bootstrap! With this framework you can easily create your design, as well for web as for mobile! You can even use it to create responsive designs:

By just including the bootstrap css, we are now able to use all the features of bootstrap.

<link rel="stylesheet" href="//">

Now I’m able to use bootstrap for my css. So I changed the body of my index page to the following:

<body class="sapUiBody" role="application">
       <div class="container-fluid" >
            <div class="row">
                 <div class="col-md-8 col-md-offset-2">
                      <div class="panel panel-default">
                            <div class="panel-body">
                                <div class="row">
                                     <div id="headerImage" class="col-md-4"><img src="images/sapui5.png"></div>
                                     <div id="subheader" class="col-md-8">
                                          <div id="headerTitle" class="row" data-type="text/x-handlebars-template"><h1>{{text path="/title"}}</h1></div>
                                          <div id="headerWidget" class="row"></div>
                                <div class="row"><hr /></div>
                                <div id="menu" class="row text-center"></div>
                                <div class="row"><hr /></div>
                                <div id="main" class="row">
                                     <div id="contentWidget" class="col-md-4"></div>
                                     <div id="content" class="col-md-8"></div>

Which will result in the following output:



In my opinion, Bootstrap is really powerful and makes the life of a web developer easier. This is one of the reasons to use Nested UI Routing in OpenUI5.

It’s also a good example of using multiple frameworks/libraries together!

You can find the index.html in the attachment and the full project at github: lemaiwo/OpenUI5-with-BootstrapUI · GitHub

Hope your seeing the benefits of it!

Kind regards,


You must be Logged on to comment or reply to a post.
  • Hi Wouter, John,

    Thanks for the great examples, it's something I had thought about, but not got around to trying.

    I did wonder if there would be any conflict between the JavaScript and CSS, but everything looks good!!

    Definitely something I want to experiment with...



    • When you do please share you findings

      Initially i thought handlebars templates in UI5 was a bit of a gimmick, the more i use them the more i like them. The templates for me dont have the formal or boilerplate feel of notepad controls. 

      Lately i am seeing requests coming through from people wanting to use UI5 with a corporate theme and i think that using templates is a good fit, it means you can talk with non UI5 developers in a common simple semantic language and there is potentially a lot of reuse.

      There is one drawback,  where do you put the javascript? 

      I really dont like putting jquery selectors or dom stuff in controllers, you can create custom handlebar helpers but not sure whether this would be the right place.

      looking forward to hearing others ideas


      • The bootstrap is only on the index page. In the index I have multiple views which I put in the right place by using bootstrap. Only some javascript in the index for the routing and all other javascript is in the controller of every view. Or do you mean something else?

        Kind regards,


      • Hi John,

        Thanks for the comments, will definitely share any experiements.

        The HTML templating is interesting and not something I was aware of, gives us other options to bind data, although as you mention it seems you loose some benefits that the views/routing provide, perhaps we need a TemplateView.

        Like the idea of just using just the bootstrap css, especially with the number of themes out there, but I guess would require a fair amount of effort with all the renderers.