Ben's Blog: Google Docs Gadget

Sunday, January 19, 2014

Google Docs Gadget - Part 2

I've been getting inquiries about my post on Google Docs Gadget. I think I've made some progress.

First you have to add the Lab "Add any gadget by URL". In your Gmail, click on the gear at the top right and choose "Settings". In the blue list at the top of the page should be "Labs". Click on that and find "Add any gadget by URL". Check "Enable" and then click on "Save Changes" at the top or bottom.

The next question is how to create the XML file.

Copy all the text below by clicking anywhere in the box and pressing CTRL and A.

<?xml version="1.0" encoding="UTF-8"?><br />
<br />
<module><br />
<br />
<ModulePrefs
   title="Google Drive"
   title_url="http://drive.google.com/"
   thumbnail="https://www.google.com/ig/modules/docs-thm.png"
   screenshot="https://www.google.com/ig/modules/docs.png"
   description="Replacement for the broken Google Docs/Drive Gadget for GMail"
   height="180"
   width="600"
   author="Ben Moore"
   ><br />
<require feature="dynamic-height"/><br />
<require feature="setprefs" /><br />
</ModulePrefs><br />
<userpref name="iframeURL" display_name="URL to content" required="true" default_value="https://docs.google.com/API/IGoogle?container=gm&view=default&lang=en&country=US&sanitize=0&authuser=0&libs=dynamic-height%3Asetprefs%3Acore%3Agoogle.waitforload%3Aauth-refresh&parent=https%3A%2F%2Fmail.google.com%2Fhtml&up_numDocuments=8&up_viewPreference=opened_by_me&mid=1" /><br />
<br />
<content type="html" view="default,canvas"><![CDATA[
<div id='dest'>
<br />
 <img src="https://www.google.com/ig/images/spinner.gif"/></div>
<script type="text/javascript">
  gadgets.util.registerOnLoadHandler(doRender);

function doRender(){
    // setup variables
    var prefs = new gadgets.Prefs();
    var iframeURL = prefs.getString('iframeURL');
    var scroll = "no";
    var height = 180;
    var width = 600;

if (gadgets.window) {
      var viewport = gadgets.window.getViewportDimensions();
      if (viewport.width) {
        width = viewport.width;
//    alert("WV: " + viewport.width);
      }
      if (viewport.height) {
//        height = viewport.height;
//    alert("VH: " + viewport.height);
      }
    }

var iframe = document.createElement('iframe');
    iframe.setAttribute('width', width + 'px');
    iframe.setAttribute('height', height + 'px');
    iframe.setAttribute('frameborder','no');
    if(scroll){
      iframe.setAttribute('scrolling', scroll);
    }
    iframe.setAttribute('src', iframeURL);

var dest = document.getElementById('dest');
    dest.innerHTML = ''; // dispose of the spinner
    dest.appendChild(iframe); // and insert the iframe
  }
  </script><br />
]]></Content><br />
</Module>

Then press CTRL and C. Start Windows Notepad. Press CTRL and V. Now press ALT and F4 and click on "Save". Navigate to the desktop and save as "Google Docs Gadget.xml".

The last question is where to put this file so you can reference it as a gadget.

Login to your Gmail. Open a new tab and go to "sites.google.com". There may be a name to the immediate right of the red box "CREATE". If so click on that name.

If not, click on "CREATE", leave "Blank template" selected, enter a name for the site, enter the captcha, and click on "CREATE" at the top.

Now click on the "More" button at the top right and choose "Manage site".

In the left column click on "Attachments".

Click on "Upload" at the top left and upload the file you created above.

When the upload is complete, right click on "Download" to the right of the file name and copy the URL.

Go back to your e-mail and click on the gear at the top right and choose "Settings".

In the blue list at the top of the page should be "Gadgets". Click on that and paste the copied URL into "Add a gadget by its URL". WAIT. Erase the end of the URL back to ".xml". Now click "Add".

That should do it.

Sunday, January 19, 2014

Google Docs Gadget - Part 2

No comments: