googleスクリプトからhtmlページに値を渡す方法

私はGoogleのシートを持っています。私は、情報を入力するためのHTMLウィンドウを開くプロジェクトの追加ボタンをクリックする機能を追加することができました。そして、提出すると、シートに新しいレコードを追加します。googleスクリプトからhtmlページに値を渡す方法

ステータスが[キャンセル]に変更された場合、レコードを削除するプロセスに取り組んでいます。私がしたいのは、プロジェクトの特定の詳細をリストしたhtmlウィンドウを表示し、プロジェクトをキャンセルせずに戻るか、それがキャンセルされた理由についてのメモを入力して続行するチャンスをユーザーに与えることです。

ここで私は立ち往生していますが、プロジェクトの詳細をhtmlウィンドウに入力しています。私はそれを行う一つの方法を考え出したが、これは最良の方法ではないことを知っている。

Googleのスクリプト：

function onEdit(e) { 
    if(e.range.getColumn() == 9 && e.value == "Cancelled" && e.source.getActiveSheet().getName() == "Summary") { 
    var cancelSheet = ss.getSheetByName(e.source.getActiveSheet().getName()); 
    var cancelRange = cancelSheet.getRange(e.range.getRow(), 1, 1, cancelSheet.getLastColumn()); 
    var cancelRow = cancelRange.getValues(); 

    openCancelDialog(cancelRow); 
    } 
} 

function openCancelDialog(x) { 
    var html = HtmlService 
    //.createHtmlOutputFromFile('Cancel') 
    .createHtmlOutput(
    '<table><tr><td colspan = \"2\"><b>You are cancelling the following project:</b></td></tr>' + 
    '<tr><td>Project Name: </td><td>' + x[0][4] + '</td></tr>' + 
    '<tr><td>Project Number: </td><td>' + x[0][0] + '</td></tr>' + 
    '<tr><td>Project Category: </td><td>' + x[0][1] + '</td></tr>' + 
    '<tr><td>Business Owner: </td><td>' + x[0][17] + '</td></tr>' + 
    '<tr><td>Project Manager: </td><td>' + x[0][18] + '</td></tr>' + 
    '</table>' 
) 
    .setSandboxMode(HtmlService.SandboxMode.IFRAME); 
    SpreadsheetApp.getUi() 
     .showModalDialog(html, 'Cancel a Project'); 
}

この方法では、GSに直接HTMLを書いています。私がしたいのは、別々のHTMLページを作成することです。つまり、この方法で行う（と私は他の場所でのGSでのプロジェクトのダイアログを追加作成していますどのように）することができます。

function openCancelDialog(x) { 
    var html = HtmlService.createHtmlOutputFromFile('Cancel').setSandboxMode(HtmlService.SandboxMode.IFRAME); 
    SpreadsheetApp.getUi() 
     .showModalDialog(html, 'Cancel a Project'); 
}

これはCancel.html

<!DOCTYPE html> 
<html> 
    <head> 
    <base target="_top"> 
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
    </script> 

    <script> 
     <!-- Scripting to get my values? --> 
    </script> 

    </head> 
    <body> 
    <!-- Layout the window 
     Add a Comments section 
     Add a button to go back without cancel 
     Add a button to submit the cancel and update --> 
    </body> 
</html>

しかし、私は避難所」になりますOpenCancelDialog関数からhtmlに配列を渡す方法です。

これらの値を取得するには、Script.htmlファイルにスクリプトを追加する必要があると思われます。しかし、それが作成されている間、その配列をHTMLに送る方法はありますか？

出典

2017-06-30 Andrew

コスの答えは私に、私はそれを仕事ができる方法についていくつかのアイデアを与えました。それだけでなく、いくつかの追加の読書、特にとフォローアップのセクションは、私がこれを理解するのを助けました。

新しいJSコード：

function onEdit(e) { 
    if(e.range.getColumn() == 9 && e.value == "Cancelled" && e.source.getActiveSheet().getName() == "Summary") { 
    var cancelSheet = ss.getSheetByName(e.source.getActiveSheet().getName()); 
    var cancelRange = cancelSheet.getRange(e.range.getRow(), 1, 1, cancelSheet.getLastColumn()); 
    var cancelRow = cancelRange.getValues(); 

    //openCancelDialog(cancelRow); 

    var aSheet = e.source.getActiveSheet().getName(); 
    var column = e.range.getColumn(); 
    var row = e.range.getRow(); 
    Logger.log("Col: " + column + " Row: " + row + " Sheet: " + aSheet); 
    Logger.log(cancelRow); 
    } 
    Logger.log(e); 
} 

function openCancelDialog(row) { 
    var ui = SpreadsheetApp.getUi(); 

    // get template 
    var template = HtmlService.createTemplateFromFile('Cancel'); 

    var myJSON = JSON.stringify(row); 

    // pass data to template 
    template.data = myJSON; 

    // get output html 
    var html = template.evaluate(); 

    // show modal window 
    ui.showModalDialog(html, 'Cancel a Project'); 
}

