google-apps-scriptgoogle-sheetswebview

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


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


Solution

  • 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