none
[InfoPath] Como fazer um campo do tipo autocomplete? RRS feed

  • Pergunta

  • Olá,
    Tenho uma lista no sharepoint 2010.
    Esta lista teve os forms customizados com infopath.

    Esta lista possui um campo do tipo consulta para um outra lista.
    Esta outra lista possui uns 1500 itens.

    Preciso criar um campo de consulta do tipo autocomplete para esta outra lista.
    Como posso fazê-lo?
    O infopath nos permite fazer isto de forma nativa?

    Obrigado

    k2rto4-Pb - Analista SharePoint

    segunda-feira, 3 de fevereiro de 2014 13:29

Respostas

  • Olá k2rto4,

    Para utilizar o recurso de autocomplete da maneira que você especificou, recomendo utilizar Javascript e SharePoint Client Object Model.

    Para ajudar, há bibliotecas prontas que fazem isso. Por exemplo http://spservices.codeplex.com/

    Abs


    Gabriel Nóvoa

    SharePoint Premier Field Engineer

    MCT/MCP/MCDST/MCSA/MCTS/MCITP/MOS/MCPD


    segunda-feira, 3 de fevereiro de 2014 16:08
  • Olá k2tro4-Pb,

    fiz isso duas vezes usando o jQuery UI e um amigo também consegui fazer usando REST.

    Segue o código:

    <script type="text/javascript" src="/Style Library/JS/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/Style Library/JS/jquery-ui-1.10.0.custom.min.js"></script>
    <script type="text/javascript">
     var CustomAutoComplete = function (fields) {
           var listId = _spPageContextInfo.pageListId.replace(/\{/, "").replace(/\}/, "");
           $.ajax({
                   url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists(guid'" + listId + "')/items?$select=" + extractColumns(fields),
                   type: "GET",
                   headers: { "Accept" : "application/json;odata=verbose" },
                   contentType: "application/json;odata=verbose",
                   success: function (data) {
                           var listvalues = data.d;
                           var jsonobj = [];
                           
                           for(var key in listvalues.results){
                                   if(typeof(fields) === "string"){
                                           jsonobj.push(listvalues.results[key][fields]);
                                           continue;
                                   }
                                   for(var fkey in fields){
                                           jsonobj.push(listvalues.results[key][fields[fkey]]);
                                   }
                           }
                           //NOME DO CAMPO DE BUSCA DA LISTA DO SHAREPOINT
                           $("#inplaceSearchDiv_WPQ2_lsinput").autocomplete({
                                   source: jsonobj,
                                   mustMatch: false,
                                   messages:{
                                           results: function () {
                                                   
                                           },
                                           noResults: "No results found."
                                   }
                           });
                           
                   },
                   error: function (errorData) {
                           alert(errorData.responseText);
                   }
           });
           
           function extractColumns(data){
                   if(typeof(data) === "string"){
                           return data;
                   }
                   return data.join(",");
           }
    }

    $(document).ready(function(){
    CustomAutoComplete(["Nome da Coluna"]);//INSERA O NOME DA COLUNA(PODE SER MAIS DE UMA);
    });
    </script>


    Alan César SharePoint Developer


    • Editado Alan Cesar terça-feira, 4 de fevereiro de 2014 17:31
    • Sugerido como Resposta Alan Cesar terça-feira, 4 de fevereiro de 2014 20:25
    • Marcado como Resposta TI DEV quinta-feira, 6 de fevereiro de 2014 13:10
    terça-feira, 4 de fevereiro de 2014 17:31
  • Fala aí,

    Não conseguir fazer da forma como que você me indicou. Devo ter errado alguma besteira.

    Consegui fazer com o script abaixo:

    <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>

    <script src="../jquery.SPServices-0.5.8.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript"> $(document).ready(function() { $().SPServices.SPAutocomplete({ sourceList: "Nome_Lista", sourceColumn: "Nome/Id_Campo_Lista_Com_Dados", columnName: "Title_Do_Campo_No_Form", ignoreCase: true, numChars: 2, slideDownSpeed: 1000, debug: true }); });</script>


    Valeu mesmo!!!!

    Abs


    k2rto4-Pb - Analista SharePoint


    • Editado TI DEV quarta-feira, 5 de fevereiro de 2014 19:43
    • Marcado como Resposta TI DEV quinta-feira, 6 de fevereiro de 2014 13:10
    quarta-feira, 5 de fevereiro de 2014 19:05
  • Olá,

    Gastei um tempo tentando utilizar o script no form infopath.

    Não funcionava de jeito nenhum.

    Então criei um post e conseguimos resolver o problema.

    Valeu


    k2rto4-Pb - Analista SharePoint

    • Marcado como Resposta TI DEV sexta-feira, 7 de fevereiro de 2014 18:12
    sexta-feira, 7 de fevereiro de 2014 18:11

