- Criado por Deborah Melo de Carvalho, última alteração por Igor Andrade em 22/10/2019
Você está vendo a versão antiga da página. Ver a versão atual.
Comparar com o atual Ver Histórico da Página
« Anterior Versão 8 Próxima »
Função
Esse componente faz a seleção de múltiplas opções dentro da uma lista, com isso é possível vincular vários itens a um registro em relacionamentos 1 para N ou N para M. Os itens selecionados aparecerão em Labels e estarão destacados em cor diferentes na lista, além disso, o seu campo possui um filtro, restringindo sua lista a medida que o usuário digita.
Figura 1 - Exemplo do componente rodando no browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.
Nome | Propriedade | Função |
---|---|---|
Configuração | options | Abre a janela de configurações do visualizador de relatório. |
Conteúdo | content | Define o rótulo. |
Valor | ng-model | Propriedade AngularJS que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
Requerido | ng-required | Define que o campo é de preenchimento obrigatório. |
identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Exibir | ng-show | Propriedade AngularJS usada para exibir ou oculta o componente. |
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 perfia selecionados. |
Classes CSS | class | Adiciona classes CSS já criadas. |
Configuração
Arraste o componente para o editor visual para abrir a janela de Configurações. Para abrir a janela posteriormente, dê um duplo clique sobre o componente ou clique no botão "..." da propriedade Configurações (Figura 2.1).
Figura 2 - Janela de configuração
Fonte de dados: define o conteúdo que fornecerá os dados para serem as opções do auto completar. Para saber mais sobre como configura uma fonte de dados, acesse o link ao lado: Fonte de dados .
"+": adiciona uma fonte de dados.
"...": configura uma fonte de dados.
Placeholder: exibe alguma mensagem enquanto o campo estiver vazio, é possível internacionalizar o conteúdo através do ícone de internacionalização ao final do campo.
Tipo Filtro: define a forma de filtro:
Iniciando com: mostra as opções que comecem com as letras digitadas;
Contendo: mostra as opções que contêm as letras digitadas;
Final com: mostra as opções que terminam com as letras digitadas.
Campo Texto: define o atributo que será exibido na caixa de seleção.
Campo Chave: define o identificador dos itens da lista.
Fonte relacionada: adiciona a segunda fonte de dados para relacionamentos N para M;
Campo relacionado: define os atributos da fonte de dados Relacionada que tem relação com a fonte de dados principal.
Obter valor do campo como: define como o valor será retornado, podendo ser:
Chave: essa opção faz com que somente os pares chave / valor quando há mais de um ID e somente o valor quando existe um único ID;
Objeto: essa opção faz com que todos os dados dos registros sejam retornados - ele é o valor padrão desse campo.
- Usar template personalizado: ao ser selecionado, adiciona a aba Elementos na janela de configuração.
Campo Texto e Campo Chave
Campo Chave define o conteúdo que será utilizado pelo sistema, enquanto o Campo Texto irá mostrar as opções na caixa de seleção. Eles podem ser iguais ou não.
Por exemplo, tem-se a opção com o Campo Texto chamado título e seu Campo Chave é id. Enquanto na tela será exibido os títulos dos jogos, o sistema estará usando o id no lugar.
Abas Cabeçalho e rodapé
As abas cabeçalho e Rodapé permitem adicionar texto e conteúdo HTML para inserir um item no início e no fim da lista. (Figuras 2.2, 2.3 e 2.4)
Figura 2.2 e 2.3 - Inserindo conteúdo no cabeçalho e rodapé da lista da caixa de seleção
Figura 2.4 - Resultado das configurações nas figura 2.2 e 2.3
Aba Elementos
Nessa aba é possível personalizar o conteúdo exibido na lista, podendo inserir texto estático ou mais de um atributo. No exemplo da figura 2.5, além da frase que irá se repetir para cada item, foram adicionados dois atributos: nome e login.
A forma para exibir os dados da fonte de dados é : #: data.atributo #
Figura 2.5 - Utilizando template personalizado
Figura 2.6 - Resultado da configuração da figura 2.5
Fonte Relacionada
A fonte relacionada só funciona em relacionamentos M para N e tem o objetivo de gerar registros na entidade intermediária no momento de criação da segunda entidade.
exemplo de uso
Na Figura 2.7, temos as tabelas cliente, produto e uma terceira tabela de relacionamento pedido_cliente. Perceba que a tabela pedido_cliente possui o campo quantidade e para esse exemplo simplificado, o campo quantidade não poderá ser not null, já que ao usar a Fonte Relacionada somente as chaves estrangeiras são cadastradas na tabela relacionada.
Figura 2.7 - Exemplo de modelagem em relacionamento M para N
Durante a criação de um novo cliente (Figura 2.8), podemos ter uma caixa de seleção múltipla para selecionarmos diversos produtos, e após salvar o cliente, os registros relacionados serão salvos automaticamente na tabela pedido_cliente (Figura 2.9).
Para mais detalhes sobre as configurações de formulários views com entidades relacionadas, acesse Relacionamento entre classes no CRUD.
Figura 2.8 - Selecionando os produtos
Figura 2.9 - Grade da entidade pedido_cliente
No formulário CRUD cliente, a caixa de seleção múltipla deve estar associada a Fonte de dados do produto, já que ela irá exibir a lista de produtos, a Fonte Relacionada deve estar vinculada a entidade de relacionamento "pedido_cliente" e o Campo Relacionado deve ser o campo que faz relacionamento com a fonte de dados principal na Fonte de dados Relacionada. (Figura 2.10)
Figura 2.10 - Configuração da Caixa de seleção múltipla do formulário cliente
Nome em inglês
Combobox Multi Select
Nessa página
Compatibilidade
Formulário web
Equivalente web / mobile
O link será adicionado no final, após todos os componentes criados.
Botão do Componente
Imagem no Editor Visual
- Sem rótulos