Langsung ke konten utama

Seri 7: Membuat Add-on Sederhana untuk Google Sheets

Pada seri sebelumnya kita telah belajar tentang Mengelola File dan Folder di Google Drive Secara Otomatis. Pada seri ini kita akan belajar cara:

  • Membuat menu khusus di Google Sheets (misalnya “Menu Otomasi Kita”).

  • Menjalankan fungsi script langsung dari menu tersebut.

  • (Opsional) Membuat custom dialog atau sidebar untuk interaksi pengguna.

Dengan begitu, script kita tidak lagi harus dijalankan lewat editor, tapi bisa dipakai layaknya fitur bawaan Google Sheets.

⚙️ 1. Konsep Dasar Add-on di GAS

Add-on pada dasarnya hanyalah Google Apps Script yang dihubungkan ke dokumen Google (Spreadsheet, Docs, atau Slides), dengan:

  • Fungsi yang dijalankan oleh pengguna.

  • Menu tambahan di toolbar.

  • (Kadang) tampilan UI tambahan seperti dialog dan sidebar.

🧱 2. Membuat Menu Kustom di Spreadsheet

Langkah pertama: kita buat menu baru di Spreadsheet.

function onOpen() {
  const ui = SpreadsheetApp.getUi();
  ui.createMenu('🔧 Otomasi Kita')
    .addItem('Kirim Email Otomatis', 'kirimEmailOtomatis')
    .addItem('Backup File Drive', 'salinFileKeBackup')
    .addSeparator()
    .addItem('Tentang Add-on Ini', 'tampilkanTentang')
    .addToUi();
}

📘 Penjelasan:

  • Fungsi onOpen() adalah simple trigger — akan berjalan otomatis saat file dibuka.

  • createMenu() membuat menu baru dengan nama “🔧 Otomasi Kita”.

  • addItem(label, functionName) menautkan menu ke fungsi.

  • addToUi() menambahkan menu ke bar Google Sheets.

Setelah disimpan, menu baru akan muncul otomatis setelah kita refresh spreadsheet.

📬 3. Menambahkan Fungsi dari Seri Sebelumnya

Agar menu tersebut berfungsi, kita bisa memanggil fungsi dari seri sebelumnya, misalnya kirimEmailOtomatis() atau salinFileKeBackup().

Misalnya, tambahkan:

function tampilkanTentang() {
  SpreadsheetApp.getUi().alert(
    'Add-on Otomasi Kita\n\nDibuat menggunakan Google Apps Script.\nVersi: 1.0'
  );
}

Sekarang menu “Tentang Add-on Ini” akan menampilkan pesan pop-up sederhana.

🪟 4. Membuat Custom Dialog

Kita bisa menampilkan jendela kecil dengan HTML sederhana untuk pengalaman yang lebih interaktif.

Buat file baru di editor script: File → New → HTML file → beri nama tentang.html

Isi dengan HTML berikut:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body style="font-family: Arial, sans-serif;">
    <h3>🧩 Otomasi Kita</h3>
    <p>Add-on ini membantu kita mengotomatisasi tugas di Google Workspace.</p>
    <p><b>Versi:</b> 1.0</p>
    <button onclick="google.script.host.close()">Tutup</button>
  </body>
</html>


Seri 7: Membuat Add-on Sederhana untuk Google Sheets 1


Lalu tampilkan dialog ini lewat fungsi:

function tampilkanTentang() {
  const html = HtmlService.createHtmlOutputFromFile('tentang')
    .setWidth(350)
    .setHeight(200);
  SpreadsheetApp.getUi().showModalDialog(html, 'Tentang Add-on Ini');
}
Seri 7: Membuat Add-on Sederhana untuk Google Sheets 2

✨ Kini saat kita klik menu “Tentang Add-on Ini”, dialog cantik akan muncul langsung di dalam spreadsheet.

Seri 7: Membuat Add-on Sederhana untuk Google Sheets 3

🧠 5. Membuat Sidebar (Lebih Lanjut)

Kalau ingin tampilan lebih besar di sisi kanan, kita bisa buat sidebar:

function tampilkanSidebar() {
  const html = HtmlService.createHtmlOutputFromFile('tentang')
    .setTitle('Otomasi Kita');
  SpreadsheetApp.getUi().showSidebar(html);
}

Sidebar ini bisa digunakan untuk:

  • Form input (misal: nama, email, tanggal).

  • Log aktivitas.

  • Pengaturan add-on kita.

Seri 7: Membuat Add-on Sederhana untuk Google Sheets 4


🪄 6. Tips: Menghubungkan HTML dan Script

Kita bisa kirim data dari HTML ke Script (dua arah):

  • Dari HTML → Script: google.script.run.namaFungsi()

  • Dari Script → HTML: HtmlService dan Template.

Contoh:

<button onclick="google.script.run.kirimEmailOtomatis()">Kirim Email</button>

Jika fungsi kirimEmailOtomatis() sudah ada di Script, tombol ini akan memanggilnya langsung!

🧩 7. (Opsional) Men-deploy Sebagai Add-on Publik

Jika add-on ini ingin dibagikan ke orang lain:

  1. Buka menu Deploy → Test deployments → Install add-on in this document.

  2. Untuk publikasi ke Marketplace, pilih Deploy → New deployment → Add-on.

  3. Lengkapi informasi deskripsi, logo, dan izin.

Namun, untuk penggunaan internal (misalnya di tim sendiri), cukup gunakan script ini di Spreadsheet dan bagikan akses editornya.

📚 Kesimpulan

Di seri ini kita sudah belajar:

  • Membuat menu kustom di Google Sheets.

  • Menjalankan fungsi dari menu.

  • Menampilkan pop-up dan sidebar HTML.

  • (Opsional) Cara men-deploy add-on ke tim atau publik.

Dengan ini, script kita sudah naik level menjadi fitur tambahan langsung di dalam Google Sheets, lengkap dengan UI dan menu sendiri.

🔜 Seri Selanjutnya

➡️ Seri 8: Menghubungkan Google Apps Script dengan API Eksternal

Kita akan belajar bagaimana cara berkomunikasi dengan layanan luar (misalnya API cuaca, sistem internal, atau chatbot) menggunakan UrlFetchApp.
Ini adalah langkah besar untuk membuat integrasi dan otomatisasi yang lebih canggih.

Label:

Komentar

Posting Komentar