Okna dialogowe i paski boczne w dodatku Editor

W przypadku większości dodatków do edytora, okna dialogowe i panele boczne są głównymi interfejsami użytkownika. 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 paskiem bocznym lub oknem dialogowym. Dodatek może definiować wiele pasków bocznych i okien dialogowych, ale może wyświetlać tylko 1 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 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ć zawartość i rozmiar okien.

Okna dodatków tworzy się tak samo jak Apps Script niestandardowe okna. Ogólna procedura jest następująca:

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

Gdy okna są otwarte, nie wstrzymują skryptu po stronie serwera. 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 sekcji 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ć okno otwierania plików do dodatku 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 sekcji 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, gdy pasek boczny jest otwarty, możesz nadal wchodzić w interakcję z innymi elementami interfejsu edytora. Paski boczne mają stałą szerokość, ale możesz dostosować ich zawartość.

Paski boczne dodatków tworzy się tak samo jak Apps Script niestandardowe paski boczne. Ogólna procedura jest następująca:

  1. Utwórz plik projektu skryptu, który definiuje strukturę HTML, CSS i zachowanie JavaScriptu 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 którym chcesz otworzyć pasek boczny, wywołaj HtmlService.createHtmlOutputFromFile aby utworzyć obiekt HtmlOutput reprezentujący pasek boczny. Jeśli używasz HTML z szablonami, możesz też wywołać HtmlService.createTemplateFromFile , aby wygenerować szablon, a następnie 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. Wywołaj Ui.showSidebar , aby wyświetlić pasek boczny za pomocą tego obiektu HtmlOutput.

Gdy paski boczne są otwarte, nie wstrzymują skryptu po stronie serwera. 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 sekcji Komunikacja między klientem a serwerem.