Last week at SAP TechEd Bangalore, SAP made a great step forward for the embracement of the Open Source development: OPENUI5 was released; Andreas Kunz wrote a very detailed blog What is OpenUI5 / SAPUI5 ? some days ago.
So I decided to use these libraries in order to create an application that could show the power of OPENUI5 as an Open Source framework for enterprise-ready web applications. In my case I decided to create a very simple Phone Book that consumes data form a Google Drive Form.
Google saves this data as a Google Spreadsheet on Google Drive
Here comes the power of open standards, from Google Drive you can expose your data in order to be consumed from different resources. Form File menu select Publish to the web
Now your data is available as a web resource, in my example using the URL OpenUI5 demo (Responses)
It is not explicitly mentioned but this data is now available also as a JSON REST service via the URI https://spreadsheets.google.com/feeds/cells/0AsSW06f14AJYdFg0Tmg1QkttU2hvaTJLeUEzaHdKeFE/od6/public/values?alt=json
Via a simple PHP proxy (base source) that I adapted with the snipped of code below, I retrieved this data and exposed as a formatted JSON that can be easily consumed by an OPENUI5 application.
function convertData($data) { $phonebook = array(); $contact = array(); foreach ($data['feed']['entry'] as &$entry) { $col = $entry['gs$cell']['col']; $row = $entry['gs$cell']['row']; $value = $entry['content']['$t']; if ( $lastRow != $row && $row > 2) { $lastRow = $row; $phonebook[] = $contact; $contact = array(); } if ($row > 1) { switch ($col) { case "2": $contact['name'] = $value; break; case "3": $contact['lastname'] = $value; $contact['fullname'] = $contact['name']." ".$contact['lastname']; break; case "4": $contact['address'] = $value; break; case "5": $contact['address2'] = $value; break; case "6": $contact['city'] = $value; break; case "7": $contact['state'] = $value; break; case "8": $contact['pcode'] = $value; break; case "9": $contact['country'] = $value; break; case "10": $contact['dob'] = $value; break; case "11": $value = ltrim($value,"'"); $contact['phone'] = $value; break; case "12": $contact['email'] = $value; break; case "13": $contact['skype'] = $value; $contact['skypeURL'] = "skype:".$value."?call"; break; case "14": $contact['twitter'] = $value; $contact['twitterURL'] = "https://twitter.com/".$value; break; case "15": $contact['image'] = $value; break; default: break; } } } $phonebook[] = $contact; return $phonebook;
}
Here comes the fun, OPENUI5 is a library that allows you to create a professional application rapidly and easily; it took me just a couple of days during my free time to create a fully working Enterprise Mobile Phonebook that works on desktop, tablet and phone:
Desktop
Smartphone
This is just an idea that would show the versatility of OPENUI5 (aka SAPUI5) also in not SAP contexts.
If you want to play around and study the source code of this application you can access to the Phonebook form to add new data and the Phonebook application to see the final output.
Notes
- Security: this form is public visible without any restriction for demo purposes, you can easily protect your data using Google authentication.
- Validation: for the purpose of this demo very few validations have been implemented, in a productive solution you should consider implementing validation logic.