You are on page 1of 88
30 Days of UI5 Celebrating SAPUI5 and OpenUI5's milestone 1.30 release in Autumn 2015 by DJ

30 Days of UI5

Celebrating SAPUI5 and OpenUI5's milestone 1.30 release in Autumn 2015

by DJ Adams, John Murray, Sean Campbell, James Hale, John Appleby, Chris Choy, Nathan Adams & John Gregory (Bluefin Solutions)

and Thilo Seidel & Sam Yen (SAP SE) with a foreword by Andreas Kunz (SAP SE)

30 Days of UI5 Celebrating SAPUI5 and OpenUI5's milestone 1.30 release in Autumn 2015 by DJ

Table of Contents

Preface

Foreword by Andreas Kunz

Day 1 - Welcome to 30 Days of UI5!

Day 2 - Expression Binding

Day 3 - Semantic Pages

Day 4 - Creating Native Applications with UI5

Day 5 - OpenUI5 Walkthrough

Day 6 - The App Descriptor

Day 7 - JavaScript Do's and Don'ts for UI5

Day 8 - User Notifications with the Message Popover

Day 9 - Bootstrapping UI5 Locally and in the Cloud

Day 10 - Handling Dates with the Date Picker

Day 11 - Lightweight notifications with the Message Strip

Day 12 - Base Classes in UI5

Day 13 - Multi language support out of the box – UI5’s pedigree

Day 14 - Speeding up your UI5 app with a Component preload file

Day 15 - The UI5 Support Tool – Help Yourself!

Day 16 - UI5 and Coding Standards

Day 17 - UI5 and Fiori – The Story of Open and Free

Day 18 - MVC – Model View Controller, Minimum Viable Code

Day 19 - A Short UI5 Debugging Journey

Day 20 - Fragments and Minimum Viable Code

Day 21 - Spreading the UI5 Message

30 Days of UI5 Page 2 of 88

Table of Contents Preface Foreword by Andreas Kunz Day 1 - Welcome to 30 Days of

Day 22 - Merging lists with UI5

Day 23 - Taming the Resource Model Files

Day 24 - An Introduction to sap.ui.define

Day 25 - The experimental Client operation mode

Day 26 - UI5 – looking back and forward

Day 27 - A non-techie PM’s view of UI5

Day 28 - UI5 Version Info

Day 29 - Revisiting the XML Model

Day 30 - The origin of becoming a fundamental enabler for Fiori

About Bluefin Solutions

30 Days of UI5 Page 3 of 88

Day 22 - Merging lists with UI5 Day 23 - Taming the Resource Model Files Day

Preface

This series has been a great journey for me and the rest of the folks who have contributed, and the result of a series of lucky circumstances:

That SAP had the foresight to employ such superheroes for their UI5 team which is still going from strength to strength. That I was lucky enough to be able to work alongside them in Walldorf for a good period of time. That Bluefin has such a great team of UI5 developers, many of whom were also more than willing to collaborate with me on this series either directly or indirectly. That close contact and friendship with SAP colleagues resulted in an even wider collaboration (witness the contributions from Andreas Kunz, Thilo Seidel and Sam Yen here). That my friend Frank Köhntopp came up with the neat idea of turning the series of posts into an electronic book format.

The richness of the UI5 toolkit is matched by the warmth of its corresponding ecosphere, and the true openness and friendship of all of the folks both within and outside of SAP. To me, UI5 represents the new SAP in many ways: Web-first, developed with open source tools, and itself open sourced, an equal balance between technical accomplishment, utility and beautiful design, and created & curated by folks with a genuine passion.

Preface This series has been a great journey for me and the rest of the folks

UI5 is now at release 1.30 and the trajectory shows no sign of slackening off any time soon. I'm looking forward to 1.32 and beyond, and continuing my journey learning from those who are, perhaps unaware, teaching me great things.

Thanks again to Frank for suggesting this format, and I hope you enjoy this series!

-- DJ Adams, October 2015

30 Days of UI5 Page 4 of 88

Preface This series has been a great journey for me and the rest of the folks

Foreword by Andreas Kunz

How It Started

It all started back in November 2008, with five to six people from different teams - all with different backgrounds - sitting in a room that was meant to accommodate four at the most. We were asked to create a new UI. One that was flexible, extensible, modern, and independent from the backend technology. None of us had any idea at the time where this would eventually lead.

So why this challenge? Fact was, any visual or functional improvement of SAP’s main UI framework back then had to be developed within an expert team, which had become a bottleneck. Even worse, any improvements that were developed often didn’t reach customers for years as user interface upgrades could only be performed together with backend upgrades – often meaning considerable effort and costs. Decoupling was urgently needed.

SAP had recently acquired the business intelligence company Business Objects and was in the process of making even more acquisitions. The prospect of maintaining a zoo of UI technologies, each with its own look & feel on technology stacks outside the ABAP / Java story used within SAP, wasn’t a particularly pleasant one.

Going About It

The task was huge, but the chance to start from scratch with a greenfield site, laced with freedom, trust and enthusiastic, super-talented colleagues like the ones I had, is a pleasure for every developer.

It goes without saying that journeys such as this are rarely straightforward. Stakeholders came and went. Visual themes were created and discarded. A lot of options were explored and abandoned, like optional server-side rendering or writing control renderers as HTML templates. Some of these ideas may be (or were already) resurrected under new preconditions. One of the big early changes was switching to jQuery as our foundation, replacing our own DOM manipulation layer, after thoroughly investigating different options. This constant evolution remains vitally important to UI5, as seen by the transition to the cross-device “sap.m” library or the recent move to AMD syntax and asynchronous module loading.

Adoption and Success

So how did UI5's success come about? All of a sudden, SAP developers were given an easy-to-use,

totally tweakable UI technology. And what’s more, it looked good:

one line of codewas enough to

bring up the entire “Gold Reflection” Shell, which had external developers tweeting right away

about how this was easily

the best UI SAP has ever done. So whether it was for demos or new

...

products, out of nowhere it was so easy to impress with a beautiful user interface. In no time at

30 Days of UI5 Page 5 of 88

Foreword by Andreas Kunz How It Started It all started back in November 2008, with fiveone line of code ​ was enough to bring up the entire “Gold Reflection” Shell, which had external developers tweeting right away about how this was easily the best UI SAP has ever done . So whether it was for demos or new ... products, out of nowhere it was so easy to impress with a beautiful user interface. In no time at 30 Days of UI5 Page 5 of 88 " id="pdf-obj-4-49" src="pdf-obj-4-49.jpg">

all, UI5-based apps started dominating SAP demo jams around the world, and UI5 was being used more and more in people’s free-time projects.

Wow, developers actually voluntarily chose an SAP UI technology?! Because it was easy and looked good?!

For sure, the UI5 team’s willingness to communicate with users of the framework helped a lot. At times, three of the global top ten posters in the internal community forum at SAP were from the UI5 team, answering questions and assisting users.

Going Public

As soon as the first trial version of SAPUI5 was made available to the public in February 2012, this willingness to communicate was met by an open and welcoming community of external developers. I remember how I bumped into DJ Adams at the SAP DKOM event in April 2012. He had already looked into the library and written positive blog posts, which the UI5 team had devoured eagerly.

But apart from one or two TechEd presentations in 2011 (before externals actually had access to UI5), this was UI5’s first personal contact with the outside world. And it grew into a friendship, which has to be the best possible relation between a framework’s providers and its users, right? Seeing how much DJ has done to advocate UI5 ever since, I view this moment as a key factor in sparking UI5’s success in the external developer community, and for him it was apparently one of the moments that made him blog about the new SAP developer connection.

OpenUI5

The decision to open source UI5 came suddenly. Or maybe not. We had planned it all along, it was on our mind from day one, but somehow it needed the right moment and quite a push from the outside world to actually make it happen. The opportunity to announce it at TechEd Bangalore 2013 was a factor, I think. To not spoil the surprise, only three or four team members knew about it a few days in advance. While this allowed us to insert the chosen name where needed and create a web site and a build with the Apache license, it took a few more months until we had a Grunt-based replacement for our internal Maven build infrastructure and could subsequently move UI5 development to GitHub - and let the whole world contribute.

Now, less than one year later, we've already registered over 10,000 publicly visible code commits, dozens of external contributions, and hundreds of closed issue reports that help us deliver a quality framework. And it was a huge relief to us that, despite our prior doubts, public response turned out to be just right: there was neither disinterest, nor an unmanageable flood of issue reports.

30 Days of UI5 Page 6 of 88

all, UI5-based apps started dominating SAP demo jams around the world, and UI5 was being usedthe new SAP developer connection ​ . OpenUI5 The decision to open source UI5 came suddenly. Or maybe not. We had planned it all along, it was on our mind from day one, but somehow it needed the right moment and quite a push from the outside world to actually make it happen. The opportunity to announce it at TechEd Bangalore 2013 was a factor, I think. To not spoil the surprise, only three or four team members knew about it a few days in advance. While this allowed us to insert the chosen name where needed and create a web site and a build with the Apache license, it took a few more months until we had a Grunt-based replacement for our internal Maven build infrastructure and could subsequently move UI5 development to GitHub - and let the whole world contribute. Now, less than one year later, we've already registered over 10,000 publicly visible code commits, dozens of external contributions, and hundreds of closed issue reports that help us deliver a quality framework. And it was a huge relief to us that, despite our prior doubts, public response turned out to be just right: there was neither disinterest, nor an unmanageable flood of issue reports. 30 Days of UI5 Page 6 of 88 " id="pdf-obj-5-26" src="pdf-obj-5-26.jpg">

The Future

So what does the future hold? I’ll not lay out a roadmap here, but I do see lots of new stuff emerging at the periphery and the evolution continues throughout UI5. Be it in the programming model, the functional scope, documentation or design.

And the community is also evolving: this blog post series and ebook, created as a joint effort by developers and managers inside and outside of SAP, looks - at least to me - like a novel step into untapped territory.

And that’s a great direction in which to go.

-- Andreas Kunz, September 2015

30 Days of UI5 Page 7 of 88

The Future So what does the future hold? I’ll not lay out a roadmap here, but

Day 1 - Welcome to 30 Days of UI5!

by DJ Adams

Day 1 - Welcome to 30 Days of UI5! by DJ Adams UI5, the collective shorta preview release available ​ . The UI Development Toolkit for HTML5, to give it its proper long-form ​ Culture-style name ​ , has come a long way in the last few years. It’s a multi-faceted tookit that shows pedigree, passion and influence from many directions. From the ​ web dynpro inspired design roots ​ , through the hard work and commitment from all the great designers and developers, to the exemplary responsive controls we have come to know and love in the sap.m library and beyond. And of course there’s ​ the open sourcing of the toolkit, a great move on SAP’s part, influenced not in a small way by many developers both external and internal to SAP. Many of the UI5 core team have open source in their blood, part of a new generation that is making SAP what it is today. Where would SAP Fiori be without UI5? Nowhere. The engine behind the UX revolution that is powering today’s and tomorrow’s SAP applications (with S/4HANA) is UI5. As Norman Cook might say, “ ​ You’ve come a long way, baby ​ “. So as a bit of fun, and to celebrate this version 1.30 milestone, here’s a series of 30 posts, one a day, on UI5 related topics. Small posts from me and some guest authors, designed to be read during a quick coffee break. Nothing earth shattering, but hopefully things that will whet your appetite for further reading, and perhaps bring to your attention features that you might not yet have had a chance to consider. This series is available online at ​ http://bit.ly/30ui5 ​ . 30 Days of UI5 Page 8 of 88 " id="pdf-obj-7-6" src="pdf-obj-7-6.jpg">

UI5, the collective short name for both SAPUI5 and OpenUI5, is soon to reach a milestone, with the release of 1.30. There’s already a preview release available.

The UI Development Toolkit for HTML5, to give it its proper long-form Culture-style name, has come a long way in the last few years. It’s a multi-faceted tookit that shows pedigree, passion and influence from many directions. From the web dynpro inspired design roots, through the hard work and commitment from all the great designers and developers, to the exemplary responsive controls we have come to know and love in the sap.m library and beyond.

And of course there’s the open sourcing of the toolkit, a great move on SAP’s part, influenced not in a small way by many developers both external and internal to SAP. Many of the UI5 core team have open source in their blood, part of a new generation that is making SAP what it is today.

Where would SAP Fiori be without UI5? Nowhere. The engine behind the UX revolution that is powering today’s and tomorrow’s SAP applications (with S/4HANA) is UI5.

As Norman Cook might say, “You’ve come a long way, baby“.

So as a bit of fun, and to celebrate this version 1.30 milestone, here’s a series of 30 posts, one a day, on UI5 related topics. Small posts from me and some guest authors, designed to be read during a quick coffee break. Nothing earth shattering, but hopefully things that will whet your appetite for further reading, and perhaps bring to your attention features that you might not yet have had a chance to consider.

This series is available online at http://bit.ly/30ui5.

Day 1 - Welcome to 30 Days of UI5! by DJ Adams UI5, the collective shorta preview release available ​ . The UI Development Toolkit for HTML5, to give it its proper long-form ​ Culture-style name ​ , has come a long way in the last few years. It’s a multi-faceted tookit that shows pedigree, passion and influence from many directions. From the ​ web dynpro inspired design roots ​ , through the hard work and commitment from all the great designers and developers, to the exemplary responsive controls we have come to know and love in the sap.m library and beyond. And of course there’s ​ the open sourcing of the toolkit, a great move on SAP’s part, influenced not in a small way by many developers both external and internal to SAP. Many of the UI5 core team have open source in their blood, part of a new generation that is making SAP what it is today. Where would SAP Fiori be without UI5? Nowhere. The engine behind the UX revolution that is powering today’s and tomorrow’s SAP applications (with S/4HANA) is UI5. As Norman Cook might say, “ ​ You’ve come a long way, baby ​ “. So as a bit of fun, and to celebrate this version 1.30 milestone, here’s a series of 30 posts, one a day, on UI5 related topics. Small posts from me and some guest authors, designed to be read during a quick coffee break. Nothing earth shattering, but hopefully things that will whet your appetite for further reading, and perhaps bring to your attention features that you might not yet have had a chance to consider. This series is available online at ​ http://bit.ly/30ui5 ​ . 30 Days of UI5 Page 8 of 88 " id="pdf-obj-7-47" src="pdf-obj-7-47.jpg">

30 Days of UI5 Page 8 of 88

Day 1 - Welcome to 30 Days of UI5! by DJ Adams UI5, the collective shorta preview release available ​ . The UI Development Toolkit for HTML5, to give it its proper long-form ​ Culture-style name ​ , has come a long way in the last few years. It’s a multi-faceted tookit that shows pedigree, passion and influence from many directions. From the ​ web dynpro inspired design roots ​ , through the hard work and commitment from all the great designers and developers, to the exemplary responsive controls we have come to know and love in the sap.m library and beyond. And of course there’s ​ the open sourcing of the toolkit, a great move on SAP’s part, influenced not in a small way by many developers both external and internal to SAP. Many of the UI5 core team have open source in their blood, part of a new generation that is making SAP what it is today. Where would SAP Fiori be without UI5? Nowhere. The engine behind the UX revolution that is powering today’s and tomorrow’s SAP applications (with S/4HANA) is UI5. As Norman Cook might say, “ ​ You’ve come a long way, baby ​ “. So as a bit of fun, and to celebrate this version 1.30 milestone, here’s a series of 30 posts, one a day, on UI5 related topics. Small posts from me and some guest authors, designed to be read during a quick coffee break. Nothing earth shattering, but hopefully things that will whet your appetite for further reading, and perhaps bring to your attention features that you might not yet have had a chance to consider. This series is available online at ​ http://bit.ly/30ui5 ​ . 30 Days of UI5 Page 8 of 88 " id="pdf-obj-7-51" src="pdf-obj-7-51.jpg">

Day 2 - Expression Binding

by DJ Adams

The expression binding feature was introduced with version 1.28, and allows logic to be included directly in an embedded binding. It’s a very useful feature, but a double edged sword that should be wielded with care.

Day 2 - Expression Binding by DJ Adams The expression binding feature was ​ <a href=introduced with version 1.28 ​ , and allows logic to be included directly in an embedded binding. It’s a very useful feature, but a double edged sword that should be wielded with care. Before expression bindings, any embedded binding that required a condition to be checked, or a calculation to be made, or a reformatting to happen, needed a reference to a formatter function that would either be in a dedicated formatter module (common), or in the controller (less common). When using XML views, for example, the Model-View-Controller philosophy remained strong, in that any imperative computation remained separate from the pure declarative UI definitions. But in practice you find yourself creating a ​ lot ​ of formatter functions. Yes, some of them could be probably be refactored, and if you had time, you could probably find that library of common formatter functions that you’d been half building in your copious free time. Regardless, you end up with a lot of helper functions, small and large, that sometimes become a maintenance burden. Enter expression bindings. If you’re prepared to add sugar and milk to your coffee, if you’re prepared to sacrifice the absolute purity of MVC for the sake of brevity, then expression bindings can be your friend. Here’s an example that you can find on JSBin at ​ http://jsbin.com/wivuku/18/edit ​ : 30 Days of UI5 Page 9 of 88 " id="pdf-obj-8-13" src="pdf-obj-8-13.jpg">

Before expression bindings, any embedded binding that required a condition to be checked, or a calculation to be made, or a reformatting to happen, needed a reference to a formatter function that would either be in a dedicated formatter module (common), or in the controller (less common). When using XML views, for example, the Model-View-Controller philosophy remained strong, in that any imperative computation remained separate from the pure declarative UI definitions.

But in practice you find yourself creating a lot

of formatter functions. Yes, some of them could be

probably be refactored, and if you had time, you could probably find that library of common formatter functions that you’d been half building in your copious free time. Regardless, you end up with a lot of helper functions, small and large, that sometimes become a maintenance burden.

Enter expression bindings. If you’re prepared to add sugar and milk to your coffee, if you’re prepared to sacrifice the absolute purity of MVC for the sake of brevity, then expression bindings can be your friend.

Here’s an example that you can find on JSBin at http://jsbin.com/wivuku/18/edit:

30 Days of UI5 Page 9 of 88

Day 2 - Expression Binding by DJ Adams The expression binding feature was ​ <a href=introduced with version 1.28 ​ , and allows logic to be included directly in an embedded binding. It’s a very useful feature, but a double edged sword that should be wielded with care. Before expression bindings, any embedded binding that required a condition to be checked, or a calculation to be made, or a reformatting to happen, needed a reference to a formatter function that would either be in a dedicated formatter module (common), or in the controller (less common). When using XML views, for example, the Model-View-Controller philosophy remained strong, in that any imperative computation remained separate from the pure declarative UI definitions. But in practice you find yourself creating a ​ lot ​ of formatter functions. Yes, some of them could be probably be refactored, and if you had time, you could probably find that library of common formatter functions that you’d been half building in your copious free time. Regardless, you end up with a lot of helper functions, small and large, that sometimes become a maintenance burden. Enter expression bindings. If you’re prepared to add sugar and milk to your coffee, if you’re prepared to sacrifice the absolute purity of MVC for the sake of brevity, then expression bindings can be your friend. Here’s an example that you can find on JSBin at ​ http://jsbin.com/wivuku/18/edit ​ : 30 Days of UI5 Page 9 of 88 " id="pdf-obj-8-36" src="pdf-obj-8-36.jpg">
HTML <!DOCTYPE html> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex"> </script> <meta charset="utf-8"> <title>Expression Bindings</title>

HTML

<!DOCTYPE html> <html> <head> <script

src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"

id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex"> </script> <meta charset="utf-8"> <title>Expression Bindings</title> </head>

30 Days of UI5 Page 10 of 88

HTML <!DOCTYPE html> <html> <head> <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex"> </script> <meta charset="utf-8"> <title>Expression Bindings</title>

<script id="view1" type="ui5/xmlview"> <mvc:View controllerName="localctrl" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> <Input enabled="false" description="Formatter" value="Good { path : '/now', formatter : 'localfrmt.greeting' }" /> <Input enabled="false" description="Controller" value="Good { path : '/now', formatter : '.greeting' }" /> <Input enabled="false" description="Expression" value="{= 'Good ' + (${/now}.getHours() > 11 ? 'afternoon' :

'morning')}" /> </mvc:View> </script>

<body class="sapUiBody" id="content"> </body> </html>

JavaScript

jQuery.sap.declare("localfrmt"); localfrmt = { greeting : function(dNow) { return dNow.getHours() < 12 ? "morning" : "afternoon";

}

};

sap.ui.controller("localctrl", { greeting : function(dNow) { return dNow.getHours() < 12 ? "morning" : "afternoon";

30 Days of UI5 Page 11 of 88

<script id="view1" type="ui5/xmlview"> <mvc:View controllerName="localctrl" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> <Input enabled="false" description="Formatter" value="Good { path : '/now', formatter

}

});

sap.ui.xmlview({ viewContent : jQuery("#view1").html()

}) .setModel(new sap.ui.model.json.JSONModel({ now : new Date() })) .placeAt("content");

Result

} }); sap.ui.xmlview({ viewContent : jQuery("#view1").html() }) .setModel(new sap.ui.model.json.JSONModel({ now : new Date() })) .placeAt("content"); Result

The greeting is created in three different ways. First, we use a function inside a formatter. Then, we use the same function but in the controller that is linked to the view (note the dot prefix in the value of the formatter property, specifying that the function is to be found in the controller). Finally, we have the same example in an expression binding, directly in the view.

Those who have had their coffee already today (milk and sugar optional) may have noticed something unusual in the expression binding example. Instead of having the literal “Good” outside of the embedded binding curly brackets, like this:

<Input enabled="false" description="Expression" value="Good{= ${/now}.getHours() > 11 ? 'afternoon' : 'morning'}" />

it’s like this, instead:

<Input enabled="false" description="Expression" value="{= 'Good ' + (${/now}.getHours() > 11 ? 'afternoon' : 'morning')}"

/>

30 Days of UI5 Page 12 of 88

} }); sap.ui.xmlview({ viewContent : jQuery("#view1").html() }) .setModel(new sap.ui.model.json.JSONModel({ now : new Date() })) .placeAt("content"); Result

This is because, currently, any literal string outside of the curly braces is rejected by the runtime.

Anyway, expression bindings are here, and they may be the sort of thing that you’re looking for. Possibly exactly what you’re looking for, if you’re considering XML Templating. But that’s a post for another time.

30 Days of UI5 Page 13 of 88

This is because, currently, any literal string outside of the curly braces is rejected by theXML Templating ​ . But that’s a post for another time. 30 Days of UI5 Page 13 of 88 " id="pdf-obj-12-12" src="pdf-obj-12-12.jpg">

Day 3 - Semantic Pages

by DJ Adams

My degree in Latin and Greek is not entirely without foundation or reason, and it provides me with

at least a small sense of origin when it comes to words. The 3rd declension noun σμα

conveys

the idea of a mark, a sign, a token. It refers to “meaning”, essentially, and the use in modern

languages of the word semantic often implies an abstraction, a layer that confers or allows meaning to be defined or carried.

What has that got to do with UI5 reaching release 1.30? Well, take a look at the fledgling Semantic Page. It’s the root of a series of new controls that are perhaps set to encourage standardisation of

Fiori UIs. The SAP Fiori Design Guidelines

describe a rich set of controls, but more importantly they

describe how those controls should be typically employed.

Floorplans such as the Split Screen

Layout and the Full Screen

are all fairly familiar to us. But

consistency comes from attention to a more granular level of detail, and the UI designers are

