Skip to Content
Author's profile photo Ivan Femia

This is why I like #openUI5!

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.

Phonebook_form.PNG

Google saves this data as a Google Spreadsheet on Google Drive

Phonebook_data.PNG

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

Phonebook_publish.PNG

Now your data is available as a web resource, in my example using the URL OpenUI5 demo (Responses)

Phonebook_web.PNG

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

Phonebook_json.PNG

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;
}

Phonebook_json2.PNG

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:

Phoonebook_desktop.PNGDesktop

Phoonebook_iPhone.PNGSmartphone

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.

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo DJ Adams
      DJ Adams

      Nice work Ivan 🙂

      In case you want a cleaner JSON output from your Google Spreadsheet, you might consider using this: http://www.pipetree.com/qmacro/blog/2013/10/sheetasjson-google-spreadsheet-data-as-json/

      Are you planning to share your code with the community at some stage? If you want to add to sapui5bin just let me know 🙂

      Cheers!

      dj

      Author's profile photo Ivan Femia
      Ivan Femia
      Blog Post Author

      Thanks DJ,

      basically all the code is already available, via Chrome Console you can retrieve everything (this is something that I like of SAPUI5/OpenUI5).

      I've added the reference to server side PHP piece of code and the few adjustments I did...

      Thanks for the link to the Google Docs script 🙂

      Best

      Ivan

      Author's profile photo DJ Adams
      DJ Adams

      Hi Ivan

      I know about Chrome developer console and access to the sources, I was thinking of a more "friendly" approach to code share. "View-source" (or the modern developer console equivalent) seems very old fashioned in these days of Github etc 😉

      Cheers

      dj

      Author's profile photo Himadri Chakravorty
      Himadri Chakravorty

      Hi DJ,

      I am trying  convert the spreadsheet data into json format using this http://www.pipetree.com/qmacro/blog/2013/10/sheetasjson-google-spreadsheet-data-as-json/ . I am able to get the json data in the web browser but when I run the application in google script editor it gives an error TypeError: Cannot read property "parameters" from undefined. . I also want to concatenate " (' " in the beginning and " ');"  at the end of the json data. Can you please show me how can I do that???

      Thanks

      Himadri

      Author's profile photo DJ Adams
      DJ Adams

      To all those interested in getting their hands on the source code to Ivan's app, it's now in the sapui5bin Github repo here:

      sapui5bin/PhoneBook at master · qmacro/sapui5bin · GitHub

      Thanks Ivan, superstar!

      Share & enjoy!

      dj

      Author's profile photo Alessandro Spadoni
      Alessandro Spadoni

      great work Ivan!

      we need these blogs to show the versatility of #OpenUI5 in a non SAP-Context..to get the attention and the interests of the Javascript devs community

      Author's profile photo parameshwari palle
      parameshwari palle

      Good Blog....

      Author's profile photo Former Member
      Former Member

      Thanks Ivan, this is mind-blowingly good !