Função

A caixa de seleção fixa é um componente do tipo combobox e seus itens são alimentados manualmente nas configurações do componente. Normalmente é utilizado em situações onde há necessidade de exibir uma pequena lista de opções com valores fixos ou enviar valores recorrentes - seja para manter o padrão de inserção no banco de dados ou para facilitar a seleção pelo usuário.

O componente possui um campo de pesquisa que atualiza o filtro a cada caractere informado pelo usuário.

Figura 1.1 - Exemplo do componente rodando no browser

Principais propriedades

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 uma janela para personalização do componente.
Título	content	Define um rótulo.
Valor	ng-model	Propriedade Angular 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.
Texto quando requerido	validationMessage	Exibe a mensagem informada ao tentar submeter o formulário com o campo vazio. A propriedade Requerido (ng-required) deve estar configurada com "sim".
Identificador	id	Atributo que especifica um ID exclusivo para o componente. Por padrão, um ID é gerado automaticamente e atribuído ao componente.
Desabilitado	ng-disabled	Directiva usada para desabilitar um componente quando a expressão vinculada for verdadeira.
Texto quando não tem resultado	no-results-message	Texto exibido quando a busca não oferece resultado. Por padrão o texto apresentado é "no data found", mas pode ser alterado.
Estilo	style	Altera o estilo geral do componente de 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.

Eventos

Na tabela abaixo estão descritos os eventos disponíveis para o componente.

Nome	Propriedade	Função
Ao Alterar	ng-change	Executa uma ação assim que algo no componente é alterado.
Ao Carregar	ng-data-bound	Executa uma ação enquanto dados são carregados na caixa de seleção ou no auto completar.
Ao Fechar	ng-close	Executa uma ação assim que fecha as opções mostradas na caixa de seleção ou no auto completar.
Ao Filtrar	ng-filtering	Executa uma ação assim que começa a digitar no campo da caixa de seleção ou de auto completar.
Ao Selecionar	ng-selected	Executa uma ação assim que selecionar uma opção do componente.

Estilos

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

Nome em português	Nome em inglês	Descrição
Título	Title	Estiliza o título do componente.
Caixa de seleção	Combobox	Estiliza a caixa de seleção do componente.
Sugestão	Placeholder	Estiliza a sugestão do componente.
Seta	Dropdown	Estiliza a seta do componente.
Item Selecionado	Selected Item	Estiliza o item selecionado no componente.
Lista de Itens	Item List	Estiliza a lista de itens no componente.
Item da Lista Hover	Item List Hover	Estiliza o item da lista hover.

Configuração

A janela Configuração possui diversas propriedades para a personalização do componente. Selecione o componente no editor visual para exibir suas propriedades na aba lateral e clique no botão “...” da propriedade Configuração para abrir a janela. (Figura 2.2)

Figura 2.1 - Personalizações aplicadas através das configurações do componente

Os itens (chave e valor) foram inseridos na aba Geral, a figura do livro foi adicionada na aba Cabeçalho, o texto "Fim da lista" na aba Rodapé e na aba Elementos definimos o modo de exibição dos itens: chave - valor "símbolo copyright".

Aba Geral

Apresenta as configurações mais usuais, como de adicionar ou remover uma opção da lista.

Ao solicitar o valor do campo da Caixa de seleção fixa, sempre será retornado o identificador do elemento selecionado.

Figura 2.2 - Janela de configuração

Placeholder: exibe um texto exemplo antes do usuário selecionar uma opção, seu uso é opcional e permite internacionalização.
Tipo Filtro: define a forma de pesquisa da lista de opções:
- Contendo: mostra as opções que contêm a sequência das letras digitadas;
- Iniciando com: mostra as opções que comecem com a sequência das letras digitadas;
- Final com: mostra as opções que terminem com a sequência das letras digitadas.
Botão "+": adiciona novo item à lista da caixa de seleção fixa.
Campo Chave: define o identificador dos itens.
Campo Texto: define o conteúdo que será mostrado na caixa de seleção para o usuário.

Editar: abre uma janela para fazer a edição do item.
Excluir: exclui o item.

Usar Template Personalizado: ao selecionar, a aba Elementos é exibida para personalizar o texto listado.

Editar campo

Ao clicar nos botões "+" ou editar de um dos elementos da lista, a janela Adicionar é aberta, permitindo inserir o texto estático e uma chave, que pode ser inclusive dinâmica, obtida por bloco de programação ou campo da tela. (Figura 2.3)

Figura 2.3 - Obtendo a chave do item através de um bloco de programação

Aba Cabeçalho

Na aba Cabeçalho é possível adicionar texto ou HTML para ser exibido na caixa de seleção, antes da lista (Figura 2.4).

Figura 2.4 - Inserindo uma imagem no início da lista

Aba Rodapé

Na aba Rodapé é possível adicionar texto ou elementos 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 2.5).

Figura 2.5 - Configuração e resultado no browser da aba rodapé

Aba Elementos

A aba Elementos só é exibida ao selecionar a opção Usar Template Personalizado na aba Geral. Ela permite configurar a apresentação das opções ao abrir a caixa de seleção, podendo mostrar outros campos do item, junto ao texto estático. (Figura 2.6)

A expressão para exibir os dados do campo texto da caixa é: #: data.value # enquanto os dados do campo chave é: #: data.key #. Mas, é possível inserir qualquer caractere antes ou depois dessas expressões.

Figura 2.6 - Configuração e resultado no browser da aba elementos

Valor do campo

A imagem a seguir mostra a janela que é exibida ao abrir a configuração de um evento. Caso o recurso escolhido possua parâmetro, é possível selecionar a opção "Expressão" para o Valor do campo e, ao lado, informar manualmente uma expressão, selecionar o valor (ng-model) de um campo ou Fonte de dados. Contudo, para os eventos Ao Alterar e Ao Selecionar do componente Caixa de seleção fixa existem 3 expressões exclusivas (destaque 1 da figura 3).

Figura 3 - Expressões usadas nos eventos Ao Alterar e Ao Selecionar

As expressões exclusivas dos eventos Ao Alterar e Ao Selecionar no componente Caixa de seleção fixa:

selected: objeto selecionado.
selectedKey: campo chave do registro selecionado no componente.
selectedValue: campo texto do registro selecionado no componente.

Nome em inglês

Combobox

Nesta página

Compatibilidade

Formulário web

Equivalente mobile

Caixa de Seleção

Botão do Componente

Imagem no Editor Visual

Árvore de páginas

Caixa de seleção fixa