Cara Membuat Bar Sisi dalam Helaian Google

Bar sisi ialah elemen antara muka pengguna (kawasan menegak kecil) yang muncul sama ada di sebelah kiri atau kanan tetingkap yang lebih besar atau pada skrin pengguna untuk memaparkan maklumat berkaitan atau senarai pilihan atau pilihan navigasi.

Bar sisi dalam helaian Google ialah panel antara muka pengguna yang dipaparkan di sebelah kanan Helaian Google. Google menyediakan editor skrip terbina yang dipanggil Apps Script yang boleh mencipta pelbagai alat tambah dan elemen untuk aplikasi G-Suite. Ia juga boleh digunakan untuk membina bar sisi tersuai anda sendiri dalam helaian Google.

Artikel ini akan menunjukkan kepada anda cara membuat bar sisi tersuai dalam Helaian Google menggunakan editor Skrip Google Apps.

Mencipta Bar Sisi dalam Helaian Google menggunakan Skrip Apl

Jika anda ingin membuat bar sisi tersuai, anda perlu memasukkan dan menjalankan kod tertentu dalam editor Skrip Apps. Kemudian anda boleh membina widget anda sendiri dalam bar sisi menggunakan kod HTML, CSS dan Javascript.

Mula-mula, buka helaian Google. Dalam menu helaian Google, klik 'Alat' dan pilih 'Editor skrip'.

Itu akan membuka editor Apps Script dalam tab baharu penyemak imbas anda di mana anda boleh menulis kod antara muka pengguna anda.

Tulis kod berikut dalam halaman Code.gs:

function onOpen() { SpreadsheetApp.getUi() .createMenu('My New Menu') .addItem('My sidebar 1', 'showSidebar') .addToUi(); } function showSidebar() { var html = HtmlService.createHtmlOutputFromFile('Sidebar') .setTitle('Calculation Sidebar'); SpreadsheetApp.getUi() .showSidebar(html); }

Dalam kod skrip Code.gs di atas, fungsi OnOpen() mencipta menu tersuai yang dipanggil 'Menu Baharu Saya' dalam bar menu helaian google. Menu itu akan mengandungi item menu yang dipanggil 'Bar sisi saya-1'. Apabila anda mengklik item menu ini, fungsi showAdminSidebar() (bahagian kedua kod) akan dijalankan dan bar sisi akan ditunjukkan di sebelah kanan tetingkap helaian Google.

Seterusnya, kita perlu mencipta fail HTML dalam editor Skrip, dan kemudian dengan fail ini, anda boleh mencipta bar sisi.

Untuk mencipta fail HTML, klik ikon tambah (+) di sebelah Fail dalam editor Skrip Apps dan pilih 'HTML'.

Ini akan mencipta fail HTML di bawah Code.gs. Namakan semula fail sebagai 'Sidebar'. Nama ini hendaklah sama seperti yang ditambahkan dalam fungsi showSidebar() (var html = HtmlService.createHtmlOutputFromFile(‘Sidebar’)).

Tulis kod berikut dalam bahagian fail Sidebar.html:

Ini ialah Sidebar baharu saya

Kod di atas memaparkan rentetan teks 'Ini Bar Sisi baharu saya' dan butang 'Tutup' yang menutup bar sisi apabila diklik padanya.

Selepas anda selesai menulis kod di atas dalam bahagian Sidebar.html, ia harus mengandungi kod berikut:

Ini ialah Sidebar baharu saya.

Tangkapan skrin:

Apabila anda selesai memasukkan kedua-dua kod, simpan projek dengan mengklik ikon simpan dalam bar alat (lihat tangkapan skrin di bawah). Kemudian jalankan fungsi dengan mengklik ikon 'Run'.

Sama ada anda menjalankan skrip di sini atau anda memilih item menu tersuai dalam bar alat helaian Google (buat pertama kali), Google akan meminta anda membenarkan skrip untuk dijalankan. Memandangkan anda menjalankan widget tersuai pihak ketiga, google akan meminta kebenaran anda. Sebaik sahaja anda membenarkan skrip, ia akan memaparkan bar sisi dalam helaian Google anda.

Cara Membenarkan Kod Skrip Apps di Google

Untuk membenarkan skrip tersuai anda ikuti langkah berikut:

Sebaik sahaja anda menjalankan skrip, Google akan meminta anda memilih akaun google anda. Selepas anda memilihnya, pop timbul kecil akan muncul, dalam klik itu 'Semak kebenaran'.

Satu lagi pop timbul akan muncul, di sini pilih 'Show Advanced' dan klik 'Go to Untitled project (unsafe)' (Ia akan menunjukkan nama projek anda).

Dalam tetingkap seterusnya, klik 'Benarkan' dan helaian google akan menjalankan skrip anda.

Setelah anda melakukannya, kembali ke helaian Google anda dan muat semula helaian itu. Menu tersuai baharu (Menu Baharu Saya) akan ditambahkan pada bar alat helaian Google anda, yang kami tambah melalui skrip Code.gs. Klik 'Menu Baharu Saya' dan pilih item menu 'Bar sisi saya 1' untuk memaparkan bar sisi.

Kini bar sisi tersuai anda akan dipaparkan di sebelah kanan helaian google anda dengan teks dan butang yang kami tambahkan (seperti ditunjukkan di bawah). Apabila anda mengklik butang, bar sisi akan ditutup.

Nah, kini anda tahu cara membina bar sisi anda sendiri dalam helaian Google.

Kategori: Apl