• • uma fonte de dados.

  • "...":

• • configura uma fonte de dados

• • .

• Tipo Filtro:

• define a forma de filtragem dos dados, podendo ser:

  • <Vazio>:

• • remove o campo de pesquisa do componente.

  • Contendo: ao digitar no campo de pesquisa será mostrada as opções que contêm a sequência das

• • letras digitadas.

• • Iniciando com: ao digitar no campo de pesquisa será mostrada as opções que

• • comecem com a sequência das letras digitadas.

  • Final com:

• • ao digitar no campo de pesquisa será mostrada as opções que

• • terminem com

• • a sequência das letras digitadas.

• Campo Texto:

• define o campo da fonte de dados que será exibido no campo de seleção (destaque 1 da figura 2).

• Modificar texto em: permite escolher o Valor (ng-model) de outro campo na tela para ser alimentado com opção selecionada pela Caixa de seleção dinâmica,

• Campo Chave: permite selecionar qualquer atributo do objeto para ser o identificador do registro selecionado, normalmente são utilizados campos de chave primária.

  Informações

  A opção "_objectKey" é utilizada para representar o(s) campo(s) chave(s) do objeto. Porém, se a Fonte de dados não possuir nenhum campo definido como chave, a opção "_objectKey" exibirá uma chave temporária com a concatenação de todos os atributos do registro, separando-os com o símbolo til "~" (ex.: <atributo1>~<atributo2>~<atributoN>). Isso pode ocorrer, por exemplo, em Fontes de dados do tipo Bloco de programação alimentada por lista de objetos. Para evitar obter o valor nesse formato, basta selecionar outro atributo do objeto no Campo Chave.

• Tipo: define o formato do campo de pesquisa.
  • Auto completar: a área com o campo do item selecionado (destaque 1 da figura 2) também será um campo de pesquisa e uma nova requisição é feita a cada novo caractere informando, redefinindo a lista.
  • Fixo. um campo de pesquisa será exibido no começo da lista e uma nova requisição é feita a cada novo caractere informando, redefinindo a lista.
• Máscara ({0:d}): define a forma como serão apresentados os elementos na lista e após a seleção. É possível criar ou selecionar uma máscara da lista.
  Esse campo ficará desabilitado ao ativar a opção Usar Template Personalizado.

• Texto do rótulo: define o conteúdo do campo como a primeira opção (estático) da caixa de seleção. É possível internacionalizá-lo clicando no ícone no final do campo.

• Valor do rótulo: define um identificador para o conteúdo inserido no campo Texto do rótulo. É possível internacionalizá-lo clicando no ícone no final do campo. Esse campo ficará desabilitado ao habilitar a opção Permitir valor nulo.

• Permitir valor nulo: marcando essa opção, quando o usuário selecionar a opção do campo Texto do rótulo o valor nulo é retornado. O campo Valor do Rótulo fica desabilitado quando essa opção está ativa.

• Valor Inicial: informe o identificador de um dos registros para iniciar o componente com o elemento selecionado. Utilizar aspas (ex.: "59a5-11eb-95ba") em identificadores do tipo texto

• .

• Ao iniciar usar valor do primeiro registro:

• marque essa opção para sempre vir selecionado o primeiro registro da fonte de dados,

• Usar valor primitivo:

•  ao marcar (valor padrão), os dados se tornam do tipo primitivo - ou seja, eles deixam de ser representados como objetos. Caso seja desmarcado, o campo do objeto será clonado e o tipo será o mesmo do objeto.

• Alterar cursor ao modificar:

• coloca o cursor do registro selecionado na caixa de seleção dinâmica

• na fonte de dados.

Valor chave e valor exibição

Valor chave define o conteúdo que será utilizado pelo sistema, enquanto o valor exibição irá mostrar as opções na caixa de seleção. Eles podem ser iguais ou não, dependendo do tipo da chave.

Por exemplo, tem-se a opção com o valor de exibição chamado oi e seu valor chave é hello. Enquanto na tela será exibido oi, o sistema estará usando hello no lugar.

Template Cabeçalho

Ele cria uma área no início da lista de opções exibidas na caixa de seleção utilizando tags de HTML, podendo ser de parágrafo, imagem, etc.

Image Removed

Figura 3 - Configuração e resultado na adição de um template cabeçalho

Template Rodapé

Ele cria uma área no fim da lista de opções exibidas na caixa de seleção utilizando tags de HTML, podendo ser de parágrafo, imagem, etc.

Image Removed

Figura 4 - Configuração e resultado na adição de um template rodapé