Todas as Respostas

  • Olá k2rto4,

    Para utilizar o recurso de autocomplete da maneira que você especificou, recomendo utilizar Javascript e SharePoint Client Object Model.

    Para ajudar, há bibliotecas prontas que fazem isso. Por exemplo http://spservices.codeplex.com/

    Abs


    Gabriel Nóvoa

    SharePoint Premier Field Engineer

    MCT/MCP/MCDST/MCSA/MCTS/MCITP/MOS/MCPD


    segunda-feira, 3 de fevereiro de 2014 16:08
  • Olá k2tro4-Pb,

    fiz isso duas vezes usando o jQuery UI e um amigo também consegui fazer usando REST.

    Segue o código:

    <script type="text/javascript" src="/Style Library/JS/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/Style Library/JS/jquery-ui-1.10.0.custom.min.js"></script>
    <script type="text/javascript">
     var CustomAutoComplete = function (fields) {
           var listId = _spPageContextInfo.pageListId.replace(/\{/, "").replace(/\}/, "");
           $.ajax({
                   url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists(guid'" + listId + "')/items?$select=" + extractColumns(fields),
                   type: "GET",
                   headers: { "Accept" : "application/json;odata=verbose" },
                   contentType: "application/json;odata=verbose",
                   success: function (data) {
                           var listvalues = data.d;
                           var jsonobj = [];
                           
                           for(var key in listvalues.results){
                                   if(typeof(fields) === "string"){
                                           jsonobj.push(listvalues.results[key][fields]);
                                           continue;
                                   }
                                   for(var fkey in fields){
                                           jsonobj.push(listvalues.results[key][fields[fkey]]);
                                   }
                           }
                           //NOME DO CAMPO DE BUSCA DA LISTA DO SHAREPOINT
                           $("#inplaceSearchDiv_WPQ2_lsinput").autocomplete({
                                   source: jsonobj,
                                   mustMatch: false,
                                   messages:{
                                           results: function () {
                                                   
                                           },
                                           noResults: "No results found."
                                   }
                           });
                           
                   },
                   error: function (errorData) {
                           alert(errorData.responseText);
                   }
           });
           
           function extractColumns(data){
                   if(typeof(data) === "string"){
                           return data;
                   }
                   return data.join(",");
           }
    }

    $(document).ready(function(){
    CustomAutoComplete(["Nome da Coluna"]);//INSERA O NOME DA COLUNA(PODE SER MAIS DE UMA);
    });
    </script>


    Alan César SharePoint Developer


    • Editado Alan Cesar terça-feira, 4 de fevereiro de 2014 17:31
    • Sugerido como Resposta Alan Cesar terça-feira, 4 de fevereiro de 2014 20:25
    • Marcado como Resposta TI DEV quinta-feira, 6 de fevereiro de 2014 13:10
    terça-feira, 4 de fevereiro de 2014 17:31
  • Olá Alan,

    Obrigado pelo script.

    Cara,

    Tentei aqui e nada.

    Só recebo 404 Not Found.

    O que poderá ser?

    Você teria algum exemplo?

    Abs


    k2rto4-Pb - Analista SharePoint

    terça-feira, 4 de fevereiro de 2014 18:22
  • k2rto4-Pb, 

    por nada cara.

    Mas, vamos fazer isso funcionar. Tenho um desse aqui funcionando.
    Esqueci de avisar: você colocou os arquivos de script (
    jquery-1.8.3.min.js // jquery-ui-1.10.0.custom.min.js) na sua biblioteca Style Library ? (de acordo com o caminho que te passei, tem uma pasta chama JS dentro da Style Library).
    Após fazer isso, é necessário inserir uma Web Part (SP 2013 = Editor de Script // SP 2010 = Editor de HTML) e inserir esse código que te passei.

    É necessário verificar também se o campo de busca nativa da lista tem o mesmo nome.
    //NOME DO CAMPO DE BUSCA DA LISTA DO SHAREPOINT
                           $("#inplaceSearchDiv_WPQ2_lsinput").autocomplete({
                                   source: jsonobj,
                                   mustMatch: false,
                                   messages:{
                                           results: function () {
                                                   
                                           },
                                           noResults: "No results found."
                                   }
                           });"

    No Sharepoint 2013 esse campo tem o nome  $("#inplaceSearchDiv_WPQ2_lsinput");

    E no final do código também existe esse código:

    " $(document).ready(function(){
    CustomAutoComplete(["Nome da Coluna"]);//INSERA O NOME DA COLUNA(PODE SER MAIS DE UMA);
    }); "

    Na chamada da função, você deve passar o nome da coluna que deseja ser exibida no autocomplete.

    Tenta isso aí.

    Abraços!


    Alan César SharePoint Developer

    terça-feira, 4 de fevereiro de 2014 18:30
  • Vou tentar aqui,

    Mas onde digo a lista de origem?

    Abs


    k2rto4-Pb - Analista SharePoint

    terça-feira, 4 de fevereiro de 2014 19:02
  • Você coloca a web part Editor de Script ou HTML na própria página da exibição da lista. 
    Na imagem abaixo é um exemplo do AutoComplete, aí você deve fazer um CSS para exibir legal, essa caixa está assim a pedido do cliente.


    Alan César SharePoint Developer

    terça-feira, 4 de fevereiro de 2014 19:10
  • Fala meu amigo,

    Não consegui aqui realizar o teste.

    Para fazer isto funcionar, eu criar as listas Lista A e a Lista B.

    Na Lista A tenho que ter um campo com autocomplete com dados da Lista B.

    Na Lista A tenho o campo Valor. Este campo deve ser autocomplete do campo Valores da lista B.

    No newform da lista A eu add o seu script.

    Segue parte do Script:

                           //NOME DO CAMPO DE BUSCA DA LISTA DO SHAREPOINT
                           $("#Valores").autocomplete({
                                   source: jsonobj,
                                   mustMatch: false,
                                   messages:{
                                           results: function () {
                                                   
                                           },
                                           noResults: "No results found."
                                   }
                           });

    $(document).ready(function(){
    CustomAutoComplete(["Valor"]);//INSERA O NOME DA COLUNA(PODE SER MAIS DE UMA);
    });
    </script>

    Está certo?

    Ainda recebo o erro de 404 Not Found

    Valeu


    k2rto4-Pb - Analista SharePoint

    quarta-feira, 5 de fevereiro de 2014 13:00
  • Opa, então cara, esse código busca na mesma lista, esqueci de avisar, você deverá mudar a lista onde ele busca:

      var listId = _spPageContextInfo.pageListId.replace(/\{/, "").replace(/\}/, "");
           $.ajax({
                   url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists(guid'" + listId + "')/items?$select=" + extractColumns(fields),"

    nessa parte deverá passar a lista de onde deseja consultar.

    Alan César SharePoint Developer

    quarta-feira, 5 de fevereiro de 2014 13:05
  • Fala aí,

    Não conseguir fazer da forma como que você me indicou. Devo ter errado alguma besteira.

    Consegui fazer com o script abaixo:

    <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>

    <script src="../jquery.SPServices-0.5.8.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript"> $(document).ready(function() { $().SPServices.SPAutocomplete({ sourceList: "Nome_Lista", sourceColumn: "Nome/Id_Campo_Lista_Com_Dados", columnName: "Title_Do_Campo_No_Form", ignoreCase: true, numChars: 2, slideDownSpeed: 1000, debug: true }); });</script>


    Valeu mesmo!!!!

    Abs


    k2rto4-Pb - Analista SharePoint


    • Editado TI DEV quarta-feira, 5 de fevereiro de 2014 19:43
    • Marcado como Resposta TI DEV quinta-feira, 6 de fevereiro de 2014 13:10
    quarta-feira, 5 de fevereiro de 2014 19:05
  • Bacana k2rto4-Pb.

    Já fiz dessa maneira também. 
    Que bom que resolveu seu problema.

    Abraços!


    Alan César SharePoint Developer

    quarta-feira, 5 de fevereiro de 2014 19:07
  • k2rto4,

    Essa solução que você usou, faz parte do SPServices do Codeplex, como eu sugeri no primeiro Post desta Thread?


    Gabriel Nóvoa<br/> SharePoint Premier Field Engineer<br/> MCT/MCP/MCDST/MCSA/MCTS/MCITP/MOS/MCPD

    quarta-feira, 5 de fevereiro de 2014 19:38
  • Boa tarde Gabriel,

    Sim sim, faz parte sim. Na verdade cheguei até ele através deste post.

    Obrigado

    Abs


    k2rto4-Pb - Analista SharePoint


    • Editado TI DEV quarta-feira, 5 de fevereiro de 2014 19:44
    quarta-feira, 5 de fevereiro de 2014 19:42
  • Pessoal,

    Agora preciso melhorar em dois pontos o campo com autocomplete.

    1) Colocar um bom css. Preciso disso por que, após digitar o valor, e o autocomplete preencher o campo, o mesmo diminui de tamanho e depois volta ao normal. Não posso ter o campo sambando na tela.

    2) Poder selecionar mais de um item. Acho que será mais fácil fazer assim: Usuário escreve e seleciona um item. Depois ele colocar virgula e começa a digitar novamente. Com isto, o valor presente antes da virgula deve continuar no campo, e o autocomplete deve agir também.

    Vou ver se consigo aqui.

    Se souberem de algo, favor me avisem.

    Abraços


    k2rto4-Pb - Analista SharePoint


    • Editado TI DEV quinta-feira, 6 de fevereiro de 2014 13:19
    • Marcado como Resposta TI DEV sexta-feira, 7 de fevereiro de 2014 18:12
    • Não Marcado como Resposta TI DEV sexta-feira, 7 de fevereiro de 2014 18:12
    quinta-feira, 6 de fevereiro de 2014 13:18
  • Olá,

    Gastei um tempo tentando utilizar o script no form infopath.

    Não funcionava de jeito nenhum.

    Então criei um post e conseguimos resolver o problema.

    Valeu


    k2rto4-Pb - Analista SharePoint

    • Marcado como Resposta TI DEV sexta-feira, 7 de fevereiro de 2014 18:12
    sexta-feira, 7 de fevereiro de 2014 18:11