新しいHTML：

<!DOCTYPE html> 
<html> 
    <body> 
    <table> 
     <tr><td>Number: </td><td id="number"></td></tr> 
     <tr><td>Name: </td><td id="name"></td></tr> 
     <tr><td>Category: </td><td id="category"></td></tr> 
     <tr><td>Business Owner: </td><td id="owner"></td></tr> 
     <tr><td>Project : </td><td id="manager"></td></tr> 
    </table> 

    <script> 
     var objII = JSON.parse(<?=data?>); 

     document.getElementById("number").innerHTML = objII[0][0]; 
     document.getElementById("name").innerHTML = objII[0][4]; 
     document.getElementById("category").innerHTML = objII[0][1]; 
     document.getElementById("owner").innerHTML = objII[0][17]; 
     document.getElementById("manager").innerHTML = objII[0][18]; 
    </script> 

    </body> 
</html>

私はこれを行うにはよりエレガントな方法、そしておそらくさらに "正しい" やり方があるかもしれないと思います。しかし、これは私がそれが必要なもののために働いているように見えるので、私は他の誰かが探していた場合に私はそれを投稿すると思った。

ありがとうございます

出典

2017-07-03 12:30:24 Andrew

使用HtmlService.createTemplateFromFile：

function openCancelDialog(row) 
{ 
    var ui = SpreadsheetApp.getUi(); 

    // get template 
    var template = HtmlService.createTemplateFromFile('Cancel'); 

    // pass data to template 
    template.data = { 
    row: JSON.stringify(row) 
    }; 

    // get output html 
    var html = template.evaluate(); 

    // show modal window 
    ui.showModalDialog(html, 'Cancel a Project'); 
}

Cancel.html：

<!DOCTYPE html> 
<html> 
    <head> 
    <base target="_top"> 
    </head> 
    <body> 
    <script> 
    var row = <?!=data.row?>; 
    //document.write(row); 
    </script> 
    </body> 
</html>

詳細テンプレートのドキュメント：https://developers.google.com/apps-script/guides/html/templates

出典

2017-06-30 18:15:44 Kos

ここでそれを行うための別の方法です。私はテンプレートを使用するよりもはるかに多くのコントロールを持っているので、私はこのようにしたい。

これは、スプレッドシートに含まれているメールのサンプルスクリプトで作業していたときのスクリプトです。このスクリプトは、emailsetupページから送信された電子メールを削除し、別のページにアーカイブするオプションをユーザに与えるためのものであるため、少し複雑です。これは、その場でhtmlを作成し、それを文字列として収集し、それをhtmlの別のページに追加することによって行います。スクリプトの最後に、ユーザーがチェックボックスをオンにしてArchive Selectedというボタンをクリックしてアーカイブする電子メールを選択できるダイアログとしてhtmlを起動します。私は、標準のhtmlファイルにjavascript関数を組み込み、最初にHtmlServiceを通してそれを実行し、後でその文字列を追加する方が簡単だとわかりました。

がここにスクリプトです：

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script> 
function getCheckedBoxes(chkboxName) { 
    var checkboxes = document.getElementsByName(chkboxName); 
    var rowsToArchive = []; 
    for (var i=0; i<checkboxes.length; i++) 
    { 
    if (checkboxes[i].checked) 
    { 
     rowsToArchive.push(Number(checkboxes[i].value)); 
    } 
    } 
    google.script.run 
    .withSuccessHandler(setResponse) 
    .archiveSelectedRows(rowsToArchive); 
} 

function setResponse(a) 
{ 
    var s='<br />Rows: '; 
    for(var i=0;i<a.length;i++) 
    { 
    if(i>0) 
    { 
     s+=', '; 
    } 
    s+=a[i]; 
    var id='#row' + a[i] 
    $(id).css('display','none'); 
    } 
    s+='<br />Total: ' + a.length; 
    google.script.run.displayMessage(s,'Archived Rows') 
} 
console.log('script here'); 
</script> 
    </head> 
    <body>

私はあなたのプロジェクトのアイデアを取り、それを少し走った：

