Monthly Archives: February 2015

Speaking at Mastering SAP Technologies

Next week I’m travelling to Johannesburg, to attend and speak at the Mastering SAP Technologies conference. It’s a great honour to have been invited, and I’m excited at the prospect of the topics covered in the agenda.

I’m continuing my journey spreading the word about Fiori and UI5. Last November I was in Sydney giving a locknote, a workshop and speaking at an executive lunch, at the SAP Architect & Developer Summit. A couple of weeks ago it was a short trip to Brussels to speak about OpenUI5 at FOSDEM, and now at Mastering SAP I have three slots. Here’s the description of each of them.

Keynote: Can I Build a Fiori App? Yes You Can!

Fiori is not just the new UX-focused, role-based application paradigm from SAP, it’s also a set of technical constraints coupled with a rich but finite set of design patterns for UI. Most importantly it’s made possible by certain parts of the SAPUI5 toolkit that were specifically built with Fiori in mind. (In fact, the first customers of the sap.m library in SAPUI5 were the SAP Fiori developers themselves). This session tells you what you need to know to build a Fiori app.

Tips & Tricks from the Trenches of a Fiori/UI5 Developer

Developing Fiori and UI5 apps with the UI5 toolkit is different than what you’re used to. Different generally because it’s HTML5 based, and different specifically because it’s UI5. Learn the tips and tricks that I use on a daily basis, and get to know how to drive, modify and extend Fiori/UI5 apps from the command line console of Chrome’s developer tools. Master UI5 debugging and maintenance from within the browser and get a step ahead.

Workshop: Building an SAP Fiori-like App From (Almost) Scratch – Hands On!

Starting from a skeleton app that has a structure but minimal content, and an OData or JSON data source, we build together a working Fiori app with SAPUI5. We cover bootstrapping the SAPUI5 toolkit, the Component-based approach to development, Model-View-Controller based development, XML views, navigation, data binding, model operations and more. This is similar to the Open Source Convention (OSCON) hands-on session I co-presented in Portland, June 2014, and the CD168 hands-on sessions I co-built & co-presented at SAP TechEd in 2013 (which were sold out / overbooked many times).

Perhaps I’ll see some of you there. In any case, share & enjoy!

Fiori & UI5 Related Videos

I thought it would be worth collecting together a lightly annotated list of Fiori and UI5 public videos that I’ve published on my YouTube channel. (I say public, as there are quite a few OpenUI5 related videos still marked as private, waiting in the wings … watch this space!)


Fiori Apps Reference Data into a Spreadsheet 09 Jan 2015
Pulling the Apps info from the OData service used by the SAP Fiori Apps Library app into a Google spreadsheet. More info here: Fiori App Data into a Spreadsheet? Challenge Accepted!


YAML Model for UI5 20 Dec 2014
I scratched an itch and built a simple YAML Model implementation for UI5. More info here:

Creation & Reload of UI5 UIs in the Chrome Developer Console 24 Nov 2014
Following my workshop session at the SAP Architect & Developer Summit, this screencast shows the creation of a quick UI, using the manual Chrome Developer Console techniques we learned, and the subsequent export and reload as XML. (I recorded this at Sydney airport on the way back from the summit).

SAP Fiori Rapid Prototyping: SAP Web IDE and Google Docs 05 Nov 2014
With the power of the SAP Web IDE and its plugin / template architecture, we can create custom templates that allow you to create Fiori apps based on all sorts of data sources, in this case, a Google Spreadsheet.

SAP Web IDE Local Install – Up and Running (3-video playlist) 27 Oct 2014
SAP made available its Web IDE as a locally installable service in Oct 2014. This short series of videos shows you how to get up and running with it.

SAP Fiori & UI5 Chat, Fri 17 Oct 2014 17 Oct 2014
Brenton O’Callaghan and I have a 30 min chat about SAP Fiori and the new, unofficial SAP Fiori App that gives information about the available SAP Fiori Apps.

UI5 Icon Finder 14 Sep 2014
A very quick screencast of an “Icon Finder” app that remembers your own word associations you make, so you can more easily find the icons next time. See Scratching an itch – UI5 Icon Finder for more info.

OpenUI5 MultiComboBox First Look 25 Jul 2014
A first look at the sap.m.MultiComboBox in OpenUI5 version 1.22. Note that the addition of a key for the root element is not entirely necessary (but probably what you might want). I wrote more about this here Keyed vs Non-Keyed Root JSON Elements & UI5 Binding.

The SAP Fiori App Analysis application 30 Jun 2014
A short overview of the SAP Fiori App Analysis app, written itself as a Fiori style app. In this overview I show the source for the information (the SAP help documentation), mention how I convert the gathered spreadsheet data into a more easily consumable form, and explore the app a little bit too.

DSON (Doge Serialized Object Notation) Model mechanism for UI5. So model, wow! 06 Jun 2014
A bit of fun for a Friday late afternoon, and it helped me to play about with extending existing client models in the sap.ui.model library set.

Manipulating UI5 Controls from the Chrome Dev Console 17 May 2014
Just a quick screencast to show how easy it can be to find, grab, manipulate and create controls in a UI5 application from the Chrome Developer Console.

Simple Workflow App with UI5 13 Apr 2014
This is a quick screencast of the app I wrote for the basis of my chapter in the SAP Press book Practical Workflow 3rd Edition.

