Widgets de exibição

Use o widget de link para exibir links clicáveis. É possível vinculá-los a uma fonte de dados para que o usuário possa clicar em um link criado por outra pessoa, por exemplo.

Uso

Arraste o widget de link para a página e use o Editor de propriedade para configurar o texto, a aparência e a função dele.

Fluxos de trabalho comuns

  • Forneça um link clicável para os usuários do aplicativo.
  • Vincule o link a uma fonte de dados para que os usuários possam abrir com facilidade os links adicionados por outras pessoas.
  • Defina a ação onclick para executar ações pré-configuradas. Por exemplo, navegar para outra página no aplicativo ou recarregar uma fonte de dados.

Estilo

Use o seletor de tema na barra de ações para controlar a aparência dos links.

Mais informações

A API fornece mais informações sobre estilos, propriedades, métodos e eventos do widget.

Exemplos

Os links são usados em muitas amostras e modelos.

Widget de imagem Imagem

Use o widget de imagem para exibir imagens hospedadas fora do app.

Uso

Arraste o widget de imagem para a página e use o Editor de propriedade para configurar a função dele.

Fluxos de trabalho comuns

  • Adicione o URL em que a imagem está hospedada à propriedade url.
  • Use a propriedade href para que os usuários possam clicar na imagem e sair do aplicativo.
  • Use um evento onClick para que os usuários possam clicar na imagem e ir para outro lugar no aplicativo.

Estilo

Use o seletor de tema na barra de ações para controlar a aparência do widget.

Mais informações

A API fornece mais informações sobre estilos, propriedades, métodos e eventos do widget.

Exemplos

As imagens são usadas em muitas amostras e modelos.

Widget do Google Maps Mapa do Google

Use o widget de mapa do Google para exibir um mapa no aplicativo.

Uso

Arraste o widget do Google Maps para a página e use o Editor de propriedade para configurar a função dele.

Fluxos de trabalho comuns

  • Use a propriedade address para personalizar a centralização do mapa quando um usuário carrega a página.
  • Vincule o mapa a uma fonte de dados para que os usuários possam inserir endereços e vê-los no mapa.

Estilo

O widget do Google Maps não tem opções de estilo pré-configuradas.

Mais informações

O widget do Google Maps usa a API Maps JavaScript, que requer uma chave de API. Quando você arrasta o widget do Google Maps para um painel, o App Maker exibe um erro informando que não há uma chave de API. Para adicionar uma chave de API, siga as etapas a seguir:

  1. Peça ao administrador do G Suite a chave da sua organização ou consiga uma chave de API.
  2. No App Maker, abra o aplicativo. Se já tiver feito isso, adicione um widget do Google Maps a uma página.
  3. Clique no widget do Google Maps para abrir o Editor de propriedade dele.
  4. Na caixa apiKey, cole a chave da API.

A documentação da API App Maker fornece mais informações sobre estilos, propriedades, métodos e eventos do widget.

Widget de ícone de ajuda Ícone de ajuda

Use o widget de ícone de ajuda para exibir dicas pop-up no app.

Uso

Arraste o widget de ajuda para a página e use o Editor de propriedade para configurar o texto, a aparência e a função dele.

Fluxos de trabalho comuns

  • Adicione o texto da dica à propriedade html.

Estilo

O widget de ícone de ajuda não tem opções de estilo pré-configuradas.

Mais informações

A API fornece mais informações sobre estilos, propriedades, métodos e eventos do widget.

Widget de spinner Ícone de carregamento

Use o widget de ícone de carregamento para indicar aos usuários que o app está carregando dados.

Uso

Arraste o widget de spinner para a página e use o Editor de propriedade para configurar a aparência e a função dele.

Fluxos de trabalho comuns

  • Vincule o spinner a uma fonte de dados, e o App Maker o exibirá sempre que essa fonte estiver carregando dados novos.

Estilo

Use o seletor de tema na barra de ações para controlar a aparência do spinner.

Mais informações

A API fornece mais informações sobre estilos, propriedades, métodos e eventos do widget.

Exemplos

Os ícones de carregamento são usados em muitas amostras e modelos.

Widget de HTML HTML

Use o widget de HTML para exibir HTML arbitrário. No editor, esse widget não executa scripts nem herda estilos globais. Portanto, o widget pode parecer um pouco diferente quando você visualiza ou publica o app.

Uso

Arraste o widget de HTML para a página e use o Editor de propriedade para configurar o texto, a aparência e a função dele.

Fluxos de trabalho comuns

  • Use a propriedade HTML para exibir o texto.

Estilo

Mais informações

A API fornece mais informações sobre estilos, propriedades, métodos e eventos do widget.

Exemplos

O widget de HTML é usado em muitas amostras e modelos.

Widget de paginação Paginação

Use o widget de paginação para que os usuários possam navegar pelas páginas do app.

Uso

Arraste o widget de paginação para a página e use o Editor de propriedade para configurar o texto, a aparência e a função dele.

Fluxos de trabalho comuns

  • Garanta aos usuários uma maneira fácil de navegar pelo aplicativo.
  • Use as propriedades nextEnabled e previousEnabled para controlar o que acontece quando os usuários clicam no controle de paginação.

Estilo

O widget de paginação não tem opções de estilo pré-configuradas.

Mais informações

A API fornece mais informações sobre estilos, propriedades, métodos e eventos do widget.

Exemplos

O widget de paginação é usado em muitas amostras e modelos.