Caixas de diálogo e barras laterais do complemento do editor

Para a maioria dos complementos do Editor, as caixas de diálogo e os painéis da barra lateral são as principais interfaces do usuário. Ambos são totalmente personalizáveis usando HTML e CSS padrão, e você pode usar o modelo de comunicação cliente-servidor do Google Apps Script para executar funções do Apps Script quando o usuário interage com a barra lateral ou a caixa de diálogo. O complemento pode definir várias barras laterais e caixas de diálogo, mas só pode mostrar uma de cada vez.

Quando quiser impedir que o usuário interaja com o editor até fazer uma escolha na interface do complemento, use uma caixa de diálogo. Caso contrário, use uma barra lateral.

Caixas de diálogo

As caixas de diálogo são painéis de janela que se sobrepõem ao conteúdo principal do editor. As caixas de diálogo do Apps Script são modais. Enquanto estão abertas, o usuário não pode interagir com os outros elementos da interface do editor. É possível personalizar o conteúdo e o tamanho das caixas de diálogo.

Você cria caixas de diálogo de complementos da mesma forma que as caixas de diálogo personalizadas do Apps Script. O procedimento geral é:

  1. Crie um arquivo de projeto de script que defina a estrutura HTML, o CSS e o comportamento do JavaScript do lado do cliente da caixa de diálogo. Consulte as diretrizes de estilo do complemento do Editor.
  2. No código do lado do servidor em que você quer que a caixa de diálogo seja aberta, chame HtmlService.createHtmlOutputFromFile para criar um HtmlOutput objeto que representa a caixa de diálogo. Como alternativa, se você estiver usando HTML com modelo você pode chamar HtmlService.createTemplateFromFile para gerar um modelo e, em seguida, HtmlTemplate.evaluate para convertê-lo em um objeto HtmlOutput.
  3. Chame Ui.showModalDialog para mostrar a caixa de diálogo usando esse HtmlOutput.

As caixas de diálogo não suspendem o script do lado do servidor enquanto estão abertas. O JavaScript do lado do cliente pode fazer chamadas assíncronas para o lado do servidor usando google.script.run e funções de handler associadas. Para mais detalhes, consulte Comunicação cliente-servidor.

Caixas de diálogo de abertura de arquivos

As caixas de diálogo de abertura de arquivos são caixas de diálogo pré-criadas que permitem que os usuários selecionem arquivos do Google Drive. É possível adicionar uma caixa de diálogo de abertura de arquivos ao complemento sem precisar projetá-la, mas ela exige algumas configurações adicionais. Você também precisa de acesso ao projeto do Cloud Platform do complemento para ativar a API Google Picker.

Para mais informações, consulte Caixas de diálogo de abertura de arquivos.

As barras laterais são painéis que aparecem à direita da interface do editor e são o tipo mais comum de interface de complemento. Ao contrário das caixas de diálogo, você pode continuar interagindo com os outros elementos da interface do editor enquanto uma barra lateral está aberta. As barras laterais têm uma largura fixa, mas é possível personalizar o conteúdo delas.

Você cria barras laterais de complementos da mesma forma que as barras laterais personalizadas do Apps Script. O procedimento geral é:

  1. Crie um arquivo de projeto de script que defina a estrutura HTML, o CSS e o comportamento do JavaScript do lado do cliente da barra lateral. Ao definir a barra lateral, consulte as diretrizes de estilo do complemento do Editor.

  2. No código do lado do servidor em que você quer que a barra lateral seja aberta, chame HtmlService.createHtmlOutputFromFile para criar um HtmlOutput objeto que representa a barra lateral. Como alternativa, se você estiver usando HTML com modelo você pode chamar HtmlService.createTemplateFromFile para gerar um modelo e, em seguida, HtmlTemplate.evaluate para convertê-lo em um objeto HtmlOutput.

    As barras laterais de complementos têm uma largura fixa de 300 pixels que não pode ser alterada chamando HtmlOutput.setWidth.

  3. Chame Ui.showSidebar para mostrar a barra lateral usando esse HtmlOutput.

As barras laterais não suspendem o script do lado do servidor enquanto estão abertas. O JavaScript do lado do cliente pode fazer chamadas assíncronas para o lado do servidor usando google.script.run e funções de handler associadas. Para mais detalhes, consulte Comunicação cliente-servidor.