Uso de formulário html em appscript no google spreadsheets

Lucas Lau · 29 de junho de 2016

Bom dia,

sou novato em programação, tendo alguma experiencia com VisualBasic, porém estou tendo que trabalhar com o Google Spreadsheets e estou tento alguma dificuldade.

Meu problema é o seguinte, desejo usar um formulário em HTML como interface para o usuário da planilha. Ao clicar em um botão na planilha, aparecerá este formulário previamente preenchido com dados que estão na planilha, o usuário poderá então editar as informações e, ao clicar em salvar, esses dados serão salvos novamente na planilha.

A dificuldade que estou tendo é em comunicar as informações da planilha e do .gs com o .html. Alguém pode me ajudar?

Muito obrigado:

Seguem os códigos que estou usando:

.gs:

function editDadosPessoais() {
  var html = HtmlService.createHtmlOutputFromFile('Form')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
      .showModalDialog(html, 'DADOS PESSOAIS');
}

Form.html

<!DOCTYPE html>
<html>

<head>
<meta content="Sheets" name="generator" />
<style type="text/css"><!--br {mso-data-placement:same-cell;}
.auto-style3 {
    font-family: Calibri;
}
.auto-style4 {
    font-family: Calibri;
    text-decoration: underline;
}
.auto-style5 {
    text-decoration: underline;
}
--></style>
<meta content="pt-br" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
</head>
<body>
<form action="" method="post" style="width: 473px; height: 454px">
    <strong><span class="auto-style4">NOME:</span></strong><span class="auto-style3"><strong> 
    </strong></span><strong>
    <input class="auto-style3" name="Text1" style="width: 382px" type="text" /><br />
    <br class="auto-style3" />
    <span class="auto-style3"><span class="auto-style5">CÓDIGO DEPENDENTE:</span>
    </span><select class="auto-style3" name="Select1" style="width: 76px">
    <option>Titular</option>
    <option>Esposo(a)</option>
    <option>Filho(a)</option>
    <option>Outro(a)</option>
    </select><br />
    <br class="auto-style3" />
    <span class="auto-style3"><span class="auto-style5">TELEFONES:</span>                            
    <span class="auto-style5">SITUAÇÃO:  </span></span>
    <br class="auto-style3" />
    <input class="auto-style3" name="Text2" type="text"/><span class="auto-style3">           
    </span><select class="auto-style3" name="Select2" style="width: 97px">
    <option></option>
    <option>CORRETO</option>
    <option>ERRADO</option>
    </select><br class="auto-style3" />
    <input class="auto-style3" name="Text3" type="text"/><span class="auto-style3">           
    </span><select class="auto-style3" name="Select3" style="width: 97px">
    <option></option>
    <option>CORRETO</option>
    <option>ERRADO</option>
    </select><br class="auto-style3" />
    <input class="auto-style3" name="Text4" type="text" /><span class="auto-style3">           
    </span><select class="auto-style3" name="Select4" style="width: 97px">
    <option></option>
    <option>CORRETO</option>
    <option>ERRADO</option>
    </select><br />
    <br class="auto-style3" />
    <span class="auto-style3"><span class="auto-style5">EMAIL:</span> </span>
    <input class="auto-style3" name="Text10" style="width: 329px" type="text" /><br />
    <br class="auto-style3" />
    <span class="auto-style4">ENDEREÇO:<br />
    </span><br class="auto-style4" />
    <span class="auto-style3">Logradouro: </span>
    <input class="auto-style3" name="Text5" style="width: 271px" type="text" /><span class="auto-style3">    
    nº: </span>
    <input class="auto-style3" name="Text6" style="width: 59px" type="text" /><span class="auto-style3"><br />
    <br />
    Complemento: </span>
    <input class="auto-style3" name="Text7" style="width: 91px" type="text" />   
    <span class="auto-style3">Bairro: </span>
    <input class="auto-style3" name="Text8" style="width: 197px" type="text" /><span class="auto-style3">
    <br />
   <br />
    Cidade: </span>
    <input class="auto-style3" name="Text9" style="width: 276px" type="text" /><span class="auto-style3">    
    Estado: </span>
    <select class="auto-style3" name="Select5" style="width: 55px">
    <option></option>
    <option>AC</option>
    <option>AL</option>
    <option>AP</option>
    <option>AM</option>
    <option>BA</option>
    <option>CE</option>
    <option>DF</option>
    <option>ES</option>
    <option>GO</option>
    <option>MA</option>
    <option>MG</option>
    <option>MS</option>
    <option>MT</option>
    <option>PA</option>
    <option>PB</option>
    <option>PE</option>
    <option>PI</option>
    <option>PR</option>
    <option>RJ</option>
    <option>RN</option>
    <option>RO</option>
    <option>RR</option>
    <option>RS</option>
    <option>SC</option>
    <option>SE</option>
    <option>SP</option>
    <option>TO</option>
    </select><br class="auto-style3" />
    <br class="auto-style3" />
                           
    </strong><button name="Abutton1" value="SALVAR">SALVAR</button>       
    <button name="Abutton2">CANCELAR</button>
</form>
</body>
</html>