Skip to Content

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.
To report this post you need to login first.

8 Comments

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

    1. Ivan Femia 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

      (0) 
      1. 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

        (0) 
    2. 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

      (0) 

Leave a Reply