encouraged to place certain controls in standard places. A couple of examples: Action buttons

belong in the bottom right (in the footer) of a page, while the new Message Popover

from 1.28

belongs in the bottom left.

When SAP created Fiori application developer teams across the world to build out the Fiori apps that we see available today, it was almost inevitable that the different styles and approaches across teams and members would have resulted in a variety of structures, making it difficult to get the UX right, the UI consistent, and causing maintenance headaches. So SAP created scaffolding (sap.ca.scfld), a set of mechanisms that abstracted away a lot of the common boilerplate stuff allowing the developers to focus on the application logic (and preventing them from reinventing the boilerplate, slightly differently, every time). But this scaffolding was a little bit too monolithic, and I think the plan has been to phase it out.

I’m also thinking that the alternative could involve this set of semantic controls. Take a look at the

puts things in the appropriate place – at a

semantically meaningful level of abstraction above the individual mechanics of a Page control’s aggregations, for example.

It’s similar in the Semantic Page Full Screen sample

too. To get a feel for this level of abstraction,

at how the aggregations are filled – nowhere in this XML view definition does it say

where

the semantic controls should go:

30 Days of UI5 Page 14 of 88

Day 3 - Semantic Pages by DJ Adams My degree in Latin and Greek is notσ μ α ​ conveys the idea of a mark, a sign, a token. It refers to “meaning”, essentially, and the use in modern languages of the word semantic often implies an abstraction, a layer that confers or allows meaning to be defined or carried. What has that got to do with UI5 reaching release 1.30? Well, take a look at the fledgling ​ Semantic Page ​ . It’s the root of a series of new controls that are perhaps set to encourage standardisation of Fiori UIs. The ​ SAP Fiori Design Guidelines ​ describe a rich set of controls, but more importantly they describe how those controls should be typically employed. Floorplans such as the ​ Split Screen ​ Layout and the ​ Full Screen ​ are all fairly familiar to us. But consistency comes from attention to a more granular level of detail, and the UI designers are encouraged to place certain controls in standard places. A couple of examples: Action buttons belong in the bottom right (in the footer) of a page, while the new ​ Message Popover ​ from 1.28 belongs in the bottom left. When SAP created Fiori application developer teams across the world to build out ​ the Fiori apps that we see available today, it was almost inevitable that the different styles and approaches across teams and members would have resulted in a variety of structures, making it difficult to get the UX right, the UI consistent, and causing maintenance headaches. So SAP created scaffolding (sap.ca.scfld), a set of mechanisms that abstracted away a lot of the common boilerplate stuff allowing the developers to focus on the application logic (and preventing them from reinventing the boilerplate, slightly differently, every time). But this scaffolding was a little bit too monolithic, and I think the plan has been to phase it out. I’m also thinking that the alternative could involve this set of semantic controls. Take a look at the way the ​ Semantic Page Master-Detail sample ​ puts things in the appropriate place – at a semantically meaningful level of abstraction above the individual mechanics of a Page control’s aggregations, for example. It’s similar in the ​ Semantic Page Full Screen sample ​ too. To get a feel for this level of abstraction, take a look ​ at how the aggregations are filled – nowhere in this XML view definition does it say where ​ the semantic controls should go: 30 Days of UI5 Page 14 of 88 " id="pdf-obj-13-99" src="pdf-obj-13-99.jpg">
What we seem to have so far is a small hierarchy of Page based controls, thatplenty of semantic controls ​ too. It doesn’t replace the breadth of functionality that the scaffolding offered, but it’s a start, and it feels more modular. A namespace to watch! 30 Days of UI5 Page 15 of 88 " id="pdf-obj-14-2" src="pdf-obj-14-2.jpg">

What we seem to have so far is a small hierarchy of Page based controls, that looks like this:

SemanticPage

|

+------------------------------+

|

|

MasterPage

ShareMenuPage

|

+---------------+

| DetailPage FullscreenPage

|

And there are plenty of semantic controls

too. It doesn’t replace the breadth of functionality that

the scaffolding offered, but it’s a start, and it feels more modular. A namespace to watch!

30 Days of UI5 Page 15 of 88

What we seem to have so far is a small hierarchy of Page based controls, thatplenty of semantic controls ​ too. It doesn’t replace the breadth of functionality that the scaffolding offered, but it’s a start, and it feels more modular. A namespace to watch! 30 Days of UI5 Page 15 of 88 " id="pdf-obj-14-44" src="pdf-obj-14-44.jpg">

Day 4 - Creating Native Applications with UI5

by John Murray

Whilst web apps are great, and suit the vast majority of situations perfectly, sometimes they just don’t quite cut the mustard. It is in these situations that we are presented with a difficult choice, do we take option A – Sacrifice the features which are specific to native applications for the sake of sticking with UI5 and the benefits that web apps bring? Or do we go with option B – Sacrifice UI5 and the web app benefits, instead going with native code, but then have access to all the features? Well, even in the not-so-distant past we would have to weigh up the pros and cons of each option and make our decision accordingly.

More recently, we were provided with an option C – Use PhoneGap

to make our application like a

web app, using UI5 and an assortment of plugins to achieve our ends. However, this option was not without its own challenges and problems; you had to install libraries for all platforms you wished to build for, then structure everything in a rather precise manner, and to top it all off you then had to battle with the rather clunky command line interface. This did of course improve over time and after you had your setup and work flow down to a tee, but it was never smooth sailing. Thankfully though, we now have an option D!

Option D is PhoneGap Build, a service which takes everything that is great about standard PhoneGap and then removes everything that is bad about it, providing a fast and streamlined experience. This service is freely available, and will allow you to have a native version of your UI5 app up and running within minutes.

As an overview, you create your UI5 application as you would normally, except this time you also include a config.xml file in the root folder. It is this file which the Build service uses to create your application, you simply specify the location of your index.html file and reference any plugins you wish to use. You then zip up all of your code and upload it to their website, and it will automatically build a native app for Android, iOS and Windows Phone in a matter of minutes.

For more a more thorough getting started guide on all of this, I am currently writing an in depth blog series on my own website, the first part of which can be found here – UI5 and PhoneGap Build: First Steps.

30 Days of UI5 Page 16 of 88

Day 4 - Creating Native Applications with UI5 by John Murray Whilst web apps are great,PhoneGap ​ to make our application like a web app, using UI5 and an assortment of plugins to achieve our ends. However, this option was not without its own challenges and problems; you had to install libraries for all platforms you wished to build for, then structure everything in a rather precise manner, and to top it all off you then had to battle with the rather clunky command line interface. This did of course improve over time and after you had your setup and work flow down to a tee, but it was never smooth sailing. Thankfully though, we now have an option D! Option D is ​ PhoneGap Build, a service which takes everything that is great about standard PhoneGap and then removes everything that is bad about it, providing a fast and streamlined experience. This service is freely available, and will allow you to have a native version of your UI5 app up and running within minutes. As an overview, you create your UI5 application as you would normally, except this time you also include a config.xml file in the root folder. It is this file which the Build service uses to create your application, you simply specify the location of your index.html file and reference any plugins you wish to use. You then zip up all of your code and upload it to their website, and it will automatically build a native app for Android, iOS and Windows Phone in a matter of minutes. For more a more thorough getting started guide on all of this, I am currently writing an in depth blog series on my own website, the first part of which can be found here – ​ UI5 and PhoneGap Build: First Steps ​ . 30 Days of UI5 Page 16 of 88 " id="pdf-obj-15-34" src="pdf-obj-15-34.jpg">

Day 5 - OpenUI5 Walkthrough

by DJ Adams

Day 5 - OpenUI5 Walkthrough by DJ Adams OpenUI5, like it’s twin sibling SAPUI5, has aSDK ​ . The SDK contains plenty of example code snippets, especially in the Explored app. Up until version 1.20 the Explored app was “just another” app in the Demo Apps section, but after that it was (rightly) promoted to prominence at the top level of the SDK menu structure. The latest addition to Explored is a set of ​ code examples ​ that accompany a great multi-step ​ walkthrough ​ of many of the features and practices of UI5 development. A number of things are changing in release 1.30, including the introduction of the application descriptor, and a new way of defining modules. This walkthrough covers these topics and many others too. It’s well worth a look. One thing that immediately caught my eye was when I selected the appropriate Explored sample that corresponded to Step 30 of the walkthrough, describing the ​ Debugging Tools ​ UI5 Diagnostics Tool popped up out of nowhere! : the excellent (I’m a big fan of this tool; there’s so much information it offers, as a UI5 developer you can’t afford to ignore its help.) I was curious as to how this automatic opening of the tool had been achieved, and a quick look at the appropriate webapp/Component.js asset in the ​ sample’s code section ​ gave me the answer: jQuery.sap.require("sap.ui.core.support.Support"); var oSupport = sap.ui.core.support.Support.getStub("APPLICATION"); oSupport.openSupportTool(); Nice! 30 Days of UI5 Page 17 of 88 " id="pdf-obj-16-6" src="pdf-obj-16-6.jpg">

OpenUI5, like it’s twin sibling SAPUI5, has a great SDK.

The SDK contains plenty of example code snippets, especially in the Explored app. Up until version 1.20 the Explored app was “just another” app in the Demo Apps section, but after that it was (rightly) promoted to prominence at the top level of the SDK menu structure.

The latest addition to Explored is a set of code examples

that

accompany a great multi-step walkthrough

of many of the

features and practices of UI5 development. A number of things are changing in release 1.30, including the introduction of the application descriptor, and a new way of defining modules. This walkthrough covers these topics and many others too. It’s well worth a look.

One thing that immediately caught my eye was when I selected the appropriate Explored sample

that corresponded to Step 30 of the walkthrough, describing the Debugging ToolsUI5 Diagnostics Tool popped up out of nowhere!

: the excellent

Day 5 - OpenUI5 Walkthrough by DJ Adams OpenUI5, like it’s twin sibling SAPUI5, has aSDK ​ . The SDK contains plenty of example code snippets, especially in the Explored app. Up until version 1.20 the Explored app was “just another” app in the Demo Apps section, but after that it was (rightly) promoted to prominence at the top level of the SDK menu structure. The latest addition to Explored is a set of ​ code examples ​ that accompany a great multi-step ​ walkthrough ​ of many of the features and practices of UI5 development. A number of things are changing in release 1.30, including the introduction of the application descriptor, and a new way of defining modules. This walkthrough covers these topics and many others too. It’s well worth a look. One thing that immediately caught my eye was when I selected the appropriate Explored sample that corresponded to Step 30 of the walkthrough, describing the ​ Debugging Tools ​ UI5 Diagnostics Tool popped up out of nowhere! : the excellent (I’m a big fan of this tool; there’s so much information it offers, as a UI5 developer you can’t afford to ignore its help.) I was curious as to how this automatic opening of the tool had been achieved, and a quick look at the appropriate webapp/Component.js asset in the ​ sample’s code section ​ gave me the answer: jQuery.sap.require("sap.ui.core.support.Support"); var oSupport = sap.ui.core.support.Support.getStub("APPLICATION"); oSupport.openSupportTool(); Nice! 30 Days of UI5 Page 17 of 88 " id="pdf-obj-16-43" src="pdf-obj-16-43.jpg">

(I’m a big fan of this tool; there’s so much information it offers, as a UI5 developer you can’t afford to ignore its help.)

I was curious as to how this automatic opening of the tool had been achieved, and a quick look at

the appropriate webapp/Component.js asset in the sample’s code section

gave me the answer:

jQuery.sap.require("sap.ui.core.support.Support"); var oSupport = sap.ui.core.support.Support.getStub("APPLICATION"); oSupport.openSupportTool();

Nice!

30 Days of UI5 Page 17 of 88

Day 5 - OpenUI5 Walkthrough by DJ Adams OpenUI5, like it’s twin sibling SAPUI5, has aSDK ​ . The SDK contains plenty of example code snippets, especially in the Explored app. Up until version 1.20 the Explored app was “just another” app in the Demo Apps section, but after that it was (rightly) promoted to prominence at the top level of the SDK menu structure. The latest addition to Explored is a set of ​ code examples ​ that accompany a great multi-step ​ walkthrough ​ of many of the features and practices of UI5 development. A number of things are changing in release 1.30, including the introduction of the application descriptor, and a new way of defining modules. This walkthrough covers these topics and many others too. It’s well worth a look. One thing that immediately caught my eye was when I selected the appropriate Explored sample that corresponded to Step 30 of the walkthrough, describing the ​ Debugging Tools ​ UI5 Diagnostics Tool popped up out of nowhere! : the excellent (I’m a big fan of this tool; there’s so much information it offers, as a UI5 developer you can’t afford to ignore its help.) I was curious as to how this automatic opening of the tool had been achieved, and a quick look at the appropriate webapp/Component.js asset in the ​ sample’s code section ​ gave me the answer: jQuery.sap.require("sap.ui.core.support.Support"); var oSupport = sap.ui.core.support.Support.getStub("APPLICATION"); oSupport.openSupportTool(); Nice! 30 Days of UI5 Page 17 of 88 " id="pdf-obj-16-62" src="pdf-obj-16-62.jpg">

Day 6 - The App Descriptor

by Thilo Seidel

Writing your component based applications in UI5 you might be familiar with a long list of settings in your metadata section making you scroll down for hours before reaching the point where the first violin plays. This is not only annoying but in fact bad design as it means to mix static configuration in large amounts with actual code.

One way to solve this is the usage of a manifest file – one central asset that holds your entire application configuration. The UI5 creators have drawn inspiration from the W3C manifest for a web application concept that is currently under investigation and create an UI5 flavored version of it. The app descriptor in UI5 is basically a JSON file named manifest.json that is expected in the same folder your component lives in. All you need to do to get started is to add an attribute manifest with the value “json” to your component metadata.

Introduced in 1.28 in a basic version, with upcoming 1.30 it is even smarter. Beyond static configuration for packaging and deployment it even helps to save you some code, especially when it comes to model instantiation. The manifest itself is structured in namespaces of which we want to briefly look into sap.app and sap.ui5 for this case. More details and examples can be found in the 1.30 documentation preview.

sap.app:

Mostly app specific attributes can be found here. You can also get set for your data model and resource bundle here. One property called ‘dataSources’ expects an object that holds the URL to your service, the service type and some additional settings if needed. A full blown service configuration would look like this:

Day 6 - The App Descriptor by Thilo Seidel Writing your component based applications in UI51.30 documentation preview ​ . sap.app: Mostly app specific attributes can be found here. You can also get set for your data model and resource bundle here. One property called ‘dataSources’ expects an object that holds the URL to your service, the service type and some additional settings if needed. A full blown service configuration would look like this: 30 Days of UI5 Page 18 of 88 " id="pdf-obj-17-20" src="pdf-obj-17-20.jpg">

30 Days of UI5 Page 18 of 88

Day 6 - The App Descriptor by Thilo Seidel Writing your component based applications in UI51.30 documentation preview ​ . sap.app: Mostly app specific attributes can be found here. You can also get set for your data model and resource bundle here. One property called ‘dataSources’ expects an object that holds the URL to your service, the service type and some additional settings if needed. A full blown service configuration would look like this: 30 Days of UI5 Page 18 of 88 " id="pdf-obj-17-24" src="pdf-obj-17-24.jpg">

If you have more than one service you can simply add another object to this attribute. These can later be referenced by the given name. In addition we added the relative path to the i18n file here and will make use of this later as well.

sap.ui5:

This namespace is used for any configuration that can be used by the UI5 runtime directly. This counts for the routing configuration, but also for UI5 library dependencies and of course our case with the model instantiation.

For i18n it is pretty straightforward and a named i18n resource model (named “i18n”) will be created by the UI5 runtime. For the actual data model(s) you can also specify a name or keep it blank for an unnamed data model like this. Just set the datasource specified earlier and UI5 will handle the rest. The created models will be at your command as early as in the init function of your component.

If you have more than one service you can simply add another object to this attribute.

To conclude this is only a snapshot of one little feature that is built into the new UI5 manifest, but showcases pretty well how this new file will ease your development routines, help to clean up your components and limit repetitive lines of code.

30 Days of UI5 Page 19 of 88

If you have more than one service you can simply add another object to this attribute.

Day 7 - JavaScript Do's and Don'ts for UI5

by DJ Adams

In recent versions of the SDK you’ll find a new section called Coding Issues to Avoid“. It’s great to see this take shape and start to become formalised. Some of them are obvious, at least to some folk, but it’s always helpful to have a reference.

Let’s have a look at a couple of the Do’s and Don’ts here.

