Veja como implementar de forma simples e nativa, o recurso “autocompletar”
nas interfaces de digitação do usuário, em aplicações Magic xpa.
A dica de hoje é mais ‘light‘, mas nem por isso menos interessante.
Desde o lançamento da versão 4.6 do Magic xpa (em Nov/19), os controles de tela do tipo Edit Control contam com um novo recurso: o autocompletar.
É um grupo novo de propriedades que definem regras para o auxílio do preenchimento do conteúdo deste tipo de controle.
Se você já é desenvolvedor Magic xpa, ou fez/está fazendo o treinamento de auto-estudo: Getting Started with Magic xpa 3.x and Mobile, você conhece o conceito de Data-Bound Controls e se sentirá em casa.
Se ainda não, confira como é fácil (de verdade):
Estas configurações estão disponíveis para os Edit Controls no grupo de propriedades “Autocomplete“, e são:
- Mode = Define como o sistema de autocompletar vai se comportar no runtime:
- Suggest = Abre um popup de lista de opções, para selecionar
- Append = Muda o texto automaticamente à medida que está sendo digitado, cfe. a próxima sugestão mais compatível
- Append + Suggest = Combina as duas opções acima
- Items List = Uma lista, estática ou dinâmica, de textos separados por vírgula ( , ) para formar o conjunto das opções para escolha
- Data Source Number = O id interno de um Data Source (tabela) do projeto Magic xpa, cujos registros formarão a lista de opções (combinados com Items List) a usar:
- Linked Field = Qual campo deste Data Source (tabela) deve ser usado para formar a lista de opções:
- Index = Em qual ordem estes registros devem ser apresentados:
- Field Ranges = Quando for o caso, podemos definir critérios de filtro dos registros a considerar, deste Data Source (tabela). Por exemplo, ao invés de dar como opções todas as cidades do Brasil (+ de 5000), podemos pré-selecionar uma UF antes, e mostrar só as deste estado.
*Nota: Recurso de autocompletar está disponível para On-Line e RIA.
Com estas simples parametrizações, ao editarmos o conteúdo de um Edit Control o runtime do Magic xpa fica assim:
Suggest
Append
Append + Suggest
Dissemos que era fácil e simples.
E é mesmo!
Projeto exemplo disponível neste link.
Para receber os artigos do Blog Magic Brasil em primeira mão no seu email, registre-se aqui