Skip to Content
Author's profile photo HP Seitz

UI5 Boilerplate explained (Part 1)

In this blog I will describe the structure and concepts behind the UI5 SplitApp Boilerplate. It is a template/skeleton for Mobile UI5 Apps and follows the “Mobile First” approach, but also works on desktop (Thanks to the great sap.m controls).


The UI5 Boilerplate can be understood as starting point for your own UI5 Development, both for OpenUI5 and SAPUI5 Apps.

The Boilerplate provides a basic application and file structure, implements some core features (navigation, i18n) and contains example views/controllers for different purposes. The UI5 SplitApp Boilerplate code is hosted on Github: 6of5/UI5SplitApp-Boilerplate · GitHub

The UI5 Boilerplate also supports SAP and also Non-SAP Development approach, this is reflected in two different git branches:

non-SAP centric Development Scenario SAP-centric Development Scenario
Development Tool Any IDE with Git Support (Sublime Text, Eclipse, IntelliJ,…) Eclipse 4.3 with SAP UI Development Toolkit for HTML5 (SAP UI5 Toolkit)
Git Branch master eclipseKepler
Git Clone Command git clone https://github.com/6of5/UI5SplitApp-Boilerplate.git git clone -b eclipseKepler https://github.com/6of5/UI5SplitApp-Boilerplate.git
More Information http://scn.sap.com/community/developer-center/front-end/blog/2014/01/13/ui5-mobile-splitapp-boilerplate/ UI5 Boilerplate with Eclipse + SAPUI5 Toolkit
local Dev Runtime Options node.js, Apache HTTP, Apache Tomcat Web App Preview, Apache Tomcat, HANA Cloud Local Runtime

Application Structure and File Structure

UI5 Boilerplate is structured via the following folders:

Folder contains
app UI5 Application Component, which is responsible for general tasks, like initialize core models like i18n
css CSS files go here
i18n resource bundles for internationalization (i18n) are stored in this folder
img assets like images, logos,….
js general javascript files, e.g. app.js
model UI5 model information (like json, xml files)
view UI5 view files (XMLViews, JSViews) and the corresponding controllers

Let’s have a look at the index.html file first:

UI5bp-expl1_01m.png

It is a normal HTML5 document file. After the meta declaration for IE the UI5 bootstrap script is declared. The boilerplate offers here in comments some alternative  sources for the UI5 bootstrap (OpenUI5 external, SAPUI5 external, local SAPUI5 from SAP UI5 Toolkit or providing it via local web server). With local options you can define yourself which dedicated UI5 version you want to use. The index.html links to the JavaScript file app.js:

app.js (declare UI5 resources / ‘start’ Application Component)

UI5bp-expl1_02.png

in the app.js we define where UI5 resources are located. These are in the folders app, model and view. So UI5 will be able to use resources within these folders. And we specify that we require app.Component. This Component represents our Application. We create an ComponentContainer with name “app” and attach it to the DOM element with the id “root”, which in our case is the body tag <body class=”sapUiBody” id=”root”>. This will create and run our Component (Application):

Component.js (Application Component)

UI5bp-expl1_03.png

In the Component (Application) we create the App.view (which represents the UI of our Application) and create the i18n model and attach this to the App.View. Within the component further general tasks could be executed, like loading master data, which can then be used throughout the application. Now lets have a look at the App View:

App.view.js (Application UI)

UI5bp-expl1_04.png

In the App View we create a SplitApp which will enable the “iPad” like UI Style. We can then define the Master Page(s) which will be on the smaller left side of the screen (here the Menu View)  and also the Detail Pages (CoffeeList View and Info View). Both JSViews or XMLViews are possible as you can see. And of course you could also use the other view types here. The App View is now returning the SplitApp as member of the mobile Shell. The result can be seen in the browser (with UI5 Boilerplate Version 0.6.0):

UI5bp-expl1_05.png

Next

