반응형
Apps Script로 생성한 웹페이지에서(웹앱 배포) 입력한 값을 Google Sheets에 저장하기
https://whiseung.tistory.com/entry/Apps-Script%EB%A1%9C-%EC%9B%B9%EC%95%B1-%EC%83%9D%EC%84%B1 Apps Script로 간단한 웹페이지 생성하기 Apps Script로 간단한 웹페이지를 생성 할 수 있다. 이 웹페이지에서 Bigquery, Database, Goog
whiseung.tistory.com
전에는 Web → Google Sheets 를 구현했엇다.
이제는 Google Sheets → Web 을 구현해보려 한다.
Google Sheets 에서 가져올 데이터
Google Sheets를 url 기반으로 가져와, 데이터를 추출하고
html을 생성할 때 값을 전달해준다.
-- Code.gs
function doGet(e) {
Logger.log(JSON.stringify(e));
var htmlOutput = HtmlService.createTemplateFromFile('myPage3.html');
const sheetUrl = "<https://docs.google.com/spreadsheets/d/sheet_id/edit>";
const sheetName = "doGetTest";
const sheet = SpreadsheetApp.openByUrl(sheetUrl).getSheetByName(sheetName);
var data = sheet.getRange(1,1,sheet.getLastRow()).getValues();
// html에 google sheets에서 가져온 데이터를 전달
htmlOutput.data = data;
htmlOutput.url = getUrl();
return htmlOutput.evaluate();
}
html 파일에서는 아래와 같이 변수를 가져와 뿌려준다.
<?= parameter =?>
<!-- myPage3.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<form action="<?= url ?>" method="GET">
<div class="container">
<div class="row frame">
<h5 class="mt-4 text-center">WEBAPP FORM SERIES</h5>
<h6 class="mb-4 text-center">Apps Script 웹엡 테스트</h6>
<span><?= data ?></span>
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
</html>
array를 아래와 같이 loop를 돌려 뿌려줘본다.
<? ?>
<!-- myPage3.html -->
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
</head>
<body>
<form action="<?= url ?>" method="GET">
<div class="container">
<div class="row frame">
<h5 class="mt-4 text-center">WEBAPP FORM SERIES</h5>
<h6 class="mb-4 text-center">Apps Script 웹엡 테스트</h6>
<ul>
<? for (var i=0;i<data.length; i++) { ?>
<li><span><?= data[i] ?></span></li>
<? } ?>
</ul>
</div>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
</html>
반응형
'GCP > Apps Script' 카테고리의 다른 글
| Apps Script로 이미지파일/PDF 파일 OCR 하기 (0) | 2023.02.15 |
|---|---|
| Apps Script 라이브러리 생성해서 다른 Apps Script에서 사용하기 - 실제 사용 예 (0) | 2023.02.14 |
| Apps Script로 Google Sheets의 특정 셀 값을 계산해 다른 셀에 값 뿌려주기 (0) | 2023.02.09 |
| Apps Script로 Google Sheets의 Chart 생성 (0) | 2023.01.31 |
| Apps Script로 Google Sheets의 Checkbox 생성 후, Checkbox 조작하기 (0) | 2023.01.25 |