Google Spreadsheet to HTML (editable)

Question

I have my Google Spreadsheet (GS) file, but it is not 'design rich'. I would like to make a design on HTML Web Page, and somehow "merge" Google Sheet with it, so users can still input values in fields and get calculated results.

Only difference between GS and the HTML Web Page is that the web page will have some designed background for cells.

Answer 1

My way is to provide a custom menu that render the html content of selected cell: I compiles several sample to get this simple result:

// This will run when the spreadsheet is opened or the browser page is refreshed
function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Custom Menu')
      .addItem('HTML Vue', 'openDialog')`enter code here`
      .addToUi();
}

function openDialog() {
  var ss = SpreadsheetApp.getActive();
  var cell = ss.getActiveCell();  
  var html = HtmlService.createHtmlOutput(cell.getValue());
  SpreadsheetApp.getUi().showModalDialog(html, 'HTML Vue:' );
}