How to pass an html variable to htmlservice

Question

I am trying to dynamically build a list and embed it into an html script. The problem with the below script is that the htmlimg value that I am passing is not reading the html code tags and just making the code visible on the site.

Code.gs

function doGet() {

  var htmlimg = '<img src="http://www.fhuhs.org/files/slide1.png">';
  htmlimg += '<img src="http://www.fhuhs.org/files/slide2.png">';  
  htmlimg += '<img src="http://www.fhuhs.org/files/slide3.png">';  
  htmlimg += '<img src="http://www.fhuhs.org/files/slide4.png">';  

  var output = HtmlService.createTemplateFromFile('slideShow');
  output.htmlimg = htmlimg;

  return output.evaluate();
}

slideShow.html

 <style>  
 #slideshow, #initial {   
   position: relative;  
   width: 800px;   
   height: 240px;     
 }  
 #slideshow > img {   
   position: absolute;  
 }   
 </style>   
 <div id="initial"> <img src="https://16077c1df3a89c327142d4d58315918890da5bae.googledrive.com/host/0B4GLYStYeHYkRGRTdHl5TVVjOHM/slide1.png"></div>  
 <div id="slideshow" style="display:none">  


<?= htmlimg; ?>

 </div>  
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>  
 <script>  
  //http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/  
 $("#slideshow > img:gt(0)").hide();  
 setInterval(function() {   
  $('#slideshow > img:first')  
   .fadeOut(1000)  
   .next()  
   .fadeIn(1000)  
   .end()  
   .appendTo('#slideshow');  
 }, 3000);   
 $('#initial').hide();  
 $('#slideshow').show();  
 </script>

score 0 · Accepted Answer · answered Jun 13 '14 at 01:00

0

You need to call a function that's going to return something

Code.gs

function doGet() {
      var output = HtmlService.createTemplateFromFile('slideShow');
      return output.evaluate();
    }

function getImages() {
  var htmlimg = '<img src="http://www.fhuhs.org/files/slide1.png">';
  htmlimg += '<img src="http://www.fhuhs.org/files/slide2.png">';  
  htmlimg += '<img src="http://www.fhuhs.org/files/slide3.png">';  
  htmlimg += '<img src="http://www.fhuhs.org/files/slide4.png">';
  return htmlimg;
}

slideshow.html

<div>
  <? var images = getImages(); ?>
  <?= images ?>
</div>

answered Jun 13 '14 at 01:00

AshClarke

2,990
5
21
27

1

you need to do != images ?> (notice exclamation mark) in order to prevent contextual escaping – StackExploded Jun 25 '16 at 13:32
while this does pass the data, it does not actually pass the variable to the client, instead it passes the html-formatted data. I made an answer regarding this here: http://stackoverflow.com/a/38314034/2213940 – Zig Mandel Jul 11 '16 at 18:54
@StackExploded some of my variables had html tags embedded in them and was displaying as plain text instead of html on the output side, the exclamation tip saved my life. thank you! – A5H1Q Jun 30 '21 at 16:39

How to pass an html variable to htmlservice

1 Answers1

Linked