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.
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.