Embed html inside google sheet

Question

I want to display HTML at the top of my table by creating an html element and placing it at the top of the spreadsheet sheet.

For example, if I created one large cell at the top of my sheet, combining A1: G5, I could embed html into it:

<div>
 <h1>"Hello World"?</h1>
</div>

I notice from the script edition that you can go to file> new> html file.

But I really don't get it.

I just tried: From the script editor new script:

function addSomeHTML() {
  var html = HtmlService.createHtmlOutputFromFile('cabbages')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

Cabbages is an html file:

<div>
  <h1>Hello, world!</h1>
</div>

Then I saved and switched to my sheet. I selected a cell and typed=addSomeHTML()

The message "loading" appeared, after which an empty cell was shown. I was hoping to see "Hello World!" inside the cell.

I looked at the following documentation:

https://developers.google.com/apps-script/guides/html/templates#printing_scriptlets

https://developers.google.com/apps-script/guides/dialogs

Answer 1

Modal Modeless.

Modal showModalDialog() Ui.

Google -

// This will run when the spreadsheet is opened or the browser page is refreshed
function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu('Custom Menu')
      .addItem('Open Dialog Box', 'openDialog')
      .addToUi();
}

,

function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('index')
    .setSandboxMode(HtmlService.SandboxMode.NATIVE);
    SpreadsheetApp.getUi()
    .showModalDialog(html, 'Correct Postcode Errors');
}

index.html

<div>
 <h1>"Hello World"?</h1>
</div>