Coding UI5 in JSBin 11 Apr 2014
A quick recap of what we did during the UI5 Mentor Monday in March 2014, showing how easy it is to construct good looking UIs with UI5, and also the great facilities of JSBin – creating, viewing and sharing HTML CSS and JavaScript snippets with live rendering.

Mocking Up the Payroll Control Center Fiori App 14 Feb 2014
There was a blog post on the Payroll Control Center Fiori app and I decided to mock the UI up directly. This video shows me doing that.

#UI5 Control on the Screen, Quick 12 Feb 2014
There was a conversation about how fast you could get a UI5 control on the screen. I decided to try to see how fast it could be.

Using Gists on Github to share code 09 Jan 2014
This screencast relates to a document on SCN “Help Us To Help You – Share Your Code” that describes how and why you should share your code that you want help with, using Gists on Github.


SublimeUI5 – Snippets & Templates for SAPUI5/OpenUI5 19 Dec 2013
SublimeUI5 is a package for Sublime Text 2 for developing SAPUI5 / OpenUI5 applications. There are two parts to it – a series of snippets and some basic application templates to help you quickly get started with complete MVC-based running apps. (I don’t maintain this package any more but you’re welcome to take it over!).

SAPUI5/Fiori – Exploration of an App 22 Nov 2013
An exploration of a custom Fiori app and the SAPUI5 controls that are used to build it. For the full context of this, see the 2-part SAP CodeTalk – SAPUI5 and Fiori playlist.

SAP Fiori-style UI with SAPUI5 06 Nov 2013
This was a short video to show the sort of thing that attendees of our SAP TechEd 2013 Session CD168 “Building SAP Fiori-like UIs with SAPUI5” would be building.


Re-presenting my site with SAPUI5 13 Dec 2012
A short demo of an experiment I carried out to explore SAPUI5 and learn more about it. I really like the Shell component as a user interface paradigm and decided to see if I could re-present the content of my home page and weblog using SAPUI5 and specifically the Shell. It seemed to work out OK.

Stupid Firebase and SAPUI5 tricks 14 Apr 2012
Saturday evening hacking around with Firebase, the command line, and an SAPUI5 Data Table. Fairly pointless but interesting nonetheless. Firebase uses websockets for realtime data streaming to your browser-based app, and you can interact with the JSON data with HTTP. Every piece of data has a URL. Now that’s nice.

SAPUI5 and OData 12 Feb 2012
I looked at the data binding support for OData based data sources (such as those exposed by SAP NetWeaver Gateway!) in the (then relatively) new SAPUI5 toolkit. I also wrote this up on SCN: “SAPUI5 says “Hello OData” to NetWeaver Gateway“.

Morning Fiori Fix

John Moy tweeted today about the Fiori App Reference Library showing duplicate entries recently. It’s something I’d noticed too, after checking the app following the publication of information on SCN about new Fiori apps on the post “New Fiori Apps for HCM” last week.

I’m not 100%, so earlier this morning I needed a bit more time than usual to get my brain in gear. So with a coffee I decided to spend a few mins hacking the list display. It’s not a permanent solution of course, but at least demonstrates that there are properties in the Apps entity that can be used to distinguish the “duplicate” entries. Should be a quick fix (yes, pun intended!) for the Fiori Implementation eXperience folks to carry out.

Here’s a quick screencast as an animated GIF (why not?)


Right, on with the morning.

OpenUI5 at FOSDEM 2015

I just returned from FOSDEM, the conference for free and open source software developers that’s held annually in Brussels. It’s a super event that has a long pedigree already, and has managed to remain true to the hacker culture and spirit that pervades the open source world. Innovation, scrutiny, sharing and collaboration are the bywords of this culture.

I have attended FOSDEM a number of times over the years; in the early days in my capacity as a Jabber / XMPP programmer, and these days more generally, but this time it was specifically about OpenUI5.

IMG_20150202_080814SAP’s open sourced UI development toolkit for HTML5 is SAPUI5’s twin with an Apache 2.0 licence. SAPUI5 is the basis for SAP’s UI innovation and with what SAP Fiori apps are built. Although still relatively young, it’s a very accomplished toolkit, and one I was eager to share with the open source developer community at large.

I spoke on the subject of OpenUI5 in this talk:

A Whirlwind Introduction to OpenUI5

and it was very well received; the room was packed and there was some great feedback. It wasn’t difficult talking about a product from such a great team, although to add extra spice, I’d decided not to use any slides, and instead, do some live coding on stage.

IMG_20150202_080838I had deliberately set myself up for a fall, showing how difficult it can be to built hierarchies of controls in JavaScript, which then set the scene for my favoured approach of defining views declaratively, with XML being my favourite flavour in that vein. Luckily the audience seemed to appreciate the in-joke, and not everyone thought I was an idiot :-)


I’ve made the source code of the app I built on stage available on Github, in the fosdem-2015-openui5 repository.

The SAP folks had an OpenUI5 booth at FOSDEM too which was staffed by a few of the real UI5 developers, so the conference attendees were able to learn first hand about the toolkit from the source. The booth saw a nice increase in traffic after my talk, which is a great sign.

SAP has had a presence at many conferences in the past few years, but this one resonates particularly with me, as some folks might think that the SAP and open source worlds are far apart. How wrong they are. Onwards!

Picture credits: Denise Nepraunig, Jan Penninkhof, Martin Gillet – thanks!