New Google Sites - Embed HTML, Javascript and Google Sheets

Asked

Viewed 1,470 times

3

I’m trying to use the object "Embed" from the new Google Sites I select "Enter Code" option and put the code below and when executed the following error message appears: "Referenceerror: Spreadsheetapp is not defined" Does anyone know of any alternative to solve this problem? Thank you

<head>
 <script>
   function funcaoLogar(){
     try{
      var planilha = SpreadsheetApp.openById('1y-hmm2qSJGzZ1M8kHD-ZF-....');
      var pasta = planilha.getSheetByName("DADOS");

      var pLogin = pasta.getRange(1, 1).getValue();
      var pSenha = pasta.getRange(2, 1).getValue();
     } catch (erro) {
          document.getElementById('texto').innerHTML = erro;
        }

     var login = document.getElementById('fLogin').value;
     var senha = document.getElementById('fSenha').value;

     if(login == pLoguin && senha == pSenha){
         window.open('https://sites.google.com/view/perfil...';  
        }else {document.getElementById('texto').innerHTML = "Login ou Senha errada";} 
  }
 </script>
</head>

<body>
 <p>Login: <input id="fLogin" type="text" value="">
 <p>Senha: <input type="password" id="fSenha" type="text" value="">
 <p><button type="button" onclick="funcaoLogar()">Logar</button>
 <p id="texto">
</body>
javascript html spreadsheets

  • it seems that Voce needs to import somehow the lib with the SpreadsheetApp, I’ll take a look and also and anything I warn you

  • To solve I tried to simplify the problem by creating in Google App Script the Code.Gs file with the code:

2 answers

0

Trying to simplify the problem in Google App Script I created the file Code.Gs with the code below:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('arquivoHTML');
}

function mostrarTexto(){
    //escreva aqui o seu código Google Script;
    return "Deu certo!!!!";
}

I created the file arquivoHTML.html with the code below

<!DOCTYPE html>
<html>
<body>
    <script>
      function funcaoScript(){
          google.script.run
          .withSuccessHandler(function(retornoFuncao){
                document.getElementById('resultado').innerHTML = retornoFuncao;
            })
          .mostrarTexto();
      }
    </script>
    <button onclick="funcaoScript()">Mostrar Resultado</button>
    <p id="resultado"></p>
</body>
</html>

I enabled the API: Google Classroom API

when I tested using the menu Publish >> Deploy as web application... it worked. But when I tried to embed on google sites appeared "Undefined"

I also tried to embed the html code in google sites itself and nothing happened.

Perhaps it is a light for the solution of the problem.

0

I solved the problem as follows (simplified explanation):

1 - Google Drive >> + New >> More >> Google App Script; >> Create and share

2 - Name the project;

3 - File Menu >> New >> HTML File;

4 - Name file "arquivoHTML.html";

5 - In the Code file.Gs include the codes:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('arquivoHTML');
}

function funcaoLogar(login,senha){
      var planilha = SpreadsheetApp.openById('1bsyvClx9sCy...');
      var pasta = planilha.getSheetByName("DADOS"); 
      var pLogin = pasta.getRange(2, 2).getValue();
      var pSenha = pasta.getRange(2, 3).getValue();
      if(login == pLogin && senha == pSenha){
       return  "window.open('https://sites.google.com/view/cibmalgo...')" ;  
        }else {
           return 'document.getElementById("texto").innerHTML = "Login ou Senha errada"' ;
        }  
}

6 - In the archive.html include the code:

<!DOCTYPE html>
<html>
  <body>
    <script> 
     function funcaoExecutar(){
       var login = document.getElementById('fLogin').value;
       var senha = document.getElementById('fSenha').value;

       google.script.run.withFailureHandler(error).withSuccessHandler(result).funcaoLogar(login,senha);  

       function result(result){
           eval(result);
       } 

       function error(message){
          document.getElementById("texto").innerHTML = message;
       }
     }
    </script>
 <p>Login: <input id="fLogin" type="text"></p>
 <p>Senha: <input id="fSenha" type="password"></p>
 <p><button type="button" onclick="funcaoExecutar()">Logar</button></p>
 <p id="texto" style="color:red"></p>
</body>
</html>

7 - Select Features menu >> Google Advanced Services...

8 - Search for "Google Classroom API" and Click "disabled" to activate it, will be green

9 - Right below has a gray box written "These services also need to be activated in the Google Cloud Platform Apis Panel." click on the blue text

10 - click "+ ACTIVATE APIS AND SERVICES"

11 - Search for "Google Classroom API"

12 - Click on the icon that will appear

13 - Click "Activate"

14 - Go back to Google App Script and click "OK"

Now let’s take the test

15 - Publish Menu >> Deploy as Web Application...

16 - To: "Who has access to the application:" choose the option "Anyone"

17 - Click on "Update"

18 - in the text "Test the web application for your last code." click on the blue part and test the code

if it works properly copy the displayed URL and click "OK"

(remembering that every update is important to put the version and copy the new URL)

--->> INCORPORATING THE CODE INTO GOOGLE SITES

19 - Google Drive >> + New >> More >> Google Sites

20 - Click on "Embed"

21 - By URL >> Paste the copied URL into Google Script

22 - Test the site.

Solution given by Maurílio Correia César of CBMGO

Browser other questions tagged javascript html spreadsheets

You are not signed in. Login or sign up in order to post.