Função

A lista de opções permite que o usuário selecione apenas uma das opções exibidas.

Figura 1 - Exemplo do componente rodando no browser

Principais propriedades

Lista de opção

Propriedades exibidas quando todo o componente é selecionado.

Item de opção

Propriedades exibida quando apenas um item do componente é selecionado.

Aba de Estilos

Na tabela abaixo está descrito o tipo de estilo disponível para o componente Lista de opção.

Cor do botão de opção

Essa propriedade irá exibir 2 grupos de cores em sua lista, as primeiras são as cores definidas pelo tema e, em seguida, uma seleção fixa de cores pré-definidas.

As cores definidas pelo tema (Padrão do tema, Secundário, Sucesso, Informação, Aviso, Perigo, Claro, Editável, Real e Escuro) podem variar a partir das seguintes situações:

1. Alteração do tema do projeto (menor prioridade);
2. Adição da Skin do projeto através do campo "Skin do Tema Web" na janela de Configurações do Projeto.
3. Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).

Configuração estática

Adicionar / Remover um item

Para adicionar um novo item, selecione o componente na área de edição e na propriedade Itens clique no botão + (Adicionar). Para reordenar os itens, clique e segure no nome do item na propriedade Itens e arraste entre as opções.

Figura 2.1 - Adicionando um novo item à lista

Para remover um item, clique no ícone lixeira desse item na propriedade Itens.

Figura 2.2 - Removendo um item da lista

Editar item

Para editar um item, selecione a lista de opções (1 da Figura 2.3), acesse a propriedade Itens na aba lateral Propriedades (2) e clique no item que deseja modificar (3). Após a seleção, as propriedades da Lista de opções (Figura 2.3) serão substituídas pelas propriedades do Item de Opção (Figura 2.4).

Figura 2.3 - Selecionando o item que será editado

Na aba Propriedades do Item selecionado, edite a legenda e o valor do campo.

Figura 2.4 - Editando o item

Listas independentes

Ao incluir vários componentes Lista de opção, os itens de cada lista atuam de forma conectada, ou seja, é possível marcar apenas uma única opção entre todos os itens dos componentes inseridos. Para que cada lista de opção atue de forma independente é necessário selecionar cada item de uma mesma lista na aba Propriedades do Item de opção e modificar o valor do Nome do Grupo (name), caso contrário, todos ficam no mesmo grupo.

Por padrão, o valor do Nome do Grupo de cada item de uma lista inserida é "optionsRadios". No exemplo abaixo, a propriedade Nome do Grupo dos itens "Sorvete" e "Gelatina", da "Lista 2", foi modificada para "optionsRadios2", enquanto os itens "Brigadeiro" e "Jujuba", da "Lista 1", permaneceu "optionsRadios". 

Figura 2.5 - Exemplo de configuração de uso de listas independentes

Essa distinção dos itens de uma lista por Nome do Grupo faz com que elas atuem de forma independente, sendo possível marcar uma opção em cada lista inserida.

Figura 2.6 - Exemplo de listas independentes no navegador

Obtendo o resultado das Listas

A função abaixo imprime no console do navegador os itens selecionados em cada uma das Listas de opção inseridas anteriormente (Figura 2.5). O bloco Obter valor do Campo recebe o Valor (ng-model) da aba Propriedades do editor de views de cada Lista de opção. Para selecioná-lo é necessário vincular o bloco de programação a um formulário de referência, confira no tópico Propriedades do Blockly da documentação Bloco de Programação.

Figura 2.7 - Função para obter o resultado dos itens selecionados da Lista de opção

Figura 2.8 - Resultado exibido a partir das configurações da Figura 2.7

Configuração dinâmica

Além de configurar o componente Lista de Opção de forma estática, também é possível configurá-lo de forma dinâmica, vinculando o componente a uma fonte de dados. Para isso é necessário configurar inicialmente a fonte de dados.

Arraste e configure um componente visual fonte de dados, no exemplo iremos usar a fonte de dados associada a entidade User. Nas configurações do componente fonte de dados, é importante que a propriedade Postergar Carga esteja configurada como Não. Caso contrário, o conteúdo do componente não será exibido automaticamente na tela.

Em seguida, arraste o componente Lista de Opção para a área de edição. Observe que o componente possui dois itens, "Option One" e "Option Two", visto que se trata de uma configuração dinâmica, você pode remover um dos itens. Para remover um item, clique no ícone da lixeira desse item na propriedade Itens. O componente deve ficar assim como na imagem abaixo (destaque 1 da Figura 3). Agora, na propriedade Repetir do componente, selecione a Fonte de dados configurada anteriormente (destaque 2).

Figura 3 - Vinculando uma fonte de dados ao componente

Após o vínculo entre a lista de opção e a fonte de dados, clique no item "Option One" da propriedade Itens, acesse a propriedade Valor do campo (destaque 1 da figura 3.1) e clique no ícone "Editar expressão" (destaque a). Na janela que for exibida, na aba Campo da Tela (destaque b), selecione um atributo da fonte de dados. Como se trata do valor que identifica o item selecionado, é interessante escolher um atributo de valor único, por isso selecionamos "User.active.id" (destaque c) que se refere ao id do registro correspondente. Por fim, clique em OK.

Os mesmos passos devem ser seguidos na configuração da propriedade Legenda (destaque 2). Observe que nessa propriedade selecionamos o atributo "User.active.name" da Fonte de dados, desse modo, durante a execução do projeto, o nome dos usuários da fonte de dados serão exibidos nos itens da lista de opção. 

Figura 3.1 - Configurando o item da lista de opção dinâmica

Obtendo o resultado da Lista

A função abaixo, exibe uma notificação contendo o id (atributo da fonte de dados que selecionamos na propriedade Valor do Campo) do item selecionado da lista de opção dinâmica que configuramos acima. O bloco Obter valor do Campo recebe o Valor (ng-model) da aba Propriedades do editor de views da Lista de opção configurada. Para selecioná-lo é necessário vincular o bloco de programação ao formulário de referência, confira no tópico "Propriedades do Blockly" da documentação Bloco de Programação.

Figura 3.2 - Função para obter o id do item selecionado da Lista de opção

A imagem abaixo mostra o resultado da lista de opção dinâmica configurada. Observe que na view, além do componente Lista de opção, também inserimos o componente botão e, nele, adicionamos o evento da função da Figura 3.2. Após a execução, quando selecionamos um item da lista e clicamos no botão, a notificação contendo o id do usuário correspondente é exibida.

Figura 3.3 - Resultado de execução da lista de opção dinâmica