Okna i paski boczne dodatku dodatku Edytor

W przypadku większości dodatku do edytora okna i panele na pasku bocznym są głównymi interfejsami tego dodatku. Oba te elementy można w pełni dostosować za pomocą standardowego kodu HTML i CSS. Wykorzystując model komunikacji klient-serwer dostępny w języku Apps Script, możesz uruchamiać funkcje Apps Script, gdy użytkownik wejdzie w interakcję z paskiem bocznym lub oknem. Dodatek może definiować wiele pasków bocznych i okien, ale może wyświetlać tylko jeden z nich naraz.

Jeśli chcesz uniemożliwić użytkownikowi interakcję z edytorem do czasu dokonania 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. Gdy są otwarte, użytkownik nie może wchodzić w interakcje z innymi elementami interfejsu edytora. Możesz dostosować zawartość i rozmiar okien.

Okna dodatków tworzysz w taki sam sposób jak niestandardowe okna Apps Script. Ogólna zalecana procedura jest taka:

  1. Utwórz plik projektu skryptu, który określa strukturę HTML okna, CSS i działanie JavaScript po stronie klienta. Definiując okno, postępuj zgodnie ze wskazówkami dotyczącymi stylu dodatków do edytora.
  2. W kodzie po stronie serwera, w którym chcesz otworzyć okno, wywołaj HtmlService.createHtmlOutputFromFile(filename), aby utworzyć obiekt HtmlOutput reprezentujący to okno. Jeśli korzystasz z szablonu HTML, możesz wywołać metodę HtmlService.createTemplateFromFile(filename), aby wygenerować szablon, a następnie HtmlTemplate.evaluate(), aby przekonwertować go na obiekt HtmlOutput.
  3. Wywołaj Ui.showModalDialog(htmlOutput, dialogTitle), aby wyświetlić okno przy użyciu tego elementu: 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.

Okna otwierania plików

Okna otwierania plików to gotowe okna, które pozwalają użytkownikom wybrać 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 spotykanym typem interfejsu dodatków. W przeciwieństwie do okien dialogowych możesz nadal wchodzić w interakcje z pozostałymi elementami interfejsu edytora, gdy pasek boczny jest otwarty. Paski boczne mają stałą szerokość, ale możesz dostosowywać ich zawartość.

Pasek boczny dodatków możesz utworzyć w taki sam sposób jak niestandardowe paski boczne w Apps Script. Ogólna zalecana procedura jest taka:

  1. Utwórz plik projektu skryptu, który określa strukturę HTML paska bocznego, kod CSS i działanie JavaScript po stronie klienta. Definiując pasek boczny, postępuj zgodnie 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 korzystasz z szablonu HTML, możesz wywołać metodę HtmlService.createTemplateFromFile(filename), aby wygenerować szablon, a następnie HtmlTemplate.evaluate(), aby przekonwertować go na obiekt HtmlOutput.

  3. Wywołaj Ui.showSidebar(htmlOutput), aby wyświetlić pasek boczny za pomocą tego elementu 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.