Google apps script UI services to HTML services Conversion Problem

Question

I got an assignment to do a Google sheet customization using AppScript UI Services. But recently I can't the script since it is deprecated. To run the program, I need to convert all the UI App components to HTML services component.

I searched the list of equivalent commands for UI App in HTML Services but didn't find it.

And since UI Service is already deprecated, so I can't even test and see the output for the current program.

So, I can't imagine it in the HTML service.

However, here I am sharing the whole function. I think codes & logics are okay, we just need to replace existing UI app elements by equivalent HTML services elements.

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

I replaced

var myapp = UiApp.createApplication();

by

var myapp = HtmlService.createHtmlOutput();

It passed the line without error & got error in next line:

var myvertical = myapp.createVerticalPanel(); 

But I don't know what actually is createVerticalPanel in app script. So, I can't replace.

But if anyone can just find the equivalents in the same way, it will be done.

Answer 1

HTML service works differently from Ui.App

It implies in most that you go from Apps Script Ui to File->New->HTML and create a HTML file where you design an HTML coded interface, very much like designing a website.

Subsequently, you can use the HTML service to create an output based on your HTML file. You can use this panel, eg to incorporate a sidebar (maybe a good alternative for a vertical bar).

Sample from the documentation:

Gs. file

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 file (called page.html)

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

Useful references:

• HTML Service: Create and Serve HTML
• HTML Service reference
• createHtmlOutputFromFile(filename)
• Dialogs and Sidebars in G Suite Documents