In the next blog article I want to explain, how you can easily extend the UI5 Boilerplate with further Pages.

You can find an article which describes How to easily add further pages in this external blog post.

Updates/Changes in version 0.7.0

With the updated version of the UI5 boilerplate there are some fundamental changes which I shortly will describe.

Shell and Component were removed

As the Shell and also the Component are not really necessary for a ‘normal’ App (here in the sense of a single, independent App), they have been removed.

This makes the DOM more lean and removes unnecessary complexity.

The homeIcon definition is done by the SpliApp itself now. Initialisation of the global models (i18n and the new device model) is taken over form the Component by the App View (RootView). This makes also the ComponentContainer obsolete. Therefore simply the App View is placed in the DOM in the app.’s file:

/wp-content/uploads/2014/02/appjs_434630.png

Device Model introduced

To implement different behaviour on different devices (smartphone, tablet, desktop) the device model was added. More Infos in dedicated post:

http://scn.sap.com/community/developer-center/front-end/blog/2014/04/15/responsive-design-of-ui5-splitapp

Fiori Edition of UI5 Boilerplate

There is now a Fiori Edition of the UI5 Boilerplate available, which can be integrated into the SAP Fiori Launchpad. More information under the following links:

sitFRA 2015 – Birthday of UI5BP Fiori Edition

