Is it possible to display an iframe or webview in google sheets

Viewed 522

I have a google sheets file with just URLs of products.

I want to create some iframe/webview/view inside the sheet that can load the contents of that url in that view.

For e.g. when i select any cell with the product url the webview/iframe loads the contents of that url.

Is it possible?

Picture attached for reference on how it would look like. enter image description here

1 Answers

You can easily achieve it using Google Apps Script.

These are the steps to follow:

  1. Inside your sheet go to Extensions>Apps Script
  2. Inside the Code.gs, create an onOpen(e) function for adding a custom Menu when the Sheets is opened by the user.
const onOpen = (e) => {
  SpreadsheetApp.getUi()
    .createMenu('Preview Content')
    .addItem('Show', 'previewProduct')
    .addToUi();
}
  1. This will trigger a function when the user clicks on the menu.
  2. Creating the function previewProduct
const previewProduct = () => {
  /* Gets the actual user cell */
  /* You may want to implement some kind of control of what values */
  /* can be slected */
  /* ex. if(!value.match(urlRegex)) return */
  
  const range = SpreadsheetApp.getActiveRange()
  const value = range.getValue()
  if(value===null) return
  /* Fetchs the content and parse it as html */
  const html = UrlFetchApp.fetch(value).getAs('text/html')
  /* Creates an Output with the fetched HTML */
  /* You have two alternatives */
  /* Creating a Modal Dialog */
  const htmlOutput = HtmlService
    .createHtmlOutput(html)
    .setWidth(720)
    .setHeight(720);
  SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'My add-on');
  /* Creating a Sidebar */
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutput(html))
}
  1. Reopen the Spreadsheet, put the cursor in one cell, and click on Preview Content > Show

Results

Documentation
Related