Votre script peut avoir plus d'un fichier html, et par le HTML Services: Best Practices, vous devriez avoir votre code HTML, CSS et (côté client) Javascript dans des fichiers séparés. Donc, dans votre cas, votre fichier index.html sera tout le code HTML et aura quelques lignes ajoutées. Il pourrait commencer comme indiqué ci-dessous:
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script>
<?!= include('myCSS'); ?>
<title>Give it a Title</title>
</head>
<body>
...
All the Body stuff
...
</body>
<?!= include('myScript'); ?>
</html>
Au sommet de c'est une ligne d'inclure le presse-papiers JS à partir d'un emplacement hébergé. J'ai trouvé cela via une recherche sur le web pour clipboard.js. C'est là j'avoir accès à la bibliothèque clipboard.js Il y a une ligne droite sous ceci:
<?!= include('myCSS'); ?>
Dans un fichier côté serveur (fichier .gs) Je donne les résultats suivants pour que je puisse inclure d'autres fichiers HTML à partir celui que je charge dans ma fonction doGet():
function include(filename) {
return HtmlService.createTemplateFromFile(filename).evaluate()
.getContent();
}
Je chargeais le code HTML dans mon doGet en utilisant ce code à utiliser Templated HTML:
function doGet(passed) {
if(passed.parameter.festival && passed.parameter.year){
passedParameter = passed.parameter.festival + ' ' + passed.parameter.year;
}
var result=HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('My Title')
.setWidth(1285)
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
return result;
}
dans le menu déroulant de fichier que vous créez un nouveau HTML fichier appelé myCSS et ajoutez votre CSS là:
<style>
h1 {
color: #0F6B5E;
font-size: 300%;
text-align:center;
vertical-align: middle;
font-family: 'Raleway', sans-serif;
font-weight:bold;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
</style>
Créer un nouveau fichier HTML appelé myScript et ajoutez les screipt que vous voulez utilisé dans votre page HTML ici. C'est le script côté client par opposition au script SErver Side, qui se trouve dans les fichiers de script. (Les fichiers HTML afficheront l'extension .html dans la liste des fichiers alors que les fichiers script côté serveur auront .gs) Si votre fonction calculateWeight() est utilisée pour calculer et afficher les éléments dans la page HTML, placez-la dans ce fichier:
<script>
//Script to load after the page has loaded
$(function() {
google.script.run.withSuccessHandler(showMenuYear).withFailureHandler(loadFailed).getDropDownContent();
});
calculateWeight() {
//code goes here
}
function showMenuYear(menuItems) {
var list = $('#optionListYear');
var desiredValue = '<?!= passedParameter ?>';
list.find('option').remove(); // remove existing contents
list.append('<option value="-1">Select a Festival and Year</option>');
for (var i = 0; i < menuItems.length ; i++) {
list.append('<option value=' + menuItems[i].sheetrow + '>' + menuItems[i].fullFestival + '</option>');
if (menuItems[i].fullFestival === desiredValue){
list.val(menuItems[i].sheetrow);
}
}
setFormList();
}
function setFormList() {
// alert('In setFormList ');
// alert($('#optionListYear').val());
var replacement = document.getElementById("OverallGrid");
replacement.innerHTML = "Retrieving Registrations...";
if ($('#optionListYear').val() === "-1") {
// if(passedData.year && passedData.festival){replacement.innerHTML = passedData.festival & " " & passedData.year;};
replacement.innerHTML = "Select a Festival/Year above.";
return;
}
google.script.run.withSuccessHandler(showRegistrationsTable).withFailureHandler(loadFailed).getValidRegistrations($('#optionListYear').val());
}
function loadFailed(error){
var replacement = document.getElementById("OverallGrid");
var displayMessage = "Error loading data: " + error.name + ' ' + error.message;
if (error.message.includes("is missing (perhaps it was deleted?)")) {
displayMessage = "You do not have access to these registrations."
}
replacement.innerHTML = displayMessage;
}
</script>
Dans ce code, les lignes commençant par google.script.run exécuteront une fonction côté serveur, en transmettant une variable à la fonction si nécessaire.En cas de succès, la fonction côté client définie dans withSuccessHandler(successFunction) sera utilisé avec toutes les données renvoyées sont passées. Donc, dans mon exemple, la fonction showMenuYear(menuItems) est exécuté sur le côté client avec menuItems étant réglé sur la valeur retournée par la fonction côté serveur getDropDownContent(). Si le côté serveur renvoie une erreur, la fonction loadFailed(error) est exécutée. Tout cela vient de la ligne:
google.script.run.withSuccessHandler(showMenuYear).withFailureHandler(loadFailed).getDropDownContent();
Vous êtes un enseignant incroyable et résolveur de problèmes! Je ne peux pas exprimer combien je suis reconnaissant d'avoir vos solutions détaillées et claires! Thxxxxx! : D –
Je ne peux pas exprimer à quel point cette réponse est précieuse. Je vous remercie! – deshu