Google Dokümanlar'a bağlı komut dosyaları, E-Tablolar veya Formlar, çeşitli türlerde kullanıcı arayüzü öğeleri görüntüleyebilir: Önceden oluşturulmuş uyarılar ve istemlerin yanı sıra özel öğeler içeren iletişim kutuları ve kenar çubukları HTML hizmeti sayfaları. Genellikle bu öğeler menü öğelerinden açılır. (Google Formlar'da kullanıcı arayüzü öğeleri yalnızca formu açan düzenleyen tarafından görülebilir. için kullanmaları gerektiğini unutmayın.)
Uyarı iletişim kutuları
Uyarı, Google Dokümanlar, E-Tablolar, E-Tablolar ve Slaytlar gibi
Slaytlar'ı ya da Formlar düzenleyiciyi tıklayın. Bir mesaj ve "Tamam" görüntülenir düğme; bir başlık ve
alternatif düğmeler isteğe bağlıdır. Telefon etmeye benzer
window.alert()
JavaScript'teki istemci taraflı JavaScript'i kullanır.
Uyarılar, iletişim kutusu açıkken sunucu tarafı komut dosyasını askıya alır. Komut dosyası Kullanıcı iletişim kutusunu kapattıktan sonra devam eder, ancak JDBC bağlantıları askıya alma boyunca devam etmez.
Aşağıdaki örnekte gösterildiği gibi Google Dokümanlar, Formlar, Slaytlar,
ve E-Tablolar'ın tamamı Ui.alert()
yöntemini kullanmaktadır.
üç çeşit olarak sunulmaktadır. Varsayılan "Tamam" ayarını geçersiz kılmak için düğmesi, bir
Ui.ButtonSet
sıralamasındaki değer
buttons
bağımsız değişkeni olarak kullanılır. Kullanıcının hangi düğmeyi tıkladığını değerlendirmek için
alert()
için döndürülen değer
Ui.Button
sıralaması
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.');
}
}
İstem iletişim kutuları
İstem, Google Dokümanlar, E-Tablolar veya Google Dokümanlar gibi
Slaytlar'ı ya da Formlar düzenleyiciyi tıklayın. Bir mesaj, metin giriş alanı ve "Tamam"
düğme; Başlık ve alternatif düğmeler isteğe bağlıdır. Telefon etmeye benzer
window.prompt()
JavaScript'teki istemci taraflı JavaScript'i kullanır.
İstemler, iletişim kutusu açıkken sunucu tarafı komut dosyasını askıya alır. Komut dosyası Kullanıcı iletişim kutusunu kapattıktan sonra devam eder, ancak JDBC bağlantıları askıya alma boyunca devam etmez.
Aşağıdaki örnekte gösterildiği gibi Google Dokümanlar, Formlar, Slaytlar ve E-Tablolar'ın tümü Ui.prompt()
yöntemini kullanır.
3 varyant mevcuttur. Varsayılan "Tamam" ayarını geçersiz kılmak için düğmesi,
Ui.ButtonSet
öğesinden bir değer iletin.
enum değerini buttons
bağımsız değişkeni olarak kullanır. Kullanıcının yanıtını değerlendirmek için
prompt()
için değer döndür, ardından çağrı
PromptResponse.getResponseText()
kullanıcının girişini almak ve
PromptResponse.getSelectedButton()
değerini Ui.Button
sıralamasına ekler.
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.');
}
}
Özel iletişim kutuları
Özel bir iletişim kutusu, bir HTML hizmeti kullanıcısını gösterebilir Google Dokümanlar, E-Tablolar, Slaytlar veya Formlar düzenleyicisindeki arayüzde kullanılabilir.
Özel iletişim kutuları, iletişim kutusu açıkken sunucu tarafı komut dosyasını askıya almaz.
İstemci tarafı bileşeni, sunucu tarafı komut dosyasına eşzamansız çağrılar yapabilir
google.script
API'yi kullanarak
API'lerden birini kullanın.
İletişim kutusu
google.script.host.close()
bir HTML hizmet arayüzünün istemci tarafında gösterilir. İletişim kutusu
diğer arayüzleri kapsamaz.
Aşağıdaki örnekte gösterildiği gibi Google Dokümanlar, Formlar, Slaytlar ve E-Tablolar'ın tümü, iletişim kutusunu açmak için Ui.showModalDialog()
yöntemini kullanır.
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()" />
Özel kenar çubukları
Kenar çubuğu, bir HTML hizmeti kullanıcısını görüntüleyebilir Google Dokümanlar, Formlar, Slaytlar ve E-Tablolar düzenleyicisindeki kullanıcı arayüzünü içerir.
Kenar çubukları, iletişim kutusu açıkken sunucu tarafı komut dosyasını askıya almaz. İlgili içeriği oluşturmak için kullanılan
istemci tarafı bileşeni, sunucu tarafı komut dosyasına eşzamansız çağrılar yapabilir
google.script
API'yi kullanarak
API'lerden birini kullanın.
Kenar çubuğu,
google.script.host.close()
bir HTML hizmet arayüzünün istemci tarafında gösterilir. Kenar çubuğu kapatılamaz
diğer arayüzler tarafından, yalnızca kullanıcı veya kendisi tarafından.
Aşağıdaki örnekte gösterildiği gibi Google Dokümanlar, Formlar, Slaytlar ve E-Tablolar'ın tümü, kenar çubuğunu açmak için Ui.showSidebar()
yöntemini kullanır.
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()" />
Dosya açma iletişim kutuları
Google Picker, "dosya açma" etkinliğidir depolanan bilgiler için iletişim kutusu Google Drive, Google Görsel Arama, Google Video dahil Google sunucuları Arama ve daha fazlası.
Aşağıdaki örnekte gösterildiği gibi, Picker'ın istemci tarafı JavaScript API'si HTML hizmetinde gösterilen iletişim kutusunu kullanıcılar mevcut dosyaları seçer veya yeni dosyalar yükler, ardından da bu seçimi komut dosyanızı kontrol edin.
Seçici'yi etkinleştirmek ve bir API anahtarı almak için şu talimatları uygulayın:
- Komut dosyası projenizin standart GCP projesi kullandığını doğrulayın.
- "Google Picker API"sini etkinleştirin in Google Cloud projenize ekleyin.
- Google Cloud projeniz hâlâ açıkken API'ler ve Hizmetler, ardından Credentials'ı (Kimlik Bilgisi) tıklayın.
- Kimlik bilgileri oluştur > API anahtarı'nı tıklayın. Bu işlem, anahtarı oluşturur ancak anahtara hem uygulama kısıtlamaları hem de bir API kısıtlaması eklemek için anahtarı düzenlemeniz gerekir.
- API anahtarı iletişim kutusunda Kapat'ı tıklayın.
- Oluşturduğunuz API anahtarının yanında, Diğer
> API anahtarını düzenle'yi tıklayın.
Uygulama kısıtlamaları bölümünde aşağıdaki adımları tamamlayın:
- HTTP yönlendirenler (web siteleri) seçeneğini belirleyin.
- Web sitesi kısıtlamaları bölümünde Öğe ekleyin'i tıklayın.
- Yönlendiren'i tıklayın ve
*.google.com
değerini girin. - Başka bir öğe ekleyin ve yönlendiren olarak
*.googleusercontent.com
değerini girin. - Bitti'yi tıklayın.
API kısıtlamaları bölümünde, aşağıdaki adımları tamamlayın:
- Anahtarı kısıtla'yı seçin.
API'leri seçin bölümünde Google Picker API'yi seçin ve Tamam'ı tıklayın.
Not: Google Picker API, siz etkinleştirmediğiniz sürece görünmez çünkü listede yalnızca Cloud için etkinleştirilmiş API'ler belirler.
API anahtarı altında, Panoya kopyala simgesini
tıklayın.
Alt taraftaki Kaydet'i tıklayın.