Code error: We're sorry, a server error occurred. Please wait a bit and try again.

40 views
Skip to first unread message

GRADD - Jim R.

unread,
Oct 1, 2025, 2:47:01 AMOct 1
to Google Apps Script Community
I have the following code and I'm not sure why I am getting this error. I am new at this and hope it's easy to understand.

Thank you

Code.gs:
function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
    .setTitle('Genealogy Search Tool')
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

function onOpen() {
  SpreadsheetApp.getUi()
    .createMenu("🔍 Name Search")
    .addItem("Generate Search Links", "doGet")
    .addToUi();
}

Index.html:
<!DOCTYPE html>
<html>
  <head>
    <base target="_blank">
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
        background: #f8f9fa;
        max-width: 600px;
        margin: auto;
      }
      h1 {
        color: #2c3e50;
      }
      label {
        font-weight: bold;
        display: block;
        margin-top: 10px;
      }
      input {
        padding: 8px;
        margin: 5px 0;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
      button {
        padding: 10px 20px;
        background-color: #2c3e50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 15px;
      }
      button:hover {
        background-color: #34495e;
      }
      .links a {
        display: block;
        margin: 6px 0;
        text-decoration: none;
        color: #0077cc;
        font-weight: 500;
      }
      .links a:hover {
        text-decoration: underline;
      }
      .checkbox {
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>🔍 Genealogy Search Tool</h1>
    <p>Enter name and optional birth/death years to search genealogy websites:</p>

    <form id="searchForm" onsubmit="generateLinks(event)">
      <label>First Name:</label>
      <input type="text" id="firstName" placeholder="e.g., John" required>

      <label>Last Name:</label>
      <input type="text" id="lastName" placeholder="e.g., Doe" required>

      <label>Date of Birth (optional):</label>
      <input type="text" id="dob" placeholder="e.g., 1884">

      <label>Date of Death (optional):</label>
      <input type="text" id="dod" placeholder="e.g., 1949">

      <div class="checkbox">
        <input type="checkbox" id="autoOpen"> Automatically open all search tabs
      </div>

      <button type="submit">Search</button>
    </form>

    <div id="results" class="links"></div>

    <script>
      function generateLinks(e) {
        e.preventDefault();
        const firstName = encodeURIComponent(document.getElementById('firstName').value.trim());
        const lastName = encodeURIComponent(document.getElementById('lastName').value.trim());
        const dob = encodeURIComponent(document.getElementById('dob').value.trim());
        const dod = encodeURIComponent(document.getElementById('dod').value.trim());
        const autoOpen = document.getElementById('autoOpen').checked;
        const fullName = `${firstName}+${lastName}`;

        const sites = [
          {
            name: "Google",
            url: `https://www.google.com/search?q=${fullName}+${dob}+${dod}+genealogy`
          },
          {
            name: "Ancestry",
            url: `https://www.ancestry.com/search/?name=${firstName}_${lastName}&birth=${dob}&death=${dod}`
          },
          {
            name: "FamilySearch",
            url: `https://www.familysearch.org/search/record/results?q.givenName=${firstName}&q.surname=${lastName}&q.birthLikeDate=${dob}&q.deathLikeDate=${dod}`
          },
          {
            name: "Find a Grave",
            url: `https://www.findagrave.com/memorial/search?firstname=${firstName}&lastname=${lastName}&birthyear=${dob}&deathyear=${dod}`
          },
          {
            name: "MyHeritage",
          },
          {

<!DOCTYPE html>
<html>
  <head>
    <base target="_blank">
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
        background: #f8f9fa;
        max-width: 600px;
        margin: auto;
      }
      h1 {
        color: #2c3e50;
      }
      label {
        font-weight: bold;
        display: block;
        margin-top: 10px;
      }
      input {
        padding: 8px;
        margin: 5px 0;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
      button {
        padding: 10px 20px;
        background-color: #2c3e50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 15px;
      }
      button:hover {
        background-color: #34495e;
      }
      .links a {
        display: block;
        margin: 6px 0;
        text-decoration: none;
        color: #0077cc;
        font-weight: 500;
      }
      .links a:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <h1>🔍 Genealogy Search Tool</h1>
    <p>Enter name and dates to search genealogy websites:</p>

    <form id="searchForm" onsubmit="generateLinks(event)">
      <label>First Name:</label>
      <input type="text" id="firstName" placeholder="e.g., John" required>

      <label>Last Name:</label>
      <input type="text" id="lastName" placeholder="e.g., Doe" required>

      <label>Date of Birth (optional):</label>
      <input type="text" id="dob" placeholder="e.g., 1884">

      <label>Date of Death (optional):</label>
      <input type="text" id="dod" placeholder="e.g., 1949">

      <button type="submit">Search</button>
    </form>

    <div id="results" class="links"></div>

    <script>
      function generateLinks(e) {
        e.preventDefault();
        const firstName = encodeURIComponent(document.getElementById('firstName').value.trim());
        const lastName = encodeURIComponent(document.getElementById('lastName').value.trim());
        const dob = encodeURIComponent(document.getElementById('dob').value.trim());
        const dod = encodeURIComponent(document.getElementById('dod').value.trim());
        const fullName = `${firstName}+${lastName}`;

        const sites = [
          {
            name: "Google",
            url: `https://www.google.com/search?q=${fullName}+${dob}+${dod}+genealogy`
          },
          {
            name: "Ancestry",
            url: `https://www.ancestry.com/search/?name=${firstName}_${lastName}&birth=${dob}&death=${dod}`
          },
          {
            name: "FamilySearch",
            url: `https://www.familysearch.org/search/record/results?q.givenName=${firstName}&q.surname=${lastName}&q.birthLikeDate=${dob}&q.deathLikeDate=${dod}`
          },
          {
            name: "Find a Grave",
            url: `https://www.findagrave.com/memorial/search?firstname=${firstName}&lastname=${lastName}&birthyear=${dob}&deathyear=${dod}`
          },
          {
            name: "MyHeritage",
          },
          {
            name: "BillionGraves",
            url: `https://billiongraves.com/search/results?given_names=${firstName}&family_names=${lastName}&birth_year=${dob}&death_year=${dod}`
          }
        ];

        let html = "<h2>Search Results:</h2>";
        sites.forEach(site => {
          html += `<a href="${site.url}" target="_blank">🔗 Search ${site.name}</a>`;
        });

        document.getElementById("results").innerHTML = html;
      }
    </script>
  </body>
</html>




Kildere S Irineu

unread,
Oct 1, 2025, 4:48:14 AMOct 1
to google-apps-sc...@googlegroups.com

Olá! Bem-vindo ao mundo do Google Apps Script!

Fico feliz em ajudar. O erro que você está vendo é muito, muito comum para quem está começando, e a boa notícia é que a correção é bem simples de entender. Você fez um ótimo trabalho montando a estrutura!

Vamos corrigir os dois problemas principais: um no Code.gs e alguns pequenos no Index.html.


O Problema Principal (no Code.gs)

O seu menu está tentando executar a função doGet diretamente.

Pense assim: a função doGet é como um "garçom" que tem a tarefa de montar e trazer a página HTML para ser exibida. Quando você clica no menu, você está dizendo ao garçom: "sua tarefa é trazer a página", mas não está dizendo onde mostrar essa página.

O Google Apps Script não sabe o que fazer com a "página HTML" que a função retorna e por isso gera um erro.

A Solução: Precisamos criar uma função intermediária que diga "pegue a página HTML que o doGet prepara e mostre-a em uma barra lateral (sidebar) ou em uma caixa de diálogo".


Pequenos Erros (no Index.html)

Havia alguns pequenos erros de digitação e inconsistências entre os nomes (id) dos campos no seu HTML e os nomes que o JavaScript estava procurando.

  • No HTML você usou id="nome", mas no JavaScript procurou por getElementById('firstName').

  • No HTML você usou id="sobrenome", mas no JavaScript procurou por getElementById('lastName').

  • Em algumas URLs, as variáveis estavam com nomes errados (como db e dn em vez de dob e dod).

Eu corrigi tudo isso para que os nomes sejam consistentes.


Código Corrigido (Copie e Cole)

Aqui estão os dois arquivos com todas as correções. Substitua o conteúdo dos seus arquivos por estes.

Code.gs (Corrigido)

JavaScript
function doGet() {
  // Esta função continua a mesma, sua única tarefa é preparar o HTML.
  return HtmlService.createHtmlOutputFromFile('Index')
      .setTitle('Ferramenta de Pesquisa Genealógica'); // O XFrameOptionsMode não é necessário para uma sidebar.
}

/**
 * Esta é a nova função que o menu irá chamar.
 * Ela pega o HTML da função doGet e o exibe em uma barra lateral.
 */
function mostrarBarraLateral() {
  const html = HtmlService.createHtmlOutputFromFile('Index')
      .setTitle('Ferramenta de Pesquisa Genealógica');
  SpreadsheetApp.getUi().showSidebar(html);
}

/**
 * O menu agora chama a função correta para MOSTRAR a interface.
 */
function onOpen() {
  SpreadsheetApp.getUi()
      .createMenu("🔍 Pesquisa de Nome")
      .addItem("Abrir Ferramenta de Pesquisa", "mostrarBarraLateral") // Corrigido aqui
      .addToUi();
}```

#### **`Index.html` (Corrigido e Limpo)**

```html
<!DOCTYPE html>
<html>
<head>
  <base target="_blank">
  <style>

    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f8f9fa
;
    }
    h1 {
      color: #2c3e50;
      font-size: 20px;
    }
    p {
      font-size: 14px;
    }
    
label {
      font-weight: bold;
      display: block;
      margin-top: 10px
;
      font-size: 14px;
    }
    input[type="text"] {
      
padding: 8px;
      margin: 5px 0
;
      width: calc(100% - 18px); /* Ajuste para o padding */

      border: 1px solid #ccc;
      border-radius: 5px;
    }
    button {
      padding: 10px 20px;
      background-color: #2c3e50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin-top: 15px
;
      width: 100%;
    }
    
button:hover {
      background-color: #34495e;
    }
    .links a {
      display
: block;
      margin: 8px 0;
      
text-decoration: none;
      color: #0077cc;
      font-weight: 500
;
      font-size: 15px;
    }
    .links a:hover {
      text-decoration: underline;
    }
    .checkbox-container {
      margin-top: 15px;
      display: flex;
      align-items: center;
    }
    .checkbox-container input {
       margin-right: 8px;
    }
  </style>
</head>
<body>
  <h1>🔍 Ferramenta de Busca Genealógica</h1>
  <p>Digite o nome e os anos para pesquisar em vários sites:</p>


  <form id="searchForm" onsubmit="generateLinks(event)">

    <label for="firstName">Nome:</label>
    <input type="text" id="firstName" placeholder="ex: John" required>

    <label for="lastName">Sobrenome:</label>
    <input type="text" id="lastName" placeholder="ex: Doe" required>

    <label for="dob">Ano de Nascimento (opcional):</label>
    <input type="text" id="dob" placeholder="ex: 1884">

    <label for="dod">Ano do Óbito (opcional):</label>
    <input type="text" id="dod" placeholder="ex: 1949">

    <div class="checkbox-container">

      <input type="checkbox" id="autoOpen">

      <label for="autoOpen">Abrir automaticamente todas as guias</label>
    </div>

    <button type="submit">Pesquisar</button>

  </form>

  <div id="results" class="links"></div>

  <script>

    function generateLinks(e) {
      e.preventDefault();
      
      // Corrigido para buscar os IDs corretos

      const firstName = encodeURIComponent(document.getElementById('firstName').value.trim());
      const lastName = encodeURIComponent(document.getElementById('lastName').value.trim());
      const dob = encodeURIComponent(document.getElementById('dob').value.trim());
      const dod = encodeURIComponent(document.getElementById('dod').value.trim());
      const autoOpen = document.getElementById('autoOpen').checked;
      
      const fullName = `${firstName}+${lastName}`
;

      // Corrigido para usar as variáveis corretas (dob, dod)

      const sites = [
        {
          name: "Google",
          url: `https://www.google.com/search?q=${fullName}+${dob}+${dod}+genealogy`
        },
        {
          name: "Ancestry",
          url: `https://www.ancestry.com/search/?name=${firstName}_${lastName}&birth=${dob}&death=${dod}`
        },
        {
          name: "FamilySearch",
          url: `https://www.familysearch.org/search/record/results?q.givenName=${firstName}&q.surname=${lastName}&q.birthLikeDate=${dob}&q.deathLikeDate=${dod}`
        },
        {
          name: "Find a Grave",
          url: `https://www.findagrave.com/memorial/search?firstname=${firstName}&lastname=${lastName}&birthyear=${dob}&deathyear=${dod}`
        },
        {
          name: "MyHeritage",
          url: `https://www.myheritage.com/research?s=1&formId=master&formMode=1&action=query&exactSearch=0&query=${fullName}+${dob}+${dod}`
        },
        {
          name: "BillionGraves",
          url: `https://billiongraves.com/search/results?given_names=${firstName}&family_names=${lastName}&birth_year=${dob}&death_year=${dod}`

        }
      ];

      let html = "<h2>Resultados da pesquisa:</h2>";
      sites.forEach(site => {
        html += `<a href="${site.url}" target="_blank">🔗 Pesquisar em ${site.name}</a>`;
        if (autoOpen) {
          window.open(site.url, '_blank');
        }
      });

      
document.getElementById("results").innerHTML = html;
    }
  
</script>
</body>
</html>

Como Usar

  1. Salve os dois arquivos (Code.gs e Index.html).

  2. Recarregue a página da sua Planilha Google.

  3. Você verá o novo menu "🔍 Pesquisa de Nome" no topo.

  4. Clique nele e depois em "Abrir Ferramenta de Pesquisa".

  5. Uma barra lateral aparecerá à direita com sua ferramenta.

Parabéns por criar sua primeira ferramenta com Google Apps Script! É um projeto muito útil.


--
You received this message because you are subscribed to the Google Groups "Google Apps Script Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-apps-script-c...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/google-apps-script-community/97fd7a5b-282f-4ce9-887f-c91269e37f29n%40googlegroups.com.

Keith Andersen

unread,
Oct 1, 2025, 8:43:16 AMOct 1
to google-apps-sc...@googlegroups.com
Try cleaning the cache/data in the browser history.

Then close the spreadsheet and reopen.



My website: https://sites.google.com/view/klaweb/
Passions: God, Family, Scriptures, Learning, Data Management, Google Sheets + App Script and much more!

GRADD - Jim R.

unread,
Oct 1, 2025, 12:07:23 PMOct 1
to Google Apps Script Community
Thank you all for the help. This is going to be fun learning this.
Reply all
Reply to author
Forward
0 new messages