How can I create dynamic components with Google App Scripts for Google Sites?

I am trying to create dynamic app script components that can be added into my site with dynamic data for each instance of the script. I tried doing parameters, but I am not sure if that’s the best way to approach this. For example, I want to create an image script that be loaded with dynamic links, and inserted into google sites. I only want one image script can be loaded multiple times into the page with dynamic urls. How should I handle this? Can this be done? Thanks.

Answer

This version creates scrolling images display or a slide show. And it creates the image tags in an otherwise empty div. You can add as many images to column A of your spreadsheet and the script will do the rest.

image.html:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div id="myimages"></div>
  <div id="slideshow" style="display:none;">
    <img id="slide" src="" width="450"/>
  </div>
  <input type="button" value="Start Slide Show" onClick="startShow();" />
  <input type="button" value="Stop Show" onClick="stopShow();" />
  <div id="resp" style="display:none;">
    <h1>Response</h1>
    <p>Your data has been received.</p>
  </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      var nextslide=0;
      var myslides='';
      var mytimer;
      $(function() {
        google.script.run
          .withSuccessHandler(setURL)
          .getURL();
      });
      function setURL(urlA)
      {
        for(var i=0;i<urlA.length;i++)
        {
          var s='img' + Number(i+1);
          var s1= '#img' + Number(i+1);
          $('#myimages').append('<img id="' + s + '" src="' + urlA[i] + '" />');
          $(s1).attr('height','450');
        }
        myslides=urlA;
      }
      
      function startShow()
      {
        $('#myimages').css('display','none');
        $('#slideshow').css('display','block');
        showSlide();
      }
       
      function showSlide()
      {
        document.getElementById('slide').src=myslides[nextslide];
        if(++nextslide > myslides.length-1)
        {
            nextslide=0;
        }
        mytimer=window.setTimeout(showSlide,5000);
      }
     
       function stopShow()
       {
         window.clearTimeout(mytimer);
         $('#myimages').css('display','block');
        $('#slideshow').css('display','none');
         
       }
       
      function loadTxt(from,to)
      {
          document.getElementById(to).value = document.getElementById(from).value;
      }
      
     console.log('My Code');
   </script>
  </body>
</html>

JavaScript
​x
 
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
  <div id="myimages"></div>
  <div id="slideshow" style="display:none;">
    <img id="slide" src="" width="450"/>
  </div>
  <input type="button" value="Start Slide Show" onClick="startShow();" />
  <input type="button" value="Stop Show" onClick="stopShow();" />
  <div id="resp" style="display:none;">
    <h1>Response</h1>
    <p>Your data has been received.</p>
  </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
      var nextslide=0;
      var myslides='';
      var mytimer;
      $(function() {
        google.script.run
          .withSuccessHandler(setURL)
          .getURL();
      });
      function setURL(urlA)
      {
        for(var i=0;i<urlA.length;i++)
        {
          var s='img' + Number(i+1);
          var s1= '#img' + Number(i+1);
          $('#myimages').append('<img id="' + s + '" src="' + urlA[i] + '" />');
          $(s1).attr('height','450');
        }
        myslides=urlA;
      }
      
      function startShow()
      {
        $('#myimages').css('display','none');
        $('#slideshow').css('display','block');
        showSlide();
      }
       
      function showSlide()
      {
        document.getElementById('slide').src=myslides[nextslide];
        if(++nextslide > myslides.length-1)
        {
            nextslide=0;
        }
        mytimer=window.setTimeout(showSlide,5000);
      }
     
       function stopShow()
       {
         window.clearTimeout(mytimer);
         $('#myimages').css('display','block');
        $('#slideshow').css('display','none');
         
       }
       
      function loadTxt(from,to)
      {
          document.getElementById(to).value = document.getElementById(from).value;
      }
      
     console.log('My Code');
   </script>
  </body>
</html>
​

Code.gs

function doGet()
{
  var html = HtmlService.createHtmlOutputFromFile('image');
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
  
}

function getData(a)
{
  var ts = Utilities.formatDate(new Date(), "GMT-6", "yyyy-MM-dd' 'HH:mm:ss");
  a.push(ts);
  var ss=SpreadsheetApp.openById('SS_ID')
  ss.getSheetByName('Form Data').appendRow(a);
  return true;
}

function getURL()
{
  var ss=SpreadsheetApp.openById('SS_ID');
  var sht=ss.getSheetByName('imgURLs');
  var rng=sht.getDataRange();
  var rngA=rng.getValues();
  var urlA=[];
  for(var i=1;i<rngA.length;i++)
  {
    urlA.push(rngA[i][0]);
  }
  return urlA;
}

JavaScript
 
function doGet()
{
  var html = HtmlService.createHtmlOutputFromFile('image');
  return html.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
  
}
​
function getData(a)
{
  var ts = Utilities.formatDate(new Date(), "GMT-6", "yyyy-MM-dd' 'HH:mm:ss");
  a.push(ts);
  var ss=SpreadsheetApp.openById('SS_ID')
  ss.getSheetByName('Form Data').appendRow(a);
  return true;
}
​
function getURL()
{
  var ss=SpreadsheetApp.openById('SS_ID');
  var sht=ss.getSheetByName('imgURLs');
  var rng=sht.getDataRange();
  var rngA=rng.getValues();
  var urlA=[];
  for(var i=1;i<rngA.length;i++)
  {
    urlA.push(rngA[i][0]);
  }
  return urlA;
}
​

Advertisement

Answer