Day 7 - JavaScript Do's and Don'ts for UI5 by DJ Adams In recent versions of“ ​ Coding Issues to Avoid ​ “. It’s great to see this take shape and start to become formalised. Some of them are obvious, at least to some folk, but it’s always helpful to have a reference. Let’s have a look at a couple of the Do’s and Don’ts here. The top item on my list is “Don’t use private and protected methods or properties of UI5 ″ . Far too often, I see code that refers to internal properties of UI5 controls, especially to the arrays and maps that are managed internally (for the aggregations, for example). I think it’s fair to say that 98% of the time, the use here is totally wrong, and there’s a public API to give you what you want. There have been a couple of instances in the past where I’ve seen something for which there appeared no equivalent ‘legal’ alternative, but that could be down to API maturity, or lack of documentation. Related to this item is almost the antithesis, which is to use (create) properties that inadvertently clobber properties of the same name in an existing context. A great example of this is within a controller definition. There’s a nice pattern, which can be seen in many places including the reference apps in the SAP Web IDE, where in any given controller you would create controller properties to refer to the related view, and often the domain or view properties model, in the init event, like this: sap.ui.controller("local.controller", { _oView : null, onInit : function() { this._oView }, = this.getView(); onSomeEvent : function(oEvent) { ... this._oView.someFunction(...); 30 Days of UI5 Page 20 of 88 " id="pdf-obj-19-15" src="pdf-obj-19-15.jpg">

The top item on my list is “Don’t use private and protected methods or properties of UI5. Far too often, I see code that refers to internal properties of UI5 controls, especially to the arrays and maps that are managed internally (for the aggregations, for example). I think it’s fair to say that 98% of the time, the use here is totally wrong, and there’s a public API to give you what you want. There have been a couple of instances in the past where I’ve seen something for which there appeared no equivalent ‘legal’ alternative, but that could be down to API maturity, or lack of documentation.

Related to this item is almost the antithesis, which is to use (create) properties that inadvertently clobber properties of the same name in an existing context. A great example of this is within a controller definition. There’s a nice pattern, which can be seen in many places including the reference apps in the SAP Web IDE, where in any given controller you would create controller properties to refer to the related view, and often the domain or view properties model, in the init event, like this:

sap.ui.controller("local.controller", {

_oView : null,

onInit : function() {

this._oView

},

= this.getView();

onSomeEvent : function(oEvent) { ... this._oView.someFunction(...);

30 Days of UI5 Page 20 of 88

Day 7 - JavaScript Do's and Don'ts for UI5 by DJ Adams In recent versions of“ ​ Coding Issues to Avoid ​ “. It’s great to see this take shape and start to become formalised. Some of them are obvious, at least to some folk, but it’s always helpful to have a reference. Let’s have a look at a couple of the Do’s and Don’ts here. The top item on my list is “Don’t use private and protected methods or properties of UI5 ″ . Far too often, I see code that refers to internal properties of UI5 controls, especially to the arrays and maps that are managed internally (for the aggregations, for example). I think it’s fair to say that 98% of the time, the use here is totally wrong, and there’s a public API to give you what you want. There have been a couple of instances in the past where I’ve seen something for which there appeared no equivalent ‘legal’ alternative, but that could be down to API maturity, or lack of documentation. Related to this item is almost the antithesis, which is to use (create) properties that inadvertently clobber properties of the same name in an existing context. A great example of this is within a controller definition. There’s a nice pattern, which can be seen in many places including the reference apps in the SAP Web IDE, where in any given controller you would create controller properties to refer to the related view, and often the domain or view properties model, in the init event, like this: sap.ui.controller("local.controller", { _oView : null, onInit : function() { this._oView }, = this.getView(); onSomeEvent : function(oEvent) { ... this._oView.someFunction(...); 30 Days of UI5 Page 20 of 88 " id="pdf-obj-19-39" src="pdf-obj-19-39.jpg">

}

});

...

But sometimes the developer, averse to underscores, will write it like this:

sap.ui.controller("local.controller", {

oView : null,

onInit : function() { this.oView = this.getView(); },

onSomeEvent : function(oEvent) { ... this.oView.someFunction(...); ...

}

});

What actually happens is that the call to

this.oView = this.getView();

is clobbering the internal property oView of ‘this’ (the controller), which is pointing at the view it’s related to. Luckily what it’s being clobbered with in this small (underscore-less) antipattern is another reference to the view itself, so not much immediate harm done, but it’s not entirely safe or future proof.

Another interesting best practice described in this section of the SDK relates to internationalisation (i18n). What one should do is to use placeholders (such as {0}) in more complete sentences in translateable resources. What one often finds is that application texts are fragmented into short phrases and built up with concatenation, along with variables.

The problem is that sentence structure varies across languages – as described in the “Don’t” example in this section, a typical example is where the verb goes. It’s better to avoid programmatic text construction, and leave it to the translation experts. Go long, and go home.

Anyway, have a look at the rest of this JavaScript Code Issues

section in the SDK, plus there’s a CSS

section too!

30 Days of UI5 Page 21 of 88

} }); ... But sometimes the developer, averse to underscores, will write it like this: sap.ui.controller("local.controller",JavaScript Code Issues ​ section in the SDK, plus there’s a ​ CSS Styling Issues ​ section too! 30 Days of UI5 Page 21 of 88 " id="pdf-obj-20-48" src="pdf-obj-20-48.jpg">

Day 8 - User Notifications with the Message Popover

by Sean Campbell

Giving an end user good feedback regarding their interaction with the application or the application’s interactions with the back end has always been a bit of a challenge in UI5. Until recently pretty much every developer had a different style of capturing and exposing messages, with many of us building our own message log solutions. This lost a level of the “Enterprise” uniformity that is often required for our applications.

In recent releases however SAP and OpenUI5 have provided a very robust and uniformed way of exposing these messages.

Day 8 - User Notifications with the Message Popover by Sean Campbell Giving an end userhttp://jsbin.com/somuxu/3/edit ​ : 30 Days of UI5 Page 22 of 88 " id="pdf-obj-21-10" src="pdf-obj-21-10.jpg">

Now users can expect message to be shown in a clear and concise way, that is the same across all UI5 applications; no more are we hacking around arrays to provide our own message logs. From the bright colours to the simple click through to view a more detailed message, everything about this control has been aimed at the user who expects clear interactions, even Web Dynpro Java (WDJ) handled messages better than early UI5.

In the example below I have mocked up a couple of Buttons that trigger the Popover in its two “States”. I tend to lean towards the full Popover as its easy to see a full list of the most recent messages. However I can see good use cases, in mobile apps for example, where the condensed popover would be best. As shown in Day 3 of this series, on Semantic Pages, the footer bar makes a nice place for the Button that controls the Popover.

Here's an example, available at http://jsbin.com/somuxu/3/edit:

30 Days of UI5 Page 22 of 88

Day 8 - User Notifications with the Message Popover by Sean Campbell Giving an end userhttp://jsbin.com/somuxu/3/edit ​ : 30 Days of UI5 Page 22 of 88 " id="pdf-obj-21-24" src="pdf-obj-21-24.jpg">
This control still isn’t perfect and there are a number of improvements I could see being

This control still isn’t perfect and there are a number of improvements I could see being added over the next few iterations but it is certainly a dramatic leap in the right direction for UI5 and user interaction. The ability to easily delete messages would be nice along with a way to prevent duplication on error.

A nice touch that can be done relatively simply is to alter the look and feel of the Button dependent upon the level of messages that have been posted. Those that have been following this series will have read DJ’s post on Expression Binding from Day 2 of this series. This would be a great way to derive the icon in the Button, to be based upon the “Highest” status message. Doing this gives the user feedback without them even opening the Message Popover and to me giving a user feedback at the earliest possible time is always going to give them the best experience.

30 Days of UI5 Page 23 of 88

This control still isn’t perfect and there are a number of improvements I could see being

Day 9 - Bootstrapping UI5 Locally and in the Cloud

by DJ Adams

Like many developers who find themselves building a lot with UI5, I find my working environment is mostly a local one, supplemented by activities in the cloud.

Local Environment

More precisely, while I often use the excellent SAP Web IDE

– for

Day 9 - Bootstrapping UI5 Locally and in the Cloud by DJ Adams Like many developersSAP Web IDE ​ – for training, generating starter projects and custom Fiori work, my main development workflow is based upon tools that are local to my workstation. In my particular case, that’s most often my MacBook Pro running OSX, but sometimes a Debian-based environment running in a chroot on my Chromebook, courtesy of the awesome ​ crouton ​ project. I use tools that work for me, that don’t get in the way of my flow, and at the bare essentials level, that means a decent editor (Vim or Atom), a local webserver (based on NodeJS), and a runtime platform that doubles as debugging, tracing and development (Chrome). Cloud Environment When I’m working in the cloud, specifically with the SAP Web IDE, the toolset is totally different. Not only that, but the bootstrapping of UI5 works slightly differently. In this short post, I wanted to explain what I do to flatten any speedbumps when transitioning between the two environments. The worst thing for me would be to have to alter my codebase slightly to take account of different runtime environments. Different UI5 Versions Locally, I maintain a variety of different UI5 versions, that I’ve picked up over the months and years. You never know when you’ll need to go back to a previous version, or even look through the complete history, to see how something has changed. This is what the contents my local ~/ui5/ folder look like: 30 Days of UI5 Page 24 of 88 " id="pdf-obj-23-17" src="pdf-obj-23-17.jpg">

training, generating starter projects and custom Fiori work, my main development workflow is based upon tools that are local to my workstation. In my particular case, that’s most often my

MacBook Pro running OSX, but sometimes a Debian-based environment running in a chroot on my

Chromebook, courtesy of the awesome crouton

project. I use tools that work for me, that don’t

get in the way of my flow, and at the bare essentials level, that means a decent editor (Vim or Atom), a local webserver (based on NodeJS), and a runtime platform that doubles as debugging, tracing and development (Chrome).

Cloud Environment

When I’m working in the cloud, specifically with the SAP Web IDE, the toolset is totally different. Not only that, but the bootstrapping of UI5 works slightly differently. In this short post, I wanted to explain what I do to flatten any speedbumps when transitioning between the two environments. The worst thing for me would be to have to alter my codebase slightly to take account of different runtime environments.

Different UI5 Versions

Locally, I maintain a variety of different UI5 versions, that I’ve picked up over the months and years. You never know when you’ll need to go back to a previous version, or even look through the complete history, to see how something has changed. This is what the contents my local ~/ui5/ folder look like:

30 Days of UI5 Page 24 of 88

Day 9 - Bootstrapping UI5 Locally and in the Cloud by DJ Adams Like many developersSAP Web IDE ​ – for training, generating starter projects and custom Fiori work, my main development workflow is based upon tools that are local to my workstation. In my particular case, that’s most often my MacBook Pro running OSX, but sometimes a Debian-based environment running in a chroot on my Chromebook, courtesy of the awesome ​ crouton ​ project. I use tools that work for me, that don’t get in the way of my flow, and at the bare essentials level, that means a decent editor (Vim or Atom), a local webserver (based on NodeJS), and a runtime platform that doubles as debugging, tracing and development (Chrome). Cloud Environment When I’m working in the cloud, specifically with the SAP Web IDE, the toolset is totally different. Not only that, but the bootstrapping of UI5 works slightly differently. In this short post, I wanted to explain what I do to flatten any speedbumps when transitioning between the two environments. The worst thing for me would be to have to alter my codebase slightly to take account of different runtime environments. Different UI5 Versions Locally, I maintain a variety of different UI5 versions, that I’ve picked up over the months and years. You never know when you’ll need to go back to a previous version, or even look through the complete history, to see how something has changed. This is what the contents my local ~/ui5/ folder look like: 30 Days of UI5 Page 24 of 88 " id="pdf-obj-23-42" src="pdf-obj-23-42.jpg">
I use the NodeJS-based static_server.js script to serve files from this folder, as well as another

I use the NodeJS-based static_server.js script to serve files from this folder, as well as another folder which contains my UI5 projects. From here, I can access different UI5 versions by changing the location that the UI5 bootstrap looks. (Note that while I can and do often access older versions, I pretty much always develop against the latest version, unless there’s a good reason not to access to older versions is almost always for reference purposes.)

Usually I specify “latest” in the URL, which refers to the symbolic link in the folder above, which (via the use of the small “setlatest” script) in turn points to whatever folder represents the latest unpacked zip:

I use the NodeJS-based static_server.js script to serve files from this folder, as well as another

30 Days of UI5 Page 25 of 88

I use the NodeJS-based static_server.js script to serve files from this folder, as well as another

If I want to refer to an older version, I do so like this:

If I want to refer to an older version, I do so like this: The same

The same approach with the URL path applies to the contents of the “src” attribute in the UI5 bootstrap:

If I want to refer to an older version, I do so like this: The same

Harmonising Local and Cloud Bootrapping

However, this doesn’t play well with the SAP Web IDE, at least not directly. So I’ve come up with an approach that minimises the fuss and disruption when taking a UI5 app repo that I’ve developed locally, and cloning it for use in the SAP Web IDE on the HANA Cloud Platform (HCP) environment, or vice versa.

Let’s look at an almost empty UI5 project folder that I’ve created locally:

If I want to refer to an older version, I do so like this: The same

In it, we have the index.html which contains a UI5 bootstrap that looks like this:

30 Days of UI5 Page 26 of 88

If I want to refer to an older version, I do so like this: The same
The “src” attribute refers to a resources folder in the same location as the containing index.html.

The “src” attribute refers to a resources folder in the same location as the containing index.html. The value of this attribute (“resources/sap-ui-core.js”) is pretty much the de facto standard for “the location of the UI5 runtime”, so it’s sensible to change this only if you have a very good reason, if not only because you’re starting a battle that you might not want to see through.

If you look at the folder listing above, you’ll see that this resources folder is actually a symbolic link to the resources folder in the “latest” UI5 version, as described earlier (yes, so we have a symbolic link following a symbolic link). So we’re bootstrapping whatever the latest version of UI5 is.

We’re not interested in having this in our UI5 application repo (it would be of no use in most other contexts) so in our .gitignore file, we exclude it:

The “src” attribute refers to a resources folder in the same location as the containing index.html.

When we want to run the application in the HCP context, via SAP Web IDE, we use a mapping file that translates our bootstrap “src” attribute URL into a resource that is available globally on HCP. This mapping file is neo-app.json, and here, it contains this:

30 Days of UI5 Page 27 of 88

The “src” attribute refers to a resources folder in the same location as the containing index.html.
The path “resources” is mapped to the target “sapui5 ″ service at “/resources”. This means that

The path “resources” is mapped to the target “sapui5service at “/resources”. This means that the script element in our index.html can successfully resolve and bootstrap UI5 from the right place, with zero changes between my local environment and HCP.

With my “resources” symbolic link in place, along with the neo-app.json mapping, I can enjoy a smooth transition between local and cloud based development when I’m working on UI5 development with the latest version. It’s a simple technique; get it in place, and you could be looking at some happy productivity gains, without loss of any reference to older UI5 versions locally.

30 Days of UI5 Page 28 of 88

The path “resources” is mapped to the target “sapui5 ″ service at “/resources”. This means that

Day 10 - Handling Dates with the Date Picker

by James Hale

When creating applications, the experiences of the user should be one of the key considerations that drives build and development. One aspect of this is the way that data is entered, saved and displayed to the user, which can drastically affect the usability of an application.

For this short post, we’re going to take a look at the Date Picker, which is an input control in the OpenUI5 library used for simple capture of dates from the user. As we all know, dates can be somewhat of a nuisance to work with, especially when entering on small screens with particular formats. This control aims to ease this with a calendar style view of dates to select from.

Day 10 - Handling Dates with the Date Picker by James Hale When creating applications, theDate Picker ​ , which is an input control in the OpenUI5 library used for simple capture of dates from the user. As we all know, dates can be somewhat of a nuisance to work with, especially when entering on small screens with particular formats. This control aims to ease this with a calendar style view of dates to select from. It’s a simple, yet effective, little control that allows users to quickly select dates with a familiar and quick to use calendar style view. The control is also configurable to display different date formats based upon the displayFormat property, which can be useful when screen real estate is at a premium. By using controls like the Date Picker with dedicated input mechanisms, we can all aim to make our applications easier to use within the day to day lives of users. For additional controls focussed around date and time input, take a look at the ​ Date Range Selection ​ control when working with time periods, as well as the ​ Date Time Input ​ when making forms that handle dates and times together. 30 Days of UI5 Page 29 of 88 " id="pdf-obj-28-13" src="pdf-obj-28-13.jpg">

It’s a simple, yet effective, little control that allows users to quickly select dates with a familiar and quick to use calendar style view. The control is also configurable to display different date formats based upon the displayFormat property, which can be useful when screen real estate is at a premium.

By using controls like the Date Picker with dedicated input mechanisms, we can all aim to make our applications easier to use within the day to day lives of users.

For additional controls focussed around date and time input, take a look at the Date Range

control when working with time periods, as well as the Date Time Input

when making

forms that handle dates and times together.

30 Days of UI5 Page 29 of 88

Day 10 - Handling Dates with the Date Picker by James Hale When creating applications, theDate Picker ​ , which is an input control in the OpenUI5 library used for simple capture of dates from the user. As we all know, dates can be somewhat of a nuisance to work with, especially when entering on small screens with particular formats. This control aims to ease this with a calendar style view of dates to select from. It’s a simple, yet effective, little control that allows users to quickly select dates with a familiar and quick to use calendar style view. The control is also configurable to display different date formats based upon the displayFormat property, which can be useful when screen real estate is at a premium. By using controls like the Date Picker with dedicated input mechanisms, we can all aim to make our applications easier to use within the day to day lives of users. For additional controls focussed around date and time input, take a look at the ​ Date Range Selection ​ control when working with time periods, as well as the ​ Date Time Input ​ when making forms that handle dates and times together. 30 Days of UI5 Page 29 of 88 " id="pdf-obj-28-37" src="pdf-obj-28-37.jpg">

Day 11 - Lightweight notifications with the Message Strip

by DJ Adams

The Message Strip

is a nice new control with 1.30.

It’s in the main (sap.m) library of controls, and for me, appeals because it bridges the gap between no message at all, and a modal dialog box which is sometimes too heavyweight.

Day 11 - Lightweight notifications with the Message Strip by DJ Adams The ​ <a href=Message Strip ​ is a nice new control with 1.30. It’s in the main (sap.m) library of controls, and for me, appeals because it bridges the gap between no message at all, and a modal dialog box which is sometimes too heavyweight. (If you’re wondering about the ​ Message Toast ​ control, don’t forget that this lighter weight mechanism should only be used for “less important” messages such as informational messages on the successful completion of a step). The nice thing about the way that this has been designed is actually its simple, perhaps restrictive nature. A nature that will give apps a better chance of having consistent messaging. The possible message types are defined in the core ​ , and are displayed visually differently, via colour and icons. There’s an optional close button, and an optional link that is always displayed at the end of the message text. Pretty simple and neat. And that’s about it, which in most cases, is all that will be needed, to display a useful short message in line within the application UI, especially in the context of desktop based UI designs. If you want to manage messages in a more complete way, you might want to take a look at the Message Popover ​ . But don’t dismiss the new Message Strip, it may just be what you’re looking for. 30 Days of UI5 Page 30 of 88 " id="pdf-obj-29-15" src="pdf-obj-29-15.jpg">

(If you’re wondering about the Message Toast

control, don’t forget that this lighter weight

mechanism should only be used for “less important” messages such as informational messages on

the successful completion of a step).

The nice thing about the way that this has been designed is actually its simple, perhaps restrictive nature. A nature that will give apps a better chance of having consistent messaging. The possible message types are defined in the core, and are displayed visually differently, via colour and icons. There’s an optional close button, and an optional link that is always displayed at the end of the message text. Pretty simple and neat.

And that’s about it, which in most cases, is all that will be needed, to display a useful short message in line within the application UI, especially in the context of desktop based UI designs. If you want to manage messages in a more complete way, you might want to take a look at the Message Popover. But don’t dismiss the new Message Strip, it may just be what you’re looking for.

30 Days of UI5 Page 30 of 88

Day 11 - Lightweight notifications with the Message Strip by DJ Adams The ​ <a href=Message Strip ​ is a nice new control with 1.30. It’s in the main (sap.m) library of controls, and for me, appeals because it bridges the gap between no message at all, and a modal dialog box which is sometimes too heavyweight. (If you’re wondering about the ​ Message Toast ​ control, don’t forget that this lighter weight mechanism should only be used for “less important” messages such as informational messages on the successful completion of a step). The nice thing about the way that this has been designed is actually its simple, perhaps restrictive nature. A nature that will give apps a better chance of having consistent messaging. The possible message types are defined in the core ​ , and are displayed visually differently, via colour and icons. There’s an optional close button, and an optional link that is always displayed at the end of the message text. Pretty simple and neat. And that’s about it, which in most cases, is all that will be needed, to display a useful short message in line within the application UI, especially in the context of desktop based UI designs. If you want to manage messages in a more complete way, you might want to take a look at the Message Popover ​ . But don’t dismiss the new Message Strip, it may just be what you’re looking for. 30 Days of UI5 Page 30 of 88 " id="pdf-obj-29-40" src="pdf-obj-29-40.jpg">

Day 12 - Base Classes in UI5

by Thilo Seidel

Learning your way around UI5 can be hard sometimes. With the new tutorials and improved structure in the developer guide, help on the journey to UI5 mastery has got better over the last few months.

But if you really want understand the UI5 magic in all its depth you might want to dig a little deeper. For my part I can truly recommend going back to the roots to have a look into the UI5 base classes. They are properly lined up like a string of pearls building upon each other and forming the high level architectural blueprint of the toolkit as a whole.

Day 12 - Base Classes in UI5 by Thilo Seidel Learning your way around UI5 can

All UI5 base classes come with a set of metadata, basically simple json that may hold additional information describing the instance. In addition this metadata has an underlying metadata implementation that provides helper functions, validation logic and some more convenience.

30 Days of UI5 Page 31 of 88

Day 12 - Base Classes in UI5 by Thilo Seidel Learning your way around UI5 can

sap.ui.base.Object

This “instance plus metadata” concept is introduced already with sap.ui.base.Object, the first in line and mostly everything you want to instantiate in UI5 will be inheriting from it. Its children are mostly workers like classes taking care of parsing, or basic data carrying objects like the event implementation.

sap.ui.base.EventProvider

While Object is only setting the stage, sap.ui.base.EventProvider is the first to actually have capabilities to share. And you might have guessed it from the name already: the Event Provider introduces eventing in UI5. With functions to attach, detach and fire events, its toolkit is only small compared to what is still to come. Nevertheless, it is the starting point for most of the key features in UI5. Model, Binding, Router, at the heart they are all “just” Event Providers.

sap.ui.base.ManagedObject

Next in line is a heavyweight champion when you compare it with its predecessor: the sap.ui.base.ManagedObject. It is the herald for all instances that later will be rendered as it introduces properties, aggregations and associations in the metadata. It will never be rendered, but it sets the stage and extends the metadata implementation adding getters and setters for the fields that are introduced. Moreover it allows for data binding and might even have its own model. The most prominent example is the Component.

sap.ui.core.Element

The first base class that might have a place in the DOM is the sap.ui.core.Element. It has to be said that the Element itself has normally no renderer on its own and therefore is not to be placed standalone into the DOM. But it is the class you want to use in aggregations of your own controls with the list item as one of its best known subclasses. It is the one that completes the metadata implementation for base classes.

sap.ui.core.Control

Last up for this journey through UI5 architecture is the sap.ui.core.Control with children that are full blown UI elements. The last few thing that are still missing are introduced now. Besides direct DOM placement and the renderer it is basically picking up the last pieces with the busy-state and ability to handle browser events. And of course, every real UI-control has learned from Control.

sap.ui.core.Core

This post gives just the briefest of UI5 architecture overviews, covering only the bare essentials. There is much more to discover in that respect and I highly recommend you check out the entire package from GitHub and go exploring. There are definitely some gems hidden deep in the UI5

30 Days of UI5 Page 32 of 88

sap.ui.base.Object This “instance plus metadata” concept is introduced already with sap.ui.base.Object, the first in line and

repository. Just one more for now, the sap.ui.core.Core, her majesty itself. And you might have guessed it, humble as she is, she downgraded herself recently and finally is nothing more than a (Base) Object.

30 Days of UI5 Page 33 of 88

repository. Just one more for now, the sap.ui.core.Core, her majesty itself. And you might have guessed

Day 13 - Multi language support out of the box – UI5’s pedigree

by DJ Adams

I was browsing through the controls that were new with 1.28, using the OpenUI5 SDK’s Explored app’s filter-by-release feature, and came across

the Message Page

control.

Day 13 - Multi language support out of the box – UI5’s pedigree by DJ AdamsMessage Page ​ control. What caught my eye was the text on the control. When you think about it, there aren’t that many controls that have default text on them. Looking into how this would work in other locales (this control as you see it would only make immediate sense in English-speaking countries), and how the text was specified, led me down a path that ended up at a place that reminded me of OpenUI5’s pedigree. Born inside of SAP, the enterprise scale thinking permeates throughout the toolkit, and is very visible in this context. In ​ the init function of MessagePage.js ​ you can see that the control’s text property is being set to the value of the MESSAGE_PAGE_TEXT property in the message resource bundle: This ​ MESSAGE_PAGE_TEXT property in the base resource file messagebundle.properties ​ value “No matching items found.”: has the Even if you know only a little about how resource models work, you may realise that there’s more to it than this. There are actually 39 different translated versions of this base resource 30 Days of UI5 Page 34 of 88 " id="pdf-obj-33-15" src="pdf-obj-33-15.jpg">

What caught my eye was the text on the control. When you think about it, there aren’t that many controls that have default text on them.

Looking into how this would work in other locales (this control as you see it would only make immediate sense in English-speaking countries), and how the text was specified, led me down a path that ended up at a place that reminded me of OpenUI5’s pedigree. Born inside of SAP, the enterprise scale thinking permeates throughout the toolkit, and is very visible in this context.

you can see that the control’s text property is being set to

the value of the MESSAGE_PAGE_TEXT property in the message resource bundle:

Day 13 - Multi language support out of the box – UI5’s pedigree by DJ AdamsMessage Page ​ control. What caught my eye was the text on the control. When you think about it, there aren’t that many controls that have default text on them. Looking into how this would work in other locales (this control as you see it would only make immediate sense in English-speaking countries), and how the text was specified, led me down a path that ended up at a place that reminded me of OpenUI5’s pedigree. Born inside of SAP, the enterprise scale thinking permeates throughout the toolkit, and is very visible in this context. In ​ the init function of MessagePage.js ​ you can see that the control’s text property is being set to the value of the MESSAGE_PAGE_TEXT property in the message resource bundle: This ​ MESSAGE_PAGE_TEXT property in the base resource file messagebundle.properties ​ value “No matching items found.”: has the Even if you know only a little about how resource models work, you may realise that there’s more to it than this. There are actually 39 different translated versions of this base resource 30 Days of UI5 Page 34 of 88 " id="pdf-obj-33-30" src="pdf-obj-33-30.jpg">

has the

Day 13 - Multi language support out of the box – UI5’s pedigree by DJ AdamsMessage Page ​ control. What caught my eye was the text on the control. When you think about it, there aren’t that many controls that have default text on them. Looking into how this would work in other locales (this control as you see it would only make immediate sense in English-speaking countries), and how the text was specified, led me down a path that ended up at a place that reminded me of OpenUI5’s pedigree. Born inside of SAP, the enterprise scale thinking permeates throughout the toolkit, and is very visible in this context. In ​ the init function of MessagePage.js ​ you can see that the control’s text property is being set to the value of the MESSAGE_PAGE_TEXT property in the message resource bundle: This ​ MESSAGE_PAGE_TEXT property in the base resource file messagebundle.properties ​ value “No matching items found.”: has the Even if you know only a little about how resource models work, you may realise that there’s more to it than this. There are actually 39 different translated versions of this base resource 30 Days of UI5 Page 34 of 88 " id="pdf-obj-33-40" src="pdf-obj-33-40.jpg">

Even if you know only a little about how resource models work, you may realise that there’s more to it than this. There are actually 39 different translated versions of this base resource

30 Days of UI5 Page 34 of 88

Day 13 - Multi language support out of the box – UI5’s pedigree by DJ AdamsMessage Page ​ control. What caught my eye was the text on the control. When you think about it, there aren’t that many controls that have default text on them. Looking into how this would work in other locales (this control as you see it would only make immediate sense in English-speaking countries), and how the text was specified, led me down a path that ended up at a place that reminded me of OpenUI5’s pedigree. Born inside of SAP, the enterprise scale thinking permeates throughout the toolkit, and is very visible in this context. In ​ the init function of MessagePage.js ​ you can see that the control’s text property is being set to the value of the MESSAGE_PAGE_TEXT property in the message resource bundle: This ​ MESSAGE_PAGE_TEXT property in the base resource file messagebundle.properties ​ value “No matching items found.”: has the Even if you know only a little about how resource models work, you may realise that there’s more to it than this. There are actually 39 different translated versions of this base resource 30 Days of UI5 Page 34 of 88 " id="pdf-obj-33-46" src="pdf-obj-33-46.jpg">

representing many languages (more specifically locales) into which this control (and other controls) have been translated:

representing many languages (more specifically locales) into which this control (and other controls) have been translated:Hebrew ​ (“iw”), with RTL kicking in automatically: 30 Days of UI5 Page 35 of 88 " id="pdf-obj-34-4" src="pdf-obj-34-4.jpg">

Let’s have a look at a few (with the second grep I’m omitting those that have Unicode encodings, because they’re hard to read):

representing many languages (more specifically locales) into which this control (and other controls) have been translated:Hebrew ​ (“iw”), with RTL kicking in automatically: 30 Days of UI5 Page 35 of 88 " id="pdf-obj-34-8" src="pdf-obj-34-8.jpg">

And of course, not only does UI5’s pedigree extend to just translations, right-to-left (RTL) is also supported, out of the box.

Let’s bring this post to a close with a couple of examples. Don’t forget you can explicitly specify the language or locale with a special query parameter “sap-language” in the URL.

Here’s Hebrew

(“iw”), with RTL kicking in automatically:

30 Days of UI5 Page 35 of 88

representing many languages (more specifically locales) into which this control (and other controls) have been translated:Hebrew ​ (“iw”), with RTL kicking in automatically: 30 Days of UI5 Page 35 of 88 " id="pdf-obj-34-26" src="pdf-obj-34-26.jpg">
And to finish, how about ​ <a href=another language ​ : (See what I did there? :-) 30 Days of UI5 Page 36 of 88 " id="pdf-obj-35-2" src="pdf-obj-35-2.jpg">

And to finish, how about another language:

And to finish, how about ​ <a href=another language ​ : (See what I did there? :-) 30 Days of UI5 Page 36 of 88 " id="pdf-obj-35-10" src="pdf-obj-35-10.jpg">

(See what I did there? :-)

30 Days of UI5 Page 36 of 88

And to finish, how about ​ <a href=another language ​ : (See what I did there? :-) 30 Days of UI5 Page 36 of 88 " id="pdf-obj-35-16" src="pdf-obj-35-16.jpg">

Day 14 - Speeding up your UI5 app with a Component preload file

by John Murray

In this post we’ll be looking at how you can speed up the load times of your UI5 applications by using a Component preload file. Those of you who are familiar with SAP Fiori applications will probably already know what a Component preload file is, however those of you who aren’t will almost definitely have all seen a reference to this file before. This file is referenced in an error message that appears in the console whenever you load a UI5 app, which is lacking a Component preload file.

Day 14 - Speeding up your UI5 app with a Component preload file by John MurrayNodeJS ​ , ​ npm ​ and ​ Grunt ​ . If you don’t know how to install and use these things then do ​ reach out to me on Twitter ​ . 30 Days of UI5 Page 37 of 88 " id="pdf-obj-36-8" src="pdf-obj-36-8.jpg">

So just what is this preload file and why should I care?

The preload file is essentially all of the files which make up your application, so that’s the Component itself, Controllers, Views, Fragments and so on, all compressed and inserted into one file, the preload file. If this file exists then UI5 will only load that file, and it won’t load of all of the other various files which it ordinarily would have done. The error we saw earlier is caused because UI5 looks for a preload file early in the execution flow, but of course did not find one, and so carried on loading all of the files individually.

Now that we’ve cleared up what the file actually is, and why that error appears, just why should exactly should we worry about it? After all we’ve ignored that error up until now and all our apps have worked just fine. Well, the reason we should care is that it dramatically decreases page load time. This is due to the app only having to make one call to get the preload file, rather than all of the individual calls for each file, but also because in the preload file the code is “minified”, which means the file size is also very small relative to the full size individual files. This is especially important when developing UI5 applications which are to be used over a mobile data connection, where size has a very large impact on initial load performance. As an anecdotal example, on the simple UI5 app which I have just created a preload file for my initial load time went from 8-9 seconds down to 3-4 seconds, which is tremendous improvement!

Sounds great! So how can I make a preload file for my UI5 app?

For this next section you will need to have installed on your machine NodeJS, npm

and Grunt. If

you don’t know how to install and use these things then do reach out to me on Twitter.

30 Days of UI5 Page 37 of 88

Day 14 - Speeding up your UI5 app with a Component preload file by John MurrayNodeJS ​ , ​ npm ​ and ​ Grunt ​ . If you don’t know how to install and use these things then do ​ reach out to me on Twitter ​ . 30 Days of UI5 Page 37 of 88 " id="pdf-obj-36-41" src="pdf-obj-36-41.jpg">

After you have all of the above installed, you’ll need to create a package.json file in your UI5 app’s root directory. Open the file up and paste in the contents below and don’t forget to edit them accordingly:

{

 

"name": "barcode-test", "version": "0.0.1", "description": "", "main": "index.html", "author": "John Murray", "license": "Apache License, Version 2.0", "devDependencies": { "grunt": "^0.4.5"

}

}

After creating and saving this file, install the Grunt OpenUI5 tools

which are made by the UI5 team

at SAP. To install these tools open a terminal session in your UI5 root directory and run this

command ‘npm install grunt-openui5 –save-dev’. This will download and install the tools, and also add them to the “devDependencies” section of your ‘package.json’ file.

Next, again in the UI5 app root directory, create a file called ‘Gruntfile.js’. Into this file copy and paste the contents below, and we’ll go through what it all means in a moment.

module.exports = function(grunt) {

// Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), openui5_preload: { component: { options: { resources: { cwd: '', prefix: '', src: [ 'webapp/**/*.js', 'webapp/**/*.fragment.html', 'webapp/**/*.fragment.json', 'webapp/**/*.fragment.xml', 'webapp/**/*.view.html', 'webapp/**/*.view.json', 'webapp/**/*.view.xml',

30 Days of UI5 Page 38 of 88

After you have all of the above installed, you’ll need to create a package.json file inGrunt OpenUI5 tools ​ which are made by the UI5 team at SAP. To install these tools open a terminal session in your UI5 root directory and run this command ‘npm install grunt-openui5 –save-dev’. This will download and install the tools, and also add them to the “devDependencies” section of your ‘package.json’ file. Next, again in the UI5 app root directory, create a file called ‘Gruntfile.js’. Into this file copy and paste the contents below, and we’ll go through what it all means in a moment. module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), openui5_preload: { component: { options: { resources: { cwd: '', prefix: '', src: [ 'webapp/**/*.js', 'webapp/**/*.fragment.html', 'webapp/**/*.fragment.json', 'webapp/**/*.fragment.xml', 'webapp/**/*.view.html', 'webapp/**/*.view.json', 'webapp/**/*.view.xml', 30 Days of UI5 Page 38 of 88 " id="pdf-obj-37-36" src="pdf-obj-37-36.jpg">

'webapp/**/*.properties'

]

}, dest: '', compress: true }, components: true

}

});

}

grunt.loadNpmTasks('grunt-openui5');

}

This is quite a simple example but it will suffice in most use cases. What we are doing here first of all is reading in the ‘package.json’ file created earlier which provides the dependency list. Then we are setting the configuration options for ‘openui5_preload’ which is the specific tool we are going to be using from the OpenUI5 toolset.

The ‘cwd’ parameter allows you to provide a base directory for finding the files and the ‘prefix’ parameter lets you prefix all files with a path of your choosing; in this instance we are not using either of these parameters so we are leaving them blank. The ‘src’ parameter lets you provide an array of paths, which it will use to try and match files in your directory and then for those matches it will minify and add them to the preload. I have all of my UI5 application files within a subdirectory called ‘webapp’ which is why my paths all begin with ‘webapp’. I have all my UI5 files located in this directory because I can then keep all of my other files and folders such as ‘node_modules’, PhoneGap config files, IDE folders, etc back in the root directory. I do this because it allows me to use this simple “get everything” approach you see above in the ‘src’ without worrying about accidentally including non-UI5 app files. The ‘dest’ parameter specifies the path to the destination you wish to save the preload file. In this case we just want to save it in the same place as the `Component.js` file and therefore can leave it blank. The ‘compress’ parameter sets whether or not you wish to minify the files as well as add them to the preload file. I would personally recommend always setting this to ‘true’ unless you have a good reason not to. The ‘components’ parameter here with a value of ‘true’ sets the tool to automatically find all components and create a preload for each.

Finally, we load the ‘grunt-openui5toolkit from the plugin as previously installed and specified in ‘package.json’.

30 Days of UI5 Page 39 of 88

'webapp/**/*.properties' ] }, dest: '', compress: true }, components: true } }); } grunt.loadNpmTasks('grunt-openui5'); } This

