Skip to Content

openUI5 is a nice library with a lot of predefined controls and elements. It is a Javascript library, so it can run on a multitude of platforms, including Force.com. One VisualForce page as an index which kicks off everything and then the UI5 library takes over. And this is exactly what we did in a three-hour hackathon in teams of three.

Our challenge was to use:

  • openUI5
  • Force.com
  • The SAP Flight demo data and services in NW Gateway

We needed to mix these to make a mobile (-first and multi-device) application that would give its user an overview of the flights available, preferably searchable, and add a detail page for each flight with on the page an option to book the flight and exchange instant messages with other users that booked the flight.

This makes for an interesting combination of platforms, systems, and techniques to combine into a working app. Not an easy task, even if each team had a SAP developer, a Force.com developer, and a UX designer on hand.

Proceedings:

We were set-up with a working NW Gateway implementation for the flight data, so we had a oData service from which to get the information, and the outline of a connector to read the NW Gateway data into Force.com.

The oData service was well made, but the Force.com connector still needed some implementation as it needed to be hooked up to the models we had to create ourselves. Rather than stall our development while one of us implemented the connector, we created a dump of the data and inserted this into the models; when to build the real link, we didn’t yet know.

This made it possible to iterate quickly and speeded up the development on the front-end a lot, as we now already knew (roughly) what format the data would have. Then we split up development into the front-end (openUI5), integration of the front-end into Force.com, and tidying up the back-end and the SAP link. My task was the front-end.

Screen Shot 2014-01-24 at 8.41.20 .png

Front end: openUI5 development

To make it possible to use openUI5 on Force.com, you will need the libraries. These are publicly available in complete and mobile packages. But even when they’re zipped, they’re too big to upload to a developer environment as there is a restriction on resources of 10MB there. The zips supplied are 15M and 30MB respectively. The way to resolve this is to remove the *-dbg.js files as they are the debug versions of the controls and are very useful for development, but are not needed in production.

Then there is the necessity to get the data from the models of Force.com into the javascript models of UI5. For this you can use VisualForce remoting, which makes it possible to call functions in the controller and get the returned values in javascript.

From there on it is just the same as any UI5 app, and we can use a SplitApp with master-detail setup to show a list of flights on ObjectListItems, fill the details with all the data we want from the selected flight, and add a button that calls the oData service to make a booking.

Unfortunately three hours was not enough (for us) to also add the ability to chat with other users, but maybe the chatter functionality of Force.com can be used for this. We need to leave some stuff to improve on.

To report this post you need to login first.

6 Comments

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

    1. Tin de Zeeuw Post author

      It is pretty open.

      You do need to know your way around the whole MVC, Controls, and databinding as it has been set up by SAP (in the original UI5). And this is a bit of a learning curve. But afterwards it is quite as useful as for instance AngularJS (same kind of learning curve) which is open source and well supported by the community.

      Expanding on the libraries of Controls is also doable and styling, though still pretty tough, is also possible.

      Overall you can dive into all parts of the openUI5 code, Javascript, generated HTML, and CSS, and tweak it all as you would like to have it.

      (0) 
  1. Paul Tomlinson

    Good blog – showing how good UI5 is.

    Quick query.  I thought that there are odata adaptors for Force.com?  If so, then you can just consume it as an odata stream.  Good to see you’ve done it though.  I’ve looked into it a bit so thought it was possible, but good to see it for real.

    (0) 
    1. Tin de Zeeuw Post author

      Hi Paul, I’ve found connectors that create an oData service from Force.com data, but none yet that read it in. As it is “just” a REST service, it shouldn’t be difficult to read oData, and maybe that is why nobody has bothered to create a tidy connector yet.

      (0) 

Leave a Reply