Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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.
Figura 1.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 uma janela para personalização do componente. |
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 perfis selecionados. |
Classes CSS | class | Adiciona classes CSS já criadas. |
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, clique no botão “...” da propriedade Configuração para abrir a janela.
Aba Geral
Figura 2.1 - Janela de configuração
Apresenta as configurações mais usuais, como de adicionar ou remover uma opção da lista.
Placeholder: exibe um texto exemplo antes do usuário selecionar uma opção, mas seu uso é opcional;
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;
Campo Chave: define o identificador de retorno do item selecionado pelo usuário;
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, uma nova abas é exibida para personalizar o texto listado.
Aba 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 2.2).
Nome em inglês
Combobox
Nessa página
Índice | ||||
---|---|---|---|---|
|
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
Figura 2.3 - Configuração e resultado no browser da aba cabeçalho
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 2.4).
Figura 2.4 - Configuração e resultado no browser da aba rodapé
Aba Elementos
Essa aba permite formatar A aba Elementos só é exibida ao selecionar a opção Usar Template Personalizado na aba Geral. Ela permite configura a apresentação das opções quando o usuário ao abrir a caixa de seleção fixa., podendo mostrar outros campos da fonte de dados (Figura 2.4) ou texto estático.
A expressão para exibir os dados do campo texto da caixa é: É possível inserir qualquer caractere antes ou depois das chaves #: data.value # e enquanto os dados do campo chave é: #: data.key #, ao abrir a caixa de seleção, os caracteres serão exibidos junto com as opções do Campo Valor e/ou chave.. Mas, é possível inserir qualquer caractere antes ou depois dessas expressões.
Image Added
Image Added
Figura 2.5 - Configuração e resultado no browser da aba elementos