Widgets de entrada

Use os widgets de entrada para processar a entrada dos usuários como cliques e textos.

Widget de botão Botão

Os usuários clicam nos botões para realizar ações como enviar um formulário ou um e-mail.

Uso

Arraste um botã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

Estilo

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

Mais informações

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

Exemplos

Os botões são usados em muitas amostras e modelos.

Widget de rótulo Rótulo

Use o widget de rótulo para adicionar rótulos de texto a objetos em uma página.

Uso

Arraste um rótulo para a página e use o Editor de propriedade para configurar o texto e a aparência dele.

Fluxos de trabalho comuns

  • Forneça legendas para imagens.
  • Vincule a propriedade de texto do rótulo a uma fonte de dados.

Estilo

Use o seletor de tema na barra de ações para controlar a aparência do rótulo. É possível personalizar ainda mais o tipo de letra e o tamanho da fonte.

Mais informações

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

Exemplos

Os rótulos são usados em muitas amostras e modelos.

Widget de caixa de texto Caixa de texto

Use um widget de caixa de texto para fornecer aos usuários um local para inserir e editar texto.

Uso

Arraste uma caixa de texto para a página e use o Editor de propriedade para configurar o rótulo, a aparência e o valor inicial dela.

Fluxos de trabalho comuns

  • Forneça um local para o usuário inserir texto.
  • Exiba um valor de texto padrão editável para o usuário.
  • Vincule o valor inicial a uma fonte de dados.

Estilo

Use o seletor de tema na barra de ações para escolher entre várias aparências diferentes, incluindo opções com um ícone de pesquisa.

Exemplos

O modelo Galeria de materiais usa várias caixas de texto.

Mais informações

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

Widget de área de texto Área de texto

Use o widget de área de texto para fornecer aos usuários um campo grande de rolagem para inserir texto.

Uso

Arraste uma área de texto para a página e use o Editor de propriedade para configurar o texto e a aparência dela.

Fluxos de trabalho comuns

  • Possibilite que o usuário insira um valor de texto longo com rolagem.
  • Vincule a propriedade de texto do rótulo a uma fonte de dados.

Estilo

Use o seletor de tema na barra de ações para controlar a aparência da área de texto.

Exemplos

O modelo Galeria de materiais usa várias áreas de texto.

Mais informações

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

Widget de caixa de seleção Caixa de seleção

Use o widget de caixa de seleção para fornecer aos usuários uma opção binária de ativação ou desativação.

Uso

Arraste uma caixa de seleção para a página e use o Editor de propriedade para configurar o rótulo e o valor inicial dela.

Fluxos de trabalho comuns

  • Possibilite que o usuário ative ou desative uma configuração.
  • Vincule um valor para exibir o status de um determinado recurso de ativação/desativação.

Estilo

Use o seletor de tema na barra de ações para exibir o widget como uma caixa de seleção ou controle deslizante.

Exemplos

O modelo Galeria de materiais usa várias caixas de seleção.

Mais informações

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

Widget de lista suspensa Lista suspensa

Use o widget de lista suspensa para que os usuários possam escolher uma opção em uma lista. Isso é útil para atribuir um valor de um conjunto de valores possíveis ou definir uma extremidade de relação única.

Uso

Arraste o widget de lista suspensa para a página e use o Editor de propriedade para configurar as opções dele.

Fluxos de trabalho comuns

  • Garanta aos usuários a oportunidade de escolher entre diversas opções.
  • Preencha uma lista suspensa com itens de um modelo de dados.

Veja a seguir propriedades importantes dos widgets de lista suspensa:

Propriedade Descrição
value O valor atribuído à propriedade de vinculação de dados, com base na seleção do usuário na lista suspensa.
options Uma matriz de representações de strings das opções que formam o conteúdo da lista suspensa.
names Uma matriz de strings a ser exibida em vez das strings padrão de options. A matriz precisa ter o mesmo tamanho de options.
allowNull Uma caixa de seleção que define o value inicial da lista suspensa como null se estiver marcada.
nullItemName Uma string exibida para o valor "null" da lista suspensa, geralmente usada como um prompt de seleções do usuário.

Veja alguns exemplos de vinculação de listas suspensas:

Neste exemplo simples, os usuários escolhem uma FavoriteColor em uma lista de Colors representada por uma projeção da propriedade ColorNames.

  • value: @datasource.item.FavoriteColor
  • options: @datasources.Color.items
  • names: @datasources.Color.items..ColorNames

Neste exemplo, os usuários atribuem o campo Currency a uma das moedas listadas na propriedade possibleValues.

  • value: @datasource.item.Currency
  • options: @datasource.model.fields.Currency.possibleValues

