GoogleサービスUIをhtmlサービスに変換する方法

Question

私は開発者ではありませんが、コードスニペットを組み立てることができますが、シート内のすべてのタブ名を読み取るこのコードを変換できないようですクリックすると、そのタブに移動します。私のシートには多くのタブがあるので、これは便利です。

モーダルダイアログで、すべてのシート配列をクリック可能なグリッドにするにはどうすればよいですか？

function showGoToSheet() { 
 
    var app = UiApp.createApplication().setTitle("Go to sheet...") 
 
    .setHeight(550).setWidth(310); 
 
    var sPanel = app.createScrollPanel().setAlwaysShowScrollBars(true) 
 
    .setSize(440, 600); 
 
    var vPanel = app.createVerticalPanel().setSize(650, 400); 
 
    var fTable = app.createFlexTable().setCellPadding(1).setSize(600, 310) 
 
    .setCellSpacing(0).setBorderWidth(1); 
 
    var allsheets = ss.getSheets(); 
 
    var goToSheetClick = app.createServerHandler('handleGoToSheetClick');  
 
    for (var i=0, iLen=allsheets.length; i<iLen; i++) { 
 
    var sheet_name = allsheets[i].getName(); 
 
    if (sheet_name != 'ActivityLog' && sheet_name != 'AllData' && sheet_name != 'Scratch' && sheet_name != 'Data Validation'){ 
 
    //Add to Console 
 
    fTable.setWidget(i, 0, app.createButton(sheet_name).setId(sheet_name) 
 
     .setWidth(300).addClickHandler(goToSheetClick)); 
 
    } 
 
    } 
 

 
    app.add(sPanel.add(vPanel.add(fTable))); 
 
    ss.show(app); 
 
} 
 

 
function handleGoToSheetClick(e) { 
 
    var app = UiApp.getActiveApplication(); 
 
    ss.getSheetByName(e.parameter.source).activate(); 
 
    app.close(); 
 
    return app; 
 
}

Answer 1

UiAppは、私はそれを行うだろう方法ですので、ここで推奨されていません。

ダイアログは、ループ内でこれにS + =行を変更し、各シートをクリックした後、離れて行きたい場合：

s += '<input type="button" value="Go to: ' + sheet_name + '" onClick="google.script.run.getMySheet(\'' + sheet_name + '\');google.script.host.close();" /><br />'; 

それは最初google.script.run.getMySheet（）を行いますと、 google.script.host.close（）;

function showGoToSheet() { 

    var allsheets = SpreadsheetApp.getActiveSpreadsheet().getSheets(); 
    var s = '<style>#mySheets{padding:10px;}</style><div id="mySheets">'; 
    for (var i=0; i<allsheets.length; i++) 
    { 
    var sheet_name = allsheets[i].getName(); 
    if (sheet_name != 'ActivityLog' && sheet_name != 'AllData' && sheet_name != 'Scratch' && sheet_name != 'Data Validation') 
    { 
     s += '<input id="btn' + i +'" type="button" value="Go to: ' + sheet_name + '" onClick="google.script.run.getMySheet(\'' + sheet_name + '\');" /><br />'; 
    } 
    } 
    s += '<input type="button" value="Exit" onClick="google.script.host.close();" /></div>'; 
    dispStatus('My Sheets',s,300,400); 
} 

function getMySheet(shtname) 
{ 
    var shtname = typeof(shtname) !== 'undefined' ? shtname : ''; 
    if(!shtname) 
    { 
    SpreadsheetApp.getUi().alert('Invalid Parameter in function getMySheet.'); 
    return; 
    } 
    else 
    { 
    SpreadsheetApp.getActiveSpreadsheet().getSheetByName(shtname).activate(); 
    } 
} 

これはモードレスでもモーダルでもよい。あなたの選択。私はモードレスを好むのでモードレスです。 div＃mySheetsのスタイルを任意のものに変更することができ、各ボタンには一意のID「btn」+ iがあります。

// Display a modeless dialog box with custom HtmlService content. 
function dispStatus(title,html,width,height,modal) 
{ 
    var title = typeof(title) !== 'undefined' ? title : 'No Title Provided'; 
    var width = typeof(width) !== 'undefined' ? width : 400; 
    var height = typeof(height) !== 'undefined' ? height : 300; 
    var html = typeof(html) !== 'undefined' ? html : '<p>No html provided.</p>'; 
    var modal = typeof(modal) !== 'undefined' ? modal : false; 
    var htmlOutput = HtmlService 
    .createHtmlOutput(html) 
    .setWidth(width) 
    .setHeight(height); 
if(!modal) 
{ 
    SpreadsheetApp.getUi().showModelessDialog(htmlOutput, title); 
} 
else 
{ 
    SpreadsheetApp.getUi().showModalDialog(htmlOutput, title); 
} 
}