Okna i paski boczne dla dodatku Edytor

W przypadku większości dodatku do edytora okna i panele paska bocznego stanowią główne interfejsy tego dodatku. Oba typy danych można w pełni dostosować za pomocą standardowego kodu HTML i CSS. Dodatkowo funkcje Apps Script można uruchamiać, gdy użytkownik wejdzie w interakcję z paskiem bocznym lub oknem, używając modelu komunikacji klient-serwer dostępnego w Apps Script. Dodatek może definiować wiele pasków bocznych i okien, ale może wyświetlać tylko jeden naraz.

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

Okna

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

Okna dodatków tworzysz tak samo jak niestandardowe okna w Apps Script. Ogólna zalecana procedura jest taka:

  1. Utwórz plik projektu skryptu, który określa strukturę HTML okna, CSS i zachowanie JavaScript po stronie klienta. Podczas definiowania okna zapoznaj się ze wskazówkami dotyczącymi stylu dodatków do edytora.
  2. W kodzie po stronie serwera, w którym ma się otworzyć okno, wywołaj HtmlService.createHtmlOutputFromFile(filename), aby utworzyć obiekt HtmlOutput reprezentujący to okno. Jeśli używasz szablonu HTML, możesz wywołać metodę HtmlService.createTemplateFromFile(filename), aby wygenerować szablon, a następnie HtmlTemplate.evaluate() przekonwertować go na obiekt HtmlOutput.
  3. Wywołaj Ui.showModalDialog(htmlOutput, dialogTitle), aby wyświetlić okno używające tego HtmlOutput.

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

Okna przy otwarciu pliku

Okna otwierające pliki to gotowe okna, w których użytkownicy mogą wybierać pliki z Dysku Google. Możesz dodać do dodatku okno otwierania pliku bez konieczności jego projektowania, 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 otwierane przy otwarciu pliku.

Paski boczne to panele widoczne po prawej stronie interfejsu edytora. Są one najczęściej używanym interfejsem dodatku. W przeciwieństwie do okien możesz nadal wchodzić w interakcje z pozostałymi elementami interfejsu edytora, gdy otwarty jest pasek boczny. Paski boczne mają stałą szerokość, ale możesz dostosowywać ich zawartość.

Pasek boczny dodatków tworzy się w taki sam sposób jak niestandardowe paski boczne Apps Script. Ogólna zalecana procedura jest taka:

  1. Utwórz plik projektu skryptu, który definiuje strukturę HTML paska bocznego, funkcje CSS i zachowanie JavaScript po stronie klienta. Podczas definiowania paska bocznego zapoznaj się ze wskazówkami dotyczącymi stylu dodatków do edytora.
  2. W kodzie po stronie serwera, w którym chcesz otworzyć pasek boczny, wywołaj HtmlService.createHtmlOutputFromFile(filename), aby utworzyć obiekt HtmlOutput reprezentujący pasek boczny. Jeśli używasz szablonu HTML, możesz wywołać metodę HtmlService.createTemplateFromFile(filename), aby wygenerować szablon, a następnie HtmlTemplate.evaluate() przekonwertować go na obiekt HtmlOutput.

  3. Wywołaj Ui.showSidebar(htmlOutput), aby wyświetlić pasek boczny za pomocą tego komponentu HtmlOutput.

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