For the full documentation and parameter list I’d recommend looking at the Grunt OpenUI5 tools GitHub page.

That’s all the configuration set up, now it’s time to generate our preload file! Fire up a terminal session in the same directory as your ‘Gruntfile.js’ and run the following command ‘grunt openui5_preload’ and you should see the following output along with a ‘Component-preload.js’ file alongside your ‘Component.js’ file.

For the full documentation and parameter list I’d recommend looking at the ​ <a href=Grunt OpenUI5 tools GitHub page. That’s all the configuration set up, now it’s time to generate our preload file! Fire up a terminal session in the same directory as your ‘Gruntfile.js’ and run the following command ‘grunt openui5_preload’ and you should see the following output along with a ‘Component-preload.js’ file alongside your ‘Component.js’ file. Final thoughts Congratulations, you’ve just made your first preload file and are now well on the way to creating even better apps with UI5! 30 Days of UI5 Page 40 of 88 " id="pdf-obj-39-9" src="pdf-obj-39-9.jpg">

Final thoughts

Congratulations, you’ve just made your first preload file and are now well on the way to creating even better apps with UI5!

30 Days of UI5 Page 40 of 88

For the full documentation and parameter list I’d recommend looking at the ​ <a href=Grunt OpenUI5 tools GitHub page. That’s all the configuration set up, now it’s time to generate our preload file! Fire up a terminal session in the same directory as your ‘Gruntfile.js’ and run the following command ‘grunt openui5_preload’ and you should see the following output along with a ‘Component-preload.js’ file alongside your ‘Component.js’ file. Final thoughts Congratulations, you’ve just made your first preload file and are now well on the way to creating even better apps with UI5! 30 Days of UI5 Page 40 of 88 " id="pdf-obj-39-17" src="pdf-obj-39-17.jpg">

Day 15 - The UI5 Support Tool – Help Yourself!

by DJ Adams

Building anything but the most trivial native apps (that’s web native, of course) is not an easy ride. There are so many factors to get right. Debugging one of these apps can be just as tough.

The UI5 toolkit supports many features that make building and debugging easier. One of these is the support for the separation of concerns in the form of Model-View-Controller (MVC) mechanisms. Another is the ability to use a declarative approach to define your views (no moving parts), in XML, HTML or JSON; furthermore, you can use the subview and fragment concepts to divide and conquer complexity and embrace reuse.

Day 15 - The UI5 Support Tool – Help Yourself! by DJ Adams Building anything butDiagnostics ​ “, or even “the claw hand thing”. This last nickname comes from the fact that you invoke the support tool from a challenging key combination: Ctrl-Alt-Shift-S. There’s also the Support Tool’s little brother, invoked with Ctrl-Alt-Shift-P, which is a model popup giving you a summary of the runtime context, and giving you the chance to turn on some debugging information. You can see a shot of this on the left. (You can also turn on debugging via a URL query parameter ​ sap-ui-debug=true ​ .) Sometimes this is all you need, especially if you want to see the UI5 version in operation, or turn on debug sources. But the Support Tool is a super, multi-faceted mechanism which has proved invaluable over the years. It sports a large number of features, too many to cover here, so we’ll just have a brief look at one of them (arguably the most important) – the Control Tree: 30 Days of UI5 Page 41 of 88 " id="pdf-obj-40-10" src="pdf-obj-40-10.jpg">

The Support Tool

The particular feature I wanted to talk briefly about in this post though is the Support Tool, alternatively known as “UI5 Diagnostics“, or even “the claw hand thing”. This last nickname comes from the fact that you invoke the support tool from a challenging key combination: Ctrl-Alt-Shift-S.

Day 15 - The UI5 Support Tool – Help Yourself! by DJ Adams Building anything butDiagnostics ​ “, or even “the claw hand thing”. This last nickname comes from the fact that you invoke the support tool from a challenging key combination: Ctrl-Alt-Shift-S. There’s also the Support Tool’s little brother, invoked with Ctrl-Alt-Shift-P, which is a model popup giving you a summary of the runtime context, and giving you the chance to turn on some debugging information. You can see a shot of this on the left. (You can also turn on debugging via a URL query parameter ​ sap-ui-debug=true ​ .) Sometimes this is all you need, especially if you want to see the UI5 version in operation, or turn on debug sources. But the Support Tool is a super, multi-faceted mechanism which has proved invaluable over the years. It sports a large number of features, too many to cover here, so we’ll just have a brief look at one of them (arguably the most important) – the Control Tree: 30 Days of UI5 Page 41 of 88 " id="pdf-obj-40-20" src="pdf-obj-40-20.jpg">

There’s also the Support Tool’s little brother, invoked with Ctrl-Alt-Shift-P, which is a model popup giving you a summary of the runtime context, and giving you the chance to turn on some debugging information.

You can see a shot of this on the left. (You can also turn on debugging via a URL query parameter sap-ui-debug=true.)

Sometimes this is all you need, especially if you want to see the UI5 version in operation, or turn on debug sources.

But the Support Tool is a super, multi-faceted mechanism which has proved invaluable over the years. It sports a large number of features, too many to cover here, so we’ll just have a brief look at one of them (arguably the most important) – the Control Tree:

30 Days of UI5 Page 41 of 88

Day 15 - The UI5 Support Tool – Help Yourself! by DJ Adams Building anything butDiagnostics ​ “, or even “the claw hand thing”. This last nickname comes from the fact that you invoke the support tool from a challenging key combination: Ctrl-Alt-Shift-S. There’s also the Support Tool’s little brother, invoked with Ctrl-Alt-Shift-P, which is a model popup giving you a summary of the runtime context, and giving you the chance to turn on some debugging information. You can see a shot of this on the left. (You can also turn on debugging via a URL query parameter ​ sap-ui-debug=true ​ .) Sometimes this is all you need, especially if you want to see the UI5 version in operation, or turn on debug sources. But the Support Tool is a super, multi-faceted mechanism which has proved invaluable over the years. It sports a large number of features, too many to cover here, so we’ll just have a brief look at one of them (arguably the most important) – the Control Tree: 30 Days of UI5 Page 41 of 88 " id="pdf-obj-40-36" src="pdf-obj-40-36.jpg">
On the left hand side there’s a super useful display of the app’s control hierarchy. Thisahem ​ ) of the Support Tool. Imagine being able to peer into the internal structure of a building, or having ​ X-Ray Specs ​ and being able to see your skeleton, or sitting in front of a monitor in The Matrix and seeing the world behind the curtain. This is what you get with the Control Tree. UI5 apps can have complex UI structures. Fiori apps especially so. Controls within controls, ​ wheels within wheels in a spiral array, a pattern so grand and complex ​ . With the Control Tree you can see and grok this structure very quickly. Note you can view at a glance what the control actually is, what it contains & what contains it, and what its ID is. But that’s not all. On the right hand side, for a selected control (for example the Page control in the screenshot above), you can see all the properties of that control and from where in the control inheritance they come. You can modify the values for those properties and see the effect immediately, and even set breakpoints for each time the value for a particular property is read (G – get) or written (S – set). 30 Days of UI5 Page 42 of 88 " id="pdf-obj-41-2" src="pdf-obj-41-2.jpg">

On the left hand side there’s a super useful display of the app’s control hierarchy. This alone is worth the cost (ahem) of the Support Tool.

Imagine being able to peer into the internal structure of a building, or having X-Ray Specs

and

being able to see your skeleton, or sitting in front of a monitor in The Matrix and seeing the world

behind the curtain. This is what you get with the Control Tree.

UI5 apps can have complex UI structures. Fiori apps especially so. Controls within controls, wheels within wheels in a spiral array, a pattern so grand and complex. With the Control Tree you can see and grok this structure very quickly. Note you can view at a glance what the control actually is, what it contains & what contains it, and what its ID is.

But that’s not all. On the right hand side, for a selected control (for example the Page control in the screenshot above), you can see all the properties of that control and from where in the control inheritance they come. You can modify the values for those properties and see the effect immediately, and even set breakpoints for each time the value for a particular property is read (G – get) or written (S – set).

30 Days of UI5 Page 42 of 88

On the left hand side there’s a super useful display of the app’s control hierarchy. Thisahem ​ ) of the Support Tool. Imagine being able to peer into the internal structure of a building, or having ​ X-Ray Specs ​ and being able to see your skeleton, or sitting in front of a monitor in The Matrix and seeing the world behind the curtain. This is what you get with the Control Tree. UI5 apps can have complex UI structures. Fiori apps especially so. Controls within controls, ​ wheels within wheels in a spiral array, a pattern so grand and complex ​ . With the Control Tree you can see and grok this structure very quickly. Note you can view at a glance what the control actually is, what it contains & what contains it, and what its ID is. But that’s not all. On the right hand side, for a selected control (for example the Page control in the screenshot above), you can see all the properties of that control and from where in the control inheritance they come. You can modify the values for those properties and see the effect immediately, and even set breakpoints for each time the value for a particular property is read (G – get) or written (S – set). 30 Days of UI5 Page 42 of 88 " id="pdf-obj-41-31" src="pdf-obj-41-31.jpg">

Select the Binding Infos tab and see what bindings exist. You can see information on what model a binding is from, what type of binding it is, and of course the binding path. Here we can see some of the binding info for the List control in an app:

Select the Binding Infos tab and see what bindings exist. You can see information on whatlogger ​ to crank the logging output ​ up to 11 ​ . By default, the log level is set to 1 (“ERROR”). If you’re running the app with debugging on, that level is 4 (“DEBUG”). But opening the Support Tool causes this to be set to 6 (“ALL”). You can turn that down again with the jQuery.sap.log.setLevel function. Otherwise, LOG ALL THE THINGS!!1! 30 Days of UI5 Page 43 of 88 " id="pdf-obj-42-4" src="pdf-obj-42-4.jpg">

For you eagle-eyed readers, the model name here — “entity” — is the name of the domain model in this app example. Often the domain model is the unnamed model, but here it has a name. Can anyone guess what this (publically available) app is?

There’s so much to discover with the Control Tree and the rest of the Support Tool, I recommend you hit Ctrl-Alt-Shift-S the next time you’re running a UI5 apps, and start exploring.

Finishing off

Let’s finish this post off with a quick piece of trivia and a tip. If you’ve had the Chrome Developer Tools open and then open the Support Tool, you’ll notice a ton of new messages in the console, and it’s a lot more verbose. This is because when the Support Tool starts up, it sends a message to

the logger

to crank the logging output up to 11.

By default, the log level is set to 1 (“ERROR”). If you’re running the app with debugging on, that level is 4 (“DEBUG”). But opening the Support Tool causes this to be set to 6 (“ALL”). You can turn that down again with the jQuery.sap.log.setLevel function. Otherwise, LOG ALL THE THINGS!!1!

30 Days of UI5 Page 43 of 88

Select the Binding Infos tab and see what bindings exist. You can see information on whatlogger ​ to crank the logging output ​ up to 11 ​ . By default, the log level is set to 1 (“ERROR”). If you’re running the app with debugging on, that level is 4 (“DEBUG”). But opening the Support Tool causes this to be set to 6 (“ALL”). You can turn that down again with the jQuery.sap.log.setLevel function. Otherwise, LOG ALL THE THINGS!!1! 30 Days of UI5 Page 43 of 88 " id="pdf-obj-42-29" src="pdf-obj-42-29.jpg">

Day 16 - UI5 and Coding Standards

by DJ Adams

At one end of the spectrum, coding standards can be regarded as essential. At the other, they’re the subject of many a passionate debate, second perhaps only to the Vim vs Emacs editor wars.

I’ll provide some caution by starting with one of my favourite quotes, from Andrew Tanenbaum: “The nice thing about standards is that there are so many of them to choose from”.

Use of standards

Day 16 - UI5 and Coding Standards by DJ Adams At one end of the spectrum,essential ​ . At the other, they’re the subject of many a passionate debate, second perhaps only to the Vim vs Emacs ​ editor wars ​ . I’ll provide some caution by starting with one of my favourite quotes, from Andrew Tanenbaum: ​ “The nice thing about standards is that there are so many of them to choose from” ​ . Use of standards As software projects scale up, coding standards make more and more sense. On a ​ recent run ​ , I listened to the JavaScript Jabber podcast JSJ ESLint with Jamund Ferguson ​ “. There was a great discussion about ESLint, and it was interesting to see the different perspectives on imposed coding standards, from “it restricts my freedom of expression” to “it makes teams more efficient as they work more as one”. I think those two perspectives slot roughly onto the scale spectrum. If it’s just you developing, then by all means use whatever style you feel like using. But if you’re part of a larger team whose members have to work with each other’s code, imposed coding standards do make a lot of sense. The OpenUI5 project has some coding ​ contribution guidelines ​ as well as ​ ESLint rules, well worth checking out, and pretty important if you want to contribute to UI5. It’s also worth considering them for your own UI5 applications. One advantage of adopting the OpenUI5 project’s guidelines and rules is that when you cross the path from your codebase into the underlying UI5 toolkit, the transition won’t be as jarring. Example XML View The ESLint rules, and ESLint in general would cause this post to be a lot longer than I want, so instead I’ll look at some non-JavaScript conventions that I like to try and impose, at least upon myself. In particular I’ll look at the style for XML View definitions. Here’s part a sample XML View, which I’ll use to illustrate the style for which I strive. Note that the “»” character represents a tab (I have the list mode turned on in my editor to ​ show invisibles ​ ). 30 Days of UI5 Page 44 of 88 " id="pdf-obj-43-24" src="pdf-obj-43-24.jpg">

As software projects scale up, coding standards make more and more sense. On a recent run, I listened to the JavaScript Jabber podcast JSJ ESLint with Jamund Ferguson“. There was a great discussion about ESLint, and it was interesting to see the different perspectives on imposed coding standards, from “it restricts my freedom of expression” to “it makes teams more efficient as they work more as one”.

I think those two perspectives slot roughly onto the scale spectrum. If it’s just you developing, then by all means use whatever style you feel like using. But if you’re part of a larger team whose members have to work with each other’s code, imposed coding standards do make a lot of sense.

The OpenUI5 project has some coding contribution guidelines

as well as ESLint rules, well worth

checking out, and pretty important if you want to contribute to UI5. It’s also worth considering them for your own UI5 applications. One advantage of adopting the OpenUI5 project’s guidelines and rules is that when you cross the path from your codebase into the underlying UI5 toolkit, the transition won’t be as jarring.

Example XML View

The ESLint rules, and ESLint in general would cause this post to be a lot longer than I want, so instead I’ll look at some non-JavaScript conventions that I like to try and impose, at least upon myself. In particular I’ll look at the style for XML View definitions. Here’s part a sample XML View, which I’ll use to illustrate the style for which I strive. Note that the “»” character represents a tab (I have the list mode turned on in my editor to show invisibles).

30 Days of UI5 Page 44 of 88

Day 16 - UI5 and Coding Standards by DJ Adams At one end of the spectrum,essential ​ . At the other, they’re the subject of many a passionate debate, second perhaps only to the Vim vs Emacs ​ editor wars ​ . I’ll provide some caution by starting with one of my favourite quotes, from Andrew Tanenbaum: ​ “The nice thing about standards is that there are so many of them to choose from” ​ . Use of standards As software projects scale up, coding standards make more and more sense. On a ​ recent run ​ , I listened to the JavaScript Jabber podcast JSJ ESLint with Jamund Ferguson ​ “. There was a great discussion about ESLint, and it was interesting to see the different perspectives on imposed coding standards, from “it restricts my freedom of expression” to “it makes teams more efficient as they work more as one”. I think those two perspectives slot roughly onto the scale spectrum. If it’s just you developing, then by all means use whatever style you feel like using. But if you’re part of a larger team whose members have to work with each other’s code, imposed coding standards do make a lot of sense. The OpenUI5 project has some coding ​ contribution guidelines ​ as well as ​ ESLint rules, well worth checking out, and pretty important if you want to contribute to UI5. It’s also worth considering them for your own UI5 applications. One advantage of adopting the OpenUI5 project’s guidelines and rules is that when you cross the path from your codebase into the underlying UI5 toolkit, the transition won’t be as jarring. Example XML View The ESLint rules, and ESLint in general would cause this post to be a lot longer than I want, so instead I’ll look at some non-JavaScript conventions that I like to try and impose, at least upon myself. In particular I’ll look at the style for XML View definitions. Here’s part a sample XML View, which I’ll use to illustrate the style for which I strive. Note that the “»” character represents a tab (I have the list mode turned on in my editor to ​ show invisibles ​ ). 30 Days of UI5 Page 44 of 88 " id="pdf-obj-43-63" src="pdf-obj-43-63.jpg">
In the following, each prefix represents the line number(s) to which I’m referring. 1 ​ :View ​ is “sap.ui.core.mvc”, not “sap.ui.core” as you might have seen in older documentation and code examples. 2 ​ : The controllerName attribute should be the first attribute for the View element. If there is no controller then obviously this attribute won’t be present. It just makes it slightly quicker to look for the controller reference if it’s going to be consistently in the same place. 3-5 ​ : All the namespace declarations should be in a contiguous chunk. There are other attributes that might appear for a View element, that’s fine, as long as they’re not interspersed amongst the namespace declarations. Ensure any other attributes appear before the namespace declarations. 30 Days of UI5 Page 45 of 88 " id="pdf-obj-44-2" src="pdf-obj-44-2.jpg">

