- Criado por Deborah Melo de Carvalho, última alteração por Igor Andrade em 25/09/2023
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.
Nome | Propriedade | Função |
---|---|---|
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Valor | ng-model | Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
option-theme | Altera a cor do botão de opção. | |
Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para exibir ou oculta o componente. |
Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS já criadas. |
Itens | - | Permite adicionar, ordenar, configurar e excluir itens estáticos na lista. |
Item de opção
Propriedades exibida quando apenas um item do componente é selecionado.
Nome | Propriedade | Função |
---|---|---|
Valor do campo | value | Valor que identifica o item selecionado. |
Legenda | content | Define o rótulo do item. É possível internacionalizar este conteúdo. |
Desabilitado | ng-disabled | Directiva usada para desabilitar um componente quando a expressão vinculada for verdadeira. |
Nome do Grupo | name | Nome que identifica o grupo do item selecionado. |
Selecionado | checked | Insira Sim para definir o item que iniciará marcado. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Classes CSS | class | Adiciona classes CSS já criadas. |
Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Angular usada para exibir ou oculta o componente. |
Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do item com base nos perfis selecionados. |
Skin | crn-skin | Permite selecionar um skin que afetará o componente selecionado. |
Caso o campo Selecionado (checked) tenha sido marcado como Sim em mais de um item, o último item que recebeu esse valor será o previamente selecionado.
Aba de Estilos
Na tabela abaixo está descrito o tipo de estilo disponível para o componente Lista de opção.
Nome em português | Nome em inglês | Descrição |
---|---|---|
Lista de opção | Radio Group | Estiliza o componente em geral. |
Botão da opção | Option Button | Estiliza o botão 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:
- Alteração do tema do projeto (menor prioridade);
- Adição da Skin do projeto através do campo "Skin do Tema Web" na janela de Configurações do Projeto.
- 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
Nome em inglês
Radio Group
Nesta página
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Imagem no Editor Visual