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 文檔中的對話框和邊欄