Neste exemplo, os usuários vinculam InternetSpeed a uma expressão JavaScript que consiste em um literal de matriz.

  • value: @datasource.item.InternetSpeed
  • options: ["Google Fiber", "Cable Modem", "DSL", "Dial up"];

Estilo

Use o seletor de tema na barra de ações para controlar a aparência da lista suspensa.

Exemplos

O modelo Galeria de materiais usa widgets de lista suspensa.

Mais informações

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

Widget de caixa de data Caixa de data

Use o widget de caixa de data para que os usuários possam inserir datas. Assim, é possível selecionar uma data ao digitá-la manualmente ou clicar no ícone do calendário para exibir um seletor.

Uso

Arraste o widget de caixa de data para a página e use o Editor de propriedade para configurar as opções dele, incluindo o formato da data e o fuso horário.

Fluxos de trabalho comuns

  • Possibilite que o usuário insira datas em tabelas, formulários e áreas de texto.

Estilo

Use o seletor de tema na barra de ações para controlar a aparência da caixa de data.

Exemplos

O modelo Aprovação de viagens inclui várias caixas de data.

Mais informações

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

Widget de grupo de opções Grupo de opções

Use o widget de grupo de opções para que os usuários possam escolher uma de várias opções pré-configuradas.

Uso

Arraste o widget de grupo de opções para a página e use o Editor de propriedade para configurar os valores e as opções dele.

Fluxos de trabalho comuns

Com os grupos de opções, os usuários selecionam um value em uma matriz de options.

Estilo

Use o seletor de tema na barra de ações para controlar se o widget será exibido na horizontal ou vertical.

Mais informações

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

Widget de avaliação com estrelas Avaliação com estrelas

Use o widget de avaliação com estrelas para que os usuários possam dar uma nota a outro objeto na página.

Uso

Arraste o widget de classificação com estrelas para a página e use o Editor de propriedade para configurar as opções dele, incluindo o total de estrelas e quantas são selecionadas ao carregar o widget.

Fluxos de trabalho comuns

  • Defina o número de estrelas e vincule o valor a uma fonte de dados.

Estilo

Use o seletor de tema na barra de ações para escolher se o widget usará estrelas ou corações.

Exemplos

O modelo Classificações de fornecedores usa as avaliações com estrelas.

Mais informações

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

Widget de controle deslizante Controle deslizante

Use o widget de controle deslizante para que os usuários selecionem uma opção de um intervalo de valores.

Uso

Arraste o widget de controle deslizante para a página e use o Editor de propriedade para configurar as opções dele, incluindo o intervalo de valores.

Fluxos de trabalho comuns

  • Defina o intervalo dos valores e os vincule às fontes de dados.

Estilo

Não há opções de estilo para este widget.

Exemplos

O modelo Galeria de materiais usa um widget de controle deslizante.

Mais informações

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

Widget de caixa de sugestões Caixa de sugestões

Use o widget de caixa de sugestões para que os usuários possam preencher um campo de texto com valores pré-configurados.

Uso

Arraste o widget de caixa de sugestões para a página e use o Editor de propriedade para configurar as opções dele.

Fluxos de trabalho comuns

  • Use a propriedade value para especificar o valor e options para fornecer valores sugeridos. O tipo de itens em options precisa ser igual ao de value.
  • É possível configurar a caixa para receber as sugestões de um campo com valores possíveis, uma relação ou um registro de um modelo atual. No momento, isso só pode ser feito usando a IU fornecida no campo de texto de sugestões.

Estilo

Use o seletor de tema na barra de ações para controlar a aparência da caixa de sugestões.

Exemplos

O modelo Classificações de fornecedores usa o widget de caixa de sugestões.

Mais informações

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

Widget de editor de texto Editor de texto

Use o widget de editor de texto para fornecer essa funcionalidade aos usuários. Assim, eles podem escrever e formatar entradas de texto maiores.

Uso

Arraste o widget de editor de texto para a página e use o Editor de propriedade para configurar as opções dele.

Fluxos de trabalho comuns

  • Possibilite que o usuário insira um valor de texto longo com rolagem.
  • Vincule a propriedade de texto do rótulo a uma fonte de dados.

Estilo

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

Exemplos

O modelo Classificações de fornecedores usa o widget de editor de texto.

Mais informações

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

Widget de seleção múltipla Seleção múltipla

Ofereça aos usuários uma funcionalidade para escolher vários itens em uma matriz de opções com o widget de seleção múltipla.

Uso

