Google 应用程序脚本 UI 服务到 HTML 服务转换问题

Question

我得到了使用 AppScript UI 服务进行 Google 工作表自定义的任务。 但最近我无法编写脚本，因为它已被弃用。 要运行该程序，我需要将所有 UI App 组件转换为 HTML 服务组件。

我在 HTML 服务中搜索了 UI 应用程序的等效命令列表，但没有找到。

而且由于 UI 服务已被弃用，所以我什至无法测试和查看当前程序的输出。

所以，我无法想象它在 HTML 服务中。

但是，在这里我要分享整个功能。 我认为代码和逻辑没问题，我们只需要用等效的 HTML 服务元素替换现有的 UI 应用程序元素。

function ticketUI() {
 var mySS7 = SpreadsheetApp.getActiveSpreadsheet();
 var mySheet = mySS7.getActiveSheet();
 var ticketsheet = mySS7.getSheetByName("Any Label");
 var bikousheet = mySS7.getSheetByName("Any Label");
 var ticketdata = ticketsheet.getDataRange().getValues();
 var bikoudata = bikousheet.getDataRange().getValues();
 var myapp = UiApp.createApplication();
 myapp.setWidth(1000);
 myapp.setHeight(800);
 var myvertical = myapp.createVerticalPanel(); 
 var scroll = myapp.createScrollPanel().setPixelSize(1000, 800); 
 scroll.add(myvertical); 
 myapp.add(scroll); 
  
  for(var i = 1; i < ticketdata.length; i++){
    if(ticketdata[i][0] == "#" && ticketdata[i][4] != ""){
      var mySubvertical = myapp.createVerticalPanel(); 
      myvertical.add(mySubvertical)       
      var p1 = myapp.createLabel("anylevel！)　"); 
   　 p1.setStyleAttribute("font-size", "40pt");　 
      p1.setStyleAttribute("background-color", "#FA8072"); 
      mySubvertical.add(p1);
      var p2 = myapp.createHorizontalPanel(); 
      p2.setStyleAttribute("marginBottom", "30pt"); 
      var p20 = myapp.createLabel("Any Label"); 
      p20.setStyleAttribute("font-size", "25pt"); 
      p20.setStyleAttribute("marginTop", "9pt"); 
      p2.add(p20); 
      var k = 1; 
      for(var j = i + 1; j < ticketdata.length; j++){
        if(ticketdata[j][0] == "#"){
          k++;
          ticketdata[j][0] = "";
        }
          }
      ticketdata[i][0] = "";
      var p21 = myapp.createLabel(k); 
      p21.setStyleAttribute("color", "red"); 
      p21.setStyleAttribute("font-size", "35pt"); 
      p2.add(p21); 
      var p22 = myapp.createLabel("Any Level");
      p22.setStyleAttribute("font-size", "25pt");
      p22.setStyleAttribute("marginTop", "9pt"); 
      p2.add(p22); 
      var p23 = myapp.createButton("　　　　　　　ALL　　　　　　　"); 
      var all0handler = myapp.createServerHandler("goall0");  
      p23.addClickHandler(all0handler); 
      
      p23.setStyleAttribute("font-size", "25pt");
      p2.add(p23);
      var p5 = myapp.createTextBox().setText("#").setName("ticketURL").setVisible(false);
      mySubvertical.add(p2);
      mySubvertical.add(p5);       
    }  
  }
  
   for(var i = 1; i < ticketdata.length; i++){
     if(ticketdata[i][4] == ""){
       ticketdata[i][0] = "";
     }else{
     if(ticketdata[i][0] != ""){
      var mysubHorizontal = myapp.createHorizontalPanel(); 
      var mysubvertical = myapp.createVerticalPanel(); 
      mysubHorizontal.add(mysubvertical); 
      var p2 = myapp.createLabel(ticketdata[i][1]); 
      p2.setStyleAttribute("font-size", "15pt"); 
      p2.setStyleAttribute("background-color", "#98FB98"); 
      myvertical.add(p2); 
      var p3 = myapp.createHorizontalPanel(); 
      mysubvertical.add(p3); 
      var p30 = myapp.createLabel("any level"); 
      p30.setStyleAttribute("font-size", "13pt");
      p30.setStyleAttribute("marginTop", "9pt");
      p3.add(p30);
      var k = 1;
      var saibunnka = new Array();
       saibunnka[0] = new Array();
       saibunnka[0][0] = ticketdata[i][2];
       saibunnka[0][1] = 1;
      for(var j = i + 1; j < ticketdata.length; j++){
       if(ticketdata[j][4] == ""){
        ticketdata[j][0] = "";
       }else{      
        if(ticketdata[j][0] == ticketdata[i][0]){
          k++;
          ticketdata[j][0] = "";
          for(var o = 0; o < saibunnka.length; o++){
            if(saibunnka[o][0].getFullYear() + "/" + (saibunnka[o][0].getMonth() + 1) + "/" + saibunnka[o][0].getDate() == ticketdata[j][2].getFullYear() + "/" + (ticketdata[j][2].getMonth() + 1) + "/" + ticketdata[j][2].getDate()){
              saibunnka[o][1]++;
              break;
            }
              }
          if(o == saibunnka.length){
            saibunnka[o] = new Array();
            saibunnka[o][0] = ticketdata[j][2];
            saibunnka[o][1] = 1;            
          }
        }
      }
          }
       
      var p31 = myapp.createLabel(k);
      p31.setStyleAttribute("color", "red");
      p31.setStyleAttribute("font-size", "21pt");
      p3.add(p31);
      var p32 = myapp.createLabel("Any Label"); 
      p32.setStyleAttribute("font-size", "13pt");
      p32.setStyleAttribute("marginTop", "9pt");
      p3.add(p32);       
      var p33 = myapp.createAnchor(ticketdata[i][0],ticketdata[i][0]);
      p33.setStyleAttribute("font-size", "13pt");      
      p33.setStyleAttribute("marginTop", "9pt");
      p3.add(p33);
   　 var p4 = myapp.createHorizontalPanel();
      mysubvertical.add(p4);
      var p41 = myapp.createLabel("Any Label");
      p41.setStyleAttribute("font-size", "13pt");
      p41.setStyleAttribute("marginTop", "29pt");
      p4.add(p41);       
      var p42 = myapp.createTextArea().setPixelSize(300, 55).setName("bikou");
       for(var l = 0; l < bikoudata.length; l++){
         if(ticketdata[i][0] == bikoudata[l][0]){
           p42.setValue(bikoudata[l][1]);
           break;
         }
           }
      var p5 = myapp.createTextBox().setText(ticketdata[i][0]).setName("ticketURL").setVisible(false);
      mysubvertical.add(p5);
    　var bikouhandler = myapp.createServerHandler("bikou");
      bikouhandler.addCallbackElement(mysubvertical);
      p42.addChangeHandler(bikouhandler);
      p42.setStyleAttribute("font-size", "13pt");
      p42.setStyleAttribute("marginTop", "2pt");
      p4.add(p42);       
   　 var p43 = myapp.createButton().setText("備考反映");
      p43.setStyleAttribute("marginTop", "28pt");
  　  p4.add(p43);
      if((saibunnka.length) % 4 == 0){
       var gridrow = (saibunnka.length) / 4;
      }else{
       var gridrow = (saibunnka.length - (saibunnka.length % 4)) / 4 + 1;                  
      }      
      var mygrid = myapp.createGrid(gridrow, 4);
　　　var scroll2 = myapp.createScrollPanel().setPixelSize(550, 70);
      scroll2.add(mygrid);
      var subvirtical1 = myapp.createVerticalPanel();
      var secretallbotan = myapp.createButton("　　　　　　　ALL　　　　　　　");
      var allhandler = myapp.createServerHandler("goall"); 
      allhandler.addCallbackElement(mysubvertical); 
      secretallbotan.addClickHandler(allhandler);
         
       
      subvirtical1.add(secretallbotan);
      subvirtical1.add(scroll2); 
       
       
      mysubHorizontal.add(subvirtical1);
      var r = 0;
      for(var x = 0; x < gridrow; x++){
       for(var y = 0; y < 4; y++){
          var hidukebotan = myapp.createHorizontalPanel();
          var checkboxs = myapp.createButton(saibunnka[r][0].getFullYear() + "/" + (saibunnka[r][0].getMonth() + 1) + "/" + saibunnka[r][0].getDate() + "［" + saibunnka[r][1] + "件］");
          var itibuhandler = myapp.createServerHandler("goitibu"); 
          itibuhandler.addCallbackElement(mysubvertical);
          itibuhandler.addCallbackElement(hidukebotan);
          checkboxs.addClickHandler(itibuhandler);
          hidukebotan.add(checkboxs);
          var secretbotan = myapp.createTextBox().setText(saibunnka[r][0].getFullYear() + "/" + (saibunnka[r][0].getMonth() + 1) + "/" + saibunnka[r][0].getDate()).setName("taishou").setVisible(false);
          hidukebotan.add(secretbotan);
          mygrid.setWidget(x, y, hidukebotan);
         if(r == saibunnka.length - 1){
           break;
         }
          r++;
       }
      }            
       
      myvertical.add(mysubHorizontal);
     }
   }
  }
   mySS7.show(myapp);
  var ticketdata = ticketsheet.getDataRange().getValues();
  for(var z0 = bikoudata.length - 1; z0 > 0; z0--){
    for(var z1 = 1; z1 < ticketdata.length; z1++){
      if(ticketdata[z1][0] == bikoudata[z0][0]){
        break;
      }
        }
    if(z1 == ticketdata.length){
      bikousheet.deleteRow(z0 + 1);
    }
      }
}

