CODEWITHSUNDEEP
htmlgoogle-apps-scriptgoogle-sheets
eirever
eirever

Reputation: 143

How to add additional content to htmloutput in Google Sheets with Google Apps Script

I found the code that creates pop-up using HTML output. It is currently set to show one item: a title that hyperlinks to a website in a new tab. I am interested in adding additional content to this pop-up.

2 desires:

  1. displaying multiple links in the pop-up
  2. displaying additional content (e.g., introduction paragraph above link(s); description of links

I tried calling the reminders function with multiple showAnchor functions, which resulted in only the last link being displayed I tried using arrays for the 'name' & 'url' for the showAnchor function within the reminders function. The code is below as well as an example sheet that includes this code in the notepad.gs code file in the associated Apps Script.

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  ui.createMenu('⚙️ Custom')
    .addItem('Show Reminders','reminders')
    .addToUi();

}

function reminders(){
  showAnchor('Google','https://www.google.com/');
}

function showAnchor(name,url) {
  var html = '<html><body><a href="'+url+'" target="blank" onclick="google.script.host.close()">'+name+'</a></body></html>';
  var ui = HtmlService.createHtmlOutput(html)
  SpreadsheetApp.getUi().showModelessDialog(ui,'Reminders');
}

https://docs.google.com/spreadsheets/d/1Sqt7_Ev9iagbE9CZT1F2lAUJqc1fX4WfbyaOBGEfqyQ/edit?usp=sharing

Upvotes: 0

Views: 530

Answers (1)

doubleunary
doubleunary

Reputation: 18766

Try this:

function reminders() {
  showAnchors([
    {
      description: 'Search the web without being tracked',
      name: 'DuckDuckGo',
      url: 'https://duckduckgo.com/',
    },
    {
      description: 'A fairly popular search engine',
      name: 'Google',
      url: 'https://www.google.com/',
    },
  ]);
}

function showAnchors(anchors) {
  let html = '<html><body style="word-break:break-word; font-family:sans-serif;">';
  html += '<p>Introduction paragraph above links.</p>'
  anchors.forEach(anchor => {
    html += '<h3>' + anchor.description + '</h3>'
      + '<a href="'
      + anchor.url
      + '" target="_blank" rel="noopener" onclick="google.script.host.close()">'
      + anchor.name
      + '</a>';
  });
  html += '</body></html>';
  SpreadsheetApp.getUi()
    .showModelessDialog(HtmlService.createHtmlOutput(html), 'Reminders');
}

Upvotes: 2

Related Questions