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 paska bocznego. 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 pasków 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 taki sam sposób jak 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 zachowanie JavaScript po stronie klienta. Zapoznaj się z wytycznymi dotyczącymi stylu dodatku Edytor.
  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 HTML z szablonu, możesz wywołać funkcję HtmlService.createTemplateFromFile, aby wygenerować szablon, a potem 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. Musisz też mieć dostęp do projektu Cloud Platform dodatku, aby włączyć interfejs Google Picker API.

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 HTML z szablonu, możesz wywołać funkcję HtmlService.createTemplateFromFile, aby wygenerować szablon, a potem 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 funkcję HtmlOutput.setWidth.

  3. Zadzwoń pod numer Ui.showSidebar, aby wyświetlić pasek boczny za pomocą tego numeru 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.