How to modify and convert Google app UI into HTML

See more:

UI

API

google-app

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

What I have tried:

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