Web App & UI Custom (Sidebar/Dialog)

HTML Service#

Gunakan HtmlService untuk menampilkan HTML di dalam Google Sheets atau sebagai Web App mandiri.

Example (Code.gs):

function bukaSidebar() {
  const html = HtmlService.createHtmlOutputFromFile('Sidebar')
    .setTitle('Panel Cepat');
  SpreadsheetApp.getUi().showSidebar(html);
}

Example (Sidebar.html):

<!DOCTYPE html>
<input id="nama" placeholder="Nama">
<button onclick="kirim()">Kirim</button>
<script>
  function kirim() {
    const nama = document.getElementById('nama').value;
    google.script.run.prosesNama(nama);
  }
</script>

Example (panggil balik ke server):

function prosesNama(nama) {
  SpreadsheetApp.getActiveSheet().getRange('A1').setValue(nama);
}

Dialog#

Example:

function bukaDialog() {
  const html = HtmlService.createHtmlOutputFromFile('Dialog').setWidth(400);
  SpreadsheetApp.getUi().showModalDialog(html, 'Konfirmasi');
}

Web App#

Deploy sebagai URL publik. Fungsi doGet menangani permintaan HTTP.

Example:

function doGet(e) {
  const html = HtmlService.createHtmlOutputFromFile('Index');
  return html;
}

function doPost(e) {
  const data = JSON.parse(e.postData.contents);
  return ContentService.createTextOutput('OK');
}

Mengembalikan JSON (API)#

Example:

function doGet(e) {
  const hasil = { total: 120, status: 'ok' };
  return ContentService
    .createTextOutput(JSON.stringify(hasil))
    .setMimeType(ContentService.MimeType.JSON);
}

Method	Deskripsi
`createHtmlOutputFromFile()`	Muat file HTML
`google.script.run`	Panggil fungsi server dari JS
`showSidebar()` / `showModalDialog()`	Tampilkan UI

Note

Web App butuh deploy ulang (Deploy → New deployment) setiap mengubah doGet/doPost agar perubahan aktif.

Next#

Pelajari Integrasi API Eksternal.

HTML Service#

Sidebar#

Dialog#

Web App#

Mengembalikan JSON (API)#

Next#