Assigned Tags

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

      This is a great starting point for people wanting to understand how best to start their SAPUI5 app's.  If only I'd waited a few days I wouldn't have had so many stupid questions in my own blog posting last week, as this answers a lot of the things I was thinking about.

      One thing I would say, it would be useful to understand what, if any, differences there are for a boilerplate that isn't mobile first, i.e. isn't based on the common SplitApp type approach.  I'm sure many developers, like myself, are using SAPUI5 for desktop/Portal based solutions just as much as mobile.  I suspect the differences will be minimal (i.e. simply use a different layout) however it would be useful for some confirmation around this and highlight of any possibly traps and pitfalls.

      Cheers,

      Gareth.

      Author's profile photo HP Seitz
      HP Seitz
      Blog Post Author

      Thanks for your comments.

      To your question regarding "mobile second" or "no mobile", I would say:

      • Application and File Structure can stay the same
      • Difference will start at the App.View, you won't use the m.Shell of course and also not the SplitApp , instead you would use sap.ui.ux3.Shell (Note: I have only limited experience in this area)
      • you will not be limited to mobile controls and will be able to use full-size of the desktop
      • … but, but, but you won't fully mobile enabled anymore

      For that purpose we need the UI5 Desktop Boilerplate, but mobile first and time is limited!

      Cheers, HP

      Author's profile photo Former Member
      Former Member

      Hi HP,

      Thanks for these comments.  I'm having a play at the moment creating a sap.ui.ux3.Shell desktop based boiler-plate, based on your work above.  As you say, it isn't too different in reality and for the typical customer requests I'm receiving at the moment, I need to be able to show both mobile first and "old-school" approaches.

      Cheers,

      Gareth.

      Author's profile photo HP Seitz
      HP Seitz
      Blog Post Author

      Hi Gareth,

      let's keep synced on this topic. But how should we call the "Desktop" boilerplate? Shell is not a unique name as there is also the mobile shell? …Desktop, Old-School, Classic, UX3Shell,…..??

      I would suggest, we create a second repo on github, base is the UI5 SplitApp Boilerplate, so it will automatically support Eclipse with UI5 Toolkit and  "all IDE" development scenarios.

      Cheers, HP

      Author's profile photo Former Member
      Former Member

      Hi Gareth,
      great idea! Have you already continued work on the UI5 Desktop Boilderplate? I am very interested in.

      Regards, Patrick

      Author's profile photo Former Member
      Former Member

      While it is certainly a nice idea, isn't there a maven plugin for this kind of stuff? Or maybe Yeoman - Modern workflows for modern webapps ? I think you not only get your boilerplate but stuff like dependency management, unit testing etc.

      Author's profile photo HP Seitz
      HP Seitz
      Blog Post Author

      a boilerplate is about app structure and app concepts not about development processes like TDD, CI or CD. This can be added around it.

      Author's profile photo Former Member
      Former Member

      Well that is correct, but f.e. Yeoman does both and in a very easy customizable way. You can write a very easy script which prompts for User decisions and than you can change your boilerplate code according to the setup wishes, just saying.. There are already a lot of tools out there no need to reinvent the wheel.

      Regards

      Edit: An obviously Boilerplates can have dependencies to other stuff and yeoman or more precisely bower will take care of that and grunt is used for deployment etc.

      Edit edit: Just discovered there is already a openui5 generator, which generates boilerplate etc..

      Author's profile photo HP Seitz
      HP Seitz
      Blog Post Author

      I share my findings and experience, I've made with UI5, with the UI5 boilerplate. And I try to compose it, so that people (especially who are new to UI5) can easily use it, with less pre requites as possible. It can be used with Eclipse + UI5 Toolkit or any other IDE, like Sublime Text. The concepts which are behind the code and structure are explained. This is my contribution.

      If you want to have an overview of UI5 Tools have a look at:  UI5Tools - 6of5 Wiki Page

      Cheers, HP

      Author's profile photo Former Member
      Former Member

      Nice link, thanks for that 🙂 and nice Blog 🙂

      Author's profile photo Vishnupriya Varadharajan
      Vishnupriya Varadharajan

      Hi, Excellent blog! I understood the SplitApp concept here. Have one query. I have an application with a Login page, Master page and Details page.

      If I use SplitApp, then my Login page also comes as Split View along with Master page.

      I am unsucessful in displaying the Login Page alone first . If Login successful, I need to display the Master and Details as split view. Is this posible? and how? Could you pls throw some light here?

      Thanks

      Author's profile photo Former Member
      Former Member

      Hi HP,

      Nice blog! Thanks for sharing!

      @ Vishnupriya Varadharajan

      I had the same challenge and I managed to solve this. I started with an App and loaded the SplitApp after the login was successful. I will try to make an example to share this.

      My app is not based on this Boilerplate template. I used this reference: Documentation/AdvancedTopics/Mobile/BestPractice – SAPUI5 Wiki (TIP CORE User Interface)

      Best regards,

      Jeroen

      Author's profile photo Vishnupriya Varadharajan
      Vishnupriya Varadharajan

      Thanks Jeroen for the reply. It will be of great help if you can share that example.

      Regards,

      Vishnupriya

      Author's profile photo Former Member
      Former Member

      Hi Vishnupriya,

      I have just created a sample app with this functionality. You can find an example here: SplitApp with Logon screen and the source code is available here: sapui5poc/splitapp_with_login at master · jeroencusters/sapui5poc · GitHub. I hope this helps.

      Regards,

      Jeroen

      Author's profile photo Vishnupriya Varadharajan
      Vishnupriya Varadharajan

      Thanks a lot Jeroen! The app worked like Charm 🙂

      Regards,

      Vishnupriya

      Author's profile photo Matthias Nott
      Matthias Nott

      Hey Jeroen,

      could you update your link? Seems the repo is no longer there.

      Thanks!

      Author's profile photo Former Member
      Former Member

      Hi Matthias,

      I just updated the link to my own repo. I don't know if this example is still valid and working.

      Regards,

      Jeroen

      Author's profile photo Former Member
      Former Member

      Hi HP,

      This is great OpenUI5 being new we need more of such blogs explaining basics to new comers.

      Thanks again and waiting for the next parts eagerly.

      Author's profile photo HP Seitz
      HP Seitz
      Blog Post Author

      Thanks Sagar,

      you still have to wait for my next SCN post, sorry for that. On my regular blog you can find a post about adding additional pages to the UI5 boilerplate: Add Page to UI5 SplitApp Boilerplate | MYPRO Consulting

      Perhaps this is also of interest for you.

      Cheers, HP

      Author's profile photo Daniel Reger
      Daniel Reger

      Hi HP,

      once more: that's a really awesome blog which helped me a lot to get started with SAPUI5!

      I'm now very curious to know about potential future enhancements. For example, I'd like to know how to integrate this app into a "real" SAP Fiori Launchpad. Would be great if there could be a small tutorial how to do it.

      Thanks and regards Daniel

      Author's profile photo HP Seitz
      HP Seitz
      Blog Post Author

      Hi Daniel,

      thx for your feedback. There will be a Fiori Edition of the UI5 Boilerplate. I will introduce and present it at

      SAP Inside Track 2015 Frankfurt

      on 21th of March. So you need to have some patience. There are some fundamental changes necessary, so that UI5BP can run in the Fiori Launchpad, as it has to be self-containing SAPUI5 component.


      BR, HP

      Author's profile photo Daniel Reger
      Daniel Reger

      World-class..can't wait...

      I do hope you'll let us know once you can share the innovations with us.

      Thanks in advance!

      Author's profile photo Dean Davis
      Dean Davis

      I've wrapped your latest code into a Cordova container to run as a native app on an iPad.

      The issue I'm seeing is that the app thinks, at startup, the iPad is in the portrait orientation no matter what the actual physical orientation of the iPad is at startup.

      I've set "LaunchpadMode" to false in the config.js file.

      I set my iPad simulator to landscape mode and ran the Cordova app. Attached is the screenshot of the app after startup. The second image is the app after rotating to portrait mode.

      As you can see the application configurations are reversed.

      If I start the app with the iPad simulator in portrait mode then everything works well.

      I'm just starting on SAPUI5 so I think I may be too new to figure this one out, I've tried.

      Any suggestions?

      BPLandscape.png

      BPPortrait.png

      Author's profile photo HP Seitz
      HP Seitz
      Blog Post Author

      Hi Dean,

      strange, I guess the reason lies in your Cordova project settings or version, if I put the current version (v0.8.0) of UI5BP with LaunchpadMode = false into the Cordova Container I got correct behaviour. I'm working with Cordova v3.5.0 and OpenUI5 v1.26.7 Mobile.

      What happens if you open up the Demo Site in Mobile Safari of your iPad?

      Links can be found in the UI5BP Wiki Site UI5Boilerplate - 6of5 Wiki Page under Section "Public Demo Site"

      Here my screenshots from XCode iPad Simulator

      Screen Shot 2015-03-03 at 18.16.42.png

      Screen Shot 2015-03-03 at 18.16.52.png

      Author's profile photo Dean Davis
      Dean Davis

      I'm using Cordova 4.3.0 and OpenUI5 from "https://openui5.netweaver.ondemand.com/resources/sap-ui-core.js" as the source of my bootstrap script.

      Your demo from the 6of5 site works as expected on my iPad regardless of the iPads starting orientation. So, that's good.

      Any chance you could send me a zipped copy of your iOS project folder from your Cordova folder?

      Author's profile photo HP Seitz
      HP Seitz
      Blog Post Author

      You should copy OpenUI5 Mobile resources into your project folder (under www) to benefit from the container use case, bundle the UI5 stuff with the app and gain massive performance improvement (for initial load).

      I did not make any changes in the cordova project, simply created with the cordova CLI. To simply run the UI5BP within cordova only a change in the index.html is necessary. There would be more modifications necessary to make it look nicer of course.

      Please checkout the new branch cordova on Github

      6of5/UI5SplitApp-Boilerplate at cordova · GitHub

      Author's profile photo Dean Davis
      Dean Davis

      Thanks, that branch fixed my issue.

      I think I was trying to start my UI5 application before the Cordova wrapper indicated that the device was ready. I used your initialization code in the index.html file and everything looks like it is working  now.