How to modify and convert Google app UI into HTML

Question

I try to convert this simple google apps script code below to HTML services code. The code below is written with the deprecated google apps script UI services! Could anyone please help me with HTML services example code in this usecase?

I'm not really sure how to approach it as I haven't been coding for too long.

A little bit of help would be very much appreciated.

Thanks!!

Mireia

function() {  
  var ss = SpreadsheetApp.getActiveSpreadsheet();    
  var app = UiApp.createApplication();
  app.setHeight(400);
  var scriptProps = PropertiesService.getScriptProperties(); 
  
  var label1 = app.createLabel('XERO Settings').setStyleAttribute('font-weight', 'bold').setStyleAttribute('padding', '5px').setId('label1');        
  var panel1 = app.createVerticalPanel().setId('panel1');
  var grid = app.createGrid(7, 2);
  var absPanel = app.createAbsolutePanel();  
  
  var handler = app.createServerHandler('saveSettings');    
  var clientHandler1 = app.createClientHandler();  
  var clientHandler2 = app.createClientHandler();    
  var clientHandler3 = app.createClientHandler();    
  
  var btnSave = app.createButton('Save Settings', handler);       
  var lblAppType = app.createLabel('Application Type: ');    
  var appTypes = {Private:0, Public:1, Partner:2};
  var listAppType = app.createListBox().setName('appType').addItem('Private').addItem('Public').addItem('Partner').addChangeHandler(clientHandler1).
  addChangeHandler(clientHandler2).addChangeHandler(clientHandler3).setSelectedIndex(appTypes[(scriptProps.getProperty('appType') != null ? scriptProps.getProperty('appType'): 'Private')]);  
  handler.addCallbackElement(listAppType);
  
  var lblAppName = app.createLabel('Application Name: ');  
  var txtAppName = app.createTextBox().setName('userAgent').setWidth("350")
  .setValue((scriptProps.getProperty('userAgent') != null ? scriptProps.getProperty('userAgent'): ""));
  handler.addCallbackElement(txtAppName);
  
  var lblConsumerKey = app.createLabel('Consumer Key: ');  
  var txtConsumerKey = app.createTextBox().setName('consumerKey').setWidth("350")   
  .setValue((scriptProps.getProperty('consumerKey') != null ? scriptProps.getProperty('consumerKey'): ""));
  handler.addCallbackElement(txtConsumerKey);  
  
  var lblConsumerSecret = app.createLabel('Consumer Secret: ');  
  var txtConsumerSecret = app.createTextBox().setName('consumerSecret').setWidth("350")
    .setValue((scriptProps.getProperty('consumerSecret') != null ? scriptProps.getProperty('consumerSecret'): ""));
  handler.addCallbackElement(txtConsumerSecret);
  
  var lblcallBack = app.createLabel('Callback URL:');
  var txtcallBack = app.createTextBox().setName('callBack').setWidth("350")
    .setValue((scriptProps.getProperty('callbackURL') != null ? scriptProps.getProperty('callbackURL'): ""));
  handler.addCallbackElement(txtcallBack);
  
  var lblRSA = app.createLabel('RSA Private Key:');
  var txtareaRSA = app.createTextArea().setName('RSA').setWidth("350").setHeight("150")
    .setValue((scriptProps.getProperty('rsaKey') != null ? scriptProps.getProperty('rsaKey'): ""));  
  
  if (scriptProps.getProperty('appType') == "Private" || scriptProps.getProperty('appType') == null)     
    txtcallBack.setEnabled(false);
  else if (scriptProps.getProperty('appType') == "Public")     
    txtareaRSA.setEnabled(false);
  
  handler.addCallbackElement(txtareaRSA);  
  clientHandler1.validateMatches(listAppType, 'Private').forTargets(txtcallBack).setEnabled(false).forTargets(txtareaRSA).setEnabled(true);
  clientHandler2.validateMatches(listAppType, 'Public').forTargets(txtcallBack).setEnabled(true).forTargets(txtareaRSA).setEnabled(false);
  clientHandler3.validateMatches(listAppType, 'Partner').forTargets(txtcallBack).setEnabled(true).forTargets(txtareaRSA).setEnabled(true);
  
  grid.setBorderWidth(0);
  grid.setWidget(0, 0, lblAppType);
  grid.setWidget(0, 1, listAppType);  
  grid.setWidget(1, 0, lblAppName);
  grid.setWidget(1, 1, txtAppName);
  grid.setWidget(2, 0, lblConsumerKey);
  grid.setWidget(2, 1, txtConsumerKey);  
  grid.setWidget(3, 0, lblConsumerSecret);
  grid.setWidget(3, 1, txtConsumerSecret);
  grid.setWidget(4, 0, lblcallBack);
  grid.setWidget(4, 1, txtcallBack);
  grid.setWidget(5, 0, lblRSA);
  grid.setWidget(5, 1, txtareaRSA);
  grid.setWidget(6, 1, btnSave);  
  panel1.add(grid).setStyleAttributes(subPanelCSS);    
  app.add(label1);
  app.add(panel1);  
  ss.show(app);  
}

