CHAPTER 20 – Create Score Card Apps by Linking to Google Sheets

I believe you all work with lots of Excel data. Perhaps, some of you might start to store these spreadsheets in the cloud. This chapter will show you how to use EZoApp's Google Sheets component to link to Google spreadsheets and create a scorecard app in just a few simple steps. (Completed example: http://jqmdesigner.appspot.com/designer.html#&ref=5669423272689664)

The first thing you need to do is to create a Google spreadsheet. You can do it just like creating a scorecard in Excel or you can import a scorecard created in Excel into Google Sheets.

Also, set the sharing permission of the spreadsheet to "Anyone who has the link can view".

After the above steps are done, you can use EZoApp to link to this spreadsheet. The only small detail you need to remember is the URL of this spreadsheet. The long string containing a combination of numbers and letters is the key of the spreadsheet and the gid following the key is the name of the sheet in the spreadsheet. We need these two pieces of information to access a specific sheet in a particular spreadsheet.

Next, we will drag-and-drop EZoApp's google-sheets-table component onto the screen and enter the key and gid from above.

Click Preview and you can now see the spreadsheet appear in the design screen. (Example: http://jqmdesigner.appspot.com/designer.html#&ref=5651894101868544)

That's all it takes to create a scorecard. Now, we will add some variations to it, since there is usually more than just one subject. So, let us drag-and-drop a header and a tabbar component onto the screen. Set the icon in tabbar to default so there will be no icon; also, set the actived to true to turn the selected tab blue.

Next, we will write some simple code to switch the sheet when a different tab on the tabbar is clicked. First, in the HTML, assign ul an id; then, add the gid attribute in each li and enter the corresponding gid value.

<ul  id="footerBtn">
  <li>
    <a class="ui-btn-active ui-state-persist" gid="0">國文</a>
  </li>
  <li>
    <a gid="570331424">英文</a>
  </li>
  <li>
    <a gid="10780180">數學</a>
  </li>
</ul>

Next, write the JS code. Follow the instructions on the official website and other blogs to make the table into a gk component first, then create a function that will switch the page when clicked.

(function () {
  $(document).on('pageshow', '#home', function () {
    var table = $('#gk-10197jY9').gk();
    $('#footerBtn li a').on('click', function () {
      var title = $(this).text();
      $('h3').text(title + '成績單');
      var scoreGid = $(this).attr('gid');
      table.gid = scoreGid;
      table.query = '';
      table.refresh();
    });
  });
})();

Now, we have finished creating an app that shows the scorecard! (Example: http://jqmdesigner.appspot.com/designer.html#&ref=4852814429814784)

One last tip here: EZoApp's google-sheets-table component also provides an area where you can insert SQL. It is the query field in the property panel. If you know SQL, you can add ordering or filtering actions to your spreadsheet. It is really convenient! (Refer to: Advanced application of EZoApp using Google Spreadsheets as databases - Score Card App 2)

Continue reading CHAPTER 21 - Create "Wanted Pirates Poster" App by Linking to Picasa
Or Return to Table of Contents