How to modify and convert Google app UI into HTML-CodePudding

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

CodePudding user response：

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 >
      <div >
        <div >
          <div >Application Type:</div>
          <div >
            <select  id="appType" onchange="appTypeOnChange()">
              <option>Private</option>
              <option>Public</option>
              <option>Partner</option>
            </select>
          </div>
        </div>
        <div >
          <div >Application Name:</div>
          <div >
            <input  id="userAgent" value=<?= userAgent?>>
          </div>
        </div>
        <div >
          <div >Consumer Key:</div>
          <div >
            <input  id="consumerKey" value=<?= consumerKey ?>>
          </div>
        </div>
        <div >
          <div >Consumer Secret:</div>
          <div >
            <input  id="consumerSecret" value=<?= consumerSecret ?>>
          </div>
        </div>
        <div >
          <div >Callback URL:</div>
          <div >
            <input  id="callBack" value=<?= callBack ?>>
          </div>
        </div>
        <div >
          <div >RSA Private Key:</div>
          <div >
            <input  id="rsaKey" value=<?= rsaKey ?>>
          </div>
        </div>
      </div>
    </div>
    <input  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