Adicione o widget de seleção múltipla à página e use o Editor de propriedade para configurar as opções dele.

Para definir as opções que um usuário de aplicativo pode selecionar, configure a propriedade options. Clique em options e insira uma das seguintes opções no editor de código de vinculação:

  • Uma matriz de opções, como ["east", "north", "south", "west"]
  • Uma vinculação a items em um campo da fonte de dados, com a seguinte sintaxe:

    @datasource.items..field-name

    .. é o operador de projeções que possibilita o acesso a uma lista compilada dos valores de um campo. Por exemplo, se um modelo tiver um campo denominado Region, será possível definir as opções de seleção múltipla para todos os valores dele em todos os registros com a vinculação @datasource.items..Region. Se Region for "east" em um registro e "north, south" em outro, no app, o usuário poderá selecionar "east", "north" e "south" como opções.

Para armazenar os valores selecionados pelo usuário, configure a propriedade values com uma vinculação de dados. Se o usuário selecionar várias strings, você precisará transformá-las em uma matriz. Uma forma de criar uma matriz é usar o transformador de vinculação strToArray:

@datasource.item.field-name#strToArray()

O tipo de itens em options precisa ser igual ao de values.

Fluxo de trabalho comum

  • Use o widget para atribuir valores a campos repetidos ou definir uma extremidade de relação múltipla.

Estilo

Para controlar a aparência do widget de seleção múltipla, use o seletor de tema na barra de ações.

Exemplos

No tutorial de seleção de opções, você aprende a configurar um widget de seleção múltipla. O modelo Classificações de fornecedores usa o widget de seleção múltipla.

Mais informações

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

Widget de seletor do Drive Seletor do Drive

Use o widget de seletor do Drive para que os usuários possam encontrar arquivos no Drive e fazer o upload deles para o app.

Uso

  1. Configure o aplicativo para ser executado como usuário.
  2. Arraste o widget de seletor do Drive para a página e use o Editor de propriedade para configurar as opções dele.

Fluxos de trabalho comuns

Este widget retorna o seguinte:

  • Nome do arquivo.
  • URL do arquivo, que pode ser usado para acessá-lo.
  • Código do arquivo, que pode ser usado para receber um objeto de arquivo. Assim, é possível chamar operações como:
    • File.setOwner(user)
    • File.setStarred(starred)
    • File.setTrashed(trashed)
    • File.makeCopy()
    • File.getDownloadUrl()

Para usar este widget, você precisa configurar o aplicativo para ser executado como usuário.

Por padrão, com o widget de seletor do Drive, os usuários selecionam um arquivo no Google Drive ou outro no computador para fazer o upload dele para o Google Drive. O seletor do Drive inclui uma propriedade views no grupo de propriedades. Ela adiciona guias complementares à visualização. Por exemplo, adicione "FOLDERS" à propriedade views para incluir uma guia no seletor do Drive que mostre as pastas do usuário no Google Drive. Outras opções são "IMAGE_SEARCH" para adicionar uma guia da Pesquisa de imagens Google e "SPREADSHEETS" para mostrar apenas planilhas do Google Drive do usuário. Para mais informações sobre as visualizações no widget de seletor do Drive, consulte a referência de classes do seletor.

Use features no grupo de propriedades do seletor do Drive para modificar o funcionamento das visualizações. Por exemplo, adicione "MULTISELECT_ENABLED" para que o usuário possa selecionar mais de um item por vez. Para mais informações sobre os recursos do widget de seletor do Drive, consulte a referência de classes do seletor.

Se você adicionar a visualização de pastas, o seletor do Drive memorizará a última pasta que o usuário viu e a exibirá quando ele clicar no botão novamente. É possível navegar diretamente para uma pasta. Basta clicar em qualquer nome de pasta que apareça no caminho de navegação na parte superior do widget.

Estilo

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

Exemplos

O modelo Classificações de fornecedores usa o widget de seletor do Drive.

Mais informações

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

Widget de seletor de usuários Seletor de usuários

Com o widget de seletor de usuários, é possível encontrar outras pessoas na organização. À medida que o usuário digita, o widget fornece sugestões de preenchimento automático com foto, nome e endereço de e-mail.

Uso

  1. Adicione um modelo de diretório ao aplicativo.
  2. Arraste o widget de seletor de usuários para a página e use o Editor de propriedade para configurar as opções dele.

Fluxos de trabalho comuns

  • Vincule o endereço de e-mail da pessoa selecionada a um campo em um modelo.

Estilo

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

Exemplos

O modelo Aprovação de documentos usa o widget de seletor de usuários.

Mais informações

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