Publishing Google Apps Script code snippets

In a previous post I showed how Google Apps Script could return the contents of a script as Json so you could format that for including script samples on web sites.

Today, here is how to use the html service to format that code. Here is the live code, published. It takes arguments of ?module=xxx&template=yyy and will use html template yyy, to publish module xxx. To publish modules in other projects, you simply need to share them as a library and copy in the code for “getMyScript” to that project.

Here’s the complete code.

// used by template
var eArgs;
// will return source code either via html service or as json.
function doGet(e) {
    var result = expressSource(e);
    return isItHtml (e) ?
       HtmlService.createHtmlOutput(result) :
       ContentService.createTextOutput (JSON.stringify(result))
       .setMimeType(ContentService.MimeType.JSON) ;
}

function expressSource(e) {
  // if a template is mentioned, we are going to do html
  if (isItHtml (e)) {
    // need to put this in a global var for callback from template
    eArgs = e;
    // use default or given template
    var t = mcpher.fixOptional (e.parameter.template, “source”);
    // evaluate the template
    try {
      var template = HtmlService.createTemplateFromFile(t);
      return template.evaluate().getContent();
    }
    catch (err) {
      return  { error: ‘error ‘ + err + ‘reading template’ + t};
    }
  }
  else {
    // this going to be Json
    return getSource(e);
  }
}


function isItHtml (e) {
  return e.parameter && e.parameter.hasOwnProperty(“template”) ;
}
function getSource(e) {
  return getMySource(e);
}


function testGetSource() {
 e = {parameter: { module: “getMySource” }} ;
 Logger.log(expressSource(e));
}




/* Returns a modules source code
 * @param {parameters} e the argument to doGet(e). should have module parameter specified
 * @param {scriptappinstance} sap an instance of scriptapp
 * @return {object} The result.
 */
function getMySource(e) {
  var results = {error : “missing module parameter”};
  if (e.hasOwnProperty(“parameter”)) {
    if (e.parameter.module) {
      try {
        var results =
        { source :
          { module : e.parameter.module, code : ScriptApp.getResource(e.parameter.module).getDataAsString() }
        };
      }
      catch (err) {
        var results = { error : “could not open module ” + e.parameter.module} ;
      }
    }
  }
  return results;
}

The default source template provided is as follows.

<html>
<head>

  <script src=”http://code.jquery.com/jquery-latest.js” type=”text/javascript”></script>
  <script>
    $(document).ready(function () {
     // any jQueryness can happen here…

    });
  </script>
  
  <style>
    .source { margin: 8px;    border-width:1px; border-color:#FF8C00; border-style : outset ; }
    .code { color:#8B4500; background:#F8F8FF; line-height: 80% }
    .module {background :#8B4500; color :#F8F8FF; }
  </style>

</head>
<body>
  <div>    
  <? var content = getSource(eArgs); ?>
  <div class = “source module”>
     <?= “Module: ” + content.source.module ?><br>
  </div>   
  <div class = “source code”>
    <code>
      <pre>
       <?= content.source.code ?>
      </pre>
    </code>
   </div>
 </div>
</body>
</html>
You also need to include the shared mcpher library. Next, I’ll show how to incorporate this as a code snippet provider in Google and other web sites.

(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();

Author: brucemcp

Leave a Reply

Your email address will not be published. Required fields are marked *