- Criado por Deborah Melo de Carvalho, última alteração por Igor Andrade em 14/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 3 Próxima »
Função
Esse componente faz a seleção de múltiplas opções dentro da uma lista. Utilizado em situações que o usuário faz a busca para mais de um objeto ou inserir mais informações em um mesmo tipo de campo. Na IDE esse componente faz a seleção das opções para alimentar o banco de dados, sendo a relação entre as classes construídas precisa ser de n-m ou 1-n, para adicionar mais informações do mesmo tipo a um mesmo atributo. Por exemplo, usar esse componente para adicionar jogos cadastrados, em uma classe, à um usuário. Para isso deve-se ter um relacionamento de n-n entre essas classes no banco de dados (Figura 1).
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
A configuração do componente é a mais importante das propriedades, pois é através dela que todos os ajustes sobre as opções que irão aparecer na caixa de seleção dinâmica, a fonte de dados que será a provedora das opções, quais serão as opções e entre outros estão presentes.
Ao selecionar o componente na área de trabalho da IDE, será apresentado a aba de propriedades no campo direito. O menu de ... que aparece ao lado do campo de configuração abre a janela de configuração (Figura 2), apesar de que ao soltar o componente na área do formulário essa janela de configuração abre automaticamente.
Figura 2 - Janela de configuração
Fonte de dados: define a classe 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: mostra um texto na caixa de seleção que serve para auxiliar o usuário o que ele precisa fazer, mas seu uso é opcional. Ao lado do campo, tem-se o ícone para fazer a internacionalização do texto do placeholder;
Tipo Filtro: define a forma de filtragem dos dados, podendo ser:
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 os valores a serem exibidos na caixa de seleção. Nele são apresentados os atributos da fonte de dados selecionada;
Campo Chave: define qual valor será enviado ao sistema após a seleção da opção. Nele são apresentados os atributos da fonte de dados selecionado, a partir do atributo selecionado no campo texto, o campo valor correspondente será enviado ao sistema;
Fonte relacionada: adiciona a segunda fonte de dados que representa a ligação das classes;
Campo relacionado: define os atributos da fonte de dados selecionada na fonte relacionada que serão exibidos;
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.
Cabeçalho
Na aba cabeçalho é possível adicionar texto ou tags do HTML - podendo ser de parágrafo, imagem, entre outros - e, assim, criar uma área no início da lista de opções exibidas pelo componente.
Figura 3.1 - Adicionando um cabeçalho ao componente
Figura 3.2 - Área do cabeçalho ao executar componente no browser
Aba rodapé
Na aba rodapé é possível adicionar texto ou tags do HTML - podendo ser de parágrafo, imagem, entre outros - - e, assim, criar uma área no início da lista de opções exibidas pelo componente.
Figura 4.1 - Adicionando um rodapé ao componente
Figura 4.2 - Área do rodapé ao executar componente no browser
Utilizar Template Personalizado
Elementos
Essa aba (Figura 5.1) configura a forma de visualização das opções ao abrir a caixa de seleção, podendo mostrar alguns outros dados da folha de dados (Figura 5.2) - que precisam ser configurados de uma forma específica para exibidos, ou textos.
A forma para exibir os dados da fonte de dados é da seguinte maneira: #: data.colunadatabela #.
Figura 5.1 - Utilizando template personalizado
Figura 5.2 - Exibição dos dados no browser
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