Utilizando autocomplete no Maker - Parte 2

Bom pessoal, no meu ultimo post mostrei como utilizar a solução de autocomplete no Maker, porém utilizei uma lista estática, sendo assim resolvi criar esse novo post, mostrando como utilizar esse recurso obtendo os dados do autocomplete a partir do banco de dados.

Vamos lá! Os passos iniciais ainda devem ser seguidos. Devemos baixar as bibliotecas necessárias ( jQuery e jQuery UI), coloca-las dentro do contexto da nossa aplicação e utilizar o fluxo no evento "Ao entrar" do formulário para incluir as bibliotecas.


A mudança que teremos nesse exemplo se refere ao fluxo utilizado para associar a funcionalidade de autocomplete ao componente e a criação de um fluxo do tipo web para retornar os dados.

No Fluxo "Autocomplete - Adicionar autocomplete" irei modificar o código que será executado através da função "Executar javascript", ficando da seguinte forma:


/*Obtenho a referencia do componente*/
var comp = findNode(document, 'WFRInput18');

/*Associo a funcionalidade de autocomplete ao componente*/
        jQuery(comp).autocomplete({
            /*A diferencça está justamente aqui, ao invés de utilizar um array estou passando uma URL          na opção source*/
            source:"http://localhost:8080/webrun/AutocompleteObterDados.rule?sys=BLG",

/*Na opção dataType, defino o tipo do retorno*/
            dataType: "json",
            appendTo: $("MakerEdit1").div
        });

Utilizei um fluxo do tipo web para obter os dados para meu autocomplete (Maiores informações sobre fluxo web, nesse link: http://suporte.softwell.com.br/maker/manual/pt/dicas_e_truques/como_acessar_um_fluxo_web.htm)

O fluxo responsável por me retornar os dados ficou da seguinte maneira:

Para que os dados retornados pelo fluxo possam ser utilizados pela funcionalidade de autocomplete os mesmos devem ser retornados em JSON, seguindo o seguinte formato:

[{"id":<Campo ID>, "label":"<Campo que será listado no autocomplete>", "value":"<Campo que será utilizado como valor do textobox>"}]

Ex.: 

[{"id":1, "label":"Abrir formulário", "value":"abrir formulário"}, {"id":2, "label":"Abrir relatório", "value":"abrir relatório"}]

Um detalhe importante é que ao utilizar uma URL na opção "source" do autocomplete, ele automaticamente inclui na URL o parâmetro "term", sendo assim o fluxo web deve está preparado para receber esse parâmetro, que será utilizado no filtro da consulta. Para obter o valor do parâmetro "term" utilizei a função "Obter parâmetro da requisição".

Bom pessoal!! Está ai mais uma funcionalidade útil para nossas aplicações Maker. Abraço e até o próximo post.

Abaixo o link para o download do exemplo utilizado neste post.

https://rapidshare.com/files/4210010412/Exemplo%20-%20Autocomplete%202.FRZ