Bilah sisi adalah elemen antarmuka pengguna (area vertikal kecil) yang muncul di kiri atau kanan jendela yang lebih besar atau di layar pengguna untuk menampilkan informasi terkait atau daftar pilihan atau opsi navigasi.
Bilah sisi di Google Sheets adalah panel antarmuka pengguna yang ditampilkan di sisi kanan Google Sheets. Google menyediakan editor skrip built-in yang disebut Apps Script yang dapat membuat berbagai add-on dan elemen untuk aplikasi G-Suite. Itu juga dapat digunakan untuk membuat bilah sisi khusus Anda sendiri di lembar Google.
Artikel ini akan menunjukkan cara membuat bilah sisi khusus di Google Spreadsheet menggunakan editor Skrip Google Apps.
Membuat Bilah Sisi di Google Spreadsheet menggunakan Skrip Aplikasi
Jika Anda ingin membuat bilah sisi khusus, Anda harus memasukkan dan menjalankan kode tertentu di editor Skrip Aplikasi. Kemudian Anda dapat membuat widget Anda sendiri di bilah sisi menggunakan kode HTML, CSS, dan Javascript.
Pertama, buka lembar Google. Di menu lembar Google, klik 'Alat' dan pilih 'Editor skrip'.
Itu akan membuka editor Apps Script di tab baru browser Anda di mana Anda dapat menulis kode antarmuka pengguna Anda.
Tulis kode berikut di halaman Code.gs:
function onOpen() { SpreadsheetApp.getUi() .createMenu('Menu Baru Saya') .addItem('Bilah sisi saya 1', 'showSidebar') .addToUi(); } function showSidebar() { var html = HtmlService.createHtmlOutputFromFile('Sidebar') .setTitle('Calculation Sidebar'); SpreadsheetApp.getUi() .showSidebar(html); }
Dalam kode skrip Code.gs di atas, fungsi OnOpen() membuat menu khusus yang disebut 'Menu Baru Saya' di bilah menu google sheets. Menu itu akan berisi item menu yang disebut 'My sidebar-1'. Saat Anda mengklik item menu ini, fungsi showAdminSidebar() (bagian kedua dari kode) akan dijalankan dan bilah sisi akan ditampilkan di sisi kanan jendela lembar Google.
Selanjutnya, kita perlu membuat file HTML di Script editor, dan kemudian dengan file ini, Anda dapat membuat sidebar.
Untuk membuat file HTML, klik ikon plus (+) di sebelah File di editor Apps Script dan pilih 'HTML'.
Ini akan membuat file HTML di bawah Code.gs. Ganti nama file sebagai 'Bilah Sisi'. Nama ini harus sama dengan yang ditambahkan di fungsi showSidebar() (var html = HtmlService.createHtmlOutputFromFile('Sidebar')).
Tulis kode berikut di dalam bagian file Sidebar.html:
Ini adalah Sidebar baru saya
Kode di atas menampilkan string teks 'Ini adalah bilah sisi baru saya' dan tombol 'Tutup' yang menutup bilah sisi saat diklik.
Setelah Anda selesai menulis kode di atas di bagian Sidebar.html, seharusnya berisi kode berikut:
Ini adalah Sidebar baru saya.
Tangkapan layar:
Setelah selesai memasukkan kedua kode, simpan proyek dengan mengklik ikon simpan di bilah alat (lihat tangkapan layar di bawah). Kemudian jalankan fungsinya dengan mengklik ikon 'Jalankan'.
Apakah Anda menjalankan skrip di sini atau Anda memilih item menu khusus di bilah alat lembar Google (untuk pertama kalinya), Google akan meminta Anda untuk mengotorisasi skrip untuk dijalankan. Karena Anda menjalankan widget khusus pihak ketiga, google akan meminta otorisasi Anda. Setelah Anda mengotorisasi skrip, itu akan menampilkan bilah sisi di dalam lembar Google Anda.
Cara Mengotorisasi Kode Skrip Aplikasi di Google
Untuk mengotorisasi skrip khusus Anda, ikuti langkah-langkah berikut:
Setelah Anda menjalankan skrip, Google akan meminta Anda untuk memilih akun google Anda. Setelah Anda memilihnya, sebuah pop-up kecil akan muncul, di klik 'Tinjau izin'.
Pop-up lain akan muncul, di sini pilih 'Show Advanced' dan klik 'Go to Untitled project (unsafe)' (Ini akan menampilkan nama proyek Anda).
Di jendela berikutnya, klik 'Izinkan' dan lembar google akan menjalankan skrip Anda.
Setelah Anda selesai melakukannya, kembali ke lembar Google Anda dan segarkan. Menu kustom baru (Menu Baru Saya) akan ditambahkan ke bilah alat lembar Google Anda, yang kami tambahkan melalui skrip Code.gs. Klik 'Menu Baru Saya' dan pilih item menu 'Bilah sisi saya 1' untuk menampilkan bilah sisi.
Sekarang bilah sisi khusus Anda akan muncul di sisi kanan lembar google Anda dengan teks dan tombol yang kami tambahkan (seperti yang ditunjukkan di bawah). Saat Anda mengklik tombol, bilah sisi akan ditutup.
Nah, sekarang Anda tahu cara membuat bilah sisi Anda sendiri di lembar Google.