Answer 1

Description

Unfortunately there is no converter. Your dialog is relatively simple and I think I have captured everything of interest. I expect you to handle the property services.

In the dialog I changed the appType from Public to Private to show that the changed values are sent to the server for property service as shown in the execution log.

I inadvertently put include in Code.gs because I normally put CSS in one file, HTML another and js in a third. I didn't do that in this instance.

HTML_Test

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      #label1 { font-weight: bold; }
     .textBox { width: 350px; }
     .table { display: table; }
      .table-row { display: table-row; }
      .table-cell { display: table-cell; }
    </style>
  </head>
  <body>
    <p id="label1">XERO Settings</p>
    <div class="panel1">
      <div class="table">
        <div class="table-row">
          <div class="table-cell">Application Type:</div>
          <div class="table-cell">
            <select class="textBox" id="appType" onchange="appTypeOnChange()">
              <option>Private</option>
              <option>Public</option>
              <option>Partner</option>
            </select>
          </div>
        </div>
        <div class="table-row">
          <div class="table-cell">Application Name:</div>
          <div class="table-cell">
            <input class="textBox" id="userAgent" value=<?= userAgent?>>
          </div>
        </div>
        <div class="table-row">
          <div class="table-cell">Consumer Key:</div>
          <div class="table-cell">
            <input class="textBox" id="consumerKey" value=<?= consumerKey ?>>
          </div>
        </div>
        <div class="table-row">
          <div class="table-cell">Consumer Secret:</div>
          <div class="table-cell">
            <input class="textBox" id="consumerSecret" value=<?= consumerSecret ?>>
          </div>
        </div>
        <div class="table-row">
          <div class="table-cell">Callback URL:</div>
          <div class="table-cell">
            <input class="textBox" id="callBack" value=<?= callBack ?>>
          </div>
        </div>
        <div class="table-row">
          <div class="table-cell">RSA Private Key:</div>
          <div class="table-cell">
            <input class="textBox" id="rsaKey" value=<?= rsaKey ?>>
          </div>
        </div>
      </div>
    </div>
    <input class="btnSave" type="button" value="Save Settings" onclick="saveSettings()">
    <script>
      function appTypeOnChange() {
        let value = document.getElementById("appType").value;
        if( value == "Private" ) {
          document.getElementById("callBack").disabled = true;
          document.getElementById("rsaKey").disabled = false;
        }
        else if( appType == "Public" ) {
          document.getElementById("callBack").disabled = false;
          document.getElementById("rsaKey").disabled = true;
        }
        else {
          document.getElementById("callBack").disabled = false;
          document.getElementById("rsaKey").disabled = false;
        }
      }

      function saveSettings() {
        let props = {};
        props.appType = document.getElementById("appType").value;
        props.userAgent = document.getElementById("userAgent").value;
        props.consumerKey = document.getElementById("consumerKey").value;
        props.consumerSecret = document.getElementById("consumerSecret").value;
        props.callBack = document.getElementById("callBack").value;
        props.rsaKey = document.getElementById("rsaKey").value;
        props = JSON.stringify(props);
        google.script.run.setProperties(props);
      }

      (function () {
        let appType = <?= appType ?>;
        document.getElementById("appType").value=appType;
        if( appType == "Private" ) {
          document.getElementById("callBack").disabled = true;
        }
        else if( appType == "Public" ) {
          document.getElementById("rsaKey").disabled = true;
        }
      }());
    </script>
  </body>
</html>

Dialog

Code.gs

function showTest() {
  try {
    let html = HtmlService.createTemplateFromFile('HTML_Test');
    html.appType = "Public";
    html.userAgent = "John Smith";
    html.consumerKey = "12345678";
    html.consumerSecret = "My Secret";
    html.callBack = "www.goggle.com";
    html.rsaKey = "abcdefg";
    html = html.evaluate();
    SpreadsheetApp.getUi().showModalDialog(html,"Show Test");
  }
  catch(err) {
    SpreadsheetApp.getUi().alert(err);
  }
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
};

function setProperties(props) {
  Logger.log(props);
}

Execution log

Head    setProperties   Unknown May 11, 2022, 8:27:15 AM    0.57 s  
Completed
Cloud logs
May 11, 2022, 8:27:16 AM    Info    {"appType":"Private","userAgent":"John Smith","consumerKey":"12345678","consumerSecret":"My Secret","callBack":"www.goggle.com","rsaKey":"abcdefg"}

Reference

• HTML Service Templated HTML