Okna dialogowe i paski boczne w dodatku Editor

W przypadku większości dodatków do Edytora, okna dialogowe i panele na pasku bocznym 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 jeden 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 dialogowe

Okna dialogowe to panele okien, które nakładają się na główną treść edytora. Okna dialogowe 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 dialogowych.

Okna dialogowe dodatków tworzy się w taki sam sposób jak Apps Script niestandardowe okna dialogowe. Ogólna procedura jest następująca:

  1. Utwórz plik projektu skryptu, który definiuje strukturę HTML, CSS i zachowanie JavaScript po stronie klienta okna dialogowego. Zapoznaj się z wytycznymi dotyczącymi stylu dodatków do Edytora.
  2. W kodzie po stronie serwera, w którym chcesz otworzyć okno dialogowe, wywołaj HtmlService.createHtmlOutputFromFile aby utworzyć obiekt HtmlOutput reprezentujący okno dialogowe. Jeśli używasz kodu HTML opartego na szablonach, możesz też wywołać HtmlService.createTemplateFromFile , aby wygenerować szablon, a następnie HtmlTemplate.evaluate , aby przekonwertować go na obiekt HtmlOutput.
  3. Wywołaj funkcję Ui.showModalDialog , aby wyświetlić okno dialogowe za pomocą tego obiektu 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ą google.script.run i powiązanych funkcji obsługi. Więcej informacji znajdziesz w sekcji Komunikacja między klientem a serwerem.

Okna dialogowe otwierania plików

Okna dialogowe otwierania plików to gotowe okna dialogowe, które umożliwiają użytkownikom wybieranie plików z Dysku Google. Możesz dodać okno dialogowe 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 dialogowe 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, 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ę w taki sam sposób jak niestandardowe paski boczne Apps Script. Ogólna procedura jest następująca:

  1. Utwórz plik projektu skryptu, który definiuje strukturę HTML, CSS i zachowanie JavaScript po stronie klienta paska bocznego. 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 kodu HTML opartego na szablonach, 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 funkcję HtmlOutput.setWidth.

  3. Wywołaj funkcję 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.