Wie kann ich dynamische Komponenten mit Google App Scripts für Google Sites erstellen?

Ich versuche, dynamische App-Skript-Komponenten zu erstellen, die mit dynamischen Daten für jede Instanz des Skripts zu meiner Site hinzugefügt werden können. Ich habe versucht, Parameter zu machen, aber ich bin mir nicht sicher, ob das der beste Weg ist, um das zu erreichen. Ich möchte zum Beispiel ein Bildskript erstellen, das mit dynamischen Links geladen und in Google Sites eingefügt wird. Ich möchte nur ein Bildskript kann mit dynamischen URLs mehrfach in die Seite geladen werden. Wie soll ich damit umgehen? Kann das gemacht werden? Vielen Dank.Wie kann ich dynamische Komponenten mit Google App Scripts für Google Sites erstellen?

Quelle

2017-06-26 LadyT

Werden Sie die neuen Google Sites oder die klassischen Websites verwenden? Siehe den Haftungsausschluss auf dieser Seite: https://developers.google.com/apps-script/reference/sites/page – terrywb

Ich verwende die klassischen Sites. – LadyT

Versuchen Sie, ein [mcve] zu erstellen, und fügen Sie der Frage den Code hinzu. –

Diese Version erstellt Scroll-Bilder oder eine Diashow. Und es erstellt die Bild-Tags in einem ansonsten leeren div. Sie können der Spalte A Ihrer Tabelle so viele Bilder hinzufügen, dass das Skript den Rest erledigt.

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>

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; 
}

Quelle

2017-06-26 23:18:08 Cooper

Hier ist ein einfaches Beispiel:

image.html Datei:

<!DOCTYPE html> 
<html> 
    <head> 
    <base target="_top"> 
    </head> 
    <body> 
    <div id="data"> 
    <br /><img id="img1" src="" alt="img1" width="300" /> 
    <br /><img id="img2" src="" alt="img2" width="300" /> 
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script> 
     $(function() { 
     google.script.run 
      .withSuccessHandler(setURL) 
      .getURL(); 
     }); 
     function setURL(urlA) 
     { 
     for(var i=0;i<urlA.length;i++) 
     { 
      var s='img' + Number(i+1); 
      document.getElementById(s).src=urlA[i]; 
     } 
     } 
    console.log('My Code'); 
    </script> 
    </body> 
</html>

Code.gs Datei:

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

} 

function getURL() 
{ 
    var ss=SpreadsheetApp.openById('1CElNRoVTVa33RS3kJWmRoCXJDgWndEPiZrCxDC5j-WU'); 
    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; 
}

Dies wird die Bild-URL aus Blech mit dem Namen 'imgURLs' die entsprechende Tabellenkalkulations-ID, und ich benutze nur die Spalte A (nur mit A2 und A3 jetzt, aber Sie können 1 oder mehr Bilder verwenden. Sie können als Webapp speichern und auf die klassischen Websites gehen, wählen Sie Google Apps und Typ einfügen e in der Web-App-URL aus dem Veröffentlichungsmenü und das war's.

Quelle

2017-06-26 18:56:35 Cooper

Gehen Sie zu Sites verwalten -> Apps Script, um ein neues Skript in Ihre klassische Website einzubetten.

Erstellen Sie eine neue Funktion der dynamischen HTML, die Sie

function makePage() { 
    var page = SitesApp.getCurrentPage(); 
    //create your html 
    page.setHtmlContent() 
}

hinzufügen doGet-Methode müssen zu bauen, die makePage()
```
function doGet(e) { 
    makePage(); 
} 
```
Veröffentlichen Sie Ihr Skript als Web-App Einstellung nennen Das Skript läuft so wie du. Holen Sie sich die URL zu Ihrem Skript.
Es gibt verschiedene Möglichkeiten, diesen Code auf Ihrer Seite auszuführen. Ein Mechanismus wäre, einen Aufruf von App Script auf Ihrer Sites-Seite einzufügen. Geben Sie die URL zu Ihrer App Script-Webanwendung im Gadget-Assistenten ein.

Quelle

2017-06-26 19:31:59 terrywb

Wie kann ich dynamische Komponenten mit Google App Scripts für Google Sites erstellen?

Antwort

Verwandte Themen