如何将google app ui转换为html服务 [英] how to convert google app ui into html service

问题描述

我不是开发人员，但是可以汇编代码段，但我似乎无法转换此代码，该代码读取工作表中的所有选项卡名称(除非注明)，然后在对话框中显示它们，单击后导航到该选项卡.这很有用，因为我的工作表有很多标签.

I am not a developer but can assemble code snippets but I can't seem to convert this code which reads all tab names in a sheet, except those noted, presents them in a dialog, when clicked, navigates to that tab. This is useful because my sheet has many tabs.

如何在模式对话框中将所有工作表数组放入可单击的网格中?

How can I get the all sheets array into a clickable grid in a modal dialog?

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

推荐答案

UiApp已被弃用，所以这是我的处理方法.

UiApp has been deprecated so here's how I would do it.

如果您希望在每次单击后都消失对话框，则在循环内将S + =行更改为:

If you want the dialog to go away after each sheet click then inside the loop change the S += line to this:

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();

It will do google.script.run.getMySheet() first and then 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.

This can be modeless or modal. Your choice. I prefer modeless so it's modeless. You can change the style of the div#mySheets to anything you want and each button has a unique 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);
 }
}

这篇关于如何将google app ui转换为html服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！