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

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

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

Caixas de diálogo

Caixas de diálogo são painéis de janela que se sobrepõem ao conteúdo do editor principal. Apps Script as caixas de diálogo são modais. enquanto eles estiverem abertos, o usuário não poderá interagir com o outros elementos da interface do editor. Você pode personalizar o conteúdo e o tamanho de diálogos.

Crie caixas de diálogo complementares da mesma forma que o Apps Script caixas de diálogo personalizadas; o procedimento recomendado é o seguinte:

  1. Crie um arquivo de projeto de script que defina a estrutura HTML da caixa de diálogo. CSS e JavaScript do lado do cliente. Ao definir a caixa de diálogo, consulte às diretrizes de estilo de complementos 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(filename) para criar um objeto HtmlOutput. objeto que representa a caixa de diálogo. Como alternativa, se você estiver usando HTML modelado que pode chamar HtmlService.createTemplateFromFile(filename) para gerar um modelo e, em seguida, HtmlTemplate.evaluate() para convertê-lo em um HtmlOutput.
  3. Chamar Ui.showModalDialog(htmlOutput, dialogTitle) para exibir 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. A O JavaScript do lado do cliente pode fazer chamadas assíncronas para o servidor usando google.script.run() e funções de gerenciador associadas. Para mais detalhes, consulte Comunicação cliente para servidor.

Caixas de diálogo de arquivo aberto

As caixas de diálogo de abertura de arquivos são pré-criadas para que os usuários selecionem arquivos. do Google Drive. Você pode adicionar uma caixa de diálogo aberta ao seu complemento sem precisar projetá-lo, mas requer algumas configurações adicionais. Você também pedem acesso à interface do Projeto do Cloud Platform para ativar a API Google Picker.

Para mais detalhes, consulte Caixas de diálogo abertas com arquivos.

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

Você cria barras laterais de complementos da mesma forma que o Apps Script. barras laterais personalizadas o procedimento recomendado é o seguinte:

  1. Criar um arquivo de projeto de script que defina a estrutura HTML da barra lateral CSS e JavaScript do lado do cliente. Ao definir a barra lateral, consulte às diretrizes de estilo de complementos do Editor.

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

  3. Chamar Ui.showSidebar(htmlOutput) para exibir a barra lateral usando HtmlOutput

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