• Usar Template Personalizado: ao selecionar, as abas Elementos e Valores são exibidas para personalizar, respectivamente, o modo como será exibido os elementos da lista e o modo como será exibido o item selecionado.
  O formato da máscara padrão para alguns tipos de atributos, exemplo tipo Date, podem ser afetadas apenas ao marcar ou desmarcar essa opção.

Aba Cabeçalho

Na aba Cabeçalho é possível adicionar texto e elementos HTML para incluir no início da lista de opções.

Image Added

Figura 2.2 - Adicionando um cabeçalho ao componente

O conteúdo inserido nessa aba será exibido na área destacada pelo item 1 da figura 2.3.

Image Added

Figura 2.3 - Cabeçalho do componente

Aba Rodapé

Na aba Rodapé é possível adicionar texto e elementos HTML para incluir no fim da lista de opções.

Image Added

Figura 2.4 - Adicionando um rodapé ao componente

O conteúdo inserido nessa aba será exibido na área destacada pelo item 1 da figura 2.5.

Image Added

Figura 2.5 - Rodapé do componente

Aba Elementos

A aba Elementos só será exibida ao marcar a opção Usar Template Personalizado na aba Geral. Nela podemos definir como serão exibidos os itens da lista para seleção, é possível inserir tanto atributos do objeto de forma dinâmica quanto conteúdo estático, além de alguns recursos de HTML e Javascript (high-code). 

Para exibir os atributos dos itens da fonte de dados, use a seguinte notação: #: data.<Campo da Fonte de dados> # 

No exemplo abaixo, listamos o e-mail e o nome de usuário do objeto, porém, no nome de usuário adicionamos uma função Javascript (toUpperCase) para deixar todos os caracteres em maiúsculo.

Veja como manipular os atributos do objeto no tópico Edição do template.

Image Added

Figura 2.6 - Personalização dos elementos da lista

O conteúdo inserido nessa aba afetará a lista destacada pelo item 1 da figura 2.7.

Image Added

Figura 2.7 - Elementos da lista

Aba Valores

A aba Valores só será exibida ao marcar a opção Usar Template Personalizado na aba Geral. Nela podemos definir como será exibido o item selecionado, é possível inserir tanto atributos do objeto de forma dinâmica quanto conteúdo estático, além de alguns recursos de HTML e Javascript (high-code).

Para exibir os atributos dos itens da fonte de dados, use a seguinte notação: #: data.<Campo da Fonte de dados> #. 

No exemplo abaixo, listamos o nome e o nome de usuário contido no objeto, porém, no nome de usuário adicionamos tags HTML (<b></b>) para deixá-lo em negrito.

Veja como manipular os atributos do objeto no tópico Edição do template.

Image Added

Figura 2.8 - Personalização do elemento selecionado

O conteúdo inserido nessa aba afetará o item 1 da figura 2.9.

Image Added

Figura 2.9 - Componente com um item selecionado

Exemplo de personalização do Template

As abas Elementos e Valores permitem utilizar elementos de HTML e Javascript (High-code) para manipular os atributos do objeto. Se o objetivo for exibir apenas um atributo personalizado tanto na lista quanto ao selecionar o elemento, provavelmente utilizar o campo Máscara ({0:d}) da aba Geral seja suficiente. No entanto, se for necessário incluir mais de um atributo ou se houver a necessidade de exibir os itens da lista e o item selecionado de maneira distinta, a personalização dos templates pode ser utilizada.

Os métodos Javascript devem ser utilizados com base no tipo do dado do atributo selecionado, por exemplo: Date, String, Number, Boolean etc. Além disso, pode ser necessário utilizar if ternário para tratar valores nulos (Figura 3.1).

Na figura abaixo vemos um componente Caixa de seleção dinâmica vinculado a um atributo do tipo Data sem máscara ou personalização de templates nas abas Elementos e Valores.

Image Added

Figura 3 - Atributo de data sem a personalização de template

Nos exemplos abaixo, tanto a aba Valores (destaque 1) quanto a aba Elementos (destaque 2) está utilizando um if ternário para validar se o atributo de data está nulo, caso esteja, não exibirá nada ('').

Image Added

Figura 3.1 - Templates usados para o tratamento de datas

1. Aba Valores: se o atributo for diferente de nulo, utiliza o método toLocaleString para modificar o atributo "nasc" para o formato data e hora e, em seguida, obtém os 10 primeiros caracteres com o método substr.
2. Aba Elementos: se o atributo é diferente de nulo, utiliza o método concat para concatenar o atributo "nome" com o atributo "nasc" que foi formatado utilizando o método toLocaleDateString.

O resultado das alterações da figura 3.1 podem ser vistas na figura abaixo.

Image Added

Figura 3.2 - Atributo de data com a personalização de template