我换了

var myapp = UiApp.createApplication();

经过

var myapp = HtmlService.createHtmlOutput();

它通过了没有错误的行并在下一行出错：

var myvertical = myapp.createVerticalPanel(); 

但我不知道 app 脚本中的 createVerticalPanel 到底是什么。 所以，我不能代替。

但是，如果有人能以相同的方式找到等价物，那就完成了。

Answer 1

HTML 服务的工作方式与 Ui.App 不同

在大多数情况下，这意味着您从 Apps Script Ui 转到 File->New->HTML 并创建一个 HTML 文件，您可以在其中设计 HTML 编码的界面，就像设计网站一样。

随后，您可以使用 HTML 服务基于您的 HTML 文件创建输出。 您可以使用此面板，例如合并一个侧边栏（可能是垂直栏的一个很好的替代品）。

文档中的示例：

GS。 文件

function onOpen() {
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .createMenu('Custom Menu')
      .addItem('Show sidebar', 'showSidebar')
      .addToUi();
}

function showSidebar() {
  var html = HtmlService.createHtmlOutputFromFile('Page')
      .setTitle('My custom sidebar')
      .setWidth(300);
  SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
      .showSidebar(html);
}

HTML 文件（称为 page.html）

Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />

有用的参考：

• HTML 服务：创建和提供 HTML
• HTML 服务参考
• createHtmlOutputFromFile(文件名)
• G Suite 文档中的对话框和边栏