Skrip yang terikat dengan Google Dokumen, Spreadsheet, atau Formulir dapat menampilkan beberapa jenis elemen antarmuka pengguna — pemberitahuan dan prompt bawaan, serta dialog dan sidebar yang berisi Halaman layanan HTML. Biasanya, elemen-elemen ini dibuka dari item menu. (Perhatikan bahwa di Google Formulir, elemen antarmuka pengguna hanya terlihat oleh editor yang membuka formulir untuk mengubahnya, bukan untuk pengguna yang membuka formulir untuk merespons.)
Dialog pemberitahuan
Pemberitahuan adalah kotak dialog bawaan yang
terbuka di dalam Google Docs, Sheets,
Slide, atau editor Formulir. Asisten menampilkan pesan dan "OK" tombol; judul dan
tombol alternatif bersifat opsional. Hal ini mirip dengan memanggil
window.alert()
di JavaScript sisi klien dalam {i>browser <i}web.
Pemberitahuan menangguhkan skrip sisi server saat dialog terbuka. Naskah dilanjutkan setelah pengguna menutup dialog, tetapi JDBC koneksi tidak akan dipertahankan selama penangguhan.
Seperti yang ditunjukkan dalam contoh di bawah, Google Dokumen, Formulir, Slide,
dan Spreadsheet, semua menggunakan metode Ui.alert()
, yang
tersedia dalam tiga varian. Untuk mengganti "OK" default , teruskan
nilai dari enum Ui.ButtonSet
sebagai argumen buttons
. Untuk mengevaluasi tombol mana yang diklik pengguna, bandingkan
nilai hasil untuk alert()
ke fungsi
Enum Ui.Button
.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.createMenu('Custom Menu')
.addItem('Show alert', 'showAlert')
.addToUi();
}
function showAlert() {
var ui = SpreadsheetApp.getUi(); // Same variations.
var result = ui.alert(
'Please confirm',
'Are you sure you want to continue?',
ui.ButtonSet.YES_NO);
// Process the user's response.
if (result == ui.Button.YES) {
// User clicked "Yes".
ui.alert('Confirmation received.');
} else {
// User clicked "No" or X in the title bar.
ui.alert('Permission denied.');
}
}
Dialog perintah
{i>Prompt<i} adalah kotak dialog bawaan yang
terbuka di dalam Google Docs, Sheets,
Slide, atau editor Formulir. Ini akan menampilkan pesan, kolom input teks, dan "OK"
tombol; judul dan tombol alternatif bersifat opsional. Hal ini mirip dengan memanggil
window.prompt()
di JavaScript sisi klien dalam {i>browser<i} web.
Perintah untuk menangguhkan skrip sisi server saat dialog terbuka. Naskah dilanjutkan setelah pengguna menutup dialog, tetapi JDBC sambungan tidak akan dipertahankan selama penangguhan.
Seperti ditunjukkan dalam contoh di bawah, Google Dokumen — Formulir, Slide, dan Spreadsheet menggunakan metode Ui.prompt()
,
yang tersedia dalam tiga varian. Untuk mengganti "OK" default tombol,
meneruskan nilai dari Ui.ButtonSet
enum sebagai argumen buttons
. Untuk mengevaluasi respons pengguna, rekam
tampilkan nilai untuk prompt()
, lalu panggil
PromptResponse.getResponseText()
untuk mengambil input pengguna, dan membandingkan nilai yang ditampilkan untuk
PromptResponse.getSelectedButton()
ke enum Ui.Button
.
function onOpen() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.createMenu('Custom Menu')
.addItem('Show prompt', 'showPrompt')
.addToUi();
}
function showPrompt() {
var ui = SpreadsheetApp.getUi(); // Same variations.
var result = ui.prompt(
'Let\'s get to know each other!',
'Please enter your name:',
ui.ButtonSet.OK_CANCEL);
// Process the user's response.
var button = result.getSelectedButton();
var text = result.getResponseText();
if (button == ui.Button.OK) {
// User clicked "OK".
ui.alert('Your name is ' + text + '.');
} else if (button == ui.Button.CANCEL) {
// User clicked "Cancel".
ui.alert('I didn\'t get your name.');
} else if (button == ui.Button.CLOSE) {
// User clicked X in the title bar.
ui.alert('You closed the dialog.');
}
}
Dialog kustom
Dialog kustom dapat menampilkan pengguna layanan HTML antarmuka di dalam editor Google Dokumen, Spreadsheet, Slide, atau Formulir.
Dialog kustom tidak menangguhkan skrip sisi server saat dialog terbuka.
Komponen sisi klien dapat melakukan panggilan asinkron ke skrip sisi server
menggunakan google.script
API
untuk antarmuka layanan HTML.
Dialog bisa tertutup sendiri dengan memanggil
google.script.host.close()
di sisi klien dari
antarmuka layanan HTML. Dialog tidak dapat ditutup dengan
antarmuka lain, hanya
oleh pengguna atau dirinya sendiri.
Seperti yang ditunjukkan dalam contoh di bawah, Google Dokumen, Formulir, Slide, dan Spreadsheet menggunakan metode Ui.showModalDialog()
untuk membuka dialog.
Code.gs
function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Custom Menu') .addItem('Show dialog', 'showDialog') .addToUi(); } function showDialog() { var html = HtmlService.createHtmlOutputFromFile('Page') .setWidth(400) .setHeight(300); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showModalDialog(html, 'My custom dialog'); }
Page.html
Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />
Sidebar kustom
Sidebar dapat menampilkan pengguna layanan HTML antarmuka di dalam editor Google Dokumen, Formulir, Slide, dan Spreadsheet.
Sidebar tidak menangguhkan skrip sisi server saat dialog terbuka. Tujuan
komponen sisi klien dapat melakukan panggilan asinkron ke skrip sisi server
menggunakan google.script
API
untuk antarmuka layanan HTML.
Sidebar dapat menutup sendiri dengan memanggil
google.script.host.close()
di sisi klien dari
antarmuka layanan HTML. Sidebar tidak dapat ditutup
oleh antarmuka lain, hanya
oleh pengguna atau dirinya sendiri.
Seperti yang ditunjukkan dalam contoh di bawah, Google Dokumen, Formulir, Slide, dan Spreadsheet menggunakan metode Ui.showSidebar()
untuk membuka sidebar.
Code.gs
function onOpen() { SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .createMenu('Custom Menu') .addItem('Show sidebar', 'showSidebar') .addToUi(); } function showSidebar() { var html = HtmlService.createHtmlOutputFromFile('Page') .setTitle('My custom sidebar'); SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp. .showSidebar(html); }
Page.html
Hello, world! <input type="button" value="Close" onclick="google.script.host.close()" />
Dialog pembukaan file
Alat Pilih Google adalah "file-open" dialog untuk informasi yang disimpan di Server Google, termasuk Google Drive, Google Penelusuran Gambar, Google Video Penelusuran, dan lainnya.
Seperti yang ditunjukkan dalam contoh di bawah, JavaScript API sisi klien Pemilih dapat digunakan di layanan HTML untuk membuat dialog kustom yang memungkinkan pengguna memilih file yang sudah ada atau mengunggah yang baru, lalu meneruskan pilihan itu kembali ke skrip Anda untuk digunakan lebih lanjut.
Untuk mengaktifkan Pemilih dan mendapatkan kunci API, ikuti petunjuk berikut:
- Pastikan project skrip Anda menggunakan project GCP standar.
- Mengaktifkan "Google Picker API" di project Google Cloud Anda.
- Selagi project Google Cloud Anda masih terbuka, pilih APIs & Services, lalu klik Credentials.
- Klik Create credentials > API key. Tindakan ini akan membuat kunci, tetapi Anda harus mengedit kunci tersebut untuk menambahkan pembatasan aplikasi dan pembatasan API ke kunci tersebut.
- Dalam dialog kunci API, klik Close.
- Di samping kunci API yang Anda buat, klik More
> Edit API key.
Di bagian Application restrictions, selesaikan langkah-langkah berikut:
- Pilih Perujuk HTTP (situs).
- Di bagian Pembatasan situs, klik Tambahkan item.
- Klik Perujuk dan masukkan
*.google.com
. - Tambahkan item lain dan masukkan
*.googleusercontent.com
sebagai perujuk. - Klik Selesai.
Di bagian API restrictions, selesaikan langkah-langkah berikut:
- Pilih Restrict key.
Di bagian Select APIs, pilih Google Picker API lalu klik OK.
Catatan: Google Picker API tidak muncul kecuali jika Anda telah mengaktifkannya karena daftar tersebut hanya menampilkan API yang telah diaktifkan untuk proyek.
Di bagian API key, klik Copy to clipboard
.
Di bagian bawah, klik Simpan.