In the following, each prefix represents the line number(s) to which I’m referring.

1: The correct namespace for a View

is “sap.ui.core.mvc”, not “sap.ui.core” as you might have

seen in older documentation and code examples.

2: The controllerName attribute should be the first attribute for the View element. If there is no controller then obviously this attribute won’t be present. It just makes it slightly quicker to look for the controller reference if it’s going to be consistently in the same place.

3-5: All the namespace declarations should be in a contiguous chunk. There are other attributes that might appear for a View element, that’s fine, as long as they’re not interspersed amongst the namespace declarations. Ensure any other attributes appear before the namespace declarations.

30 Days of UI5 Page 45 of 88

In the following, each prefix represents the line number(s) to which I’m referring. 1 ​ :View ​ is “sap.ui.core.mvc”, not “sap.ui.core” as you might have seen in older documentation and code examples. 2 ​ : The controllerName attribute should be the first attribute for the View element. If there is no controller then obviously this attribute won’t be present. It just makes it slightly quicker to look for the controller reference if it’s going to be consistently in the same place. 3-5 ​ : All the namespace declarations should be in a contiguous chunk. There are other attributes that might appear for a View element, that’s fine, as long as they’re not interspersed amongst the namespace declarations. Ensure any other attributes appear before the namespace declarations. 30 Days of UI5 Page 45 of 88 " id="pdf-obj-44-27" src="pdf-obj-44-27.jpg">

Also, don’t specify a namespace declaration unless you’re going to use it. (In this example, I’m using all of them; you just can’t see the use of the “core” here as it’s on line 60, not in the screenshot).

5: The default XML namespace for any given XML View should be the one that is dominant in the file, or “sap.m”. If you’re building responsive UI5 apps, you’re going to need a good reason for “sap.m” not to be the dominant library. Also, it should be the last attribute in the View element, with a closing angle bracket directly following. (Unlike the use of other angle-bracket powered markup (such as HTML) in UI5, this is a rule that can be applied consistently. With the UI5 bootstrap in HTML, I like to have the closing angle bracket on a separate line, in the ‘prefix-comma’ style from ABAP and other code, so I can add further data attributes without causing diff confusion.)

1-5, 6-7, 11-13 etc: All attributes should appear on lines of their own, indented appropriately.

13: When closing an element directly (like this: <element /> rather than this:

<element></element>), a space should be used before the closing “/>”.

8, 17, 22, 29, etc: All aggregation elements should be used explicitly. Don’t omit implicit default aggregations for controls; instead, specify them. In this example, I’m using a sap.m.Page control, with the “subHeader” and “content” aggregations. While the “subHeader” aggregation must be specified explicitly anyway, the “content” aggregation is default and doesn’t need to be, but I do anyway. The same goes for the sap.m.List control’s “items” aggregation.

18: Contrary to the rule about attributes being on their own separate lines, there’s an exception to this which is for the id attribute. If it exists, put it on the same line as the opening part of the control’s element.

25: Unless there’s a good reason not to, create the names for your event handler functions using an “on” prefix (like here: “onSelect”). This way they’re consistent with the builtin view lifecycle event functions such as “onInit”.

31-34: When writing complex embedded binding syntax, put each property of the map on a separate line, in the same way you’d write a map in JavaScript. Use spaces before and after the colons.

1-34: Use double quotes throughout; the only place you’ll then use single quotes is within embedded binding syntax. Also I know this is the subject of much debate, but the OpenUI5’s project standard specifies tabs for indentation. It came as a shock to me at first, but I have now embraced it :-)

30 Days of UI5 Page 46 of 88

Also, don’t specify a namespace declaration unless you’re going to use it. (In this example, I’m

Conclusion

I have no doubt caused some outrage to some of you, but hopefully just as much agreement with others. For me, this sample XML View is easy to read, a lot easier than some of the Fiori views that are generated from templates, for example. What are your standards?

30 Days of UI5 Page 47 of 88

Conclusion I have no doubt caused some outrage to some of you, but hopefully just as

Day 17 - UI5 and Fiori – The Story of Open and Free

by John Appleby

DJ kindly asked me to write a blog for his 30 days of UI5 series to celebrate version 1.30 of UI5. My immediate reaction was what, me, what do I have to add to this subject?

I then realized that I had a little part in the UI5 story thus far and folks might enjoy the story, and the update, of how Fiori became Freeori.

It all started with a late night phone call with Den Howlett, where we discussed, as we sometimes do, the state of the SAP Union.

We became engrossed in a conversation about the new Workday version that had just been released, with its responsive and modern user experience, and wondered how SAP could compete in UX quality. To that end, SAP had recently released Fiori but adoption was poor with just a handful of users navigating the complex licensing policy around it.

At that time, it was necessary to pay for core SAP licenses, Gateway integration licenses and separate Fiori licenses. There were some pros to this – the paid nature of Fiori meant that Fiori was getting development dollars, but it wasn’t getting adoption. Without adoption of a modern user experience, SAP would be in trouble in the mid-term.

From that conversation came a blog post Should SAP Fiori be Freeori?

which framed the

conversation in a way we believed SAP would understand. That was key to our argument – we believed that Fiori was the solution to renovating the SAP user experience and that charging for it would risk SAP’s long-term future.

What happened next?

Geoff Scott, CEO of ASUG chimed in with "Time for a UX Revolution, Not Evolution" and then Chris Kanaracus, that time at IDG, now working at ASUG, continued the discussion with "SAP users rattle sabers over charges for user-friendly Fiori apps" and did a fantastic job of rallying the user groups and getting great quotes from the ecosystem:

“DSAG’s position is clear. We say [Fiori] must be part of standard maintenance”

– Andreas Oczko, DSAG Vice Chairman

“In a cloud world, you’d expect Fiori to be part of the upgrade cycle”

– Ray Wang, Constellation Research

Dennis then put the hammer in with "The SAP Fiori or Freeori discussion heats up", comparing a potential $5-700m one time sale with Fiori to the risk of losing lucrative support revenues.

30 Days of UI5 Page 48 of 88

Day 17 - UI5 and Fiori – The Story of Open and Free by John ApplebyShould SAP Fiori be Freeori? ​ which framed the conversation in a way we believed SAP would understand. That was key to our argument – we believed that Fiori was the solution to renovating the SAP user experience and that charging for it would risk SAP’s long-term future. What happened next? Geoff Scott, CEO of ASUG chimed in with " ​ Time for a UX Revolution, Not Evolution ​ " and then Chris Kanaracus, that time at IDG, now working at ASUG, continued the discussion with " ​ SAP users rattle sabers over charges for user-friendly Fiori apps ​ " and did a fantastic job of rallying the user groups and getting great quotes from the ecosystem: “DSAG’s position is clear. We say [Fiori] must be part of standard maintenance” – Andreas Oczko, DSAG Vice Chairman “In a cloud world, you’d expect Fiori to be part of the upgrade cycle” – Ray Wang, Constellation Research Dennis then put the hammer in with " ​ The SAP Fiori or Freeori discussion heats up ​ ", comparing a potential $5-700m one time sale with Fiori to the risk of losing lucrative support revenues. 30 Days of UI5 Page 48 of 88 " id="pdf-obj-47-53" src="pdf-obj-47-53.jpg">

I received a few back-channel messages about this, suggesting that things would move, and sure enough, SAP opened up the Fiori product to all customers at no charge. What incredible news.

What does this look like one year on?

The concern my colleagues at SAP had was that charging for Fiori ensured that there was attention to the development. However the reverse hasn’t caused an issue. On the contrary, Fiori has more investment and Sam Yen’s User eXperience group have gone from strength to strength.

SAP S/4HANA has been released and Fiori is at the center of the user experience. The core UI5 and

Fiori technologies have significant investments and with UI5 1.30

we see new functionality – just

check out the release notesand new page styles.

to see the extent! They include a focus on performance improvements

Personally, I’m incredibly proud of the individuals in the SAP ecosystem who have worked on this. The impact of renovating the SAP User eXperience shouldn’t be underestimated.

30 Days of UI5 Page 49 of 88

I received a few back-channel messages about this, suggesting that things would move, and sure enough,UI5 1.30 ​ we see new functionality – just check out the ​ release notes ​ and new page styles. to see the extent! They include a focus on performance improvements Personally, I’m incredibly proud of the individuals in the SAP ecosystem who have worked on this. The impact of renovating the SAP User eXperience shouldn’t be underestimated. 30 Days of UI5 Page 49 of 88 " id="pdf-obj-48-29" src="pdf-obj-48-29.jpg">

Day 18 - MVC – Model View Controller, Minimum Viable Code

by DJ Adams

The solid Model View Controller implementation in UI5 forces the separation of concerns. The logical place for models, views and controllers are files, in (usually) separate folders. Views, with specific file extensions, in a folder that’s usually called “views”, and controllers, with specific file extensions, in a folder called “controllers”. And models elsewhere too.

This means that if you’re wanting to try something out quickly, and it’s a little bit more than a Hello World construction, then you’re off creating files and folders from the start before you can properly start thinking about the actual app idea you want to explore.

Day 18 - MVC – Model View Controller, Minimum Viable Code by DJ Adams The solidlaziness, impatience and hubris ​ ) that led to this approach :-). Creating a folder structure and getting the right files in place does not go well with the “quickly” part of “try something out quickly”. Trying something out, for me, means ideally using just a single file. It’s fast, you can see everything in one place, and you’re not creating unnecessary clutter. But when I want to try something out also, I also want to ensure that the code I write is clean and separated. Which for me implies declarative views and fragments in XML. Luckily, for nearly all of the cases where I’ve wanted to try something out, I’ve found that this single file technique works well. I can have one or more views, and fragments, all declared in XML, and one or more controllers too. And within that space I can declare models too. Here’s how it works: ● I start out with a skeletal index.html with a UI5 bootstrap already there, and the HTML body element defined properly ● I add a simple triple (or ​ tripel ​ ) of : view, corresponding controller, and what I call ‘startup code’ ● I can then add controls to the view, functions to the controller, and off I go 30 Days of UI5 Page 50 of 88 " id="pdf-obj-49-10" src="pdf-obj-49-10.jpg">

That is, unless you use a “Minimum Viable Code” technique. I like to think that it’s due to a combination of the three great virtues of a programmer (laziness, impatience and hubris) that led to this approach :-).

Creating a folder structure and getting the right files in place does not go well with the “quickly” part of “try something out quickly”. Trying something out, for me, means ideally using just a single file. It’s fast, you can see everything in one place, and you’re not creating unnecessary clutter. But when I want to try something out also, I also want to ensure that the code I write is clean and separated. Which for me implies declarative views and fragments in XML.

Luckily, for nearly all of the cases where I’ve wanted to try something out, I’ve found that this single file technique works well. I can have one or more views, and fragments, all declared in XML, and one or more controllers too. And within that space I can declare models too.

Here’s how it works:

I start out with a skeletal index.html with a UI5 bootstrap already there, and the HTML body element defined properly I add a simple triple (or tripel) of : view, corresponding controller, and what I call ‘startup code’ I can then add controls to the view, functions to the controller, and off I go

30 Days of UI5 Page 50 of 88

Day 18 - MVC – Model View Controller, Minimum Viable Code by DJ Adams The solidlaziness, impatience and hubris ​ ) that led to this approach :-). Creating a folder structure and getting the right files in place does not go well with the “quickly” part of “try something out quickly”. Trying something out, for me, means ideally using just a single file. It’s fast, you can see everything in one place, and you’re not creating unnecessary clutter. But when I want to try something out also, I also want to ensure that the code I write is clean and separated. Which for me implies declarative views and fragments in XML. Luckily, for nearly all of the cases where I’ve wanted to try something out, I’ve found that this single file technique works well. I can have one or more views, and fragments, all declared in XML, and one or more controllers too. And within that space I can declare models too. Here’s how it works: ● I start out with a skeletal index.html with a UI5 bootstrap already there, and the HTML body element defined properly ● I add a simple triple (or ​ tripel ​ ) of : view, corresponding controller, and what I call ‘startup code’ ● I can then add controls to the view, functions to the controller, and off I go 30 Days of UI5 Page 50 of 88 " id="pdf-obj-49-37" src="pdf-obj-49-37.jpg">

I use jQuery to identify the XML views and fragments, and construct the view instances in UI5 that way

And here’s an example:

30 Days of UI5 Page 51 of 88

● I use jQuery to identify the XML views and fragments, and construct the view instances
Here’s a brief rundown of what you see: 30 Days of UI5 Page 52 of 88

Here’s a brief rundown of what you see:

30 Days of UI5 Page 52 of 88

Here’s a brief rundown of what you see: 30 Days of UI5 Page 52 of 88

9-16: This is the UI5 bootstrap, nothing unusual here.

18-28: Here we have a script element that is of a made-up type “ui5/xmlview”. This could be pretty much anything, as long as the browser doesn’t try to process it. It’s a technique used in templating systems. This contains some XML, which as you can see is a small but perfectly formed view definition (which incidentally conforms to the "UI5 Coding Standards" explained in a previous post in this series.

31-36: This is the local controller definition, which is referenced in the View’s controllerName attribute (in line 20). It has the onPress handler for the Button’s press event.

38-40: This is the startup code. It instantiates the XML View, getting the value for the viewContent property via jQuery from the script element we saw earlier, and then simply places that View in the body, via the “content” ID, as usual.

And that’s pretty much it. You can add as many views as you want using the script element technique; I also use this technique for fragments too, and specify a made-up type of “ui5/xmlfragment” instead.

It’s a great way to write simple one-file applications, especially for prototyping. I have written snippets to help me with this. I have been somewhat fickle when it comes to editors, so have left a trail of semi-finished snippet libraries for Sublime (SublimeUI5) and Atom (ui5-snippets), but have

finally come full circle to my first love, vim. I've put together a quick screencast

of using my

snippets in vim (powered by UltiSnips) to create a Minimum Viable Code MVC style app:

9-16 ​ : This is the UI5 bootstrap, nothing unusual here. 18-28 ​ : Here weSublimeUI5 ​ ) and Atom ( ​ ui5-snippets ​ ), but have finally come full circle to my first love, vim. I've put together a ​ quick screencast ​ of using my snippets in vim (powered by ​ UltiSnips ​ ) to create a Minimum Viable Code MVC style app: This screencast is at ​ https://www.youtube.com/watch?v=nN1PYHa-YXQ ​ . 30 Days of UI5 Page 53 of 88 " id="pdf-obj-52-43" src="pdf-obj-52-43.jpg">

This screencast is at https://www.youtube.com/watch?v=nN1PYHa-YXQ.

30 Days of UI5 Page 53 of 88

9-16 ​ : This is the UI5 bootstrap, nothing unusual here. 18-28 ​ : Here weSublimeUI5 ​ ) and Atom ( ​ ui5-snippets ​ ), but have finally come full circle to my first love, vim. I've put together a ​ quick screencast ​ of using my snippets in vim (powered by ​ UltiSnips ​ ) to create a Minimum Viable Code MVC style app: This screencast is at ​ https://www.youtube.com/watch?v=nN1PYHa-YXQ ​ . 30 Days of UI5 Page 53 of 88 " id="pdf-obj-52-53" src="pdf-obj-52-53.jpg">

Day 19 - A Short UI5 Debugging Journey

by DJ Adams

In an earlier post in this series - “The UI5 Support Tool – Help Yourself!“ - we looked at the Support Tool, examining the information available in the Control Tree. In particular we looked at the Properties and Binding Infos tabs. While exploring the new UI5 1.30 features with the Explored app, I re-noticed a small addition to the Explored UI – a Button that allowed me to switch to full screen mode to view control samples.

Day 19 - A Short UI5 Debugging Journey by DJ Adams In an earlier post in

I thought it would be fun to use the Support Tool and other debugging techniques to see what was exactly happening in the Explored app when we toggled that control.

Identifying the Button

First, we need to identify the Button control – by its ID. We can use a context menu feature of Chrome which will open up the Developer Tools: Right-click on the Button and select Inspect Element. This will show us the ID in the highlighted sections in the screenshot:

30 Days of UI5 Page 54 of 88

Day 19 - A Short UI5 Debugging Journey by DJ Adams In an earlier post in
Here, the full ID highlighted is “__xmlview2–toggleFullScreenBtn-img”, as we right clicked on the image part ofplay an instant ​ and use sap.ui.getCore().byId to get a handle on the control with this ID. But instead let’s look at the Support Tool and how it can expose event breakpoints. Opening the Support Tool, and the Control Tree section within, we can search for the ID “__xmlview2–toggleFullScreenBtn”. When we find it, we can switch to the Breakpoints tab and set a breakpoint for the firePress function (as that is what will be happening when we press the Button – a “press” event will be fired): 30 Days of UI5 Page 55 of 88 " id="pdf-obj-54-2" src="pdf-obj-54-2.jpg">

Here, the full ID highlighted is

“__xmlview2–toggleFullScreenBtn-img”,

as we right clicked on the

image part of the Button. Go up a couple of levels in the HTML element hierarchy and you’ll see the <button> with an ID without the “-img” suffix. That’s what we want.

Stopping at the Press Event

We could at this stage play an instant

and use sap.ui.getCore().byId to get a handle on the control

with this ID. But instead let’s look at the Support Tool and how it can expose event breakpoints.

Opening the Support Tool, and the Control Tree section within, we can search for the ID

“__xmlview2–toggleFullScreenBtn”.

When we find it, we can switch to the Breakpoints tab and set

a breakpoint for the firePress function (as that is what will be happening when we press the Button – a “press” event will be fired):

Here, the full ID highlighted is “__xmlview2–toggleFullScreenBtn-img”, as we right clicked on the image part ofplay an instant ​ and use sap.ui.getCore().byId to get a handle on the control with this ID. But instead let’s look at the Support Tool and how it can expose event breakpoints. Opening the Support Tool, and the Control Tree section within, we can search for the ID “__xmlview2–toggleFullScreenBtn”. When we find it, we can switch to the Breakpoints tab and set a breakpoint for the firePress function (as that is what will be happening when we press the Button – a “press” event will be fired): 30 Days of UI5 Page 55 of 88 " id="pdf-obj-54-31" src="pdf-obj-54-31.jpg">

30 Days of UI5 Page 55 of 88

Here, the full ID highlighted is “__xmlview2–toggleFullScreenBtn-img”, as we right clicked on the image part ofplay an instant ​ and use sap.ui.getCore().byId to get a handle on the control with this ID. But instead let’s look at the Support Tool and how it can expose event breakpoints. Opening the Support Tool, and the Control Tree section within, we can search for the ID “__xmlview2–toggleFullScreenBtn”. When we find it, we can switch to the Breakpoints tab and set a breakpoint for the firePress function (as that is what will be happening when we press the Button – a “press” event will be fired): 30 Days of UI5 Page 55 of 88 " id="pdf-obj-54-35" src="pdf-obj-54-35.jpg">

Now when we press the Button, we land inside Breakpoint.js:

Now when we press the Button, we land inside Breakpoint.js: Finding the Event Handler Now that

Finding the Event Handler

Now that we’re here, there’s plenty to explore, but let’s cut to the chase and look at the Button instance. In particular, we’ll look at an internal property “mEventRegistry” which is a map that holds the functions to be called when specific events are fired. Remember that this is an internal property, which we can’t use, or rely upon, when building apps (for more details on this, see the post “JavaScript Do’s and Don’ts in UI5” in this series). But we’re not building, we’re debugging, so all bets are off.

The ‘this’ here is the Button control instance, and so we can see that the “this.mEventRegistry” map has an entry for “press”:

this.mEventRegistry -> Object {press: Array[1]}

Looking at this single entry in the array for the “press” event, we can see that the function handler is in a controller (surprise surprise):

this.mEventRegistry["press"][0].fFunction

-> sap.ui.controller.onToggleFullScreen(oEvt)

Unless you’re using an older version of Chrome, you should be able to click on the function name to bring you to the “onToggleFullScreen” function definition:

30 Days of UI5 Page 56 of 88