function archiveSelectedEmails() 
{ 
    var ss=SpreadsheetApp.getActiveSpreadsheet(); 
    var sht=ss.getSheetByName('EmailSetup'); 
    var rng=sht.getDataRange(); 
    var rngA=rng.getValues(); 
    var s='<html><head><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></head><body>'; 
    var s=''; 
    for(var i=2;i<rngA.length;i++) 
    { 
    var dataA={}; 
    for(var j=0;j<rngA[1].length;j++) 
    { 
     dataA[rngA[1][j]]=rngA[i][j]; 
    } 
    var row=Number(i+1); 
    s+='<div id="row' + row + '"><input type="checkbox" name="email" value="' + Number(i+1) + '" />' + ' <strong>Row:</strong> ' + Number(i+1) + ' <strong>Name:</strong> ' + dataA.Name + ' <strong>Email:</strong> ' + dataA.Email + ' <strong>Subject:</strong> ' + dataA.Subject + ' <strong>DateSent:</strong> ' + Utilities.formatDate(new Date(dataA.DateSent), 'GMT-6', "M/dd/yyyy HH:mm:ss") + '</div>'; 
    } 
    s+='<br /><input type="button" value="Exit" onClick="google.script.host.close();" /><input type="button" value="Archive Checked" onClick="getCheckedBoxes(\'email\');" />'; 

    var html=HtmlService.createHtmlOutputFromFile('htmlToBody').setWidth(800).setHeight(250); 
    html.append(s); 
    SpreadsheetApp.getUi().showModelessDialog(html, 'Select Emails to Archive'); 
}

ここでのhtmlファイル 'htmlToBodyは' です。

これらはGoogleスクリプトです。私はあなたの関数の名前で始まったことに気付くでしょう。

function openCancelDialog1() 
{ 
    var ss=SpreadsheetApp.getActiveSpreadsheet(); 
    var sht=ss.getSheetByName('Projects'); 
    var rng=sht.getDataRange(); 
    var rngA=rng.getValues(); 
    var s=''; 
    for(var i=1;i<rngA.length;i++) 
    { 
    var dataA={}; 
    for(var j=0;j<rngA[0].length;j++) 
    { 
     dataA[rngA[0][j]]=rngA[i][j]; 
    } 
    var row=Number(i+1); 
    s+='<div id="row' + row + '"><input type="checkbox" name="project" value="' + row + '" />' + ' <strong>Row:</strong> ' + Number(i+1) + ' <strong>Name:</strong> ' + dataA.Name + ' <strong>Project:</strong> ' + dataA.Description + '</div>'; 
    } 
    s+='<br /><input type="button" value="Exit" onClick="google.script.host.close();" /><input type="button" value="Cancel and Archive Checked" onClick="getCheckedBoxes(\'project\');" />'; 
    var html=HtmlService.createHtmlOutputFromFile('htmlToBody').setWidth(800).setHeight(250); 
    html.append(s); 
    SpreadsheetApp.getUi().showModelessDialog(html, 'Select Project to Cancel'); 
} 

function archiveSelectedRows(rows) 
{ 
    var ss=SpreadsheetApp.getActiveSpreadsheet(); 
    var sht=ss.getSheetByName('Projects'); 
    var dest=ss.getSheetByName('ArchivedProjects'); 
    var rng=sht.getDataRange(); 
    var rngA=rng.getValues(); 
    var deleted=[]; 
    for(var i=rngA.length-1;i>1;i--) 
    { 
    if(rows.indexOf(i+1)>-1) 
    { 
     deleted.push(Number(i+1)); 
     rngA[i][4]=Utilities.formatDate(new Date(), 'GMT-7', 'M/d/yyyy') 
     dest.appendRow(rngA[i]); 
     sht.deleteRow(i+1); 
    } 
    } 
    var msg='Row Numbers Deleted = ' + deleted; 
    var title='Rows Deleted'; 
    var timeout=10; 
    return deleted; 
} 

function displayMessage(msg,title) 
{ 
    msg+='<br /><input type="button" value="Exit" onClick="google.script.host.close()"; />'; 
    var html=HtmlService.createHtmlOutput(msg).setWidth(400).setHeight(300); 
    SpreadsheetApp.getUi().showModelessDialog(html, title); 
}

これはhtmlTobodyファイルです。この状況のために少し変更されました。

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script> 
function getCheckedBoxes(chkboxName) { 
    var checkboxes = document.getElementsByName(chkboxName); 
    var rowsToArchive = []; 
    for (var i=0; i<checkboxes.length; i++) 
    { 
    if (checkboxes[i].checked) 
    { 
     rowsToArchive.push(Number(checkboxes[i].value)); 
    } 
    } 
    google.script.run 
    .withSuccessHandler(setResponse) 
    .archiveSelectedRows(rowsToArchive); 
} 

function setResponse(a) 
{ 
    var s='<br />Row Numberss: '; 
    for(var i=0;i<a.length;i++) 
    { 
    if(i>0) 
    { 
     s+=', '; 
    } 
    s+=a[i]; 
    var id='#row' + a[i] 
    $(id).css('display','none'); 
    } 
    s+='<br />Total: ' + a.length; 
    google.script.run.displayMessage(s,'Canceled Rows') 
} 
console.log('script here'); 
</script> 
    </head> 
    <body>

これは私の「プロジェクト」タブの外観です。そして、私はプロジェクトタブとArchivedProjectsタブを持っています。プロジェクトをアーカイブすると、ArchivedProjectsシートにコピーされます。

出典

2017-06-30 19:55:38 Cooper

googleスクリプトからhtmlページに値を渡す方法

答えて

関連する問題