<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-7023484431672164937</id><updated>2024-10-05T15:02:21.771+13:00</updated><category term="BPMS"/><category term="Privacy"/><category term="Google Apps"/><category term="Security"/><category term="enterprise architecture"/><category term="Identity"/><category term="ui"/><category term="Hardware"/><category term="bpmn"/><category term="Politics"/><category term="ea"/><category term="svg"/><title type='text'>Dave Thinking Aloud</title><subtitle type='html'></subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default?redirect=false'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><link rel='next' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default?start-index=26&amp;max-results=25&amp;redirect=false'/><author><name>David French</name><uri>http://www.blogger.com/profile/09850658569729205096</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>118</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-2842460582461519589</id><published>2014-08-20T13:42:00.002+12:00</published><updated>2014-08-20T13:43:38.131+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><category scheme="http://www.blogger.com/atom/ns#" term="ui"/><title type='text'>Google Drive and User Interfaces</title><content type='html'>I have explored a few ways of interacting with Google Drive files and folders for a simple document management system. The user-interface needs to present folders and files which represent real world artefacts (eg people , places). Business operations are initiated by the user making a selection on a folder or file name.&lt;br /&gt;
&lt;br /&gt;
The Drive and Google Apps scripting features have developed over time and I have tried using&lt;br /&gt;
&lt;br /&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://developers.google.com/apps-script/guides/ui-service&quot; target=&quot;_blank&quot;&gt;Google Apps Script UI Service &lt;/a&gt;&amp;nbsp;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://developers.google.com/apps-script/guides/html/&quot; target=&quot;_blank&quot;&gt;Google Apps Script HTMLService &lt;/a&gt;&amp;nbsp;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.youtube.com/watch?v=0HVJMIeb3aE&quot; target=&quot;_blank&quot;&gt;Custom App called through the Google Drive interface&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://developers.google.com/picker/docs/&quot; target=&quot;_blank&quot;&gt;Google Drive Filepicker&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Google Drive SDK through Javascript&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
For me, using the &lt;a href=&quot;https://developers.google.com/drive/web/about-sdk&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;Google Drive SDK&amp;nbsp;&lt;/a&gt;&amp;nbsp;has proven the simplest to build into a responsive user interface and best performing for the user.&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;div&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;
The UI Service approach provided an early introduction to interacting with Google Apps script but it is very limited in function and locks the user interface into the script. It carries all the overheads of generating the user interface at run time as well.&lt;br /&gt;
&lt;br /&gt;
HTMLService does provide the familiarity of HTML/CSS/JS development but has limitations and performance impacts caused by CAJA.&lt;br /&gt;
&lt;br /&gt;
Calling a Google Apps Script from the Google Drive user interface suits users who spend there time interacting with Drive directly but selection of action on folder/file becomes a multiclick operation and subsequent user interface has the limitations of HTMLService .&lt;br /&gt;
&lt;br /&gt;
The filepicker provided for Google Drive is functional and has the advantage of being ready to use with good performance. However the pop-up iframe approach may not suit all design styles and customisation is limited. In particular, presenting the file/folder list initially random order slows down the user interaction.&lt;br /&gt;
&lt;br /&gt;
The direct use of the Google Drive SDK has been simplified recently &amp;nbsp;by improved documentation of the authorisation process. I took the quickstart example and built an html page of links from folder names corresponding to people of interest. It is then simple to incorporate this into a comprehensive user interface for the business user.&lt;br /&gt;
&lt;br /&gt;
Performance and flexibility is the key for this approach. I get a few hundred folder references generate in 3 seconds and can then have a js expert work in there usual toolset to develop responsive bootstrap, jQuery or whatever interface style is required.&lt;br /&gt;
&lt;h4&gt;
Modifed Quickstart example.&lt;/h4&gt;
&lt;div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;lt;html&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;lt;head&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;lt;meta http-equiv=&quot;Content-type&quot; content=&quot;text/html;charset=UTF-8&quot;&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;lt;script type=&quot;text/javascript&quot;&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; var CLIENT_ID = &#39;70v406.apps.googleusercontent.com&#39;;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; var SCOPES = &#39;https://www.googleapis.com/auth/drive&#39;;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; /**&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;* Called when the client library is loaded to start the auth flow.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;*/&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; function handleClientLoad() {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; console.log(&#39;handleClientLoad:&#39;+new Date().getTime())&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; window.setTimeout(checkAuth, 1);&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; /**&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;* Check if the current user has authorized the application.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;*/&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; function checkAuth() {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; console.log(&#39;CheckAuth:&#39;+new Date().getTime())&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; gapi.auth.authorize(&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; {&#39;client_id&#39;: CLIENT_ID, &#39;scope&#39;: SCOPES, &#39;immediate&#39;: true},&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; handleAuthResult);&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; /**&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;* Called when authorization server replies.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;*&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;* @param {Object} authResult Authorization result.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; */&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; function handleAuthResult(authResult) {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; console.log(&#39;handleAuthResult:&#39;+new Date().getTime())&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; var authButton = document.getElementById(&#39;authorizeButton&#39;);&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; authButton.style.display = &#39;none&#39;;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; if (authResult &amp;amp;&amp;amp; !authResult.error) {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // Access token has been successfully retrieved, requests can be sent to the API.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; getItems();&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; } else {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; // No access token could be retrieved, show the button to start the authorization flow.&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; authButton.style.display = &#39;block&#39;;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; authButton.onclick = function() {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; gapi.auth.authorize(&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; {&#39;client_id&#39;: CLIENT_ID, &#39;scope&#39;: SCOPES, &#39;immediate&#39;: false},&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; handleAuthResult);&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; };&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp;/* &amp;nbsp;List folders based on a search&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;* specify the owning folder and mimetype = folder in the search parameter (q)&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;* set maxResults &amp;nbsp;(can do paged calls if actual results exceed 1000)&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp;*/&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;function getItems() {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; console.log(&#39;getItems:&#39;+new Date().getTime())&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; var start = new Date();&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; var request = gapi.client.request({&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &#39;path&#39;: &#39;drive/v2/files&#39;,&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &#39;method&#39;: &#39;GET&#39;,&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &#39;params&#39;: {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &#39;q&#39;: &#39;mimeType=&quot;application/vnd.google-apps.folder&quot; and &quot;0B90FGJizRd-gX25PTS1CTUF0eHM&quot; in parents &amp;nbsp;and trashed = false&#39;,&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;&#39;maxResults&#39;: &#39;400&#39;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;});&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;request.execute(listItems);&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;console.log(&quot;elapsed: &quot;+(new Date()-start))&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;/* Sort the result returned from drive api into title order&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;* &amp;nbsp; insert html paragraph for each title&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;*/&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;function listItems(resp) {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; console.log(&#39;listitems:&#39;+new Date().getTime())&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; var start = new Date().getTime();&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; var result = resp.items.sort(function(a, b){&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;var nameA=a.title.toLowerCase(), nameB=b.title.toLowerCase()&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;if (nameA &amp;lt; nameB) //sort string ascending&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; return -1&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;if (nameA &amp;gt; nameB)&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; return 1&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;return 0 //default return value (no sorting)&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; });&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp;console.log(&#39;items: &#39;+result.length)&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; var i = 0;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; var element = document.getElementById(&quot;div1&quot;); &amp;nbsp;// insertion point in html&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; for (i=0;i&amp;lt;result.length;i++) {&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; var para = document.createElement(&quot;p&quot;); // create a link element in a para&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; var aref = document.createElement(&quot;a&quot;);&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; var node = document.createTextNode(result[i].title);&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;aref.setAttribute(&#39;href&#39;,result[i].alternateLink); // link to driver folder&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;aref.appendChild(node);&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;para.appendChild(aref);&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; element.appendChild(para);&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; }&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; console.log(&quot;elapsed: &quot;+(new Date().getTime()-start));&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;lt;/script&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/client.js?onload=handleClientLoad&quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;lt;/head&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;lt;body&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;lt;input type=&quot;button&quot; id=&quot;authorizeButton&quot; style=&quot;display: none&quot; value=&quot;Authorize&quot; /&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;lt;h1&amp;gt;List&amp;lt;/h1&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;lt;div id=&#39;div1&#39;&amp;gt;&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;nbsp; &amp;lt;/body&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/2842460582461519589/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/2842460582461519589' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/2842460582461519589'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/2842460582461519589'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2014/08/google-drive-and-user-interfaces.html' title='Google Drive and User Interfaces'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-2028866669281637804</id><published>2013-12-12T13:02:00.000+13:00</published><updated>2013-12-12T13:04:23.203+13:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><title type='text'>Sharing Drive Folders with User Groups</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;br /&gt;&lt;/div&gt;
&lt;b id=&quot;docs-internal-guid-0ece48c3-e417-0898-ca39-f0ba960f5663&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;i&gt;A little issue that has caused a day&#39;s worth of pain ...&lt;/i&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;If you share a folder with a Google Apps user group and, later, add a user to that group the new member &lt;/span&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;will not&lt;/span&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; see the folder or it’s content until that user explicitly follows a link to the folder. This issue (&lt;/span&gt;&lt;a href=&quot;http://productforums.google.com/forum/#!topic/drive/m-4SRSDEskA&quot; style=&quot;text-decoration: none;&quot;&gt;&lt;span style=&quot;background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;see here for a variant&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;) is not confined to the Google Drive UI, it will occur in scripted access to the folder as well. &lt;/span&gt;&lt;/div&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;It is easy to make this a self-service function by publishing the link to the top level folder that is to be shared in a welcome to user/role page.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/2028866669281637804/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/2028866669281637804' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/2028866669281637804'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/2028866669281637804'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/12/sharing-drive-folders-with-user-groups.html' title='Sharing Drive Folders with User Groups'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-413333559228298654</id><published>2013-11-17T18:03:00.003+13:00</published><updated>2013-11-17T18:22:38.214+13:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><category scheme="http://www.blogger.com/atom/ns#" term="Privacy"/><category scheme="http://www.blogger.com/atom/ns#" term="Security"/><title type='text'>Keeping information within the domain</title><content type='html'>Google Apps administrators have some useful controls and tools to track where documents are being shared. Often there is a fundamental policy about sharing outside the domain (for example,&amp;nbsp; to limit exposure of privileged or private information).&lt;br /&gt;
An&amp;nbsp; administrator can set up the Drive app to prevent sharing beyond the domain.&lt;br /&gt;
Note that this does not revoke existing shares! If you are closing off a loophole in your security, then you can discover the documents and files that have been shared publicly (beyond the domain) using a script or custom app like the &lt;a href=&quot;http://generalaudittool.com/&quot; target=&quot;_blank&quot;&gt;General Audit Tool&lt;/a&gt;. &lt;br /&gt;
This also provides a means of enabling sharing of documents and files by exception. Keep the domain normally secured so that users cannot share outside the domain but open the gate briefly to share a document or folder publicly and then close it again. This is handy if you want to use Google Drive Hosting on an otherwise closed domain.</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/413333559228298654/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/413333559228298654' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/413333559228298654'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/413333559228298654'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/11/keeping-information-within-domain.html' title='Keeping information within the domain'/><author><name>David French</name><uri>http://www.blogger.com/profile/09850658569729205096</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-838162141807864940</id><published>2013-10-15T11:28:00.000+13:00</published><updated>2013-10-23T13:32:45.621+13:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><title type='text'>Document Manager on Google Apps</title><content type='html'>I have put together some apps scripts , and conventional HTML/JS/jQuery web application to form a document management system for small business/non-profits. Because it uses the underlying access control of Google Apps, users can approach the managed documents either from the Google Drive interface or from the customised business interface.&lt;br /&gt;
The application implements organisation-wide business rules to files/documents stored within Google Drive. Essentially, it ensures that documents are named, shared and retained according to the enterprise rules for record and document management.&lt;br /&gt;
In the current implementation a particular business information entity type (eg Clients) has its access controlled by administrative divisions (eg Regions).&lt;br /&gt;
A nominal user (DocMan) is assigned ownership of all documents and regular users get access to the documents according to their membership of user groups. Effectively, the normal user asks DocMan to undertake administrative actions through the application.&lt;br /&gt;
The organisation can specify a fixed structure of folders and the name of the root folder. Access control is handled exclusively by the standard Google Apps Users, User-Groups and Sharing mechanisms.&lt;br /&gt;
The diagram below outlines the relationship between folders, documents, users and groups used with the Document Management Application.&lt;br /&gt;
&lt;br /&gt;
&lt;span id=&quot;docs-internal-guid-1cb7a6c2-b913-a81f-4242-c23b42242568&quot;&gt;&lt;img height=&quot;296&quot; src=&quot;https://docs.google.com/a/soundings.co.nz/drawings/d/sVfhyqXR0kKv4ftZohCqR8A/image?w=624&amp;amp;h=464&amp;amp;rev=349&amp;amp;ac=1&quot; width=&quot;400&quot; /&gt;&lt;/span&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/838162141807864940/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/838162141807864940' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/838162141807864940'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/838162141807864940'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/10/document-manager-on-google-apps.html' title='Document Manager on Google Apps'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-5371672525721094430</id><published>2013-10-15T11:08:00.002+13:00</published><updated>2013-10-15T11:09:25.404+13:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><title type='text'>More on Google Apps Script HtmlService performance</title><content type='html'>Following on from &lt;a href=&quot;http://davethinkingaloud.blogspot.co.nz/2013/09/google-apps-script-htmlservice.html&quot; target=&quot;_blank&quot;&gt;the post&lt;/a&gt;&amp;nbsp;where I identified some performance issues with HtmlService there are some additional &#39;best practices&#39; to be considered for performance reasons.&lt;br /&gt;
&lt;br /&gt;
&lt;ul&gt;
&lt;li&gt;Minimise number of source files&amp;nbsp;css and js&amp;nbsp;included in the html. The initial load time is sensitive to the number of files to be processed.&lt;/li&gt;
&lt;li&gt;Avoid source file loads of css and js on client side. These end up as serial operations (in contrast to the usual parallel browser operations). This is a significant factor even if these url are cached.&lt;/li&gt;
&lt;li&gt;Avoid un-cached images (icons and the like). With references buried in css and js files, these seem to take a long time to load and also fall into the serial operations category.&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;
If you are using Twitter Bootstrap or similar toolsets, this is hard to achieve. Repackaging the css to enable fast loading undoes most of the benefits of using Bootstrap :(&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/5371672525721094430/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/5371672525721094430' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/5371672525721094430'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/5371672525721094430'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/10/more-on-google-apps-script-htmlservice.html' title='More on Google Apps Script HtmlService performance'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-7929544224337548032</id><published>2013-09-10T10:33:00.002+12:00</published><updated>2013-09-10T14:24:31.198+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><category scheme="http://www.blogger.com/atom/ns#" term="ui"/><title type='text'>Google Apps Script HtmlService Performance</title><content type='html'>If you are moving to HtmlService from UiApp, you may encounter some performance issues. First look at the &lt;a href=&quot;https://developers.google.com/apps-script/guides/html-service-best-practices&quot; target=&quot;_blank&quot;&gt;best practices&lt;/a&gt;. Hopefully that section will expand over time.&lt;br /&gt;
HtmlService introduces&lt;a href=&quot;https://developers.google.com/caja/&quot; target=&quot;_blank&quot;&gt; Caja&lt;/a&gt; to the mix for good or ill and the processing changes quite significantly.&lt;br /&gt;
To explore the performance issues around some design decisions, I developed a simple form for an upload to Google Drive. Looking forward to a time when form is as important as function, I chose to style with &lt;a href=&quot;http://getbootstrap.com/&quot; target=&quot;_blank&quot;&gt;Twitter Bootstrap&lt;/a&gt;&amp;nbsp;and use a bootstrap extension to style the file input component.&lt;br /&gt;
&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; class=&quot;tr-caption-container&quot; style=&quot;float: left; margin-right: 1em; text-align: left;&quot;&gt;&lt;tbody&gt;
&lt;tr&gt;&lt;td style=&quot;text-align: center;&quot;&gt;&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgego3MdBPApnh2MsdJ-E7zJn_I8muU72ew-nI665DgMOXP3oCeJYNUqCkoSYhyphenhyphendPtbZz8fCwAxQIh4dv024213_61Bu6jyrMxnL7XNFi16yI2_iCMFNpltc9I7odoKpWOpQnYq1ZL4lCV9/s1600/Screenshot+from+2013-09-10+09:25:34.png&quot; imageanchor=&quot;1&quot; style=&quot;clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;&quot;&gt;&lt;img alt=&quot;Input form image&quot; border=&quot;0&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgego3MdBPApnh2MsdJ-E7zJn_I8muU72ew-nI665DgMOXP3oCeJYNUqCkoSYhyphenhyphendPtbZz8fCwAxQIh4dv024213_61Bu6jyrMxnL7XNFi16yI2_iCMFNpltc9I7odoKpWOpQnYq1ZL4lCV9/s1600/Screenshot+from+2013-09-10+09:25:34.png&quot; height=&quot;125&quot; title=&quot;Input form image&quot; width=&quot;200&quot; /&gt;&lt;/a&gt;&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td class=&quot;tr-caption&quot; style=&quot;text-align: center;&quot;&gt;Simple input form&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
This means that, as well as the html, there a few .css and .js files to load.&lt;br /&gt;
Note that this example has no submit functionality coded, just the display and upload file selection.&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;br /&gt;
I produced an Apps script that simply loaded the form, using bootstrap and jQuery from CDN and additional css and js from Google Drive hosting. Published as a &lt;a href=&quot;https://script.google.com/macros/s/AKfycbzlXQ263L4cKt6C8xDic1xh-sPAZ8G2fS7ctbcghAZsCRImQjo/exec&quot; target=&quot;_blank&quot;&gt;web app here&lt;/a&gt;&lt;br /&gt;
&lt;blockquote class=&quot;tr_bq&quot;&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;function doGet() {&lt;br /&gt;&amp;nbsp; return HtmlService.createHtmlOutputFromFile(&#39;bootstrap&#39;).setSandboxMode(HtmlService.SandboxMode.NATIVE);&lt;br /&gt;}&lt;/span&gt;&lt;/blockquote&gt;
&amp;nbsp;To provide a comparison with a hosted web site, I put the same html onto the Google Drive host, using the same .css and .js locations. &lt;a href=&quot;https://googledrive.com/host/0B90FGJizRd-gbm1JRUswYUY5dE0/bootstrap/&quot; target=&quot;_blank&quot;&gt;Available here&lt;/a&gt;&lt;br /&gt;
&lt;br /&gt;
The performance difference measured by Chrome at the desktop is quite startling. The Htmlservice script takes around 8seconds to display the form and a further 4seconds to complete loading the javascript files which make the form work. The Google Drive hosted version generally responded fully in 1.4seconds (with occasional outliers around 3.5seconds) which is not bad for a service intended for development rather than high performance service delivery.&lt;br /&gt;
&lt;br /&gt;
A noticable feature of the HtmlService working is that the .js gets are sequential while the hosted version did them all in parallel.&lt;br /&gt;
&lt;br /&gt;
[EDIT The results for the Htmlservice script were so bad that I explored possible workarounds. Putting the css and js files into the project and including them (as described in best practices) did improve the service time to 5-6 seconds. I could not get the&amp;nbsp;jquery.min.js into the project ... the copy crashed in chrome. However, this approach does rather go against the simplicity of including the scripts from a CDN.]&lt;br /&gt;
&lt;br /&gt;
From this, I shall be avoiding Htmlservice wherever possible. I do prefer the separation between presentation and Google Apps function that comes from JSON-P and Javascript.&lt;br /&gt;
&lt;br /&gt;
Your milage may vary of course. I am seeing this in New Zealand at the end of an ADSL link.</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/7929544224337548032/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/7929544224337548032' title='1 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/7929544224337548032'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/7929544224337548032'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/09/google-apps-script-htmlservice.html' title='Google Apps Script HtmlService Performance'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgego3MdBPApnh2MsdJ-E7zJn_I8muU72ew-nI665DgMOXP3oCeJYNUqCkoSYhyphenhyphendPtbZz8fCwAxQIh4dv024213_61Bu6jyrMxnL7XNFi16yI2_iCMFNpltc9I7odoKpWOpQnYq1ZL4lCV9/s72-c/Screenshot+from+2013-09-10+09:25:34.png" height="72" width="72"/><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-8447263219803230028</id><published>2013-08-21T12:42:00.000+12:00</published><updated>2013-08-22T07:14:56.175+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><title type='text'>Using Google Drive as an Entry Point for Google Script</title><content type='html'>&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: &#39;Trebuchet MS&#39;; font-size: 21px; line-height: 1.15; white-space: pre-wrap;&quot;&gt;Scenario&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;We have a structured set of folders in Google Drive mapping to the organisation’s business functions. Think of the office filing cabinet.&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;There is a folder for each client. For control purposes and overall convenience, the clients are assigned to regional groups (folders again).&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;There are business operations that should be controlled to apply some records management auditability, and for which the user may require a guided path.&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The documents on G Drive are essentially the business records (requests for action, review reports, closure etc) and form the usual source of information for staff working with the client. So if a staff member is working with a client, it is reasonable that they would be reviewing the records.&lt;/span&gt;&lt;/div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;
&lt;h1 dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 10pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: &#39;Trebuchet MS&#39;; font-size: 21px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Scripting&lt;/span&gt;&lt;/h1&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;There are several business actions that can be broadly visualised as a form entry, validation, response sequence. For example: Setting up a new client will require setting up a folder within the region folder; naming the folder; adding a structure of subfolders.&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;While we could maintain a database of clients and drive operations from that, the key data is actually in the base documents so we have chosen to script the business operations as functions of Drive itself. Our functions are create or open actions taken at the various folder levels in the structure and activated by a right click.&lt;/span&gt;&lt;img height=&quot;297px;&quot; src=&quot;https://lh5.googleusercontent.com/GCk2h-v4q5oHb3pqtQh88vWq6zIAGpFImIpS3srktA5gkrJw_QGqaP8Eh6BNKxCcH5lowb6TVLR-4Qv2SETGGlpnO3z0EabB3bm115SPjCKT_v7qNHgLaBlaGg&quot; width=&quot;603px;&quot; /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The Apps Script is built in 3 parts&lt;/span&gt;&lt;/div&gt;
&lt;ol style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Integration with G-Drive which handles the initial authorisation; token handling; and calling either the open or create functions. This is based on an introduction that +Arun Nagarajan &amp;nbsp;put together and code samples from his team. A good startpoint is &lt;/span&gt;&lt;a href=&quot;https://www.youtube.com/watch?v=R71oo-5NmPE&quot; style=&quot;text-decoration: none;&quot;&gt;&lt;span style=&quot;background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;https://www.youtube.com/watch?v=R71oo-5NmPE&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;. I have included my commented source below.&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Open and Create. Each of these produce a menu of operation that the user can chose from. These scripts receive the state parameter from G-Drive interface which allows the folder or files selected to be identified.&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: decimal; text-decoration: none; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Detail action scripts. These separate out the individual functions and simplify maintenance.&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;h1 dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 10pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: &#39;Trebuchet MS&#39;; font-size: 21px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Source Code&lt;/span&gt;&lt;/h1&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/* &amp;nbsp;Integration of Google Drive with the Actions of CCSLT Document Manager&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;*The interconnection with Drive is based on Arun&#39;s DRIVE SDK + GAS Presentation and code&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;*Refresh token logic has been added to give continuous use capability&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;*Handles the installation for the user (execute script with no params and authorise through OAuth2 conversation&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;*/&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;// Globals used in api constructs&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var AUTHORIZE_URL = &#39;https://accounts.google.com/o/oauth2/auth&#39;; &lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var TOKEN_URL = &#39;https://accounts.google.com/o/oauth2/token&#39;; &lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var REDIRECT_URL= ScriptApp.getService().getUrl(); &amp;nbsp;// url of *this* script exec&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var TOKENPROPERTYNAME = &#39;GOOGLE_OAUTH_TOKEN&#39;; // access token valid until time expire or revoke by user&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var REFRESHPROPERTYNAME = &#39;GOOGLE_OAUTH_REFRESH&#39;; //oauth2 refresh token valid until revoked by user&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var EXPIRYPROPERTYNAME = &#39;GOOGLE_OAUTH_EXPIRY&#39; ; // expiry of oauth2 token time to do refresh!&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;// OAUTH2 data from API project - needs to be replaced if new project is created or project generates new secret/id&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var CLIENT_ID = &#39;ghxcvhxcvhjdfshgjdsfahg&#39;;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var CLIENT_SECRET = &#39;fdsvvdfsh,gvsadhgfsdkj&#39;;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;// &lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var DRIVE_API_URL = &#39;https://www.googleapis.com/drive/v2&#39;;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;// maintain scope in step with changing application requirements&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var SCOPE = &#39;https://www.googleapis.com/auth/drive.install https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/drive.metadata.readonly&#39;;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/* Main entry point&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;* functions depend on code and state parameters&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;* if state present ... app is installed&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;* createAction called from Google Drive when user selects DOCMAN app from type choice at CREATE menu state=create&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;* fileAction called from Google Drive when user selects DOCMAN app from type choice at file selection menu state otherwise&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;* if state not present then it is an installation and authorisation call&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;*/&lt;/span&gt;&lt;/div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function doGet(e) {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var HTMLToOutput;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;// business operations of Drive API send state parameter, authentication returns code, initialisation has no parameters&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;if(e.parameters.state){&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;var state = JSON.parse(e.parameters.state);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;if(state.action === &#39;create&#39;){&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;// called as a result of &amp;nbsp;selection from CREATE menu of Google Drive user interface actually creates a UIApp&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;return createAction(state);&lt;/span&gt;&lt;/div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;else {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;// called as a result of selection from right click on file menu of Google Drive user interface&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;// HTMLToOutput=fileAction(state); &lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;// return HtmlService.createHtmlOutput(HTMLToOutput)&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;return fileAction(state);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;else if(e.parameters.code){//if we get &quot;code&quot; as a parameter in, then this is a callback from the install authorisation dance&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;getAndStoreAccessToken(e.parameters.code); &amp;nbsp;// installer&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;HTMLToOutput = &#39;&amp;lt;html&amp;gt;&amp;lt;h1&amp;gt;App is installed, you can close this window now or navigate to your &amp;lt;a href=&quot;https://drive.google.com&quot;&amp;gt;Google Drive&amp;lt;/a&amp;gt;.&amp;lt;/h1&amp;gt;&amp;lt;/html&amp;gt;&#39;;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;else {//we are starting from scratch or resetting (result of running the /exec of this script)&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;HTMLToOutput = &quot;&amp;lt;html&amp;gt;&amp;lt;h1&amp;gt;Install this App into your Google Drive!&amp;lt;/h1&amp;gt;&amp;lt;a href=&#39;&quot;+getURLForAuthorization()+&quot;&#39;&amp;gt;click here to start&amp;lt;/a&amp;gt;&amp;lt;/html&amp;gt;&quot;;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;return HtmlService.createHtmlOutput(HTMLToOutput);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/* &lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;* first step of OAUTH2 dance to get an authorisation code&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;*/&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function getURLForAuthorization(){&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;return AUTHORIZE_URL + &#39;?&#39; +&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;redirect_uri=&#39;+REDIRECT_URL +&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;&amp;amp;response_type=code&#39; +&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;&amp;amp;client_id=&#39;+CLIENT_ID +&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;&amp;amp;approval_prompt=force&#39;+&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;&amp;amp;scope=&#39; + encodeURIComponent(SCOPE) +&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;&amp;amp;access_type=offline&#39;;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/*&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;* second step of &amp;nbsp;OAUTH2 dance to exchange authorisation code for access key and refresh key&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;*/&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function getAndStoreAccessToken(code){&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var payload = &quot;client_id=&quot; + CLIENT_ID&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;payload = payload + &quot;&amp;amp;redirect_uri=&quot;+encodeURIComponent(REDIRECT_URL)&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;payload = payload + &quot;&amp;amp;client_secret=&quot;+CLIENT_SECRET&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;payload = payload + &quot;&amp;amp;code=&quot;+encodeURIComponent(code)&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;payload = payload + &quot;&amp;amp;scope=&amp;amp;grant_type=authorization_code&quot;&lt;/span&gt;&lt;/div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var parameters = {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;method&#39; : &#39;post&#39;,&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;contentType&#39; : &#39;application/x-www-form-urlencoded&#39;,&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;payload&#39; : payload&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;};&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var response = UrlFetchApp.fetch(TOKEN_URL,parameters).getContentText();&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;var tokenResponse = JSON.parse(response);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;// store the access token for later retrieval&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;UserProperties.setProperty(TOKENPROPERTYNAME, tokenResponse.access_token);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;// store the refresh token for use when access token expires&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;UserProperties.setProperty(REFRESHPROPERTYNAME, tokenResponse.refresh_token);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;// store the expiry time to determine when access token expires (expiry is returned as seconds to go - converted to UTC time in msecs)&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;UserProperties.setProperty(EXPIRYPROPERTYNAME,tokenResponse.expires_in * 1000 +new Date().getTime());&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/* &lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;* Handles the token refresh function of OAUTH2 using saved refresh token&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;*/&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function refreshAccessToken(){&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var payload = &#39;client_id=&#39; +CLIENT_ID+&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;&amp;amp;client_secret=&#39;+CLIENT_SECRET+&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;&amp;amp;refresh_token=&#39;+UserProperties.getProperty(REFRESHPROPERTYNAME)+&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;&amp;amp;grant_type=refresh_token&#39;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;var parameters = {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;method&#39; : &#39;post&#39;,&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;contentType&#39; : &#39;application/x-www-form-urlencoded&#39;,&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;payload&#39; : payload&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;};&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var response = UrlFetchApp.fetch(TOKEN_URL,parameters).getContentText();&lt;/span&gt;&lt;/div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var tokenResponse = JSON.parse(response);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;// store the token for later retrival - note refresh token does not expire&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;UserProperties.setProperty(TOKENPROPERTYNAME, tokenResponse.access_token);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;UserProperties.setProperty(EXPIRYPROPERTYNAME,tokenResponse.expires_in * 1000 +new Date().getTime());&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;return tokenResponse.access_token&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/*&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;* Construct fetch options&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;*/&lt;/span&gt;&lt;/div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function getUrlFetchOptions() {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;return {&#39;contentType&#39; : &#39;application/json&#39;,&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;headers&#39; : {&#39;Authorization&#39; : &#39;Bearer &#39; + isTokenValid,&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&#39;Accept&#39; : &#39;application/json&#39;}};&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/*&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;* CHECK IF STORED token is valid, if not use refresh token to get new one&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;*/&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function isTokenValid() {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var now = new Date().getTime();&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var storedToken = UserProperties.getProperty(TOKENPROPERTYNAME);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var storedRefresh = UserProperties.getProperty(REFRESHPROPERTYNAME);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var expiry = UserProperties.getProperty(EXPIRYPROPERTYNAME);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;// if expired then refresh storedtoken&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;if (expiry&amp;lt;= now){&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;storedToken = refreshAccessToken();&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;return storedToken;&lt;/span&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/8447263219803230028/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/8447263219803230028' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/8447263219803230028'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/8447263219803230028'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/08/using-google-drive-as-entry-point-for.html' title='Using Google Drive as an Entry Point for Google Script'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://lh5.googleusercontent.com/GCk2h-v4q5oHb3pqtQh88vWq6zIAGpFImIpS3srktA5gkrJw_QGqaP8Eh6BNKxCcH5lowb6TVLR-4Qv2SETGGlpnO3z0EabB3bm115SPjCKT_v7qNHgLaBlaGg=s72-c" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-1433008622666969433</id><published>2013-07-22T10:09:00.001+12:00</published><updated>2013-08-22T07:14:56.173+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><title type='text'>Getting Data into your HTML page from Google Apps</title><content type='html'>&lt;h1 dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 10pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; font-weight: normal; line-height: 1.15; white-space: pre-wrap;&quot;&gt;In the scenario where the ‘data’ is in Google Apps (in a spreadsheet, ScriptDB, documents or being integrated from a number of sources in a script) it is worth considering breaking the presentation from the processing work and having a well defined interface between the two.&lt;/span&gt;&lt;/h1&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;a href=&quot;https://plus.google.com/u/0/106333172328928589411&quot; style=&quot;text-decoration: none;&quot;&gt;&lt;span style=&quot;background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;+Riël Notermans&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; raised a question of how to get tables nicely from Google Apps into a web page. It is tempting to use the HTMLService within an apps script to respond directly to the request from a user with HTML. For me this has some downside factors:&lt;/span&gt;&lt;/div&gt;
&lt;ul style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The whole page is constructed server-side before being sent to the browser maximising latency&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;HTML build will follow “get Data” operations maximising service time&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Changes to look and feel HTML have to be made in script increasing risk of introducing error with change&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;What you can do on the page is limited by HTMLService. So it may be impossible to incorporate an organisation wide look and feel (say using &lt;/span&gt;&lt;a href=&quot;http://twitter.github.io/bootstrap/&quot; style=&quot;text-decoration: none;&quot;&gt;&lt;span style=&quot;background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Bootstrap&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;)&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Difficult to reuse the ‘data service’ in other ways which either increases the development workload or constrains the end users to the delivered solution.&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;There is a performance impact from CAJA&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;b id=&quot;docs-internal-guid-4bf75028-0342-9402-2a37-90d119f6e69b&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Consider a common situation where the data is being presented as a 2-D array or table of information. We tend to incorporate some common behaviours into the display or user interface around this simple table concept. For example:&lt;/span&gt;&lt;/div&gt;
&lt;ul style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Paging and scrolling through rows and columns&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Sorting by one or more columns&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; list-style-type: disc; text-decoration: none; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Searching within table (beyond visible elements)&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Rather than build your own Google Apps Script to do these things even as a generic library, commercial shops are likely to standardise on existing tools like jQuery. Although jQuery is supported by GAS HTMLService , others, like Twitter Bootstrap, do not play nicely with GAS at present.&lt;/span&gt;&lt;/div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Following the best practice recommendation to load data asynchronously, the apparent performance of presenting large tables can be improved by getting the data in two or more passes. To delivery a default format jQuery DataTable, the HTMLService would incorporate a script like this.&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&amp;lt;script type=&quot;text/javascript&quot; charset=&quot;utf8&quot; src=&quot;//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&amp;lt;script type=&quot;text/javascript&quot; charset=&quot;utf8&quot; src=&quot;http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&amp;lt;script type=&quot;text/javascript&quot; charset=&quot;utf8&quot;&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/* &amp;nbsp;Ready function */&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;$(document).ready(function(){&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var runner = google.script.run.withFailureHandler(onFailure);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var runner2 = google.script.run.withFailureHandler(onFailure);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;runner.withSuccessHandler(onSuccess).getData();&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;runner2.withSuccessHandler(onSuccess2).getData2();&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;});&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/* function done when getData is successful */ &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var onSuccess = function(data){&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var aDataSet = data.slice(1); &amp;nbsp;// all except header&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var head = []; &amp;nbsp;// headers&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;data[0].forEach(function(e){&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;head.push({&#39;sTitle&#39;: e});&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;});&lt;/span&gt;&lt;/div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/* jQuery DataTable insertion happens after data load*/&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;$(&#39;#demo&#39;).html( &#39;&amp;lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;display&quot; id=&quot;example&quot;&amp;gt;&amp;lt;/table&amp;gt;&#39; );&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;$(&#39;#example&#39;).dataTable( {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;aaData&quot;: aDataSet,&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;aoColumns&quot;: head&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;});&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var onSuccess2 = function(data){&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var aDataSet = data.slice(1); &amp;nbsp;// all except header&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/* jQuery DataTable refresh happens after 2nd (longer) data load*/&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;$(&#39;#example&#39;).dataTable().fnClearTable(); &amp;nbsp;// clear existing&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;$(&#39;#example&#39;).dataTable().fnAddData(aDataSet); &amp;nbsp;// reload full table&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;$(&#39;#example&#39;).dataTable().fnDraw();&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/* function done if error in getdata */&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var onFailure = function(err){&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;alert(err.message);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #f9cb9c; color: black; font-family: Arial; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The GAS script has two callbacks, the first presents a useful amount of data (say the first page) so the user gets something to work with quickly and the second returns the whole table data. The table is built when the first call is successful and refreshed when the second is successful.&lt;/span&gt;&lt;/div&gt;
&lt;span id=&quot;docs-internal-guid-2fe405e4-0347-bb6f-b075-cf98e30c4393&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;You can standardise on the datamodel used by the jQuery DataTables extension as the interface between presentation and web service layers or develop a generic table model (perhaps incorporating paging through a 3rd dimension of data) that can be mapped to the jQuery DataTable on the client-side script.&lt;/span&gt;&lt;/span&gt;&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;line-height: 1.15; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;A better approach is to use the content service to return JSON-P which I explored &lt;/span&gt;&lt;a href=&quot;http://davethinkingaloud.blogspot.co.nz/2013/03/jsonp-and-google-apps-script.html&quot; style=&quot;text-decoration: none;&quot;&gt;&lt;span style=&quot;background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;here&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 15px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;.&lt;/span&gt;&lt;/div&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;jQuery supports AJAX operations for getting data, (and sorting, paging etc. when server side processing is more appropriate - large tables, mobile devices)&lt;/span&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/1433008622666969433/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/1433008622666969433' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/1433008622666969433'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/1433008622666969433'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/07/getting-data-into-your-html-page-from.html' title='Getting Data into your HTML page from Google Apps'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-9061062531924808763</id><published>2013-05-01T10:07:00.000+12:00</published><updated>2013-05-01T10:09:45.935+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><category scheme="http://www.blogger.com/atom/ns#" term="Security"/><title type='text'>GAS REST Server as calling user</title><content type='html'>In &lt;a href=&quot;https://bitbucket.org/peterbauer142035/gas-rest-server-as-calling-user&quot;&gt;this post&lt;/a&gt;&amp;nbsp;Peter Bauer provides a proof of concept showing the use of Google Apps Script as a rest server where the ultimate work is done as originating user rather than the script owner as in &lt;a href=&quot;http://davethinkingaloud.blogspot.co.nz/2013/04/jsonp-and-google-apps-script-part2.html&quot;&gt;my example&lt;/a&gt;.&lt;br /&gt;
Interesting test, but there is a risk that Google will decide this is not how things should be and stamp on it.</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/9061062531924808763/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/9061062531924808763' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/9061062531924808763'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/9061062531924808763'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/05/gas-rest-server-as-calling-user.html' title='GAS REST Server as calling user'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-4444572925885800994</id><published>2013-04-27T14:11:00.001+12:00</published><updated>2013-04-27T14:11:08.912+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><title type='text'>Trees in Google Apps Script II</title><content type='html'>More learnings this week!&lt;br /&gt;
&lt;br /&gt;
&lt;ul&gt;
&lt;li&gt;Don&#39;t try to work around deficiencies in Google products until you are desperate. After hacking a way through uncharted and untracked bush, you may find that Google has built a highway to your destination.&lt;/li&gt;
&lt;li&gt;Technical documentation is really clear in hindsight - but then you do not need it.&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;
&lt;a href=&quot;http://davethinkingaloud.blogspot.co.nz/2013/03/trees-in-google-apps-script-tree-widget.html&quot;&gt;In this post&lt;/a&gt;, I described a work around for the defective Tree widget in the Google Apps Script UI. I learnt a lot then. I am really pleased that the&amp;nbsp;&lt;b id=&quot;internal-source-marker_0.36295689339749515&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;a href=&quot;https://code.google.com/p/google-apps-script-issues/issues/detail?id=307&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;long outstanding issue&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; 307 from 2010 has been fixed.&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;I have spent a lot of time trying to get OAUTH2 to work for me to enable the use of Google Drive as an entry point for my Google Apps Script based applications.&amp;nbsp;Reviewing the documentation now, it is obvious - why did it seem so much greek even with the benefit of &lt;a class=&quot;g-profile&quot; href=&quot;http://plus.google.com/117678608428606781684&quot; target=&quot;_blank&quot;&gt;+Arun Nagarajan&lt;/a&gt;&amp;nbsp;&#39;s video and code?&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;I will provide some details of the Google Drive + Google Apps Script implementation and purpose in a future post. Basically, folders and files are business records of the core business operation and it is natural for a significant class of users to use an open or create operation on a folder to initiate a business operation. It also allows business rules to be applied to the records (which may be scanned letters) before they become part of the stored information base.&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;
</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/4444572925885800994/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/4444572925885800994' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/4444572925885800994'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/4444572925885800994'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/04/trees-in-google-apps-script-ii.html' title='Trees in Google Apps Script II'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-7522329499205797698</id><published>2013-04-13T15:58:00.001+12:00</published><updated>2013-04-14T21:56:18.777+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><category scheme="http://www.blogger.com/atom/ns#" term="Security"/><title type='text'>JSONP and Google Apps Script (Part2)</title><content type='html'>In an &lt;a href=&quot;http://www.blogger.com/blogger.g?blogID=7023484431672164937#editor/target=post;postID=6840148149666652294&quot; target=&quot;_blank&quot;&gt;earlier post&lt;/a&gt;, I explored the use of the Google Apps Script Content Service supplying data to a web page in an effort to provide a reasonable degree of separation between a service view of Google Apps and a presentation layer. There were also considerable side-benefits in performance and freeing up of the way the web page can be built.&lt;br /&gt;
&lt;br /&gt;
&lt;ul&gt;
&lt;li&gt;HTML Service in GAS in comparatively slow delivering even a simple page.&lt;/li&gt;
&lt;li&gt;Adding large libraries like JQUERY and DataTables introduces further delays server-side &lt;/li&gt;
&lt;li&gt;In my simple use of DataTables, simply painting the screen first time was very slow&lt;/li&gt;
&lt;/ul&gt;
&lt;div&gt;
Following the documentation for the content service, I got to this dramatic warning.&amp;nbsp;&lt;b style=&quot;color: #333333; font-family: Verdana, sans-serif; font-size: 13px; font-weight: normal; line-height: 19.5px;&quot;&gt;&lt;br /&gt;&lt;a href=&quot;https://developers.google.com/apps-script/content_service#serving_jsonp_in_web_pages&quot; style=&quot;background-color: #ea9999; color: #666699;&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Warning:&lt;/span&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; Be very careful when using this JSONP technique in your scripts. Because it&#39;s possible for anyone to embed the script tag in their web page, you may be &quot;tricked&quot; into executing the script when you visit a malicious website, which can then capture the data returned. It&#39;s a best practice to make sure that your JSONP scripts are read-only and only return non-sensitive information.&lt;/span&gt;&lt;/a&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b id=&quot;internal-source-marker_0.8801951380446553&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The issue with JSONP is the exposure of script which can then be captured by a third party who may then induce an &lt;i&gt;authorised user&lt;/i&gt; to load another page which includes the script and provides the third party with access to restricted data and controls. Note this does require an active attacker (information cannot accidentally leak). &lt;/span&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;With any information storage, you do have to consider the value and sensitivity of the information and the effort that a third party will go through to get it and match your response accordingly.&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-family: Arial;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;A simple method of providing  assurance that the server is sending its data response to the right page (not some other party copy) involves a number of steps.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-family: Arial;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;ul&gt;
&lt;li&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; white-space: pre-wrap;&quot;&gt;The request from the browser should contain a &#39;hard to guess&#39; additional factor - a &#39;session key&#39; used by the server script to verify the validity of the request in concert with the Google Account.&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; white-space: pre-wrap;&quot;&gt;The session key is stored in a cookie on the local machine. The browser operation will prevent a page from a foreign site from obtaining cookies associated with your site. &lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; white-space: pre-wrap;&quot;&gt;Session key is generated by apps script and stored in a User Property.&amp;nbsp;&lt;/span&gt;&lt;/li&gt;
&lt;li&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; white-space: pre-wrap;&quot;&gt;The new session key is returned to the user by an alternate path (email, SMS, UIApp) and entered into the original web page to be stored in cookie. &lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;div class=&quot;separator&quot; style=&quot;clear: both; text-align: center;&quot;&gt;
&lt;a href=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihogwaNFQaFquUCg4wKzXNzUTutNF09KRU3Yo9gWB1YTHm-oBpQCZ3EhWjHNnUzQqWYrhVMC1MCbl1AWiSzHeurvRUGRE8YjUSXpp9X8rFH-OnMx3pUd3WyalVxn7A4Gjc5vF3cDMZDspN/s1600/JSONP+++Cookies+Flow.png&quot; imageanchor=&quot;1&quot; style=&quot;margin-left: 1em; margin-right: 1em;&quot;&gt;&lt;img border=&quot;0&quot; height=&quot;320&quot; src=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihogwaNFQaFquUCg4wKzXNzUTutNF09KRU3Yo9gWB1YTHm-oBpQCZ3EhWjHNnUzQqWYrhVMC1MCbl1AWiSzHeurvRUGRE8YjUSXpp9X8rFH-OnMx3pUd3WyalVxn7A4Gjc5vF3cDMZDspN/s320/JSONP+++Cookies+Flow.png&quot; width=&quot;277&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-family: Arial;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;This strategy should be sufficient to negate the exposure of the script that initiates the JSONP exchange. Of course, it does not protect against all other attacks.&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;div&gt;
&lt;span style=&quot;font-family: Arial;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;h3&gt;
&lt;span style=&quot;font-family: Arial;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;Example apps script code&lt;/span&gt;&lt;/span&gt;&lt;/h3&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;function doGet(request) {&lt;br /&gt;  Logger.log(JSON.stringify(request));&lt;br /&gt;   var start = new Date().getTime();&lt;br /&gt;  // get user to return in content&lt;br /&gt;  var user = Session.getActiveUser().getEmail();&lt;br /&gt;  // get session property to check with incoming session parameter&lt;br /&gt;  var sessionValue = UserProperties.getProperty(&#39;session&#39;);  &lt;br /&gt;  Logger.log(&quot;got property sessionValue = &quot;+sessionValue + &quot; parameter = &quot;+request.parameter.session);&lt;br /&gt;  if (request.parameter.session == sessionValue &amp;amp;&amp;amp; request.parameter.session !== undefined ) {&lt;br /&gt;    // get the data into an array&lt;br /&gt;    var sourceSpreadSheet = SpreadsheetApp.openById(&quot;0At0FkhjjhjhjjhjhjjhkhjkhkjZYi15SEpjTkE&quot;);  &lt;br /&gt;    var dataArray = sourceSpreadSheet.getDataRange().getValues();&lt;br /&gt;    Logger.log(new Date().getTime() - start);&lt;br /&gt;    var aadata = [];&lt;br /&gt;    var aoColumns = [];&lt;br /&gt;    var col = {};&lt;br /&gt;    var html = &quot;&quot;;&lt;br /&gt;    var headers = dataArray[0];&lt;br /&gt;    // all except header for DataTable&lt;br /&gt;    for ( var i=1;i&amp;lt;dataArray.length;i++) {&lt;br /&gt;      aadata.push(dataArray[i]);&lt;br /&gt;    }&lt;br /&gt;    // headers for DataTable&lt;br /&gt;    for (i=0;i&amp;lt;headers.length;i++) {&lt;br /&gt;      col = { &quot;sTitle&quot;: headers[i]};&lt;br /&gt;      aoColumns.push(col);&lt;br /&gt;    }&lt;br /&gt;    // result object return by content service&lt;br /&gt;    var result ={&lt;br /&gt;      &quot;aaData&quot;:  aadata,&lt;br /&gt;      &quot;aoColumns&quot;: aoColumns, &lt;br /&gt;      &quot;user&quot;:user,&quot;success&quot;:true&lt;br /&gt;    }&lt;br /&gt;    }&lt;br /&gt;  else {&lt;br /&gt;    // not a valid session parameter  create new and pass to user through alt path  &lt;br /&gt;    sessionValue = generateGUID();&lt;br /&gt;    // send a mail message (SMS is alternative and arguably more secure but would use a random number for ease of use)&lt;br /&gt;    MailApp.sendEmail(user,&lt;br /&gt;                      &quot;Session Second Factor Security&quot;,&lt;br /&gt;                      &quot;Copy and paste this code into the Session Code Entry Box\n&quot;+sessionValue);&lt;br /&gt;    // save it in the userproperties&lt;br /&gt;    UserProperties.setProperty(&#39;session&#39;,sessionValue);&lt;br /&gt;    // set return object&lt;br /&gt;    var result ={&lt;br /&gt;      &quot;aaData&quot;:  aadata,&lt;br /&gt;      &quot;aoColumns&quot;: aoColumns, &lt;br /&gt;      &quot;user&quot;:user, &quot;success&quot;:false&lt;br /&gt;    }&lt;br /&gt;    }&lt;br /&gt;  Logger.log(new Date().getTime() - start);&lt;br /&gt;  // formatted for JSONP&lt;br /&gt;  html = ContentService.createTextOutput(request.parameters.prefix + &#39;(&#39; + JSON.stringify(result) + &#39;)&#39;)&lt;br /&gt;  .setMimeType(ContentService.MimeType.JSON);&lt;br /&gt;  return html;&lt;br /&gt;}&lt;br /&gt;function generateGUID () {&lt;br /&gt;  // rfc4122 version 4 compliant solution from broofa &lt;br /&gt;  //http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript&lt;br /&gt;  &lt;br /&gt;  return &#39;xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx&#39;.replace(/[xy]/g, function(c) {&lt;br /&gt;    var r = Math.random()*16|0, v = c == &#39;x&#39; ? r : (r&amp;amp;0x3|0x8);&lt;br /&gt;    return v.toString(16);&lt;br /&gt;  });&lt;br /&gt;}&lt;/span&gt;&lt;br /&gt;
&lt;div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;
&lt;h3&gt;
HTML Code&lt;/h3&gt;
&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;lt;html&amp;gt;&lt;br /&gt;&amp;lt;head&amp;gt;&lt;br /&gt;&amp;lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot; /&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;lt;title&amp;gt;JQUERY  DataTables Page  Hosted in Google Drive with cookie for added security&amp;lt;/title&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;       &amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;main.css&quot; /&amp;gt;&lt;br /&gt;&amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css&quot;&amp;gt;&lt;br /&gt;&amp;lt;script type=&quot;text/javascript&quot; charset=&quot;utf8&quot; src=&quot;//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;&amp;lt;script type=&quot;text/javascript&quot; charset=&quot;utf8&quot; src=&quot;//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;br /&gt;&amp;lt;script type=&quot;text/javascript&quot; charset=&quot;utf8&quot;&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;$(document).ready(function() {&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;       $(&#39;#demo&#39;).html( &#39;&amp;lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;display&quot; id=&quot;example&quot;&amp;gt;&amp;lt;/table&amp;gt;&#39; );&lt;br /&gt;        var proxyJsonp = &quot;https://script.google.com/a/macros/example.com/s/AKfylkjghffdvN2tXR6fo_c/exec&quot;;&lt;br /&gt;        var sessionparam = &quot;session=&quot;+Cookies[&#39;ppkcookie1&#39;];&lt;br /&gt;$.getJSON(proxyJsonp + &quot;?&quot; +sessionparam + &quot;&amp;amp;prefix=?&quot;, null, function(data) {&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;$(&#39;#example&#39;).dataTable( {&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&quot;aaData&quot;: data.aaData  ,&lt;br /&gt;&quot;aoColumns&quot;: data.aoColumns&lt;br /&gt;} ); &lt;br /&gt;document.getElementById(&quot;user&quot;).innerHTML=data.user;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;});&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;} );&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;lt;script type=&quot;text/javascript&quot; src=&quot;cookies.js&quot;&amp;gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&amp;lt;script type=&quot;text/javascript&quot;&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;function saveIt(name) {&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;var x = document.forms[&#39;cookieform&#39;].cookievalue.value;&lt;br /&gt;if (!x)&lt;br /&gt; alert(&#39;Please fill in a value in the input box.&#39;);&lt;br /&gt;else {&lt;br /&gt; Cookies.create(name,x,7);&lt;br /&gt; alert(&#39;Cookie created&#39;);&lt;br /&gt;}&lt;br /&gt;}&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&amp;lt;/head&amp;gt;&lt;br /&gt;&amp;lt;body&amp;gt;&lt;br /&gt;&amp;lt;h1&amp;gt;JQUERY  DataTables Page  Hosted in Google Drive with cookie for added security&amp;lt;/h1&amp;gt;&lt;br /&gt;&amp;lt;div id=&quot;header&quot;&amp;gt;&lt;br /&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&amp;lt;div id=&quot;content&quot;&amp;gt;&lt;br /&gt;   &amp;lt;h3&amp;gt;&lt;br /&gt;&amp;lt;form name=&quot;cookieform&quot; action=&quot;#&quot;&amp;gt;&amp;lt;p&amp;gt;&lt;br /&gt;Session Code &amp;lt;input name=&quot;cookievalue&quot; /&amp;gt;&lt;br /&gt;&amp;lt;/p&amp;gt;&amp;lt;/form&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;lt;p&amp;gt;&amp;lt;a href=&quot;javascript:saveIt(&#39;ppkcookie1&#39;)&quot; class=&quot;page&quot;&amp;gt;Save Session Code&amp;lt;/a&amp;gt;&amp;lt;br /&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;lt;/h3&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;&amp;lt;p&amp;gt;Session cookie contains a hard to guess value to be passed in request and validated at server&amp;lt;/p&amp;gt;&lt;br /&gt;    &amp;lt;p&amp;gt;Data returns from Google Apps Script JSONP&amp;lt;/p&amp;gt;&lt;br /&gt;&amp;lt;p&amp;gt;Includes sorting, paging and filtering by default.&amp;lt;/p&amp;gt;&lt;br /&gt;&amp;lt;p id=&quot;user&quot;&amp;gt;User ???????&amp;lt;/p&amp;gt;&lt;br /&gt;&amp;lt;p&amp;gt;User must be logged on to Google Apps Account for this data table to appear (by design!) &amp;lt;/p&amp;gt;&lt;br /&gt;&amp;lt;p&amp;gt;Entire data table loaded in one hit.&amp;lt;/p&amp;gt;&lt;br /&gt;&amp;lt;div id=&quot;demo&quot;&amp;gt;This iss where the table goes&amp;lt;/div&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;&lt;span style=&quot;font-size: xx-small;&quot;&gt;&lt;br /&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Cookies usage was based on &lt;/span&gt;&lt;/b&gt;&lt;span style=&quot;font-family: Arial;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;http://www.quirksmode.org/js/cookies.html&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;br /&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/7522329499205797698/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/7522329499205797698' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/7522329499205797698'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/7522329499205797698'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/04/jsonp-and-google-apps-script-part2.html' title='JSONP and Google Apps Script (Part2)'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihogwaNFQaFquUCg4wKzXNzUTutNF09KRU3Yo9gWB1YTHm-oBpQCZ3EhWjHNnUzQqWYrhVMC1MCbl1AWiSzHeurvRUGRE8YjUSXpp9X8rFH-OnMx3pUd3WyalVxn7A4Gjc5vF3cDMZDspN/s72-c/JSONP+++Cookies+Flow.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-2124749074878597192</id><published>2013-03-20T11:14:00.004+13:00</published><updated>2013-03-20T11:15:14.101+13:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><title type='text'>Making Use of Google Apps Data</title><content type='html'>&lt;b id=&quot;internal-source-marker_0.3935882397927344&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;/b&gt;&lt;br /&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;b id=&quot;internal-source-marker_0.3935882397927344&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;b id=&quot;internal-source-marker_0.3935882397927344&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;/b&gt;&lt;/b&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;display: inline !important; margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;b id=&quot;internal-source-marker_0.3935882397927344&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;b id=&quot;internal-source-marker_0.3935882397927344&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Google Apps provides a number of office productivity components - eg Drive , Document, &amp;nbsp;Spreadsheet, Drawing and Calendar which are often seen as single purpose personal tools. Underlying these &amp;nbsp;components are some useful data structures that can be used to assist the broader business processes.&lt;/span&gt;&lt;/b&gt;&lt;/b&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;b id=&quot;internal-source-marker_0.3935882397927344&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;For example, Calendar can be used not only to provide a personal reminder service but as the core of a job management system.&lt;/span&gt;&lt;/div&gt;
&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #fff2cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;For Karen at the centre of busy removals business in Sydney, the calendar has become the tool of choice for keeping the team aware of what jobs are coming up, where they should be and when the trucks are earning money. A potential job comes in from a web site contact, phone call, mail or a chat in the street and can be pencilled in as an event for a date/time that does not conflict with other commitments of team resources. A document is created in the Google Drive “Jobs” folder. Geoff, as director of operations, can glance at the month ahead and see the committed and potential jobs. Since he is often out driving or finalising details with customer, it is handy that the calendar is just as visible on his I-Phone as in the office. Karen is also out and about with customers and needs to be able to see the resources available as she commits to a new job (perhaps moving the ‘pencilled-in’ time to a committed one that will allow the customer to meet completion schedule on a purchase).&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #fff2cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;When the job is committed, Karen completes a summary of the move in the calendar title and description. The detail documents (inventory, quote, property access etc) becomes part of the ever growing set of job information linked by the common event.&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #fff2cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Geoff will be assigning people to the job (in calendar, simply by adding them as ‘guests’). Team members then relate to the jobs as for any calendar invitations (accept, decline, etc) and see their own workload in their calendars.&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;background-color: #fff2cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;A jobs list provides a handy customised summary of the current working period by combining information from the calendar and the jobs folder. Visibility of detailed information is limited by the standard sharing protocols of Google Apps (for example, the quote may only be seen by the team leader, but the inventory might be available to all).&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;This works simply by a bit of office discipline:&lt;/span&gt;&lt;/div&gt;
&lt;br /&gt;&lt;ul style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Giving jobs an identifier and using that identifier when creating document file names and calendar events&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Adding assigning people to jobs as guests in the calendar event&lt;/span&gt;&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;… and a bit of Google Apps Script to create a custom list from data in the calendar and data in the file names &lt;/span&gt;&lt;/div&gt;
&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;img height=&quot;309px;&quot; src=&quot;https://lh3.googleusercontent.com/L5EvA3sTV1tzXIQxXtvZ_ilHS0N0NSo8rJh8wx4rYtTffWSeKXfE8nddhqwjUpzIS02avtfhVU4Ffad3Smyyavc7CUg223gnrSm01bIWlbj-TIEFFusYQFFE&quot; width=&quot;504px;&quot; /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;span style=&quot;vertical-align: baseline;&quot;&gt; If you want to leverage your standard office tools to enhance &amp;nbsp;business processes in your organisation or project, drop me a line.&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/2124749074878597192/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/2124749074878597192' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/2124749074878597192'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/2124749074878597192'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/03/making-use-of-google-apps-data.html' title='Making Use of Google Apps Data'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://lh3.googleusercontent.com/L5EvA3sTV1tzXIQxXtvZ_ilHS0N0NSo8rJh8wx4rYtTffWSeKXfE8nddhqwjUpzIS02avtfhVU4Ffad3Smyyavc7CUg223gnrSm01bIWlbj-TIEFFusYQFFE=s72-c" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-6840148149666652294</id><published>2013-03-14T09:23:00.001+13:00</published><updated>2013-04-18T06:44:10.679+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><category scheme="http://www.blogger.com/atom/ns#" term="Security"/><title type='text'>JSONP and Google Apps Script</title><content type='html'>&lt;b id=&quot;internal-source-marker_0.3062240306753665&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;/b&gt;&lt;br /&gt;
&lt;h1 dir=&quot;ltr&quot;&gt;
&lt;b id=&quot;internal-source-marker_0.3062240306753665&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;b id=&quot;internal-source-marker_0.3062240306753665&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;This follows my baby steps towards a web page populated with data from a table. &lt;a href=&quot;http://davethinkingaloud.blogspot.co.nz/2013/04/jsonp-and-google-apps-script-part2.html&quot;&gt;See also part 2.&lt;/a&gt;&lt;/span&gt;&lt;/b&gt;&lt;/b&gt;&lt;/h1&gt;
&lt;b id=&quot;internal-source-marker_0.3062240306753665&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Having worked with the standard user interface of Google Apps Script, I felt that I was approaching a sensible limit of what could be delivered through it. Even a simple table view was going to require significant coding and ultimately maintenance. The close-coupling of application with presentation was also a concern for future changes to data, user interface and application logic.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Exploring the implications of moving to a conventional HTML page for the user interface, I chose to work with &lt;/span&gt;&lt;a href=&quot;http://jquery.com/&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;jQuery&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;. There are other candidates like Angular JS.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;A common issue is a table or grid of data (often sourced from a spreadsheet). Presenting this as part of the user interface was a suitable example of the interface issues.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;jQuery has a &lt;/span&gt;&lt;a href=&quot;http://datatables.net/&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;DataTables&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; plugin which would save a heap of styling, structuring and client handler coding that is needed when you write your own user interface. I also chose to make use of the &lt;/span&gt;&lt;a href=&quot;https://googledrive.com/host/0B716ywBKT84AMXBENXlnYmJISlE/GoogleDriveHosting.html&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Google Drive Hosting&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; facility as an easy path to get a working set of web pages available without engaging with hosting services.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;First I used a demo from DataTables to see the default table functionality from delivered from a web page on Google Drive Host. This is just a script executing in the browser on ready. The data is embedded in the script. The page is available &lt;/span&gt;&lt;a href=&quot;https://googledrive.com/host/0B90FGJizRd-gbm1JRUswYUY5dE0/testjquery.html&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;here&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&amp;lt;script&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #660066; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;type&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #660066; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;charset&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;utf8&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;$&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;document&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;ready&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;{&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;$&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&#39;#demo&#39;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;html&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&#39;&amp;lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;display&quot; id=&quot;example&quot;&amp;gt;&amp;lt;/table&amp;gt;&#39;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;);&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;$&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&#39;#example&#39;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;dataTable&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;{&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;aaData&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #880000; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;/* Reduced data set */&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Trident&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Internet Explorer 4.0&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Win 95+&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #006666; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;4&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;X&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Trident&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Internet Explorer 5.0&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Win 95+&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #006666; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;5&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;C&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Trident&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Internet Explorer 5.5&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Win 95+&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #006666; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;5.5&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;A&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Trident&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Internet Explorer 6.0&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Win 98+&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #006666; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;6&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;A&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Trident&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Internet Explorer 7.0&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Win XP SP2+&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #006666; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;7&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;A&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Gecko&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Firefox 1.5&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Win 98+ / OSX.2+&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #006666; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;1.8&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;A&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Gecko&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Firefox 2&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Win 98+ / OSX.2+&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #006666; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;1.8&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;A&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Gecko&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Firefox 3&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Win 2k+ / OSX.3+&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #006666; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;1.9&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;A&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Webkit&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Safari 1.2&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;OSX.3&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #006666; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;125.5&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;A&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Webkit&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Safari 1.3&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;OSX.3&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #006666; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;312.8&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;A&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Webkit&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Safari 2.0&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;OSX.4+&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #006666; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;419.3&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;A&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Webkit&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Safari 3.0&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;OSX.4+&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #006666; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;522.1&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;A&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;]&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;]&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;aoColumns&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;{&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;sTitle&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Engine&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;},&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;{&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;sTitle&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Browser&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;},&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;{&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;sTitle&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Platform&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;},&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;{&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;sTitle&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Version&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;sClass&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;center&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;},&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;{&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;sTitle&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;Grade&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;sClass&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;center&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;fnRender&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;obj&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;{&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; sReturn &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; obj&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;aData&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; obj&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;iDataColumn &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;];&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;if&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; sReturn &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;==&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;A&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;{&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;sReturn &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;&amp;lt;b&amp;gt;A&amp;lt;/b&amp;gt;&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;return&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; sReturn&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;]&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;);&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;);&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The default table looked good enough to work with so I proceeded to linking the page to some application data. Since the DataTables feature can map to a 2D table like a spreadsheet, it seemed reasonable to use the object defining the table as the interface between application and presentation. A layout designer can simply think of the table in the UI as a box, filled on ready. The apps designer can add columns, sort specifications etc as appropriate.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The script was then required to get the data using a jQuery getJSON call. &lt;/span&gt;&lt;a href=&quot;http://en.wikipedia.org/wiki/JSONP&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;JSONP&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; is required in the interface because of the cross domain.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&amp;lt;script&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #660066; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;type&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;text/javascript&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #660066; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;charset&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;utf8&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;$&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;document&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;ready&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;()&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;{&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;$&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&#39;#demo&#39;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;html&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&#39;&amp;lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;display&quot; id=&quot;example&quot;&amp;gt;&amp;lt;/table&amp;gt;&#39;&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;);&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; proxyJsonp &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;=&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;https://script.google.com/macros/s/AKfycbxqfgshdfgd2WmRQ4/exec&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;$&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;getJSON&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;proxyJsonp &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;+&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;?prefix=?&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;null&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;data&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;)&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;{&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;$&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&#39;#example&#39;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;).&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;dataTable&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;(&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;{&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;aaData&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; data&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;aaData &amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;,&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #008800; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&quot;aoColumns&quot;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;:&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; data&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;.&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;aoColumns&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;);&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;});&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #666600; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;);&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: white; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #000088; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;&lt;br /&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The application side of the interface was supplied by an apps script using the content service.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function doGet(request) {&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var result ={&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&quot;aaData&quot;: &amp;nbsp;[&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;/* Reduced data set */&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;[ &quot;Trident&quot;, &quot;Internet Explorer 4.0&quot;, &quot;Win 95+&quot;, 4, &quot;X&quot; ],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;[ &quot;Trident&quot;, &quot;Internet Explorer 5.0&quot;, &quot;Win 95+&quot;, 5, &quot;C&quot; ],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;[ &quot;Webkit&quot;, &quot;Safari 2.0&quot;, &quot;OSX.4+&quot;, 419.3, &quot;A&quot; ],&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;[ &quot;Webkit&quot;, &quot;Safari 3.0&quot;, &quot;OSX.4+&quot;, 522.1, &quot;A&quot; ]&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;] &amp;nbsp;,&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&quot;aoColumns&quot;: &amp;nbsp;[&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;{ &quot;sTitle&quot;: &quot;Engine&quot; },&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;{ &quot;sTitle&quot;: &quot;Browser&quot; },&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;{ &quot;sTitle&quot;: &quot;Platform&quot; },&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;{ &quot;sTitle&quot;: &quot;Version&quot;, &quot;sClass&quot;: &quot;center&quot; },&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;{&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&quot;sTitle&quot;: &quot;Grade&quot;,&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&quot;sClass&quot;: &quot;center&quot;,&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&quot;fnRender&quot;: function(obj) {&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;var sReturn = obj.aData[ obj.iDataColumn ];&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;if ( sReturn == &quot;A&quot; ) {&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;sReturn = &quot;&amp;lt;b&amp;gt;A&amp;lt;/b&amp;gt;&quot;;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;return sReturn;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;span class=&quot;Apple-tab-span&quot; style=&quot;white-space: pre;&quot;&gt; &lt;/span&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;], &quot;user&quot;:user&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;};&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;return ContentService.createTextOutput(request.parameters.prefix + &#39;(&#39; + JSON.stringify(result) + &#39;)&#39;)&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;.setMimeType(ContentService.MimeType.JSON);&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;This produced a fairly responsive web page so I added real data from a spreadsheet by replacing the apps script.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function doGet(request) {&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var sourceSpreadSheet = SpreadsheetApp.openById(&quot;0AthfgyjkfyzRQd00xRUE&quot;); &amp;nbsp;// ourPeople&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;var dataArray = sourceSpreadSheet.getDataRange().getValues();&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; var aadata = [];&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var aoColumns = [];&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var col = {};&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var headers = dataArray[0];&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;// all except header&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;for ( var i=1;i&amp;lt;dataArray.length;i++) {&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;aadata.push(dataArray[i]);&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;}&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;// headers&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;for (i=0;i&amp;lt;headers.length;i++) {&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;col = { &quot;sTitle&quot;: headers[i]};&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;aoColumns.push(col);&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;}&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var result ={&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&quot;aaData&quot;: &amp;nbsp;aadata,&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&quot;aoColumns&quot;: aoColumns, &quot;user&quot;:user&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;};&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;return ContentService.createTextOutput(request.parameters.prefix + &#39;(&#39; + JSON.stringify(result) + &#39;)&#39;)&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;.setMimeType(ContentService.MimeType.JSON);&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;This code made the whole thing insensitive to number of columns. I published as available to users in my domain and it required users to be logged on their Google Apps account before returning table. As written, the web page just did not build the table if user not logged on.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;So that was fairly painless thanks to the giants that had gone along similar paths (+&lt;/span&gt;&lt;/b&gt;&lt;a class=&quot;Sg Ob Tc&quot; href=&quot;https://plus.google.com/u/0/106333172328928589411&quot; oid=&quot;106333172328928589411&quot; style=&quot;-webkit-transition: color 0.218s; background-color: white; color: #222222; cursor: pointer; font-family: arial, sans-serif; font-size: 13px; font-weight: bold; line-height: 18px; text-decoration: none; white-space: nowrap;&quot;&gt;Riël Notermans&lt;/a&gt;&amp;nbsp;&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;+&lt;/span&gt;&lt;/b&gt;&lt;a class=&quot;Sg Ob Tc&quot; href=&quot;https://plus.google.com/u/0/112329532641745322160&quot; oid=&quot;112329532641745322160&quot; style=&quot;-webkit-transition: color 0.218s; background-color: white; color: #3366cc; cursor: pointer; font-family: arial, sans-serif; font-size: 13px; font-weight: bold; line-height: 18px; white-space: nowrap;&quot;&gt;keisuke oohashi&lt;/a&gt;)&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;. I didn’t have to worry about OAuth2, signon etc because it all happens under the covers. &lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;However, I am now at this Warning!&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;a href=&quot;https://developers.google.com/apps-script/content_service#serving_jsonp_in_web_pages&quot;&gt;&lt;span style=&quot;background-color: red; color: #1155cc; font-family: Arial; font-size: 13px; font-weight: bold; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Warning:&lt;/span&gt;&lt;span style=&quot;background-color: red; color: #1155cc; font-family: Arial; font-size: 13px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; Be very careful when using this JSONP technique in your scripts. Because it&#39;s possible for anyone to embed the script tag in their web page, you may be &quot;tricked&quot; into executing the script when you visit a malicious website, which can then capture the data returned. It&#39;s a best practice to make sure that your JSONP scripts are read-only and only return non-sensitive information.&lt;/span&gt;&lt;/a&gt;&lt;/b&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;a href=&quot;http://davethinkingaloud.blogspot.co.nz/2013/04/jsonp-and-google-apps-script-part2.html&quot;&gt;Part 2 outlines a possible solution to this.&lt;/a&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/6840148149666652294/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/6840148149666652294' title='4 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/6840148149666652294'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/6840148149666652294'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/03/jsonp-and-google-apps-script.html' title='JSONP and Google Apps Script'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>4</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-5677340872526341696</id><published>2013-03-10T11:17:00.000+13:00</published><updated>2013-04-14T21:55:28.188+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><category scheme="http://www.blogger.com/atom/ns#" term="Security"/><title type='text'>Break your own Google Apps security</title><content type='html'>&lt;br /&gt;
&lt;h2 class=&quot;answer-title&quot; style=&quot;background-color: white; color: #222222; display: inline; font-family: Arial; font-size: 20px; font-weight: normal; line-height: 24px; margin: 0px; padding: 0px 0.5em 0px 0px;&quot;&gt;
&lt;a href=&quot;http://support.google.com/accounts/bin/answer.py?hl=en&amp;amp;answer=180744&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;2-step verification for Google Apps&lt;/a&gt; is a must for those serious about protecting their account and all it contains.&lt;/h2&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;h2 class=&quot;answer-title&quot; style=&quot;background-color: white; color: #222222; display: inline; font-family: Arial; font-size: 20px; font-weight: normal; line-height: 24px; margin: 0px; padding: 0px 0.5em 0px 0px;&quot;&gt;
&lt;a href=&quot;https://mightytext.net/&quot; target=&quot;_blank&quot;&gt;MightyText&lt;/a&gt;&amp;nbsp;is handy for getting SMS messages to and from your desk.&lt;/h2&gt;
&lt;br /&gt;
&lt;br /&gt;
&lt;h2 class=&quot;answer-title&quot; style=&quot;background-color: white; color: #222222; display: inline; font-family: Arial; font-size: 20px; font-weight: normal; line-height: 24px; margin: 0px; padding: 0px 0.5em 0px 0px;&quot;&gt;
Doing &lt;/h2&gt;
&lt;h2 class=&quot;answer-title&quot; style=&quot;background-color: white; color: #222222; display: inline; font-family: Arial; font-size: 20px; line-height: 24px; margin: 0px; padding: 0px 0.5em 0px 0px;&quot;&gt;
both&lt;/h2&gt;
&lt;h2 class=&quot;answer-title&quot; style=&quot;background-color: white; color: #222222; display: inline; font-family: Arial; font-size: 20px; font-weight: normal; line-height: 24px; margin: 0px; padding: 0px 0.5em 0px 0px;&quot;&gt;
 is not so smart. &amp;nbsp;The 2-step verification sends an sms message to your registered phone number and MightyText will route that to your desktop browser where it pops up, conveniently for the opportunist with access to your machine.&amp;nbsp;&lt;/h2&gt;
</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/5677340872526341696/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/5677340872526341696' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/5677340872526341696'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/5677340872526341696'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/03/break-your-own-google-apps-security.html' title='Break your own Google Apps security'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-765372051528963584</id><published>2013-03-03T10:10:00.001+13:00</published><updated>2013-04-25T22:01:08.199+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><title type='text'>Trees in Google Apps Script UI</title><content type='html'>&lt;b id=&quot;internal-source-marker_0.36295689339749515&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;/b&gt;&lt;br /&gt;
&lt;h1 dir=&quot;ltr&quot;&gt;&lt;b id=&quot;internal-source-marker_0.36295689339749515&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 24px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Trees in Google Apps Script&lt;/span&gt;&lt;/b&gt;&lt;/h1&gt;&lt;b id=&quot;internal-source-marker_0.36295689339749515&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The tree widget in the Apps Script user interface presented me with a few issues. I persevered to get a solution that worked for me.&lt;/span&gt;&lt;br /&gt;
&lt;h2 dir=&quot;ltr&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 19px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;What did I want?&lt;/span&gt;&lt;/h2&gt;&lt;ul style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;&lt;li dir=&quot;ltr&quot; style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Tree element can be selected &lt;/span&gt;&lt;/li&gt;&lt;li dir=&quot;ltr&quot; style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Selection reflected by a change of style attributes (eg bold, red etc)&lt;/span&gt;&lt;/li&gt;&lt;li dir=&quot;ltr&quot; style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Selection of one element turns selection of previous element off&lt;/span&gt;&lt;/li&gt;&lt;li dir=&quot;ltr&quot; style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Take an action based on the selection made (a handler)&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;h2 dir=&quot;ltr&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 19px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Tree Widget&lt;/span&gt;&lt;/h2&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Apps Script UI does provide a &lt;/span&gt;&lt;a href=&quot;https://developers.google.com/apps-script/class_tree&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Tree widget&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; and Google helpfully tells you it is based on GWT. I suspect that if you are an expert in GWT and its documentation you would not be using Apps Script.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Initially, I just set the tree branches to text with no widget (code below). This provided a standard indication that I had clicked (selected) the tree branch - a blue highlight. Unfortunately the selection handler that is fired, currently only tells you that the tree has been selected and not which branch or leaf. There is a &lt;/span&gt;&lt;a href=&quot;https://code.google.com/p/google-apps-script-issues/issues/detail?id=307&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;long outstanding issue&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; for this. EDIT 25/4/13. Now Fixed&lt;/span&gt;&lt;br /&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;function doGet() {&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var start = new Date();&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var app = UiApp.createApplication();&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var target = app.createLabel().setId(&quot;target&quot;); &amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var panel = app.createAbsolutePanel();&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;// create tree&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var selhandler = app.createServerHandler(&quot;selector&quot;).addCallbackElement(panel);&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var tree = app.createTree().setAnimationEnabled(false).setId(&#39;FullTree&#39;).setTag(&quot;&quot;).addSelectionHandler(selhandler);&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;var handler = app.createServerHandler(&quot;selector&quot;).addCallbackElement(tree);&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;// build a tree&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;for (i=0;i&amp;lt;100;i++){&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;var str = &quot;label&quot;+(i+1);&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;var str1 = &quot;item&quot;+(i+1);&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;// &amp;nbsp;create level 1 branch&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;var item1 = app.createTreeItem(”TEXT”).setId(str1).setState(true,true);&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;// add level 2 branches to level 1&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;addsub(app,item1,tree);&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;// add level 1 branch to tree&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;tree.addItem(item1);&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;}&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;panel.add(tree);&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;panel.add(target);&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;app.add(panel);&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;Logger.log(&quot;Elapsed:&quot;+(new Date() - start));&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;return app;&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&lt;/span&gt;&lt;/div&gt;&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Putting a label widget in the branches instead of the plain text allowed a click handler to be used. In the handler, parameter.source provides an indicator of the item clicked. But branch is no longer highlighted when selected so the user does not get feedback of what is selected.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;At this point, I thought of setting the styling for selected/ not-selected myself. What was I thinking! You can use a client handler on click to set the attributes of the label widget when you click it. Unfortunately, client handlers do things to the source widget or statically named target widgets so you can’t remember the currently selected item and set its styling in a toggle action. &lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Back to the server handler then. Yes, if you have remembered the previous state, you can use the server handler to set the style accordingly. BUT, the only way that you can know the state in the server handler is to pass it via the parameters. This led me to the final problem, which was that the users would be able to click more than one widget faster than the server handler can deal with it. Multiple parallel server handlers are fired and the “previous state” is dependent on timing … instead of a toggle operation, the user interface can get multiple widgets marked as selected. The only way around this is to restyle all the widgets to the unselected state and then style the selected widget. To say this makes for an unresponsive interface is an understatement.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;h2 dir=&quot;ltr&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 19px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Solution&lt;/span&gt;&lt;/h2&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;We need a widget that has built in “selected” behaviour and to put that in the tree. So use a radio button for each of the tree elements.&lt;/span&gt;&lt;br /&gt;
&lt;ul style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;&lt;li dir=&quot;ltr&quot; style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Highlighted (and filled button) when selected - fast, in browser, change&lt;/span&gt;&lt;/li&gt;&lt;li dir=&quot;ltr&quot; style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Exclusive selection built-in&lt;/span&gt;&lt;/li&gt;&lt;li dir=&quot;ltr&quot; style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Fires click handler for server action&lt;/span&gt;&lt;/li&gt;&lt;li dir=&quot;ltr&quot; style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Developer can change base style&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;var label1 = app.createRadioButton(&quot;XOX&quot;,str).setId(str).setName(&quot;SameGroup&quot;).addClickHandler(handler).setTag(str).&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;background-color: yellow; font-family: Arial; font-size: 11px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;setStyleAttributes({&#39;fontWeight&#39;:&#39;bold&#39;,&#39;fontSize&#39;:&#39;14pt&#39;, &quot;color&quot; : &quot;black&quot;,&quot;fontFamily&quot;:&quot;arial,sans-serif&quot;});&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Note that the name of each radio button has to be the same to put them into a common group for the toggle action to work.&lt;/span&gt;&lt;/b&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/765372051528963584/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/765372051528963584' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/765372051528963584'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/765372051528963584'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/03/trees-in-google-apps-script-tree-widget.html' title='Trees in Google Apps Script UI'/><author><name>Anonymous</name><uri>http://www.blogger.com/profile/14011195594834564965</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-3532009299477444535</id><published>2013-02-13T12:57:00.000+13:00</published><updated>2013-02-13T14:21:19.308+13:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><category scheme="http://www.blogger.com/atom/ns#" term="Security"/><title type='text'>Mixing User Information and Private Information in Google Apps Script</title><content type='html'>&lt;span id=&quot;internal-source-marker_0.11813657061583771&quot; style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;Going back to real coding. Well Google Apps Script anyway:)&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial;&quot;&gt;&lt;span style=&quot;font-size: 15px;&quot;&gt;Google Apps Script presents a few hurdles to an application designer if you want to work in the users&#39; context with information derived from your private documents or domain.&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;I needed to work with &lt;/span&gt;&lt;br /&gt;
&lt;ul style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline;&quot;&gt;some
 information derived from a document within my protected Google Apps 
document store &amp;nbsp;(document private to me, within a domain where sharing 
documents outside domain is forbidden)&lt;/span&gt;&lt;/li&gt;
&lt;li dir=&quot;ltr&quot; style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline;&quot;&gt;the identity of user (may be outside domain but with a Google Account)&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;The identity of a user is available from &lt;/span&gt;&lt;span style=&quot;color: lime; font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline;&quot;&gt;Session.getActiveUser().getEmail()&lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt; but this will fail in interesting ways unless the script is &lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline;&quot;&gt;published &lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;to run under the user id of the user running the script.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;The
 private document cannot be shared outside the domain, and in this 
particular case, access to the full document is restricted to one user 
within the domain. Scripted access to the information on the document 
must be done by a script &lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline;&quot;&gt;published &lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;&amp;nbsp;to run as that privileged user.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;So
 we need two scripts that talk to each other. One doing the conversation
 with the user and one operating as me in the background. &lt;/span&gt;&lt;span style=&quot;color: lime; font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline;&quot;&gt;UrlFetchApp.fetch()&lt;/span&gt;&lt;span style=&quot;color: lime; font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt; &lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;provides the means for one script to call another with parameters. &lt;/span&gt;&lt;span style=&quot;color: lime; font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline;&quot;&gt;ContentService.createTextOutput()&lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt; provides the means to set the response to a regular format like JSON or XML.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;The following scripts demonstrate the mechanics.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;h2 dir=&quot;ltr&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 19px; vertical-align: baseline;&quot;&gt;1. The front end UI interaction with the users&lt;/span&gt;&lt;/h2&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;function doGet() {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;var app = UiApp.createApplication();&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;var email = Session.getActiveUser().getEmail();&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;var label = app.createLabel(&#39;Your email address is &#39;+email);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;app.add(label);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;// get the private data object&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;var obj = callUserWithPermission(email);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;Logger.log(JSON.stringify(obj));&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;// put out data originating from private world and data round tripped from user world to private world and back&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;var label2 = app.createLabel(&#39;App effective user was &#39;+obj.available + &quot; Originating user was &quot; + obj.actual);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;app.add(label2);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;// Proceed with business on user side .... initial UI here&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;return app;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;function callUserWithPermission(email) {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;try {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;// use the run as privileged user script&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;
 var response = 
UrlFetchApp.fetch(&quot;https://script.google.com/macros/s/AKfgfgfgmlxQXUP1OLr-BEs014S7b6gVxdhfdhfshdhfdVzM/exec?who=&quot;+encodeURIComponent(email));&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; var parsedResponse = JSON.parse(response.getContentText());&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; return parsedResponse;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;catch(e) {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; Logger.log(&quot;error &quot;+JSON.stringify(e))&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;This
 script must be deployed so that it is run as the script user and 
available to anyone. It will insist on a Google Account login and 
acceptance by user of exposure of the email id.&lt;/span&gt;&lt;br /&gt;
&lt;h2 dir=&quot;ltr&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 19px; vertical-align: baseline;&quot;&gt;2. The back end interaction with private domain documents&lt;/span&gt;&lt;/h2&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;function doGet(e) {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;// see content service simple example&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;// receive the info from &quot;run as user&quot; script as parameter &quot;who&quot;&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;try {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; var app = UiApp.createApplication();&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; var effective = Session.getEffectiveUser().getEmail();&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; var result = {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; available: effective,&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp; actual: e.parameter.who&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; };&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; // DO the business function and add info to result&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; return ContentService.createTextOutput(JSON.stringify(result))&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; .setMimeType(ContentService.MimeType.JSON);&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;catch(ex) {&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp; throw new Error(&quot;In testgetprivate doGet()&quot;+ex.message)&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt; &amp;nbsp;}&lt;/span&gt;&lt;/div&gt;
&lt;div dir=&quot;ltr&quot; style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;}&lt;/span&gt;&lt;/div&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 11px; vertical-align: baseline;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;This script must be deployed so that it is run as the script owner and available to anyone &lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline;&quot;&gt;including anonymous users. &lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;This
 certainly should give you something to think about … this script can be
 run by anyone, from anywhere who knows the, admittedly difficult to 
guess, URI. Is the information returned very sensitive (not in my case)?
 Is the risk of exposure (very slight unless the developer leaves the 
source code lying around) balanced by the ease of implementation. 
Alternatives requires a whole authentication mechanism built into your 
app.&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline;&quot;&gt;You may find that you cannot deploy a standalone script like this because of the &quot;no sharing of documents beyond domain&quot; restriction set up by administrator. In that case, put the script into a public site and deploy it from there.&lt;/span&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/3532009299477444535/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/3532009299477444535' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/3532009299477444535'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/3532009299477444535'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2013/02/mixing-user-information-and-private.html' title='Mixing User Information and Private Information in Google Apps Script'/><author><name>David French</name><uri>http://www.blogger.com/profile/09850658569729205096</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-6232498413280963877</id><published>2012-06-27T12:55:00.001+12:00</published><updated>2012-06-27T21:08:54.030+12:00</updated><title type='text'>Innovation Blackout</title><content type='html'>In the Harvard Business Review Blog &lt;a href=&quot;http://blogs.hbr.org/cs/2012/06/evade_an_innovation_blackout.html?awid=5160581158730120097-3271&quot; target=&quot;_blank&quot;&gt;Evade an Innovation Blackout,&lt;/a&gt; Jordan Cohen points out the difficulty of engaging effort for new ideas when the people with the ability to develop those ideas are up to their asses in aligators.&lt;br /&gt;
In a financial downturn, the razor-gangs that decend on the organisation are a big inhibitor of necessary change at just the wrong time. Any innovation is seen as something to be avoided or delayed rather than embrac&lt;span style=&quot;background-color: white;&quot;&gt;ed as a means of getting out of a failing operation.&lt;/span&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/6232498413280963877/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/6232498413280963877' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/6232498413280963877'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/6232498413280963877'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2012/06/innovation-blackout.html' title='Innovation Blackout'/><author><name>David French</name><uri>http://www.blogger.com/profile/09850658569729205096</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-6408666292934294922</id><published>2012-06-25T08:56:00.000+12:00</published><updated>2013-02-13T16:42:18.456+13:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><category scheme="http://www.blogger.com/atom/ns#" term="Security"/><title type='text'>Backup Google Apps II</title><content type='html'>&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Continuing from &amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;a href=&quot;http://davethinkingaloud.blogspot.co.nz/2012/06/backup-of-google-apps.html&quot;&gt;&lt;span style=&quot;background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Backup Google Apps&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; , I have been taking a look at &lt;/span&gt;&lt;a href=&quot;http://backupify.com/&quot;&gt;&lt;span style=&quot;background-color: transparent; color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Backupify&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;. &lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;This product meets a key component of my disaster recovery scenario. &lt;/span&gt;&lt;span style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;I am assuming that the worst that can happen to a Google Account is that  users and the administrator lose access to it and, perhaps through the action of a &#39;bad person&#39;, Google cannot be persuaded to restore the account access.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Backupify can be accessed through a login independently of Google Apps which provides an alternative route to the backups if the &#39;bad person&#39; has locked users out of the primary google apps files. Documents and Mail can be &lt;/span&gt;&lt;span style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;downloaded&lt;/span&gt;&lt;span style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; from Backupify as an alternative to &lt;/span&gt;&lt;span style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;restoring &lt;/span&gt;&lt;span style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;to the apps account so there is a measure of comfort that if the worst happens there will be a recovery path.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;However there are some fish-hooks...&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;ul style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;li style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Because Backupify is accessible from Google Apps single sign-on, this convenience would be available to the bad person who could then lock the legitimate user out of Backupify*.&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;li style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;To support the download capability, Backupify transforms the Google Apps documents (creating xls files for Google Apps spreadsheets for example). This has unfortunate side effects, as there is not a one-one relationship between Google documents and the MSOffice equivalent so the round trip will lose&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;ol style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;li style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; list-style-type: lower-alpha; vertical-align: baseline;&quot;&gt;&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;any scripts developed in google apps spreadsheets&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;li style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; list-style-type: lower-alpha; vertical-align: baseline;&quot;&gt;&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;the effect of google functions in spreadsheets&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;li style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; list-style-type: lower-alpha; vertical-align: baseline;&quot;&gt;&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;charts in spreadsheets&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;li style=&quot;background-color: transparent; font-family: Arial; font-size: 15px; list-style-type: lower-alpha; vertical-align: baseline;&quot;&gt;&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;external references  to shared or published documents  &lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/ul&gt;
&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; &lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;ul style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;/ul&gt;
&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;So there still does not appear to be an equivalent in Google Apps of the conventional off-site backup that will allow a recovery of all information in a disaster situation.&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Is losing access to the Google Account a scenario that should be considered? I can think of a few possible events. In no particular order of likelihood or Machiavellian complexity:&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;ul&gt;
&lt;li&gt;&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Side effect of law enforcement action in US (eg &lt;a href=&quot;http://en.wikipedia.org/wiki/Megaupload&quot; target=&quot;_blank&quot;&gt;Megaupload&lt;/a&gt;)&amp;nbsp;&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Destructive action by a Google Apps super administrator&amp;nbsp;&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;li&gt;&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;A &#39;bug&#39; in Google Apps&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;br /&gt;
&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;/b&gt;&lt;b id=&quot;internal-source-marker_0.7923847450874746&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;background-color: transparent; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;[Update] * Backupify recognised the issue and responded (sensibly in my opinion)&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;blockquote class=&quot;tr_bq&quot;&gt;
&lt;span style=&quot;-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; color: #222222; display: inline !important; float: none; font-family: Arial; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;Currently, we are looking to improve security with an extended identity verification that would allow you to regain access to your account faster in the case that this happened. We do not have this in the product now, but in the meantime if you want to send us a photo of your picture ID then we can store that internally and securely with your account. That way in the future is someone did gain unauthorized access to your Backupify account via Google Apps login and they changed the Backupify password that you set then we could work with you and use the photo ID that you sent to verify your true identity and get you access to your account again.&lt;/span&gt;&lt;/blockquote&gt;
so we can expect there to be a process that could circumvent the issue of losing access to the backify account.</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/6408666292934294922/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/6408666292934294922' title='2 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/6408666292934294922'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/6408666292934294922'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2012/06/backup-google-apps-ii.html' title='Backup Google Apps II'/><author><name>David French</name><uri>http://www.blogger.com/profile/09850658569729205096</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>2</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-1894472633978131914</id><published>2012-06-13T16:26:00.001+12:00</published><updated>2013-02-13T16:42:18.454+13:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Google Apps"/><category scheme="http://www.blogger.com/atom/ns#" term="Security"/><title type='text'>Backup of Google Apps</title><content type='html'>&lt;b id=&quot;internal-source-marker_0.5188945119734854&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;I am looking at the need for backup and recovery capability for organisations that manage their information and operations through Google Apps.&amp;nbsp;&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial;&quot;&gt;&lt;span style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;&lt;/span&gt;&lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Classically, backup for the unforeseen event comprises a resource remote from the primary information that can be used to support the business operations in the event of the non-availability of the primary source. Analysis of risk and impact of losses can be used to determine how long that you are able to do without the primary source and how much you should be prepared to pay for recovery within that time. Generally, only broad classifications of risk to the primary information is considered (destruction of data centre; denial of service etc).&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;In “cloud” services, we are buying a measure of protection of our information assets from the provider whether that is Google, Microsoft or Waikikamukau Data Services. The trust we can place in these organisations is related to their competence and also the size of the pain that the organisation will feel when your primary information is unavailable. For example, if Google reported that it could not recover from a failure of just one of its data centres, there would be a massive loss of confidence affecting the viability of the multibillion dollar company.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;So we might safely assume that Google will be able to restore your account in event of a catastrophe in their domain, but user mishandling of information is another matter and firmly in the user’s court. For this the user needs a strategy to suit their needs for information assurance.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Implementing some form of backup for Google Apps will require one or more of &lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;ul style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;li style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Maintaining an inhouse backup storage server to backup cloud based documents to local hard disk &amp;nbsp;or another storage supplier like Amazon.&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;li style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Use a 3rd party service like Backupify or Spanning to copy and restore Google Apps documents/files.&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;li style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;white-space: pre-wrap;&quot;&gt;Something to confirm that your backup policy is adhered to&lt;/span&gt;&lt;/b&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;b style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;In the case of &lt;/span&gt;&lt;a href=&quot;http://spanning.com/&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Spanning Backup&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; there are a few issues to be aware of.&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;ul style=&quot;margin-bottom: 0pt; margin-top: 0pt;&quot;&gt;
&lt;li style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;When a document is recovered it is a &lt;/span&gt;&lt;span style=&quot;font-weight: bold; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;new&lt;/span&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt; Google Apps document. Any references to the original will not be replaced by the restore operation. This will affect Sites that link to Apps documents, shares of the original, and published documents.&lt;/span&gt;&lt;/li&gt;
&lt;li style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;When a shared document is recovered, the new document is retains the shares of the original &lt;/span&gt;&lt;span style=&quot;font-weight: bold; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;but the ownership changes&lt;/span&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt; to the user that performed the restore.&lt;/span&gt;&lt;/li&gt;
&lt;li style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;When a restore is performed, a folder is created to contain the restored documents. This folder is treated like any other, including taking part in subsequent backup cycles. There are opportunities for confusion about which version of a document is which.&lt;/span&gt;&lt;/li&gt;
&lt;li style=&quot;font-family: Arial; font-size: 15px; list-style-type: disc; vertical-align: baseline;&quot;&gt;&lt;span style=&quot;vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The backup can only be used to recover to Google Apps and not as a path to another service&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;There will be good reasons for these issues and the design fits well with organisations where the individual user is responsible for their own environment (like with a personal computer). However, those familiar with IT-managed filestore could be surprised, unpleasantly.&lt;/span&gt;&lt;/b&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/1894472633978131914/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/1894472633978131914' title='2 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/1894472633978131914'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/1894472633978131914'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2012/06/backup-of-google-apps.html' title='Backup of Google Apps'/><author><name>David French</name><uri>http://www.blogger.com/profile/09850658569729205096</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>2</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-8727767639370860317</id><published>2012-06-04T19:37:00.002+12:00</published><updated>2012-06-13T16:26:48.763+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Privacy"/><title type='text'>Privacy Watchdog with Teeth?</title><content type='html'>&lt;b id=&quot;internal-source-marker_0.20331258815713227&quot; style=&quot;font-weight: normal;&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Lets take computer privacy breaches seriously here in New Zealand. Give the Privacy Commission some teeth and send appropriate messages to the likes of ACC.&lt;/span&gt;&lt;br /&gt;&lt;a href=&quot;http://www.independent.co.uk/life-style/health-and-families/health-news/brighton-and-sussex-university-hospitals-nhs-trust-fined-over-privacy-breach-7811300.html&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;A recent case in the UK&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; resulted in a significant fine being levied on a National Health Trust which failed to destroy sensitive data on 1000 hard disks before releasing them. More worrying was that they thought that they could contract out of the responsibility by using a 3rd party to facilitate the disposal. &lt;/span&gt;&lt;br /&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Here in New Zealand, &lt;/span&gt;&lt;a href=&quot;http://privacy.org.nz/media-statement-acc-inquiry-privacy-act-complaints/&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;we get investigations&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; but no sense that responsibility for the protection of sensitive data is sheeted home to senior management. The pressure on organisations that mishandle sensitive data is reduced by the requirement that the “complainant can show that they have suffered harm” rather than that there was a breach. Only “if the harm is significant, a complainant &lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;might be able to claim that they are entitled&lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; to compensation”. Note that there is no actual &lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; font-style: italic; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;entitlement &lt;/span&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;to compensation nor a means of making orders like that made in the UK case. The best we can hope for is a sound drubbing of the Minister by the the capital’s press but even &lt;/span&gt;&lt;a href=&quot;http://www.stuff.co.nz/dominion-post/news/politics/6955759/ACC-privacy-breach-complaints-pile-up&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;that has been lacklustre.&lt;/span&gt;&lt;/a&gt;&lt;/b&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/8727767639370860317/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/8727767639370860317' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/8727767639370860317'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/8727767639370860317'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2012/06/privacy-watchdog-with-teeth.html' title='Privacy Watchdog with Teeth?'/><author><name>David French</name><uri>http://www.blogger.com/profile/09850658569729205096</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-6163042347880392052</id><published>2012-05-16T09:29:00.000+12:00</published><updated>2012-05-23T18:22:11.560+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Privacy"/><title type='text'>Smart Meter Privacy</title><content type='html'>John Udel has raised Smart Meters up the conciousness ladder in a&lt;a href=&quot;http://www.wired.com/cloudline/2012/05/smart-meter/&quot; target=&quot;_blank&quot;&gt; timely post.&lt;/a&gt;&lt;br /&gt;
&lt;blockquote class=&quot;tr_bq&quot;&gt;
&lt;span style=&quot;background-color: white; color: #333333; display: inline !important; float: none; font-family: Arial, Tahoma, Verdana, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 20px; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;&quot;&gt;Smart meters are new. But we can’t afford to think that every new technology rewrites all the rules, requiring new legislation which, as we know, can never keep pace with innovation. Here’s a powerful simplifying rule: It’s your data. That’s the default. And you shouldn’t need to be a do-it-yourselfer to assert ownership. Even if you use a utility-supplied meter, as most people will, it’s still your data.&lt;/span&gt;&lt;/blockquote&gt;
&lt;i&gt;It&#39;s your data&lt;/i&gt;??? I am not sure that it is so simple. It is &#39;their&#39; accounting record. The meter certainly reveals something about the occupier, which is not necessarily the other party to the power company contract, and there are certainly undesirable uses for the information - for example knowing that the house has a pattern of occupation.&lt;br /&gt;
There needs to be an auditable protocol for dealing with the handling of the broad swathe of surveillance data from smart power meters to smart parking and cctv but I don&#39;t think it starts with &quot;It&#39;s my data&quot;!&lt;br /&gt;
I am looking forward to the views of the NZ Privacy Commisioner on this. I would hope that some clear direction is given so that surveillance data which can be associated with individuals is treated in the same way as Personal Information and therefore covered by the &lt;a href=&quot;http://privacy.org.nz/information-privacy-principles&quot; target=&quot;_blank&quot;&gt;privacy principles&lt;/a&gt;. Attaching some teeth to the principles would be good too, but one step at a time.</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/6163042347880392052/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/6163042347880392052' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/6163042347880392052'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/6163042347880392052'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2012/05/smart-meter-privacy.html' title='Smart Meter Privacy'/><author><name>David French</name><uri>http://www.blogger.com/profile/09850658569729205096</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-7069467997787948552</id><published>2012-03-26T19:53:00.001+13:00</published><updated>2012-03-26T21:25:08.215+13:00</updated><title type='text'>ICT Benchmarking NZ</title><content type='html'>&lt;b id=&quot;internal-source-marker_0.33484374918043613&quot;&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The &lt;/span&gt;&lt;a href=&quot;http://www.treasury.govt.nz/statesector/performance/bass/benchmarking&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Administrative &amp;amp; Support Services Benchmarking Report for the Financial Year 2010/11&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; is probably not going to make it into the best seller list and if you have to download it from the treasury web site you may experience for yourself what the prime minister &amp;nbsp;was describing when he was quoted &lt;/span&gt;&lt;a href=&quot;http://computerworld.co.nz/news.nsf/news/prime-minister-shocked-by-govt-it&quot;&gt;&lt;span style=&quot;background-color: white; color: #1155cc; font-family: Verdana; font-size: 13px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;as “shocked” by the state &lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;background-color: white; color: #282828; font-family: Verdana; font-size: 13px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;of many government IT systems, which he says will need to be upgraded to improve public sector efficiency. &lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;However, it is hard to see whether we should be appalled , content, or apathetic about the current spend of &lt;/span&gt;&lt;span style=&quot;background-color: white; color: #282828; font-family: Verdana; font-size: 13px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;$980 million on ICT which represents nearly 57% of total government administration and support services costs. &lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;We might expect a benchmark report to indicate some standard to be achieved but I searched in vain. $980m seems low when compared with the total expenditure of the NZ Government. The NZ Govt Treasury Web Site was down as I wrote this so I am relying on the 2011 budget forecast figure of $78,944.4 million. &lt;i&gt;&lt;a href=&quot;http://www.treasury.govt.nz/government/financialstatements/yearend/jun11/16.htm&quot; target=&quot;_blank&quot;&gt;Actual spend was 70,450 million&lt;/a&gt;.&lt;/i&gt; So the ICT spend is about 1.3% of total spend. You can compare that with the profligate Brits who reported that the “average for the percentage of total revenue expenditure spent on ICT in central government departments is at least 5%”. They were not very happy about that but did note in a &lt;/span&gt;&lt;a href=&quot;http://www.publications.parliament.uk/pa/cm201012/cmselect/cmpubadm/715/71506.htm&quot;&gt;&lt;span style=&quot;color: #1155cc; font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;report of Public Administration Select Committee &lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;that “&lt;/span&gt;&lt;span style=&quot;background-color: white; color: #333333; font-family: Verdana; font-size: 13px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;It is widely accepted that 3% is a benchmark of good practice in the private sector service industries for ICT spend as a percentage of total revenue expenditure. Socitm benchmarking in recent years has demonstrated that local government organisations spend consistently less than 3%”. The US federal govt spends about 2% of its 3.8 trillion expenditure on ICT.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;So in benchmark terms are we spending too much or too little?&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The emphasis on ICT being 57% of total government administration and support raises the same question. With pressure to cut public service numbers (the other main component of administration and support) we should be looking at increasing the proportion of the A&amp;amp;S cost that is taken up by ICT. But really is it a sensible benchmark factor?&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;b&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;b&gt;&lt;span style=&quot;font-family: Arial; font-size: 15px; font-weight: normal; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Added actual NZ govt expenditure 9:24pm&lt;/span&gt;&lt;/b&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/7069467997787948552/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/7069467997787948552' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/7069467997787948552'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/7069467997787948552'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2012/03/ict-benchmarking-nz.html' title='ICT Benchmarking NZ'/><author><name>David French</name><uri>http://www.blogger.com/profile/09850658569729205096</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-8829747343448214849</id><published>2011-05-12T10:28:00.002+12:00</published><updated>2011-05-14T08:31:16.668+12:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="BPMS"/><title type='text'>Simulation not in the BPMS please</title><content type='html'>The efforts of BPMS vendors to deliver simulation of processes have not been impressive ... even the best is more like a visualisation of the assumptions made in the process design rather than a model&amp;nbsp; that can usefully explore the real world factors that may influence future process design.&lt;br /&gt;
Bruce Silver has been able to consider this from the perspective of the process designer and concludes , among other things, that &quot;&lt;b&gt;&lt;a href=&quot;http://www.brsilver.com/2011/05/11/a-fresh-look-at-simulation/&quot;&gt;Simulation should not be embedded in a BPMS&lt;/a&gt;&quot;.&amp;nbsp;&lt;/b&gt;&lt;br /&gt;
&lt;b&gt;&lt;span style=&quot;font-weight: normal;&quot;&gt;I agree and have argued before that the simulation should be handled by a dedicated simulation tool (after all these have been around longer than BPMS). &lt;a href=&quot;http://davethinkingaloud.blogspot.com/2009/02/simulation.html&quot;&gt;see this post.&lt;/a&gt;&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;b&gt;&lt;span style=&quot;font-weight: normal;&quot;&gt;Fortunately we now have a formalised model of the business process in BPMN 2 that can be transformed into elements useful for a simulation engine. Similarly, the control blocks and flows that characterise a simulation model could be transformed into the starting point of a BPMN. The relationship between the simulation and the process model is 2-way.&lt;/span&gt;&lt;/b&gt;&lt;br /&gt;
&lt;span style=&quot;font-weight: normal;&quot;&gt;Choose your BPMS toolset on its ability to delivery process design and implementation. Choose your simulation tool for its ability to support the analysis of the real world process under investigation.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;font-weight: normal;&quot;&gt;Although I sympathise with Bruce&#39;s view that &quot;&lt;/span&gt;&lt;b&gt;Simulation should not require programming&quot;,&amp;nbsp;&lt;/b&gt; there will be occasions when the complexity and value of the model will merit more effort and experience. I suggest that the ideal simulation tool should have full logic development capability (programming) in addition to a simple wiring diagram approach.&lt;span style=&quot;font-weight: normal;&quot;&gt; &lt;/span&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/8829747343448214849/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/8829747343448214849' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/8829747343448214849'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/8829747343448214849'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2011/05/simulation-not-in-bpms-please.html' title='Simulation not in the BPMS please'/><author><name>David French</name><uri>http://www.blogger.com/profile/09850658569729205096</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-8615146381557875444</id><published>2011-04-04T16:02:00.000+12:00</published><updated>2011-04-04T16:02:02.195+12:00</updated><title type='text'>User Interface to BPM</title><content type='html'>In &lt;a href=&quot;http://thoughtfulprogrammer.blogspot.com/2011/03/tips-for-business-process-developer.html&quot;&gt;Tips for the Business Process Developer - Human Interfaces to Business Processes&lt;/a&gt;, John Reynolds points out where the real work is in delivering a managed business process.... getting the appropriate attention of real people. Making it harder are the BPM suite providers who, in an attempt to grab the lion&#39;s share of the market claim to be providing a complete solution with hastily nailed on use transactions that take no account of how real people work - only what is needed by the BPM engine to get to its next bit of well-defined (read as simple) execution. What is needed is a well-defined interface - and John identifies the important stuff. For example ...&lt;br /&gt;
&lt;blockquote&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;color: #333333; font-family: Arial, sans-serif; font-size: 17px;&quot;&gt;&quot;To Do List&quot; interfaces have three goals:&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;color: #333333; font-family: Arial, sans-serif; font-size: 17px;&quot;&gt;&lt;br /&gt;
&lt;/span&gt;&lt;ul style=&quot;color: #333333; font-family: Arial, sans-serif; font-size: 17px; text-align: left;&quot;&gt;&lt;li&gt;Make sure the participant knows what tasks they are responsible for&lt;/li&gt;
&lt;/ul&gt;&lt;ul style=&quot;color: #333333; font-family: Arial, sans-serif; font-size: 17px; text-align: left;&quot;&gt;&lt;li&gt;Make sure the participant knows when each task is due&lt;/li&gt;
&lt;/ul&gt;&lt;ul style=&quot;color: #333333; font-family: Arial, sans-serif; font-size: 17px; text-align: left;&quot;&gt;&lt;li&gt;Help the participant prioritize which task to work on next&lt;/li&gt;
&lt;/ul&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;color: #333333; font-family: Arial, sans-serif; font-size: 17px;&quot;&gt;That last bullet is (of course) the hard one to implement. ...&lt;/span&gt;&lt;/blockquote&gt;One trouble is that the implementation keeps getting left to the BPM guys. Equally bad is the suggestion that everything the important people in the business have to do is some mysterious &quot;knowledge work&quot; and knowing where you are in the production of business value is trivia. The big snags for everyone in the BPM implementation are&lt;br /&gt;
&lt;br /&gt;
&lt;ul&gt;&lt;li&gt;not everything, that people have to do, is controlled by the documented and managed business processes.&lt;/li&gt;
&lt;li&gt;real people have different ways of visualising their &#39;to-dos&#39; and delivering a one-size fits all mechanism is likely to be counter-productive&lt;/li&gt;
&lt;/ul&gt;&lt;div&gt;If we are to reduce the implementation cost of BPM we need a formal interface defined at the UI boundary and look at how the vast number of personal productivity tools can be used to but a familiar face to the interface. There are probably as many people who would react favorably to IM and Twitter-like presentation as those happy to log on a refresh a screen of activities awaiting action.&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/8615146381557875444/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/8615146381557875444' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/8615146381557875444'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/8615146381557875444'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2011/04/user-interface-to-bpm.html' title='User Interface to BPM'/><author><name>David French</name><uri>http://www.blogger.com/profile/09850658569729205096</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-7023484431672164937.post-2510815076406662900</id><published>2011-03-08T13:01:00.000+13:00</published><updated>2011-03-08T13:01:52.586+13:00</updated><title type='text'>More on standards for presentation layer</title><content type='html'>&lt;div style=&quot;background-color: transparent;&quot;&gt;&lt;span id=&quot;internal-source-marker_0.9158740313723683&quot; style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Encouraged by the steps that have been made with SVG, I turned for another look at XFORMS, a specification that I thought had some promise a few years back. Sadly, native browser support has not miraculously appeared and requiring browser plugins or extensions is not going to sit well with corporate IT.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;With the increasing power available in the browser engine, javascript solutions are now practical. &lt;/span&gt;&lt;a href=&quot;http://www.agencexml.com/xsltforms&quot;&gt;&lt;span style=&quot;background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;XSLTForms&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; is a great piece of work and provides cross-browser support through the standard XSL transform approach.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;So, for fans of declarative language solutions, &amp;nbsp;the next challenge is to mix &lt;/span&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: bold; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;SVG with XFORMS&lt;/span&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;. The &lt;/span&gt;&lt;a href=&quot;http://en.wikibooks.org/wiki/XForms/SVG&quot;&gt;&lt;span style=&quot;background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;wiki here&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; shows a starting point but your milage may differ when you try this. &lt;/span&gt;&lt;a href=&quot;http://soundings01.appspot.com/xsltforms/wikisvg.xml&quot;&gt;&lt;span style=&quot;background-color: transparent; color: #000099; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;My effort is here&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; and shows some limitation in the size of image in chrome and firefox 4.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;The simplistic view is that we should be able to bind the attributes/properties that describe the graphic elements in SVG to instance data in the XFORMS representation.&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;Starting with a simple svg element:&lt;/span&gt;&lt;br /&gt;
&lt;div style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: transparent; color: lime; font-family: Verdana; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;circle cx=&quot;100&quot; cy=&quot;100&quot; fill=&quot;grey&quot; r=&quot;50&quot;&gt;&amp;nbsp;&lt;/circle&gt;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;color: lime;&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: Arial; font-size: 15px; white-space: pre-wrap;&quot;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;circle &lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;&lt;span class=&quot;webkit-html-attribute-name&quot;&gt;r&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;=&quot;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;&lt;span class=&quot;webkit-html-attribute-value&quot;&gt;50&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;&quot; &lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;&lt;span class=&quot;webkit-html-attribute-name&quot;&gt;cx&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;=&quot;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;&lt;span class=&quot;webkit-html-attribute-value&quot;&gt;100&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;&quot; &lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;&lt;span class=&quot;webkit-html-attribute-name&quot;&gt;cy&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;=&quot;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;&lt;span class=&quot;webkit-html-attribute-value&quot;&gt;100&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;&quot; &lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;&lt;span class=&quot;webkit-html-attribute-name&quot;&gt;fill&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;=&quot;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;&lt;span class=&quot;webkit-html-attribute-value&quot;&gt;grey&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; white-space: pre-wrap;&quot;&gt;&quot;/&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: Arial; font-size: 15px; white-space: pre-wrap;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;background-color: transparent; color: lime; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;We could manipulate the colour by including the SVG as instance data :&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;background-color: transparent; color: lime; font-family: Arial; font-size: 15px; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&amp;lt;xf:model&amp;gt;      &amp;lt;xf:instance id=&quot;inlinesvg&quot; src=&quot;svg/simple.svg&quot; /&amp;gt; &amp;lt;/xf:model&amp;gt;&lt;/span&gt;&lt;br /&gt;
&lt;br /&gt;
&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: Arial; font-size: 15px; white-space: pre-wrap;&quot;&gt;and then referencing the fill parameter in an XFORMS element:&lt;/span&gt;&lt;br /&gt;
&lt;span class=&quot;Apple-style-span&quot; style=&quot;color: lime;&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: Arial; font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: monospace; font-size: small;&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: Arial; font-size: 15px;&quot;&gt;&amp;lt;&lt;/span&gt;xf:input &lt;span class=&quot;webkit-html-attribute-name&quot;&gt;id&lt;/span&gt;=&quot;&lt;span class=&quot;webkit-html-attribute-value&quot;&gt;myInput&lt;/span&gt;&quot; &lt;span class=&quot;webkit-html-attribute-name&quot;&gt;ref&lt;/span&gt;=&quot;&lt;span class=&quot;webkit-html-attribute-value&quot;&gt;//svg:circle@fill&lt;/span&gt;&quot;/&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: Arial; font-size: 15px; white-space: pre-wrap;&quot;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;background-color: transparent; color: lime; font-family: Arial; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;div style=&quot;margin-bottom: 0pt; margin-left: 36pt; margin-top: 0pt;&quot;&gt;&lt;span style=&quot;background-color: transparent; color: lime; font-family: Verdana; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;xf:input id=&quot;myInput&quot; ref=&quot;//svg:circle@fill&quot;&gt;&lt;/xf:input&gt;&lt;/span&gt;&lt;/div&gt;&lt;span style=&quot;background-color: transparent; color: lime; font-family: Verdana; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;&lt;/span&gt;&lt;br /&gt;
&lt;span style=&quot;background-color: transparent; color: black; font-family: Verdana; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;I am glad to see that this actually works for me in Chrome and IE8! Cross-browser SVG is relatively new in XSLTForms so there are some wrinkles to be ironed out. I suspect that there are improvements that could be made to my simple &lt;/span&gt;&lt;a href=&quot;http://soundings01.appspot.com/xsltforms/xfsvg6.xml&quot;&gt;&lt;span style=&quot;background-color: transparent; color: #000099; font-family: Verdana; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: underline; vertical-align: baseline; white-space: pre-wrap;&quot;&gt;example here&lt;/span&gt;&lt;/a&gt;&lt;span style=&quot;background-color: transparent; color: black; font-family: Verdana; font-size: 11pt; font-style: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;&quot;&gt; as the last serious coding I did was in Fortran 4.&lt;/span&gt;&lt;br /&gt;
&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-family: Verdana;&quot;&gt;&lt;span class=&quot;Apple-style-span&quot; style=&quot;font-size: 15px; white-space: pre-wrap;&quot;&gt;&lt;br /&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/div&gt;</content><link rel='replies' type='application/atom+xml' href='http://davethinkingaloud.blogspot.com/feeds/2510815076406662900/comments/default' title='Post Comments'/><link rel='replies' type='text/html' href='http://www.blogger.com/comment/fullpage/post/7023484431672164937/2510815076406662900' title='0 Comments'/><link rel='edit' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/2510815076406662900'/><link rel='self' type='application/atom+xml' href='http://www.blogger.com/feeds/7023484431672164937/posts/default/2510815076406662900'/><link rel='alternate' type='text/html' href='http://davethinkingaloud.blogspot.com/2011/03/more-on-standards-for-presentation.html' title='More on standards for presentation layer'/><author><name>David French</name><uri>http://www.blogger.com/profile/09850658569729205096</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='16' height='16' src='https://img1.blogblog.com/img/b16-rounded.gif'/></author><thr:total>0</thr:total></entry></feed>