Now when we press the Button, we land inside Breakpoint.js: Finding the Event Handler Now that
Nice! Examining What Happens We can now put a breakpoint on line 163 (which I hadmode ​ to the appropriate value (the default of “ShowHideMode”, or “HideMode” for the full screen effect). It also modifies the containing ​ Shell ​ control’s appWidthLimited property so that a real full screen effect can be properly achieved. So that’s it! If you can become comfortable helping yourself with these tools, you’ll be a better UI5 developer. 30 Days of UI5 Page 57 of 88 " id="pdf-obj-56-2" src="pdf-obj-56-2.jpg">

Nice!

Examining What Happens

We can now put a breakpoint on line 163 (which I had done already before taking the screenshot above) and hit continue, to be able to then step into what this function calls (the updateMode function) when the stack gets here. This is what the updateMode function looks like:

Nice! Examining What Happens We can now put a breakpoint on line 163 (which I hadmode ​ to the appropriate value (the default of “ShowHideMode”, or “HideMode” for the full screen effect). It also modifies the containing ​ Shell ​ control’s appWidthLimited property so that a real full screen effect can be properly achieved. So that’s it! If you can become comfortable helping yourself with these tools, you’ll be a better UI5 developer. 30 Days of UI5 Page 57 of 88 " id="pdf-obj-56-10" src="pdf-obj-56-10.jpg">

It sets the Split App’s mode

to the appropriate value (the default of “ShowHideMode”, or

“HideMode” for the full screen effect). It also modifies the containing Shell

control’s

appWidthLimited property so that a real full screen effect can be properly achieved.

So that’s it! If you can become comfortable helping yourself with these tools, you’ll be a better UI5 developer.

30 Days of UI5 Page 57 of 88

Nice! Examining What Happens We can now put a breakpoint on line 163 (which I hadmode ​ to the appropriate value (the default of “ShowHideMode”, or “HideMode” for the full screen effect). It also modifies the containing ​ Shell ​ control’s appWidthLimited property so that a real full screen effect can be properly achieved. So that’s it! If you can become comfortable helping yourself with these tools, you’ll be a better UI5 developer. 30 Days of UI5 Page 57 of 88 " id="pdf-obj-56-32" src="pdf-obj-56-32.jpg">

Day 20 - Fragments and Minimum Viable Code

by DJ Adams

In an earlier post in this series - "MVC – Model View Controller, Minimum Viable Code" - I showed how you could write a single-file UI5 app but still embrace and use the concepts of Model View Controller, having separate controller definitions and declarative XML Views. I also mentioned you

could use XML Fragments in this way too, and Robin van het Hof askedhere we go, thanks Robin!

if I could explain how. So

If we take the code from the previous post and run it, we end up with a UI that looks like this:

Day 20 - Fragments and Minimum Viable Code by DJ Adams In an earlier post inRobin van het Hof asked ​ here we go, thanks Robin! if I could explain how. So If we take the code from the previous post and run it, we end up with a UI that looks like this: Let’s add some behaviour to the Button so that it instantiates and opens a Dialog control. We’ll define this Dialog control in an XML Fragment. In the same way that we defined the XML View, we’ll define the XML Fragment inside a <script> element, this time with a “ui5/xmlfragment” type, like this: 30 Days of UI5 Page 58 of 88 " id="pdf-obj-57-18" src="pdf-obj-57-18.jpg">

Let’s add some behaviour to the Button so that it instantiates and opens a Dialog control. We’ll define this Dialog control in an XML Fragment.

In the same way that we defined the XML View, we’ll define the XML Fragment inside a <script> element, this time with a “ui5/xmlfragment” type, like this:

Day 20 - Fragments and Minimum Viable Code by DJ Adams In an earlier post inRobin van het Hof asked ​ here we go, thanks Robin! if I could explain how. So If we take the code from the previous post and run it, we end up with a UI that looks like this: Let’s add some behaviour to the Button so that it instantiates and opens a Dialog control. We’ll define this Dialog control in an XML Fragment. In the same way that we defined the XML View, we’ll define the XML Fragment inside a <script> element, this time with a “ui5/xmlfragment” type, like this: 30 Days of UI5 Page 58 of 88 " id="pdf-obj-57-24" src="pdf-obj-57-24.jpg">

30 Days of UI5 Page 58 of 88

Day 20 - Fragments and Minimum Viable Code by DJ Adams In an earlier post inRobin van het Hof asked ​ here we go, thanks Robin! if I could explain how. So If we take the code from the previous post and run it, we end up with a UI that looks like this: Let’s add some behaviour to the Button so that it instantiates and opens a Dialog control. We’ll define this Dialog control in an XML Fragment. In the same way that we defined the XML View, we’ll define the XML Fragment inside a <script> element, this time with a “ui5/xmlfragment” type, like this: 30 Days of UI5 Page 58 of 88 " id="pdf-obj-57-28" src="pdf-obj-57-28.jpg">

It’s a standard XML Fragment definition, and even though it only contains a single root control –the Dialog — I’m using the Fragment Definition wrapper explicitly anyway (as I think it’s good practice).

When we press the Button, we want this Dialog to appear, like this:

It’s a standard XML Fragment definition, and even though it only contains a single root control

So let’s rewrite the handler “onPress” which is attached to the Button’s press event, so it now looks like this:

It’s a standard XML Fragment definition, and even though it only contains a single root control

30 Days of UI5 Page 59 of 88

It’s a standard XML Fragment definition, and even though it only contains a single root control

This is a common pattern for fragments, so let’s examine the code line by line:

48: We’re going to be storing a reference to the Dialog fragment’s instance in a controller variable “_oDialogFragment” so we declare it explicitly, mostly to give those reading our code a clue as to our intentions.

51-56: Ensuring we only instantiate the Dialog once, we use the sap.ui.xmlfragment call, with the fragmentContent property, passing the content of the fragment script with jQuery’s help (remember, the name of the fragment script is “dialog”). Once instantiated we add it as a dependent to the current XML View.

57: At this stage we know we have a Dialog ready, so we just open it up.

60-62: The onClose function handles the press event of the “Close” Button in the Dialog’s buttons aggregation.

And that’s pretty much it. Use <script> elements to embed XML Views and Fragments, and use sap.ui.xmlview and sap.ui.xmlfragment to instantiate them, with jQuery to grab the actual content.

30 Days of UI5 Page 60 of 88

This is a common pattern for fragments, so let’s examine the code line by line: 48

Day 21 - Spreading the UI5 Message

by DJ Adams

If you’re reading this post, or this whole series, it’s very likely that you already know something about UI5. Whether that’s coming from the SAP enterprise angle with the SAPUI5 flavour, or from the Open Source angle with the OpenUI5 flavour. But there are plenty of other souls out there that are still missing the UI5 salvation :-). And so I thought I’d briefly review the sorts of activities that have been happening over the last couple of years as far as evangelism, education, and advocacy are concerned.

Day 21 - Spreading the UI5 Message by DJ Adams If you’re reading this post, orwhole series ​ , it’s very likely that you already know something about UI5. Whether that’s coming from the SAP enterprise angle with the SAPUI5 flavour, or from the Open Source angle with the OpenUI5 flavour. But there are plenty of other souls out there that are still missing the UI5 salvation :-). And so I thought I’d briefly review the sorts of activities that have been happening over the last couple of years as far as evangelism, education, and advocacy are concerned. This is very timely, as this year’s OSCON has just finished in Portland, and a couple of UI5 team members ​ Janina Blaesius ​ and ​ Michael Graf ​ were there with a session on OpenUI5 : “ ​ No more web app headaches ​ “. Good work folks! (That's Michael in the picture, taken by Janina, by the way). OSCON is O’Reilly’s Open Source Convention, a venerable conference that I’ve been lucky enough to attend and speak at on and off since 2001. Last year, I co-presented ​ a tutorial session on OpenUI5 ​ at OSCON with ​ Andreas Kunz ​ team as Janina and Michael. and ​ Frederic Berg ​ – two more heroes from the same UI5 Not only that, but the ​ great news ​ is that at the EU version of OSCON, taking place in Amsterdam in October this year, there’s another session “ ​ Don’t Disconnect Me! The challenges of building offline-enabled web apps by another mighty UI5 team combo of ​ Christiane KurzOßwald ​ . Awesome! and ​ Matthias And even if you omit the usual suspect conferences such as SAP TechEd, there’s plenty more, far too much to list in this single post. But here’s a quick selection: FOSDEM : ​ OpenUI5 at FOSDEM 2015 Mastering SAP : ​ Speaking at Mastering SAP Technologies SAP Arch & Dev : ​ Speaking at the SAP Architect & Developer Summit Fluent : ​ OpenUI5 at Fluent Conference 2015 JSNext : ​ OpenUI5 at JSNext Bulgaria DevoxxUK : ​ DevoxxUK – One does like to code! 30 Days of UI5 Page 61 of 88 " id="pdf-obj-60-13" src="pdf-obj-60-13.jpg">

This is very timely, as this year’s OSCON has just finished in Portland, and a couple of UI5 team members Janina Blaesius

and Michael Graf

were there with a

session on OpenUI5 : “No more web app headaches“. Good work folks! (That's Michael in the

picture, taken by Janina, by the way).

OSCON is O’Reilly’s Open Source Convention, a venerable conference that I’ve been lucky enough

to attend and speak at on and off since 2001. Last year, I co-presented a tutorial session on

OpenUI5

at OSCON with Andreas Kunz

team as Janina and Michael.

and Frederic Berg

– two more heroes from the same UI5

Not only that, but the great news

is that at the EU version of OSCON, taking place in Amsterdam in

October this year, there’s another session “Don’t Disconnect Me! The challenges of building

offline-enabled web appsby another mighty UI5 team combo of Christiane KurzOßwald. Awesome!

and Matthias

And even if you omit the usual suspect conferences such as SAP TechEd, there’s plenty more, far too much to list in this single post. But here’s a quick selection:

30 Days of UI5 Page 61 of 88

Day 21 - Spreading the UI5 Message by DJ Adams If you’re reading this post, orwhole series ​ , it’s very likely that you already know something about UI5. Whether that’s coming from the SAP enterprise angle with the SAPUI5 flavour, or from the Open Source angle with the OpenUI5 flavour. But there are plenty of other souls out there that are still missing the UI5 salvation :-). And so I thought I’d briefly review the sorts of activities that have been happening over the last couple of years as far as evangelism, education, and advocacy are concerned. This is very timely, as this year’s OSCON has just finished in Portland, and a couple of UI5 team members ​ Janina Blaesius ​ and ​ Michael Graf ​ were there with a session on OpenUI5 : “ ​ No more web app headaches ​ “. Good work folks! (That's Michael in the picture, taken by Janina, by the way). OSCON is O’Reilly’s Open Source Convention, a venerable conference that I’ve been lucky enough to attend and speak at on and off since 2001. Last year, I co-presented ​ a tutorial session on OpenUI5 ​ at OSCON with ​ Andreas Kunz ​ team as Janina and Michael. and ​ Frederic Berg ​ – two more heroes from the same UI5 Not only that, but the ​ great news ​ is that at the EU version of OSCON, taking place in Amsterdam in October this year, there’s another session “ ​ Don’t Disconnect Me! The challenges of building offline-enabled web apps by another mighty UI5 team combo of ​ Christiane KurzOßwald ​ . Awesome! and ​ Matthias And even if you omit the usual suspect conferences such as SAP TechEd, there’s plenty more, far too much to list in this single post. But here’s a quick selection: FOSDEM : ​ OpenUI5 at FOSDEM 2015 Mastering SAP : ​ Speaking at Mastering SAP Technologies SAP Arch & Dev : ​ Speaking at the SAP Architect & Developer Summit Fluent : ​ OpenUI5 at Fluent Conference 2015 JSNext : ​ OpenUI5 at JSNext Bulgaria DevoxxUK : ​ DevoxxUK – One does like to code! 30 Days of UI5 Page 61 of 88 " id="pdf-obj-60-112" src="pdf-obj-60-112.jpg">

In September there’s another SAP Inside Track in Sheffield, where there will be talks on UI5 of course (well, I’m going! ;-) and a whole second day dedicated to learning and hacking with UI5.

I’m sure I’ve missed out some UI5 activities, so please let me know of others that have happened. And perhaps more importantly, let me know of any that are coming up, especially any that you’re planning, and I can add them here. Share & enjoy!

30 Days of UI5 Page 62 of 88

SAP Inside Track : ​ <a href=SAP Inside Track Manchester ​ , SAP Inside Track Sheffield – UK SAP CodeJam : ​ SAP CodeJam Liverpool – OpenUI5 Bacon : ​ OpenUI5 at BACON Conference In September there’s another ​ SAP Inside Track in Sheffield, where there will be talks on UI5 of course (well, I’m going! ;-) and a whole second day dedicated to ​ learning and hacking with UI5 ​ . I’m sure I’ve missed out some UI5 activities, so please let me know of others that have happened. And perhaps more importantly, let me know of any that are coming up, especially any that you’re planning, and I can add them here. Share & enjoy! 30 Days of UI5 Page 62 of 88 " id="pdf-obj-61-33" src="pdf-obj-61-33.jpg">

Day 22 - Merging lists with UI5

by Chris Choy

Whilst recently developing a custom UI5 app with a SAP PI backend integrating legacy backend systems, I came across some useful frontend mechanisms. One of my aims was to merge two sets of data from two REST service calls into an Object List Item. Normally Object List Items are limited to a single data source type binding. Having already bound one set of data to my XML View, my initial thought was to use a formatter to pass in two object arrays and manipulate the data within a function in my Formatter.js file. As you probably imagined, this simply didn’t work due to the multiple calls to the formatter. I should mention that both service calls returned data in a JSON format rather than standard OData. My next approach was to manipulate the two arrays in the View’s controller and merge the two into a new (sorted) array assigning it to the App Model in the Component. One of the benefits of doing this is that you can define your own attribute names and data which is then globally accessible within the app.

Using the code below you can specify a path to set your new data:

this.oModel.setProperty("/newPath", mergedArray);

Another related issue faced was the searching of specific object attributes within an array of objects. The context of this search was to allow a user to select an item from an Object List Item and load additional data in a second detail view. Having already passed the relevant #parameters within my Router it was jQuery to the rescue. The jQuery.grep function allows you to perform wildcard search on an array of attributes without the need to manually perform a loop through each element. By passing an array as an argument, a test against a defined index is performed returning all the entries that satisfy the function as a new array.

var aResult = $.grep(dataArray, function (e) { return e.attributeName.indexOf(("searchAttribute",) == 0; });

One final mechanism used in this app was the storing of hidden Custom Data objects within an XML View. Using the following code:

xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"

<ObjectListItem title=”List” app:key="{hiddenKey}" />

30 Days of UI5 Page 63 of 88

Day 22 - Merging lists with UI5 by Chris Choy Whilst recently developing a custom UI5

With the app:key approach you can access any defined Custom Data objects using the .data() method within the Controller of your View.

For additional information checkout the following links jQuery.grep

and CustomData objects.

30 Days of UI5 Page 64 of 88

With the app:key approach you can access any defined Custom Data objects using the .data() methodjQuery.grep ​ and ​ CustomData objects ​ . 30 Days of UI5 Page 64 of 88 " id="pdf-obj-63-17" src="pdf-obj-63-17.jpg">

Day 23 - Taming the Resource Model Files

by Nathan Adams

UI5’s support for multiple-languages, out of the box (see the post “Multi-language support out of the box – UI5’s pedigree” in this series) is impressive and easy to use. Creating a message resource bundle in your Component.js file is straightforward, especially if picking up the user’s language preferences in the browser.

What can be less straightforward though is organising these files into something manageable, for plenty of projects, your i18n file might be on the small side, but it’s pretty easy to build up a large file. An application I’m currently working on, which perhaps has only 50% of its views defined, already has just 100 definitions in the i18n file. (A quick look at the Fiori My Travel Expenses App v2 shows there are around 1000 lines, and about 500 definitions in the resource file and whilst reasonably well documented with comments – you may well be hunting for usage of a text).

#XBUT,20: Button that distributes (shares) the total amount evenly between all attendees DISTRIBUTE_EVENLY=Distribute Amounts Evenly

#XBUT,20: add internal attendee button ADD_INTERNAL_ATTENDEE=Add Internal Attendee

#XBUT,20: add external attendee button ADD_EXTERNAL_ATTENDEE=Add External Attendee

#XFLD,20: FirstName – LastName in the right order, e.g. EN: Smith, John ATTENDEE_FULLNAME_ARTIFACT={1}, {0}

#XTIT: title of Add Internal Attendees select dialog INTERNAL_ATTENDEES_TIT=Add Internal Attendees

#XTIT: title of Add External Attendees dialog EXTERNAL_ATTENDEES_TIT=Add External Attendees

Example of a Fiori Resource Model file from ‘My Travel Expenses’

Before we dive into the structure of the key value pairs of the file though, it’s worth thinking about if one file for all your texts makes sense. In the majority of cases, you really wouldn’t want to add further complexity by adding more files. in my experience though, there are some cases where creating additional resource files may be useful.

30 Days of UI5 Page 65 of 88

Day 23 - Taming the Resource Model Files by Nathan Adams UI5’s support for multiple-languages, out

You may have texts which are more prone to change, perhaps email / telephone contact details in messages; putting these into a separate file might make sense to de-risk the process of updating them when they need to change Common elements across a suite of applications Master data texts, if you have a lot of these, then consider separate files for them You may have texts, or elements of texts which don’t need translation, and you want to keep consistent across all languages (that email example above, you don’t want to update that in multiple language files every time) Lastly just like code – if it’s too long, break it up. Large app with 100’s if not 1000’s of terms? Split it up, maybe by view, or group of views.

As we move on into the structure of these files, it might not seem to be important (you can always search for a term in your chosen IDE after all), but like all good coding practices, structure can be immensely helpful in the following regards

Identifying gaps in language files becomes easier – so you don’t discover in the first round of translation that you had some texts hardcoded into your XML views Making changes to texts, when a change is requested becomes a lot easier When sending out for translation, identifying which text is which becomes easier Because the file can be more easily understood, then it becomes an easier artefact to distribute, potentially removing the need for conversion back and forth between spreadsheets

How you choose to organise the language file is a matter of preference, however in my experience there are two key things I like to highlight and organise in the language file:

Common terms Terms organised by View or Fragment / Control / Property

I’ll define all the common terms at the beginning of my language file. My preference for all my keys, is to use a dot notation to specify them (as it lines up nicely with identification of components). So here’s an example:

#Common Terms common.thing=Foo common.items=Items common.add=Add ...

30 Days of UI5 Page 66 of 88

● You may have texts which are more prone to change, perhaps email / telephone contact

Thing is though, common terms feel like something I should have in my application; you want to make sure that when you call a thing, Foo it’s always a Foo and when it’s requested to change to Bar I can change the common term, and my job is done. In practice though, this never really works. Why? Well I might be able to define those common terms, but in the majority of cases I always need to fit them into a longer text, such as Create a Foo or Delete Foos.

OK so maybe I can define some common texts, and do some clever pre-processing with Grunt to expand placeholders in my text, or do the same when I load the resource file

#Specifc Terms (pre-process) master.things.addThing=Add {common.thing} master.things.deleteThings=Delete {common.thing}s

#Specific Terms (post-process) master.things.addThing=Add Foo master.things.deleteThings=Delete Foos

Nice? Well not really, it’s not a great practice to make longer texts out of shorter texts. Consider the need to correctly handle plurals or other modifications you might require. Let’s say we can have Foos but it’s not Bars but Baren then my nice easy change above isn’t going to work. Then other languages might not have the same syntactic structures, and I could finish up chasing my tail trying to get it right across all languages, or finishing up like those pre-recorded train announcements made up of single recorded chunks – they work, but just sound awful.

There is one valid place for common terms, and you might therefore still want to define them in your main i18n file (or even a separate one you don’t load). That’s as a glossary to help those maintaining the file. Adding common.thing=Foo to the head of the file, even if never used will help those coming along after to understand how things are referred to. It’s a good UX practice, and fundamental to building a consistent experience.

So most of my definitions though, will be very specific to a view or fragment, and therefore, I like to identify these, in this manner, with the application as an implied root. If I’m developing a Split App, which has for example the following views

Tasks (Master) Services (Master) Rounds (Detail) Details (Fragment used in Rounds)

then I’ll structure my language file, very specifically to reference the view, the control(s) in the view, and where appropriate the property. Which might result in something like:

30 Days of UI5 Page 67 of 88

Thing is though, common terms feel like something I should have in my application; you want

#Master views #Tasks master.tasks.title=Maintenance Tasks #Services master.services.title=Active Services master.services.toolbar.button.add=Add Service master.services.toolbar.button.delete=Delete Services #Detail Views #Rounds detail.rounds.title=Round Definition detail.rounds.tabBar.tab.details=Details detail.rounds.tabBar.tab.vehicles=Vehicles #Rounds / Vehicles fragment detail.rounds.fragment.vehicles.column.title.service=Service detail.rounds.fragment.vehicles.column.title.capacity=Capacity ...

Admittedly this is quite a verbose approach, and it requires a little discipline to use, but the advantages are plain to see – I immediately get a sense of where a text might appear in the user interface, I also can get a sense of if anything is missing (for example I’d expect every view to have a {view}.title attribute.

By taking a structured approach to the language file, it also makes it easier to set up controls with bindings to the language file, as there is no need to try and think of a name. It goes without saying that you should be building your xml views with bindings for texts from the very start of development – no one wants to go back and to add them all in at a later date (if you do, that’s precious velocity you’re wasting).

Who thought such a straightforward flat structured concept could require so many considerations?

30 Days of UI5 Page 68 of 88

#Master views #Tasks master.tasks.title=Maintenance Tasks #Services master.services.title=Active Services master.services.toolbar.button.add=Add Service master.services.toolbar.button.delete=Delete Services #Detail Views #Rounds detail.rounds.title=Round

Day 24 - An Introduction to sap.ui.define

by DJ Adams

If you’ve followed this series you’ll have come across the OpenUI5 Walkthrough, a “a great multi-step walkthrough of many of the features and practices of UI5 development”.

In Step 5 of the walkthrough, on “Controllers”, we’re introduced to something that looks unfamiliar. Especially to those who have written large numbers of controllers thus far, for example. The way the XML View’s Controller is defined is different. Step 5 doesn’t say much specifically about how this works, but Step 6, on “Modules”, does.

This is what the Controller source code looks like:

Day 24 - An Introduction to sap.ui.define by DJ Adams If you’ve followed this series you’llOpenUI5 Walkthrough ​ , a “a great multi-step walkthrough of many of the features and practices of UI5 development”. In Step 5 of the walkthrough, on “Controllers”, we’re introduced to something that looks unfamiliar. Especially to those who have written large numbers of controllers thus far, for example. The way the XML View’s Controller is defined is … different. Step 5 doesn’t say much specifically about how this works, but Step 6, on “Modules”, does. This is what the Controller source code looks like: So what’s happening here? 30 Days of UI5 Page 69 of 88 " id="pdf-obj-68-18" src="pdf-obj-68-18.jpg">
Day 24 - An Introduction to sap.ui.define by DJ Adams If you’ve followed this series you’llOpenUI5 Walkthrough ​ , a “a great multi-step walkthrough of many of the features and practices of UI5 development”. In Step 5 of the walkthrough, on “Controllers”, we’re introduced to something that looks unfamiliar. Especially to those who have written large numbers of controllers thus far, for example. The way the XML View’s Controller is defined is … different. Step 5 doesn’t say much specifically about how this works, but Step 6, on “Modules”, does. This is what the Controller source code looks like: So what’s happening here? 30 Days of UI5 Page 69 of 88 " id="pdf-obj-68-20" src="pdf-obj-68-20.jpg">

So what’s happening here?

30 Days of UI5 Page 69 of 88

Day 24 - An Introduction to sap.ui.define by DJ Adams If you’ve followed this series you’llOpenUI5 Walkthrough ​ , a “a great multi-step walkthrough of many of the features and practices of UI5 development”. In Step 5 of the walkthrough, on “Controllers”, we’re introduced to something that looks unfamiliar. Especially to those who have written large numbers of controllers thus far, for example. The way the XML View’s Controller is defined is … different. Step 5 doesn’t say much specifically about how this works, but Step 6, on “Modules”, does. This is what the Controller source code looks like: So what’s happening here? 30 Days of UI5 Page 69 of 88 " id="pdf-obj-68-26" src="pdf-obj-68-26.jpg">

Well, what’s happening is that we’re seeing the beginning of a migration to an Asynchronous Module Definition (AMD) style mechanism. And the principle vehicle for this is a new function sap.ui.define, which was introduced to the world in 1.28 (1.27 internally).

There’s already some API documentation for this experimental new way to define modules that you can read in the API reference guide for sap.ui.define itself. There you’ll see how there’s a transition planned away from synchronous, and towards asynchronous loading. You’ll see for example that the optional fourth parameter “bExport” of sap.ui.define is there to support that transition.

While there’s plenty to read there, let’s just take a quick look at what it means for those like us at the UI5 coalface. We’ll take the code in the screenshot above as an example:

Instead of calling something like this

sap.ui.core.mvc.Controller.extend("your.name.here", { // your controller logic here });

we can use the new more generic sap.ui.define to first of all declare dependencies and then define the factory function that becomes the controller, in this case. Let’s take a look at the code and examine it line by line:

Well, what’s happening is that we’re seeing the beginning of a migration to an Asynchronous Module

1-14: The call to sap.ui.define extends across all the lines here; and we can see that out of the four total possible parameters described in the API reference, only two are used: the optional list of dependencies (represented here by the array) and the factory function that has a single statement returning an extended controller.

30 Days of UI5 Page 70 of 88

Well, what’s happening is that we’re seeing the beginning of a migration to an Asynchronous Module

2-3: These are the dependencies. We’re defining a Controller, so we’ll want to extend UI5’s core controller (in the same way that we often do, such as in the example earlier). For that, we have a dependency on sap.ui.core.mvc.Controller. We’re also using the Message Toast’s “show” function, so we declare a dependency on sap.m.MessageToast. Note that the dependencies are expressed as resource paths (with the .js suffix omitted of course).

4: The second parameter passed in the call to sap.ui.define is the factory, and we can see the function definition start here. Note that each dependency reference is given to this factory function, in the same order that they’re declared in the dependency list. By convention, the most significant part of the resource path name is used for the parameter name (for example “Controller” for sap.ui.more.mvc.Controller).

5: The call to “use strict” is not specifically a feature of the new module definition syntax, but it is significant in that there is growing focus on JavaScript syntax correctness and linting. For more on this, see another post in this series: “UI5 and Coding Standards“.

7-12: The rest of the source code looks fairly familiar. There’s one exception though, and it’s a result of the dependency mechanism described earlier. The function has “Controller” and “MessageToast” available to it, and so we can and should use these to refer to the sap.ui.core.mvc.Controller and sap.m.MessageToast resources throughout. This is nice, and makes for slightly neater code too.

It’s early days for the new define mechanism, and there’s clearly a journey ahead for those in the core UI5 team looking after fundamental module and dependency loading and management mechanisms. But even at this early stage, it’s worth paying attention to the direction UI5 is going in this regard, and start to experiment. I know I will be!

30 Days of UI5 Page 71 of 88

2-3 ​ : These are the dependencies. We’re defining a Controller, so we’ll want to extend

Day 25 - The experimental Client operation mode

by DJ Adams

A few months ago a preview release of 1.28 was made available. In the blog post that accompanied it, a number of the new features were introduced. Without much fanfare, certainly without any cool looking screenshots, the experimental “Client” operation mode was announced for the OData Model mechanism.

OData Model – Server-side

Day 25 - The experimental Client operation mode by DJ Adams A few months ago athe blog post that accompanied it ​ , a number of the new features were introduced. Without much fanfare, certainly without any cool looking screenshots, the experimental “Client” operation mode was announced for the OData Model mechanism. OData Model – Server-side The OData Model is special, in that it is ​ classified ​ as a server-side model, unlike its client-side siblings such as the JSON Model or the XML Model (or the Resource Model, for that matter). This means that the data “home” is seen as the server, rather than the client (the browser). Consequently, any operations on that data, even read-only operations such as sorting and filtering, take place on the server. That means extra network calls. ​ There are truly marvellous advantages also, which the margin [of this post] is too narrow to contain ​ . There are circumstances, even when dealing with entity sets in OData services, where sorting and filtering could and should take place on the client, rather than on the server. To this end, 1.28 brought an initial experimental feature to the OData Model mechanism – the ​ OData Operation Mode ​ . Operation Mode The Operation Mode joins a small but important set of modes relating to the OData Model mechanism. By default, the Operation Mode is “Server”. But it can be set to “Client”, which causes all data to be loaded from the server and for subsequent sorting and filtering operations to be performed in the client, without further network calls. As the blog post mentions, this only really makes sense as long as there isn’t a ton of data. Note that the Operation Mode is related to the OData Model mechanism instantiation in that it is the ​ default ​ for that model instance. You actually specify the mode for a binding, as shown in the code snippet in the blog post: oTable.bindRows({ path: "/Product_Sales_for_1997", parameters: { operationMode: sap.ui.model.odata.OperationMode.Client } }); 30 Days of UI5 Page 72 of 88 " id="pdf-obj-71-15" src="pdf-obj-71-15.jpg">

The OData Model is special, in that it is classified

as a server-side model, unlike its client-side

siblings such as the JSON Model or the XML Model (or the Resource Model, for that matter). This

means that the data “home” is seen as the server, rather than the client (the browser). Consequently, any operations on that data, even read-only operations such as sorting and filtering, take place on the server. That means extra network calls. There are truly marvellous advantages also, which the margin [of this post] is too narrow to contain.

There are circumstances, even when dealing with entity sets in OData services, where sorting and filtering could and should take place on the client, rather than on the server. To this end, 1.28 brought an initial experimental feature to the OData Model mechanism – the OData Operation Mode.

Operation Mode

The Operation Mode joins a small but important set of modes relating to the OData Model mechanism. By default, the Operation Mode is “Server”. But it can be set to “Client”, which causes all data to be loaded from the server and for subsequent sorting and filtering operations to be performed in the client, without further network calls. As the blog post mentions, this only really makes sense as long as there isn’t a ton of data.

Note that the Operation Mode is related to the OData Model mechanism instantiation in that it is

the default

for that model instance. You actually specify the mode for a binding, as shown in the

code snippet in the blog post:

oTable.bindRows({ path: "/Product_Sales_for_1997", parameters: { operationMode: sap.ui.model.odata.OperationMode.Client

}

});

30 Days of UI5 Page 72 of 88

Day 25 - The experimental Client operation mode by DJ Adams A few months ago athe blog post that accompanied it ​ , a number of the new features were introduced. Without much fanfare, certainly without any cool looking screenshots, the experimental “Client” operation mode was announced for the OData Model mechanism. OData Model – Server-side The OData Model is special, in that it is ​ classified ​ as a server-side model, unlike its client-side siblings such as the JSON Model or the XML Model (or the Resource Model, for that matter). This means that the data “home” is seen as the server, rather than the client (the browser). Consequently, any operations on that data, even read-only operations such as sorting and filtering, take place on the server. That means extra network calls. ​ There are truly marvellous advantages also, which the margin [of this post] is too narrow to contain ​ . There are circumstances, even when dealing with entity sets in OData services, where sorting and filtering could and should take place on the client, rather than on the server. To this end, 1.28 brought an initial experimental feature to the OData Model mechanism – the ​ OData Operation Mode ​ . Operation Mode The Operation Mode joins a small but important set of modes relating to the OData Model mechanism. By default, the Operation Mode is “Server”. But it can be set to “Client”, which causes all data to be loaded from the server and for subsequent sorting and filtering operations to be performed in the client, without further network calls. As the blog post mentions, this only really makes sense as long as there isn’t a ton of data. Note that the Operation Mode is related to the OData Model mechanism instantiation in that it is the ​ default ​ for that model instance. You actually specify the mode for a binding, as shown in the code snippet in the blog post: oTable.bindRows({ path: "/Product_Sales_for_1997", parameters: { operationMode: sap.ui.model.odata.OperationMode.Client } }); 30 Days of UI5 Page 72 of 88 " id="pdf-obj-71-61" src="pdf-obj-71-61.jpg">

Experiment!

This experimental feature was crying out for well, experimentation. So I threw together an MVC ("model view controller, minimum viable code") based app to test it out. Here’s the result:

Experiment! This experimental feature was crying out for … well, experimentation. So I threw together anhttp://services.odata.org/V2/Northwind/Northwind.svc/ ​ . Note that the Operation Mode is only available on the ​ v2 version of the OData Model mechanism ​ , so that’s what I’m using here. Initially the binding to the List’s items aggregation is with the (default) value of “Server” for the Operation Mode. You can see the network calls that are made to ask the OData service to return the entities in a specific order (with the $orderby OData parameter) each time I hit the sort button, which is toggling between ascending and descending sorting of the category names. But then, in the console, I grab the List, and re-bind the items aggregation, to the same path (“/Categories”) but in “Client” Operation Mode. The result is that a new call is made to fetch the 30 Days of UI5 Page 73 of 88 " id="pdf-obj-72-8" src="pdf-obj-72-8.jpg">

Here we have a test app with a List, where the items aggregation is bound to the Categories entity set in the public Northwind OData service at

Note that the Operation Mode is only available on the v2 version of the OData Model mechanism, so that’s what I’m using here.

Initially the binding to the List’s items aggregation is with the (default) value of “Server” for the Operation Mode. You can see the network calls that are made to ask the OData service to return the entities in a specific order (with the $orderby OData parameter) each time I hit the sort button, which is toggling between ascending and descending sorting of the category names.

But then, in the console, I grab the List, and re-bind the items aggregation, to the same path (“/Categories”) but in “Client” Operation Mode. The result is that a new call is made to fetch the

30 Days of UI5 Page 73 of 88

Experiment! This experimental feature was crying out for … well, experimentation. So I threw together anhttp://services.odata.org/V2/Northwind/Northwind.svc/ ​ . Note that the Operation Mode is only available on the ​ v2 version of the OData Model mechanism ​ , so that’s what I’m using here. Initially the binding to the List’s items aggregation is with the (default) value of “Server” for the Operation Mode. You can see the network calls that are made to ask the OData service to return the entities in a specific order (with the $orderby OData parameter) each time I hit the sort button, which is toggling between ascending and descending sorting of the category names. But then, in the console, I grab the List, and re-bind the items aggregation, to the same path (“/Categories”) but in “Client” Operation Mode. The result is that a new call is made to fetch the 30 Days of UI5 Page 73 of 88 " id="pdf-obj-72-28" src="pdf-obj-72-28.jpg">

entities to satisfy that (new) binding, but further sorts are done entirely on the client – there are no more network calls made.

I’d call that experiment a success, and I’m looking forward to developments in this area. Nice work, UI5 team!

30 Days of UI5 Page 74 of 88

entities to satisfy that (new) binding, but further sorts are done entirely on the client –

Day 26 - UI5 – looking back and forward

by DJ Adams

It was in the spring of 2012 when I wrote this piece about the new kid on the block, SAPUI5:

Day 26 - UI5 – looking back and forward by DJ Adams It was in theSAPUI5 – The Future direction of SAP UI Development? The fledgling toolkit had been released at version 1.2 earlier that year, and while it had clearly been in gestation for a while inside SAP, it was still new and raw enough to make folks wonder what it was all about. More than the newness or the rawness was how it was different, how it changed the rules. And what made it even more interesting was the fact that while SAP had changed a lot of rules since the 80s, this time, it was SAP embracing common practices and growing standards outside its own development ecosphere. And that was a good thing. So SAPUI5 was not just a toolkit, it was more than that. It was arguably the poster child for how SAP was changing, changing to embrace, adopt and build upon open standards and protocols. Of course, that had been happening for a while, most notably, ​ at least in my opinion, by the introduction of the Internet Communication Manager (and corresponding user-space Internet Communication Framework) to the R/3 architecture, allowing SAP systems to speak HTTP natively. And there was OData, which SAP adopted as a REST-informed protocol and format for the next generation of business integration. It had been a long time coming; the journey from service-orientation to resource-orientation starting from the mid 2000’s — with posts like this: Forget SOAP – Build Real Web Services with the ICF :-) — was long and arduous. So it was met by some with trepidation, wonder, cynicism even. But the rise and rise of UI5’s success has been undeniable. Success not only in becoming the engine powering the first SAP Fiori UX revolution, but also in the move towards a more open and outward facing development approaches. The UI5 teams of designers and developers themselves, in Walldorf and around the world, have open software and standards in their DNA. UI5 itself has been open sourced. The development standards and processes are, out of necessity, different. And we can see that first hand. Just look at the home of UI5 on the web – at ​ https://github.com/SAP/openui5 ​ . Github! 30 Days of UI5 Page 75 of 88 " id="pdf-obj-74-10" src="pdf-obj-74-10.jpg">

The fledgling toolkit had been released at version 1.2 earlier that year, and while it had clearly been in gestation for a while inside SAP, it was still new and raw enough to make folks wonder what it was all about. More than the newness or the rawness was how it was different, how it changed the rules. And what made it even more interesting was the fact that while SAP had changed a lot of rules since the 80s, this time, it was SAP embracing common practices and growing standards outside its own development ecosphere. And that was a good thing.

So SAPUI5 was not just a toolkit, it was more than that. It was arguably the poster child for how SAP was changing, changing to embrace, adopt and build upon open standards and protocols.

Of course, that had been happening for a while, most notably, at least in my opinion, by the introduction of the Internet Communication Manager (and corresponding user-space Internet Communication Framework) to the R/3 architecture, allowing SAP systems to speak HTTP natively. And there was OData, which SAP adopted as a REST-informed protocol and format for the next generation of business integration. It had been a long time coming; the journey from service-orientation to resource-orientation starting from the mid 2000’s — with posts like this:

So it was met by some with trepidation, wonder, cynicism even. But the rise and rise of UI5’s success has been undeniable. Success not only in becoming the engine powering the first SAP Fiori UX revolution, but also in the move towards a more open and outward facing development approaches.

The UI5 teams of designers and developers themselves, in Walldorf and around the world, have open software and standards in their DNA. UI5 itself has been open sourced. The development standards and processes are, out of necessity, different. And we can see that first hand. Just look at the home of UI5 on the web – at https://github.com/SAP/openui5. Github!

30 Days of UI5 Page 75 of 88

Day 26 - UI5 – looking back and forward by DJ Adams It was in theSAPUI5 – The Future direction of SAP UI Development? The fledgling toolkit had been released at version 1.2 earlier that year, and while it had clearly been in gestation for a while inside SAP, it was still new and raw enough to make folks wonder what it was all about. More than the newness or the rawness was how it was different, how it changed the rules. And what made it even more interesting was the fact that while SAP had changed a lot of rules since the 80s, this time, it was SAP embracing common practices and growing standards outside its own development ecosphere. And that was a good thing. So SAPUI5 was not just a toolkit, it was more than that. It was arguably the poster child for how SAP was changing, changing to embrace, adopt and build upon open standards and protocols. Of course, that had been happening for a while, most notably, ​ at least in my opinion, by the introduction of the Internet Communication Manager (and corresponding user-space Internet Communication Framework) to the R/3 architecture, allowing SAP systems to speak HTTP natively. And there was OData, which SAP adopted as a REST-informed protocol and format for the next generation of business integration. It had been a long time coming; the journey from service-orientation to resource-orientation starting from the mid 2000’s — with posts like this: Forget SOAP – Build Real Web Services with the ICF :-) — was long and arduous. So it was met by some with trepidation, wonder, cynicism even. But the rise and rise of UI5’s success has been undeniable. Success not only in becoming the engine powering the first SAP Fiori UX revolution, but also in the move towards a more open and outward facing development approaches. The UI5 teams of designers and developers themselves, in Walldorf and around the world, have open software and standards in their DNA. UI5 itself has been open sourced. The development standards and processes are, out of necessity, different. And we can see that first hand. Just look at the home of UI5 on the web – at ​ https://github.com/SAP/openui5 ​ . Github! 30 Days of UI5 Page 75 of 88 " id="pdf-obj-74-40" src="pdf-obj-74-40.jpg">
The development process is there for us to see, warts and all. The smallest changes aresimple improvement for variable declaration ​ in the code for the Message Popover control in the sap.m library. It doesn’t matter what it is, what matters is that it’s open. For us all to see, scrutinise, and most importantly, learn from. UI5 powers SAP Fiori, the services of their cloud offerings (for example in the form of the Web IDE, written in UI5) and of course the S/4HANA business suite. It’s destined to become a part of the future normal ​ . It’s a toolkit with a strong pedigree, a toolkit that is not perfect (I can’t think of any software that is) but a toolkit with passionate folks behind it. It’s gaining some adoption outside of the SAP ecosphere too, and in some cases is almost becoming part of the furniture – not the focus of energy, but the enabler of solutions. It Just Works(tm) and gets out of the way. That for me is a sign of growing maturity. 30 Days of UI5 Page 76 of 88 " id="pdf-obj-75-2" src="pdf-obj-75-2.jpg">

The development process is there for us to see, warts and all. The smallest changes are being done, in public. Look at the one authored 11 hours ago in this screenshot. It’s a simple

in the code for the Message Popover control in the sap.m

library. It doesn’t matter what it is, what matters is that it’s open. For us all to see, scrutinise, and

most importantly, learn from.

UI5 powers SAP Fiori, the services of their cloud offerings (for example in the form of the Web IDE, written in UI5) and of course the S/4HANA business suite. It’s destined to become a part of the future normal. It’s a toolkit with a strong pedigree, a toolkit that is not perfect (I can’t think of any software that is) but a toolkit with passionate folks behind it. It’s gaining some adoption outside of the SAP ecosphere too, and in some cases is almost becoming part of the furniture – not the focus of energy, but the enabler of solutions. It Just Works(tm) and gets out of the way. That for me is a sign of growing maturity.

30 Days of UI5 Page 76 of 88

The development process is there for us to see, warts and all. The smallest changes aresimple improvement for variable declaration ​ in the code for the Message Popover control in the sap.m library. It doesn’t matter what it is, what matters is that it’s open. For us all to see, scrutinise, and most importantly, learn from. UI5 powers SAP Fiori, the services of their cloud offerings (for example in the form of the Web IDE, written in UI5) and of course the S/4HANA business suite. It’s destined to become a part of the future normal ​ . It’s a toolkit with a strong pedigree, a toolkit that is not perfect (I can’t think of any software that is) but a toolkit with passionate folks behind it. It’s gaining some adoption outside of the SAP ecosphere too, and in some cases is almost becoming part of the furniture – not the focus of energy, but the enabler of solutions. It Just Works(tm) and gets out of the way. That for me is a sign of growing maturity. 30 Days of UI5 Page 76 of 88 " id="pdf-obj-75-24" src="pdf-obj-75-24.jpg">

Day 27 - A non-techie PM’s view of UI5

by Jon Gregory

I’m mid-flight in my first UI5/Gateway project, working with a great team of developers who have all contributed to this 30 Days of UI5 series. As a non-techie Project Manager embarking on mobile development for the first time, I thought I’d share some of my experiences and tips.

This isn’t regular SAP configuration – this is mobile development.

My experience of SAP to date has been in software modules – EPM, BW, CRM, for example. It’s easy to think of a UI5/Gateway project in the same way because they’re SAP products, but putting the name to one side, the difference between enterprise software and mobile development is huge.

This is obvious to those familiar with mobile development, but not so obvious to those new to this area. Prior to embarking on any UI5 project, get hold of case studies, project plans, artefacts, lessons learned and people that have delivered UI5 applications to get an understanding of how to set your project up for success. If you’re experience is largely in enterprise software projects, this is going to be very different :-).

Nail your branch & review strategy early on

At the beginning of the project, work with your team to develop a branch & review strategy. Agree a process for matching short-lived feature branches to tasks, for reviewing code prior to any merging, and also ensure that development branches are tidy and up to date – that is, delete any old branches, or branches that are no longer needed.

A friend told me a story of a time when he was working in a fast moving and experienced frontend/toolkit development team. He’d had a scattering of branches lying around his local repo, and a Ukranian colleague, in a thick accent, speaking German, reprimanded him gently but firmly:

“What are all these branches doing clogging up your workspace and your brain? Get rid of them!”.

Allow enough time for planning – agile doesn’t excuse poor process

I found it’s easy to run in to development with a bunch of user stories and little else. Although UI5 lends itself to agile development, there still needs to be adequate time allocated to planning sprints, and also fundamental architecture design, not only for the UI itself, but for the data design and integration. Factor this in to your plans from the very beginning and don’t budge – if anything should give as a result of time, cost or scope constraints, it mustn’t be the preparation that goes in to making sprints a success.

30 Days of UI5 Page 77 of 88

Day 27 - A non-techie PM’s view of UI5 by Jon Gregory I’m mid-flight in my

Embrace it

Working with UI5, I’ve discovered methods of project delivery that are entirely different from the standard Waterfall/ASAP approach so often adopted in enterprise software projects. I’ve also found it hugely rewarding to see an intuitive, easy to use application come to life and, more importantly, so has our customer (case study is in progress – more on that soon).

So in summary, my advice is:

Forget about normal SAP – walk in with an open mind Set out development processes with your team from day one Plan, plan, plan

Enjoy it!

I’d be really interested to hear about other experiences of managing or coordinating UI5/Gateway projects, and listen to any advice you may have.

30 Days of UI5 Page 78 of 88

Embrace it Working with UI5, I’ve discovered methods of project delivery that are entirely different from

Day 28 - UI5 Version Info

by DJ Adams

Yesterday Peter Müßig from the UI5 team at SAP

in Walldorf announcedcapability for SAPUI5.

the multi-version

He also documented the details in a post on the SAP Community Network here: “Multi-Version availability of SAPUI5“. Shortly after, the

was also made that this would also

be available for OpenUI5.

Day 28 - UI5 Version Info by DJ Adams Yesterday Peter Müßig from the UI5 teamannounced ​ capability for SAPUI5. the multi-version He also documented the details in a post on the SAP Community Network here: “ ​ Multi-Version availability of SAPUI5 ​ “. Shortly after, the announcement ​ was also made that this would also be available for OpenUI5. This is great news, and something that we’ve been waiting for now for a while. It makes perfect sense, and the ability to select a particular runtime version via a part of the bootstrap URL’s path info is very nice. It’s something I do locally on my workstation anyway, and I also have a ‘latest’ symbolic link that I ensure points to the latest copy of the runtime or SDK that I have locally. Along with the announcement came a link to a simple ​ SAPUI5 Version Overview ​ It looks like this: page, built in UI5. And if you look under the covers, you’ll see a single-file app, with a lot of custom CSS, some JavaScript view stuff going on, and the retrieval of a couple of JSON resources containing the version overview info ​ and the data from the ​ neo-app.json ​ file that is present in the HCP platform 30 Days of UI5 Page 79 of 88 " id="pdf-obj-78-29" src="pdf-obj-78-29.jpg">

This is great news, and something that we’ve been waiting for now for a while. It makes perfect sense, and the ability to select a particular runtime version via a part of the bootstrap URL’s path info is very nice. It’s something I do locally on my workstation anyway, and I also have a ‘latest’ symbolic link that I ensure points to the latest copy of the runtime or SDK that I have locally.

Along with the announcement came a link to a simple SAPUI5 Version OverviewIt looks like this:

page, built in UI5.

Day 28 - UI5 Version Info by DJ Adams Yesterday Peter Müßig from the UI5 teamannounced ​ capability for SAPUI5. the multi-version He also documented the details in a post on the SAP Community Network here: “ ​ Multi-Version availability of SAPUI5 ​ “. Shortly after, the announcement ​ was also made that this would also be available for OpenUI5. This is great news, and something that we’ve been waiting for now for a while. It makes perfect sense, and the ability to select a particular runtime version via a part of the bootstrap URL’s path info is very nice. It’s something I do locally on my workstation anyway, and I also have a ‘latest’ symbolic link that I ensure points to the latest copy of the runtime or SDK that I have locally. Along with the announcement came a link to a simple ​ SAPUI5 Version Overview ​ It looks like this: page, built in UI5. And if you look under the covers, you’ll see a single-file app, with a lot of custom CSS, some JavaScript view stuff going on, and the retrieval of a couple of JSON resources containing the version overview info ​ and the data from the ​ neo-app.json ​ file that is present in the HCP platform 30 Days of UI5 Page 79 of 88 " id="pdf-obj-78-41" src="pdf-obj-78-41.jpg">

And if you look under the covers, you’ll see a single-file app, with a lot of custom CSS, some JavaScript view stuff going on, and the retrieval of a couple of JSON resources containing the

and the data from the neo-app.json

file that is present in the HCP platform

30 Days of UI5 Page 79 of 88

Day 28 - UI5 Version Info by DJ Adams Yesterday Peter Müßig from the UI5 teamannounced ​ capability for SAPUI5. the multi-version He also documented the details in a post on the SAP Community Network here: “ ​ Multi-Version availability of SAPUI5 ​ “. Shortly after, the announcement ​ was also made that this would also be available for OpenUI5. This is great news, and something that we’ve been waiting for now for a while. It makes perfect sense, and the ability to select a particular runtime version via a part of the bootstrap URL’s path info is very nice. It’s something I do locally on my workstation anyway, and I also have a ‘latest’ symbolic link that I ensure points to the latest copy of the runtime or SDK that I have locally. Along with the announcement came a link to a simple ​ SAPUI5 Version Overview ​ It looks like this: page, built in UI5. And if you look under the covers, you’ll see a single-file app, with a lot of custom CSS, some JavaScript view stuff going on, and the retrieval of a couple of JSON resources containing the version overview info ​ and the data from the ​ neo-app.json ​ file that is present in the HCP platform 30 Days of UI5 Page 79 of 88 " id="pdf-obj-78-57" src="pdf-obj-78-57.jpg">

and which describes routes to destinations, which include the SAPUI5 runtime services, now available at different paths for different versions.

The result is an app that looks OK on the desktop but doesn’t look that well on a smartphone, as you can see on the right.

So I spent some time on the train down from Manchester to London early this morning to see what I could do.

  • I wanted to address a couple of things:

have the smartphone as the target device, rebuilding the UI with an App control improve the binding, to a single data collection

and which describes routes to destinations, which include the SAPUI5 runtime services, now available at differentcomplex manipulation and merging of those two datasets ​ , and the ​ mix of UI5 controls with raw HTML header elements ​ . The result is an app that looks OK on the desktop but doesn’t look that well on a smartphone, as you can see on the right. So I spent some time on the train down from Manchester to London early this morning to see what I could do. I wanted to address a couple of things: ● have the smartphone as the target device, rebuilding the UI with an App control ● improve the binding, to a single data collection The UI part was straightforward. I used my MVC technique (see "MVC – Model View Controller, Minimum Viable Code" from earlier in this series) to define a new View, declaratively in XML. I used an App control with a couple of Pages, and a simple controller for the view which handled all the view lifecycle and user-generated events, as well as being the container for the formatter functions. I also used some of my favourite JavaScript functions to bind together the disparate data into a nice cohesive single array of maps. I left the original data manipulation as it was, and then grabbed what it produced to make my array. I could then bind the List in UI to this single array, and then confer the right binding context to the second Page for a selected item from the array. I’ve created a small Github repo ​ ui5versioninfo ​ with the files. It contains a local snapshot of the two source JSON files ( ​ neo-app.json ​ and ​ versionoverview.json ​ ), the original ​ versionoverview.html that produces the UI we saw earlier, and a new file, called ​ new.html, which is my quick attempt addressing those things above. Here’s what the result looks like: 30 Days of UI5 Page 80 of 88 " id="pdf-obj-79-25" src="pdf-obj-79-25.jpg">

The UI part was straightforward. I used my MVC technique (see "MVC – Model View Controller, Minimum Viable Code" from earlier in this series) to define a new View, declaratively in XML. I used an App control with a couple of Pages, and a simple controller for the view which handled all the view lifecycle and user-generated events, as well as being the container for the formatter functions.

  • I also used some of my favourite JavaScript functions to bind together the disparate data into a

nice cohesive single array of maps. I left the original data manipulation as it was, and then grabbed what it produced to make my array. I could then bind the List in UI to this single array, and then confer the right binding context to the second Page for a selected item from the array.

I’ve created a small Github repo ui5versioninfo

with the files. It contains a local snapshot of the

two source JSON files (neo-app.json

and versionoverview.json), the original versionoverview.html

that produces the UI we saw earlier, and a new file, called new.html, which is my quick attempt

addressing those things above.

Here’s what the result looks like:

30 Days of UI5 Page 80 of 88

and which describes routes to destinations, which include the SAPUI5 runtime services, now available at differentcomplex manipulation and merging of those two datasets ​ , and the ​ mix of UI5 controls with raw HTML header elements ​ . The result is an app that looks OK on the desktop but doesn’t look that well on a smartphone, as you can see on the right. So I spent some time on the train down from Manchester to London early this morning to see what I could do. I wanted to address a couple of things: ● have the smartphone as the target device, rebuilding the UI with an App control ● improve the binding, to a single data collection The UI part was straightforward. I used my MVC technique (see "MVC – Model View Controller, Minimum Viable Code" from earlier in this series) to define a new View, declaratively in XML. I used an App control with a couple of Pages, and a simple controller for the view which handled all the view lifecycle and user-generated events, as well as being the container for the formatter functions. I also used some of my favourite JavaScript functions to bind together the disparate data into a nice cohesive single array of maps. I left the original data manipulation as it was, and then grabbed what it produced to make my array. I could then bind the List in UI to this single array, and then confer the right binding context to the second Page for a selected item from the array. I’ve created a small Github repo ​ ui5versioninfo ​ with the files. It contains a local snapshot of the two source JSON files ( ​ neo-app.json ​ and ​ versionoverview.json ​ ), the original ​ versionoverview.html that produces the UI we saw earlier, and a new file, called ​ new.html, which is my quick attempt addressing those things above. Here’s what the result looks like: 30 Days of UI5 Page 80 of 88 " id="pdf-obj-79-66" src="pdf-obj-79-66.jpg">
I’ve tried to use some UI5 design and control best practices, while ​ <a href=defining the UI in XML ​ . I’ve added some ​ functional programming style data merging ​ to take place after the original manipulation, and a ​ small controller ​ formatting. with the requisite functions for event handling and I took the screencast of the “finished” attempt on the tube from London Euston to Chiswick this morning, so it really was a rush job. But I think that it’s worth thinking about how we can improve this useful resource. How would you improve it? 30 Days of UI5 Page 81 of 88 " id="pdf-obj-80-2" src="pdf-obj-80-2.jpg">

I’ve tried to use some UI5 design and control best practices, while defining the UI in XML. I’ve

to take place after the original

manipulation, and a small controllerformatting.

with the requisite functions for event handling and

I took the screencast of the “finished” attempt on the tube from London Euston to Chiswick this morning, so it really was a rush job. But I think that it’s worth thinking about how we can improve this useful resource. How would you improve it?

30 Days of UI5 Page 81 of 88

I’ve tried to use some UI5 design and control best practices, while ​ <a href=defining the UI in XML ​ . I’ve added some ​ functional programming style data merging ​ to take place after the original manipulation, and a ​ small controller ​ formatting. with the requisite functions for event handling and I took the screencast of the “finished” attempt on the tube from London Euston to Chiswick this morning, so it really was a rush job. But I think that it’s worth thinking about how we can improve this useful resource. How would you improve it? 30 Days of UI5 Page 81 of 88 " id="pdf-obj-80-29" src="pdf-obj-80-29.jpg">

Day 29 - Revisiting the XML Model

by DJ Adams

It’s been more than a couple of years since I first had a look at XML data in the context of UI5. In my Re-presenting my site with SAPUI5” video I used an XML Model to load the XML feed of my weblog into a UI5 app (gosh, JavaScript views!).

The XML Model mechanism proved very useful this week on a project, and I thought I’d re-examine some of its features. Everyone knows about the JSON and OData Model mechanisms; at least in my UI5 conversations, I don’t hear folks talk about the XML Model much. So I thought I’d give it some love here.

Day 29 - Revisiting the XML Model by DJ Adams It’s been more than a couple“ ​ Re-presenting my site with SAPUI5 ​ ” video I used an XML Model to load the XML feed of my weblog into a UI5 app (gosh, ​ JavaScript views ​ !). The XML Model mechanism proved very useful this week on a project, and I thought I’d re-examine some of its features. Everyone knows about the JSON and OData Model mechanisms; at least in my UI5 conversations, I don’t hear folks talk about the XML Model much. So I thought I’d give it some love here. The ​ API reference documentation for the XML Model ​ is a little dry. As Frank Zappa once said, “ ​ The computer can’t tell you the emotional story. It can give you the exact mathematical design, but what’s missing is the eyebrows ​ “. We need to look elsewhere for the emotional story, for the eyebrows; and I think a nice place might be the ​ QUnit tests for the XML Model ​ . Learning from the QUnit sources Let’s have a look at the source, and see what we can learn. There are actually a couple of QUnit test files; we’ll have a look at just one of them – ​ XMLModel.qunit.html ​ . We’ll just examine the setup and a couple of tests to see what we can find – what we can expect to be able to do with an XML Model. You can explore the rest of the QUnit test files on your own. At the start of XMLModel.qunit.html, ​ a couple of XML Models are instantiated with some test data as follows: var testdata = "<teamMembers>" + "<member firstName=\"Andreas\" lastName=\"Klark\"></member>" + "<member firstName=\"Peter\" lastName=\"Miller\"></member>" + "<member firstName=\"Gina\" lastName=\"Rush\"></member>" + "<member firstName=\"Steave\" lastName=\"Ander\"></member>" + "<member firstName=\"Michael\" lastName=\"Spring\"></member>" + "<member firstName=\"Marc\" lastName=\"Green\"></member>" + "<member firstName=\"Frank\" lastName=\"Wallace\"></member>" + "</teamMembers>"; var testdataChild = "<pets>" + 30 Days of UI5 Page 82 of 88 " id="pdf-obj-81-19" src="pdf-obj-81-19.jpg">

is a little dry. As Frank Zappa once said, “The

computer can’t tell you the emotional story. It can give you the exact mathematical design, but

what’s missing is the eyebrows“. We need to look elsewhere for the emotional story, for the eyebrows; and I think a nice place might be the QUnit tests for the XML Model.

Learning from the QUnit sources

Let’s have a look at the source, and see what we can learn. There are actually a couple of QUnit test files; we’ll have a look at just one of them – XMLModel.qunit.html. We’ll just examine the setup and a couple of tests to see what we can find – what we can expect to be able to do with an XML Model. You can explore the rest of the QUnit test files on your own.

At the start of XMLModel.qunit.html, a couple of XML Models are instantiated with some test data as follows:

var testdata = "<teamMembers>" + "<member firstName=\"Andreas\" lastName=\"Klark\"></member>" + "<member firstName=\"Peter\" lastName=\"Miller\"></member>" + "<member firstName=\"Gina\" lastName=\"Rush\"></member>" + "<member firstName=\"Steave\" lastName=\"Ander\"></member>" + "<member firstName=\"Michael\" lastName=\"Spring\"></member>" + "<member firstName=\"Marc\" lastName=\"Green\"></member>" + "<member firstName=\"Frank\" lastName=\"Wallace\"></member>" + "</teamMembers>";

var testdataChild = "<pets>" +

30 Days of UI5 Page 82 of 88

Day 29 - Revisiting the XML Model by DJ Adams It’s been more than a couple“ ​ Re-presenting my site with SAPUI5 ​ ” video I used an XML Model to load the XML feed of my weblog into a UI5 app (gosh, ​ JavaScript views ​ !). The XML Model mechanism proved very useful this week on a project, and I thought I’d re-examine some of its features. Everyone knows about the JSON and OData Model mechanisms; at least in my UI5 conversations, I don’t hear folks talk about the XML Model much. So I thought I’d give it some love here. The ​ API reference documentation for the XML Model ​ is a little dry. As Frank Zappa once said, “ ​ The computer can’t tell you the emotional story. It can give you the exact mathematical design, but what’s missing is the eyebrows ​ “. We need to look elsewhere for the emotional story, for the eyebrows; and I think a nice place might be the ​ QUnit tests for the XML Model ​ . Learning from the QUnit sources Let’s have a look at the source, and see what we can learn. There are actually a couple of QUnit test files; we’ll have a look at just one of them – ​ XMLModel.qunit.html ​ . We’ll just examine the setup and a couple of tests to see what we can find – what we can expect to be able to do with an XML Model. You can explore the rest of the QUnit test files on your own. At the start of XMLModel.qunit.html, ​ a couple of XML Models are instantiated with some test data as follows: var testdata = "<teamMembers>" + "<member firstName=\"Andreas\" lastName=\"Klark\"></member>" + "<member firstName=\"Peter\" lastName=\"Miller\"></member>" + "<member firstName=\"Gina\" lastName=\"Rush\"></member>" + "<member firstName=\"Steave\" lastName=\"Ander\"></member>" + "<member firstName=\"Michael\" lastName=\"Spring\"></member>" + "<member firstName=\"Marc\" lastName=\"Green\"></member>" + "<member firstName=\"Frank\" lastName=\"Wallace\"></member>" + "</teamMembers>"; var testdataChild = "<pets>" + 30 Days of UI5 Page 82 of 88 " id="pdf-obj-81-59" src="pdf-obj-81-59.jpg">

"<pet type=\"ape\" age=\"1\"></pet>" + "<pet type=\"bird\" age=\"2\"></pet>"

+

"<pet type=\"cat\"

age=\"3\"></pet>"

+

"<pet type=\"fish\" age=\"4\"></pet>" + "<pet type=\"dog\" age=\"5\"></pet>" + "</pets>";

setXML and setData

with the setXML function:

var oModel = new sap.ui.model.xml.XMLModel(); oModel.setXML(testdata); sap.ui.getCore().setModel(oModel);

var oModelChild = new sap.ui.model.xml.XMLModel(); oModelChild.setXML(testdataChild);

This is different to the setData function, which is also present on the JSON Model, with an

equivalent semantic. Here in the XML Model, the setDataencoded data object, not a literal string containing XML.

function would be expecting an XML

As an example, if we have a variable containing some XML string like this:

xmlstring = "<root><name>DJ</name></root>"

then we could either set it on an XML Model with setXML, like this:

  • m = new sap.ui.model.xml.XMLModel()

=> sap.ui.de.C.ed.constructor {mEventRegistry: Object, mMessages: Object, id: "id-1438428838337-6", oData: Object, bDestroyed: false}

m.setXML(xmlstring)

=> undefined

m.getProperty("/name") => "DJ"

or with setData, creating an XML encoded data object, like this:

  • m = new sap.ui.model.xml.XMLModel()

=> sap.ui.de.C.ed.constructor {mEventRegistry: Object, mMessages: Object,

id: "id-1438428927599-7", oData: Object, bDestroyed: false}

30 Days of UI5 Page 83 of 88

"<pet type=\"ape\" age=\"1\"></pet>" + "<pet type=\"bird\" age=\"2\"></pet>" + "<pet type=\"cat\" age=\"3\"></pet>" + "<pet type=\"fish\" age=\"4\"></pet>" +XML data is added to the XML Models ​ with the setXML function: var oModel = new sap.ui.model.xml.XMLModel(); oModel.setXML(testdata); sap.ui.getCore().setModel(oModel); var oModelChild = new sap.ui.model.xml.XMLModel(); oModelChild.setXML(testdataChild); This is different to the setData function, which is also present on the JSON Model, with an equivalent semantic. Here in the XML Model, the ​ setData ​ encoded data object, not a literal string containing XML. function would be expecting an XML As an example, if we have a variable containing some XML string like this: xmlstring = "<root><name>DJ</name></root>" then we could either set it on an XML Model with setXML, like this: m = new sap.ui.model.xml.XMLModel() => sap.ui.d … e.C.e … d.constructor {mEventRegistry: Object, mMessages: Object, id: "id-1438428838337-6", oData: Object, bDestroyed: false … } m.setXML(xmlstring) => undefined m.getProperty("/name") => "DJ" or with setData, creating an XML encoded data object, like this: m = new sap.ui.model.xml.XMLModel() => sap.ui.d … e.C.e … d.constructor {mEventRegistry: Object, mMessages: Object, id: "id-1438428927599-7", oData: Object, bDestroyed: false … } 30 Days of UI5 Page 83 of 88 " id="pdf-obj-82-75" src="pdf-obj-82-75.jpg">

m.setData(new DOMParser().parseFromString(xmlstring, "text/xml"))

=> undefined

m.getProperty("/name") => "DJ"

A couple of tests

Then we’re off on the tests. There are a couple of tests to check getProperty, the first using a relative context binding:

test("test model getProperty with context", function(){ var oContext = oModel.createBindingContext("/member/6"); var value = oModel.getProperty("@lastName", oContext); // relative path when using context equal(value, "Wallace", "model value");

});

test("test model getProperty", function(){ var value = oModel.getProperty("/member/6/@lastName"); equal(value, "Wallace", "model value");

});

What we can see here already is that we can access XML attribute values (“lastName” in this case) with the XPath @ accessor. As an aside, the use of the optional second oContext parameter in the getProperty call is something one doesn’t see very much, but is extremely useful.

Element content retrieval

The rest of the file contain a load of other tests, all useful reading material, from the rare-to-see

use of the unbindProperty

One thing that we have to wait until test 15

to see is the use of element content:

test("test XMLModel XML constructor", function(){

var testModel = new sap.ui.model.xml.XMLModel(

); testModel.setXML("<root>" + "<foo>The quick brown fox jumps over the lazy dog.</foo>" + "<bar>ABCDEFG</bar>" + "<baz>52</baz>" +

30 Days of UI5 Page 84 of 88

m.setData(new DOMParser().parseFromString(xmlstring, "text/xml")) => undefined m.getProperty("/name") => "DJ" A couple of tests Then we’re off ona couple of tests to check getProperty ​ , the first using a relative context binding: test("test model getProperty with context", function(){ var oContext = oModel.createBindingContext("/member/6"); var value = oModel.getProperty("@lastName", oContext); // relative path when using context equal(value, "Wallace", "model value"); }); test("test model getProperty", function(){ var value = oModel.getProperty("/member/6/@lastName"); equal(value, "Wallace", "model value"); }); What we can see here already is that we can access XML attribute values (“lastName” in this case) with the XPath @ accessor. As an aside, the use of the optional second oContext parameter in the getProperty call is something one doesn’t see very much, but is extremely useful. Element content retrieval The rest of the file contain a load of other tests, all useful reading material, from the rare-to-see use of the ​ unbindProperty ​ function to ​ aggregation bindings that are comfortable to use ​ . One thing that we have to wait until ​ test 15 ​ to see is the use of element content: test("test XMLModel XML constructor", function(){ var testModel = new sap.ui.model.xml.XMLModel( ); testModel.setXML("<root>" + "<foo>The quick brown fox jumps over the lazy dog.</foo>" + "<bar>ABCDEFG</bar>" + "<baz>52</baz>" + 30 Days of UI5 Page 84 of 88 " id="pdf-obj-83-57" src="pdf-obj-83-57.jpg">

"</root>"); equal(testModel.getProperty("/foo"), "The quick brown fox jumps over the lazy dog."); equal(testModel.getProperty("/bar"), "ABCDEFG"); equal(testModel.getProperty("/baz"), 52);

});

Until now we’ve only seen examples of XML where the data is stored in attributes. What about the more classic case of text nodes, like this example XML here?

Well, as we can see, a simple call to getProperty will do what we want. If we’re XPath inclined, we could even add the text() specification like this:

testModel.getProperty("/bar/text()") => "ABCDEFG"

and still get what we expect.

Ending where we started

And of course, to round things off, we can always get back to an XML encoded data objectgetObject, like this:

with

testModel.getObject("/bar") => <bar>ABCDEFG</bar>

(that result is indeed an object), in a similar way to how we retrieve the whole object from the model:

testModel.getData() => #document <root> <foo>The quick brown fox jumps over the lazy dog.</foo> <bar>ABCDEFG</bar>

<baz>52</baz>

</root>

The XML Model is a powerful ally, and the QUnit tests are a rich source of information about it. Spend a coffee break looking through the sources, you won’t be disappointed!

30 Days of UI5 Page 85 of 88

"</root>"); equal(testModel.getProperty("/foo"), "The quick brown fox jumps over the lazy dog."); equal(testModel.getProperty("/bar"), "ABCDEFG"); equal(testModel.getProperty("/baz"), 52); });

Day 30 - The origin of becoming a fundamental enabler for Fiori

by Sam Yen

Not too long ago, before Fiori was Fiori, SAP had tried several times to refresh the user experience. I’m aware of over 20 different UI technologies that we have used since the release of R/3. As mobility was sweeping into the enterprise, SAP adopted a native mobile development approach. At the time, many believed that this was an opportunity to create modern experiences with modern UI technologies (primarily iOS at the time) and development environments to refresh the SAP User Experience.

The first mobile apps showed promise, but as we started to roll out more and more, quality suffered. The experience of some of the native apps were good, some bad. We noticed a lot of creativity in building different ways to do the same things. This came to a head when some of our large customers evaluated SAP’s mobile app portfolio as a whole and were not happy about this experience.

Design consistency was one thing. Also, we considered the full lifecycle of these apps. Currently, there are over a thousand permutations of android software and hardware configurations in the market today. Even Apple now has several versions of screen sizes and resolutions to support from tablets, phones, and now watches. Cost of development, support, and ownership pointed to a modern, but scalable approach. We made a decision to go with a responsive HTML5 approach.

Luckily, SAP had been developing HTML5 controls at that time. As with other HTML5 libraries at the time, UI5 was separated between the desktop controls and the mobile controls. We took the decision to combine the best of what we had and create a responsive UI5 control set for Fiori.

I may have understated the part about our customers being unhappy about the user experience. It was escalated to the highest levels and we were under tremendous pressure to demonstrate to customers that this new concept would fly – quickly. We had 6 days, 144 hours to be exact, to demonstrate to internal stakeholders the both the desirability and feasibility of our approach. I’ll never forget Stefan Beck and the UI5 team walking down the halls of Walldorf to our war room saying that, “the UI5 team will support you.”

That was the beginning. Since then UI5 and the team behind the technology have expanded much beyond a mere set of controls. The team has helped to develop a programming model that is open and designed to scale for the enterprise. It is part of growing set of tools to make UI development both efficient and scalable both for SAP and the industry.

30 Days of UI5 Page 86 of 88

Day 30 - The origin of becoming a fundamental enabler for Fiori by Sam Yen Not

Looking forward we’ll start to augment our responsive design approach to also leverage native, on-device capabilities. Analytics will become more of an area of focus. I have said many times that I feel my role as Chief Design Officer is to change the perception of SAP’s user experience. Fiori has done much for SAP to start that perception change, but I am acutely aware that we are only just beginning on our journey. I also feel that SAP’s journey is also the same journey that the entire IT industry will need to follow to bring great experiences to our users.

30 Days of UI5 Page 87 of 88

Looking forward we’ll start to augment our responsive design approach to also leverage native, on-device capabilities.

About Bluefin Solutions

Bluefin works with organisations to challenge traditional ways of thinking and bring new ideas to life.

Part of Mindtree, Bluefin Solutions is a global consultancy and SAP partner, delivering business consulting, technology strategy and implementation and change, through award winning expertise in SAP, SAP HANA, Analytics, Digital, Mobile and Cloud.

Through our agile, collaborative approach, we help clients reduce costs, manage complexity and enable competitive advantage through technology.

The Bluefin-Mindtree collaboration presents a transformational opportunity for organisations looking to digitize their value chain. Bluefin’s broad range of SAP services coupled with Mindtree’s digital capability can help companies transition to fully digital organizations whilst ensuring there is harmony between the front-end customer experience and back-end systems.

Headquartered in the UK, Bluefin Solutions also has offices in the US, Singapore and Malaysia.

About Bluefin Solutions Bluefin works with organisations to challenge traditional ways of thinking and bring newhttp://www.bluefinsolutions.com/ 30 Days of UI5 Page 88 of 88 " id="pdf-obj-87-16" src="pdf-obj-87-16.jpg">

30 Days of UI5 Page 88 of 88

About Bluefin Solutions Bluefin works with organisations to challenge traditional ways of thinking and bring newhttp://www.bluefinsolutions.com/ 30 Days of UI5 Page 88 of 88 " id="pdf-obj-87-20" src="pdf-obj-87-20.jpg">