Okna dialogowe i paski boczne w dodatku Editor

W przypadku większości dodatków do edytora głównymi interfejsami użytkownika są okna dialogowe i panele boczne. Oba te elementy można w pełni dostosować za pomocą standardowego kodu HTML i CSS. Możesz też użyć modelu komunikacji klient-serwer Google Apps Script, aby uruchamiać funkcje Apps Script, gdy użytkownik wchodzi w interakcję z panelem bocznym lub oknem. Dodatek może definiować wiele paneli bocznych i okien, ale może wyświetlać tylko jedno z nich naraz.

Jeśli chcesz uniemożliwić użytkownikowi interakcję z edytorem, dopóki nie dokona wyboru w interfejsie dodatku, użyj okna dialogowego. W przeciwnym razie użyj paska bocznego.

Okna

Okna dialogowe to panele okien, które nakładają się na główną treść edytora. Okna Apps Script są modalne. Gdy są otwarte, użytkownik nie może wchodzić w interakcję z innymi elementami interfejsu edytora. Możesz dostosować treść i rozmiar okien.

Okna dodatków tworzy się w ten sam sposób co okna niestandardowe w Apps Script. Ogólna procedura wygląda tak:

  1. Utwórz plik projektu skryptu, który definiuje strukturę HTML okna, CSS i działanie JavaScript po stronie klienta. Zapoznaj się z wytycznymi dotyczącymi stylu dodatków do edytora.
  2. W kodzie po stronie serwera, w miejscu, w którym chcesz otworzyć okno, wywołaj funkcję HtmlService.createHtmlOutputFromFile aby utworzyć obiekt HtmlOutput reprezentujący okno. Jeśli używasz szablonowego kodu HTML, możesz wywołać funkcję HtmlService.createTemplateFromFile, aby wygenerować szablon, a potem funkcję HtmlTemplate.evaluate, aby przekonwertować go na obiekt HtmlOutput.
  3. Wywołaj Ui.showModalDialog, aby wyświetlić okno za pomocą tego HtmlOutput.

Gdy okna dialogowe są otwarte, nie wstrzymują skryptu po stronie serwera. JavaScript po stronie klienta może wykonywać asynchroniczne wywołania po stronie serwera za pomocą funkcji google.script.run i powiązanych funkcji obsługi. Więcej informacji znajdziesz w artykule Komunikacja między klientem a serwerem.

Okna otwierania plików

Okna otwierania plików to gotowe okna, które umożliwiają użytkownikom wybieranie plików z Dysku Google. Możesz dodać do dodatku okno otwierania pliku bez konieczności projektowania go, ale wymaga to dodatkowej konfiguracji. Aby włączyć interfejs Google Picker API, musisz też mieć dostęp do projektu Cloud Platform dodatku.

Więcej informacji znajdziesz w artykule Okna otwierania plików.

Paski boczne to panele, które pojawiają się po prawej stronie interfejsu edytora. Są one najczęstszym typem interfejsu dodatku. W przeciwieństwie do okien dialogowych możesz nadal korzystać z innych elementów interfejsu edytora, gdy otwarty jest pasek boczny. Paski boczne mają stałą szerokość, ale możesz dostosować ich zawartość.

Paski boczne dodatków tworzy się w taki sam sposób jak niestandardowe paski boczne w Apps Script. Ogólna procedura wygląda tak:

  1. Utwórz plik projektu skryptu, który definiuje strukturę HTML paska bocznego, CSS i działanie JavaScript po stronie klienta. Podczas definiowania paska bocznego zapoznaj się z wytycznymi dotyczącymi stylu dodatków do edytora.

  2. W kodzie po stronie serwera, w miejscu, w którym chcesz otworzyć pasek boczny, wywołaj HtmlService.createHtmlOutputFromFile aby utworzyć obiekt HtmlOutput reprezentujący pasek boczny. Jeśli używasz szablonowego kodu HTML, możesz wywołać funkcję HtmlService.createTemplateFromFile, aby wygenerować szablon, a potem funkcję HtmlTemplate.evaluate, aby przekonwertować go na obiekt HtmlOutput.

    Paski boczne dodatków mają stałą szerokość 300 pikseli, której nie można zmienić, wywołując HtmlOutput.setWidth.

  3. Zadzwoń pod numer Ui.showSidebar, aby wyświetlić pasek boczny za pomocą tego HtmlOutput.

Paski boczne nie wstrzymują skryptu po stronie serwera, gdy są otwarte. JavaScript po stronie klienta może wykonywać asynchroniczne wywołania po stronie serwera za pomocą funkcji google.script.run i powiązanych funkcji obsługi. Więcej informacji znajdziesz w artykule Komunikacja między klientem a serwerem.