Exemplo de Javascript Sharepoint

Segue o exemplo de código de javascript para planilhar uma lista Sharepoint

 

<form  method="post">

<table>




<tr>

    <td>Empresas</td>

    <td><select id="lstBaseCliente" name="BaseCliente" onclick="Load();">></select></td>

</tr>




<tr>

    <td>Equipe</td>

    <td> <select id="lstEquipe" name="Equipe"></select></td>

</tr>

<tr>

    <td>Colaborador</td>

    <td><select id="lstColaborador" name="Colaborador"></select></td>

</tr>

<tr>

    <td><br/></td>

</tr>

<tr>

    <td><br/></td>

    <td><rigth><input type="button" value="Visualizar" onclick="Main();"></rigth></td>

</tr>

</table>

<table>

<tr>

   <td>Grafico</td>

</tr>

<tr>

    <td><canvas id="Grafico" width="600" height="600"></canvas></td>

</tr>

<tr>

    <td>Tipo de Resultado</td>

</tr>

<tr>

    <td>Visualização</td>

    <td><select id="lstVer" name="Ver" onchange="Main();"> <option>Colaboradores</option> <option>Empresas</option></select></td>

</tr>

<tr>

    <td>Calculado:</td>

    <td><select id="lstResultado" name="Resultado" onchange="Main();"><option>Quantidade</option> <option>Tempo Gasto</option></select></td>

</tr>

<tr>

    <td><br/></td>

</tr>

</table>

<table>

<tr>

    <td>Grid Dados</td>

</tr>

<tr>

    <td>

    <table cellpadding="0" cellspacing="0" border="0" class="display" id="GRID">

    </table>

    </td>

<tr>

</table>

</form>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://jquery-datatables-editable.googlecode.com/svn/trunk/media/js/jquery.dataTables.min.js"></script>

<script type="text/javascript" >

        var collListItem; //ListItems

        var chartX = [];  //X-Axis Labels

        var chartY = [];  //Y-Axis Values

        

        var Dataset = [];    //Dados do Item

       




        var chartJs = "/Qualidade/Documentos Compartilhados/Chart.js";

        var gridJs = "https://jquery-datatables-editable.googlecode.com/svn/trunk/media/js/jquery.dataTables.min.js";

        var listName = "Novo TimeCostService"; //Data List Name

        var fieldEquipe = "Equipe";    //X-Axis Label Names from List

        var fieldColaborador = "Author";    //Author

        var fieldBaseCliente = "BASECLIENTE";    //Base Cliente

        var fieldTempoGasto = "TempoGasto";    //TempoGasto

        var idColaborador = "lstColaborador";    //Colaborador

        var idEquipe = "lstEquipe";

        var idBaseCliente = "lstBaseCliente";

        var idResultado = "lstResultado";

        var idVer = "lstVer";




        var idChart = "Grafico";    //Chart Canvas Div

        var idGRID = "GRID";    //Grid Canvas Div

        var pInd = -1;  //Posicao do Indice




        var clientContext;

        var oList;

        var camlQuery;




        //Variaveis associadas ao desenho do chart

        var Registro = [];

        var Valor = [];

        var BaseCliente = [];

   

//Carrega Load de Form

Load();

//alert("fim");







//Faz carga dos Arquivos

function Load()

{

   //alert("CarregaSP()");

   SP.SOD.executeOrDelayUntilScriptLoaded( function () 

   {

       CarregaSP(SP);

       clientContext.executeQueryAsync(function () 

       {

           cctxload(collListItem);

           CarregaChart(); //Carrega Chart

       }, null);

   },'SP.js');

   

  //loadchart();

  //CarregaChart();

   

   //alert("Fim Load()");

}







function MontaListagem()

{

     Valor.length = 0;

               Registro.length = 0;

                

               //processa dados

               for(var contador=0;contador<Dataset.length;contador++)

               {

                  

                  var valor = Dataset[contador][2];

                  //var BaseCliente = Dataset[contador][3]["$4B_1"];

                  //Mostra os colaboradores ou Empresas

                  var item;

                  var flgitem;

                  //Mostra os colaboradores 

                  if(document.getElementById(idVer).selectedIndex==0)

                  {

                     item = Dataset[contador][1]["$4B_1"];

                     flgitem = PertenceLista(item,idColaborador);

                  }

                  else

                  {

                     item = Dataset[contador][3]["$4B_1"];

                     flgitem = PertenceLista(item,idBaseCliente);

                  }

                  if(flgitem==true) //Pertence a listagem de elementos Date lista

                  {

                      //verifica se tem o elemento em lstEquipe

                      var Posicao = VerificaVetor(Registro,item)

                      if (Posicao==-1)

                      {

                        //Insere o Registro

                        Registro.push(item); 

                        if(document.getElementById(idResultado).selectedIndex  == 0)

                        {

                          Valor.push(1);

                        }

                        else

                        {

                           Valor.push(valor);

                        }

                      }

                      else

                      {

                         if(document.getElementById(idResultado).selectedIndex == 0)

                         {

                            //Apenas incrementa valor

                            Valor[Posicao]++;

                         }

                         else

                         {

                          //Apenas incrementa valor

                          Valor[Posicao]=Valor[Posicao]+valor;

                         }

                      }

                   }

               }

}




function CarregaChart()

{    

              //Monta listagem de dados  

              MontaListagem();                      

           

              //Load Chart JS

              loadJS(chartJs, function () {




                    //Generate Data

                    var data = {

                        //Mostra os colaboradores 

                        labels: this.Registro,

                        datasets: [

                            {

                                data: this.Valor

                            }

                        ]

                    };




                    //Display Chart

                    var ctx = document.getElementById(idChart).getContext("2d");

                    var myNewChart = new Chart(ctx).Bar(data);

                });  

                

                //loadGrid();  //Carrega Grid        

           

}




function MontaGRID()

{

     Valor.length = 0;

     Registro.length = 0;

     $('#GRID').empty();







     $('#GRID').append('<thead><tr><th>Colaborador</th><th>Empresa</th><th>Tempo Gasto</th></tr></thead>');                

                

     //processa dados

     for(var contador=0;contador<Dataset.length;contador++)

     {           

                  

                  var colaborador = Dataset[contador][1]["$4B_1"];

                  var Empresa = Dataset[contador][3]["$4B_1"];

                  var TempoGasto = Dataset[contador][2];




                  $('#GRID').append('<tr><td>'+colaborador+'</td>'+'<td>'+Empresa+'</td>'+'<td>'+TempoGasto+'</td></tr>');                

                  

      }

}







function loadGrid()

{

    if($('#GRID').dataTable()==0)

    {

       $('#GRID').dataTable().fnDestroy();

    }

    //Monta listagem de dados  

    MontaGRID();  

  

    //Gera GRID

    $(document).ready(function() {

       $('#GRID').dataTable({

           'aaSorting': [[ 1, "desc" ]],

           'bDestroy': true

           });

    } );

}




function loadJS(src, callback) 

{

            var s = document.createElement('script');

            s.src = src;

            s.async = true;

            s.onreadystatechange = s.onload = function () {

                var state = s.readyState;

                if (!callback.done && (!state || /loaded|complete/.test(state))) {

                    callback.done = true;

                    callback();

                }

            };

            document.getElementsByTagName('head')[0].appendChild(s);

}




//Carrega Elementos da Equipe

function CarregaEquipe(Dataset)

{

    document.getElementById(idEquipe).length =0; //reseta elementos Date lista

    InsertItem(idEquipe, "Todos");

    for(var contador=0;contador<Dataset.length;contador++)

    {

      var item = Dataset[contador][0];




      //verifica se tem o elemento em lstEquipe

      if (testa_item(idEquipe,item)==false)

      {

          InsertItem(idEquipe, item);

      }

    }

}




//Carrega Elementos da Empresa

function CarregaEmpresa(Dataset)

{

    document.getElementById(idBaseCliente).length =0; //reseta elementos Date lista

    InsertItem(idBaseCliente, "Todos");

    for(var contador=0;contador<Dataset.length;contador++)

    {

      var item = Dataset[contador][3]["$4B_1"];




      //verifica se tem o elemento em lstEquipe

      if (testa_item(idBaseCliente,item)==false)

      {

          InsertItem(idBaseCliente, item);

      }

    }

}




//Carrega Elementos da Equipe

function CarregaColaborador(Dataset,Equipe)

{

    document.getElementById(idColaborador).length =0; //reseta elementos Date lista

    limpa_item(idColaborador);

    InsertItem(idColaborador, "Todos");

    for(var contador=0;contador<Dataset.length;contador++)

    {

         var item = Dataset[contador][1]["$4B_1"];

         var regEquipe = Dataset[contador][0];

         var flgcheck= false;

         //verifica se tem o elemento em lstEquipe

         if (Equipe=="Todos")

         {

            flgcheck=true;        

         }

         else

         {

            if(Equipe==regEquipe)

            {

                flgcheck=true;        

            } 

         }

         if(flgcheck==true)

         {

            //Verifica se nao esta na lista

            if (testa_item(idColaborador,item)==false)

            {

              InsertItem(idColaborador, item);

            }

         }

    }

}




//CarregaSP

function CarregaSP(SP) 

{

            //Carrega Informações da Conexao 

            clientContext = new SP.ClientContext.get_current();




            //Carrega informações da Lista

            oList = clientContext.get_web().get_lists().getByTitle(listName);

            camlQuery = new SP.CamlQuery();

          

       //alert("CarregaSP Passo1");        

            camlQuery.set_viewXml('<View>'+

                '<GroupBy collapse="true">'+

       '<FieldRef Name="Equipe" />'+

       '</GroupBy>'+

                '<OrderBy>'+

       ' <FieldRef Name="Equipe" />'+

       '</OrderBy>'+

       '</View>');

            //alert("CarregaSP Passo2");

            this.collListItem = oList.getItems(camlQuery);

            //alert("CarregaSP Passo3");

            clientContext.load(collListItem);

            //alert("CarregaSP Passo2");

}







//Executa Query de forma assincrona

function cctxload(collListItem) 

{

                var listItemEnumerator = collListItem.getEnumerator();

                Dataset.length = 0; //Inicia listagem

                //Create Points from ListData

               

                while (listItemEnumerator.moveNext())

                {                

                  var oListItem = listItemEnumerator.get_current();

                  var record = new Array (oListItem.get_item(fieldEquipe),

                                          oListItem.get_item(fieldColaborador),

                                          oListItem.get_item(fieldTempoGasto),

                                          oListItem.get_item(fieldBaseCliente));

                  Dataset.push(record);  

                }

                //Carrega Empresas

                CarregaEmpresa(Dataset);

                //Carrega a lista de equipe

                CarregaEquipe(Dataset); //Carrega Lista de Equipes

                //Carrega a lista de equipe

                CarregaColaborador(Dataset,"Todos"); //Carrega Lista de Equipes

 }







//Carrega Informacao do Sharepoint

function Main()

{

   

   CarregaChart();

}




//Se Confirma operação executa ação

function Show_Confirm(msg)

{

  if (confirm(msg))

  {

return true;

  }

   else

  {

return false;

  }

}




//Mostra mensagem de alerta

function Show_Warning(msg)

{

alert("Atenção! "+msg);

}




//Mostra mensagem de alerta

function Show_Erro(msg)

{

alert("Erro! "+msg);

}




/*Função de mascara a data*/

function mascara_data(data, edit)

{ 

              var mydata = ''; 

              mydata = mydata + data; 

              if (mydata.length == 2)

 { 

                  mydata = mydata + '/'; 

                  edit.value = mydata; 

              } 

              if (mydata.length == 5)

 { 

                  mydata = mydata + '/'; 

                  edit.value = mydata; 

              } 

              if (mydata.length == 10)

 { 

                  verifica_data(edit); 

              } 

} 




/*Realiza a verificação da data*/           

function verifica_data(edit) 

{ 

 

        dia = (edit.value.substring(0,2)); 

        mes = (edit.value.substring(3,5)); 

        ano = (edit.value.substring(6,10)); 

   bar_x = (edit.value.substring(2,3)); 

   bar_y = (edit.value.substring(5,6)); 

   bar_z = ( bar_x + bar_y ) ;

     




            situacao = true; 

if( edit.value != "")

{

           // verifica o dia valido para cada mes 

           if ((dia < 01)||(dia < 01 || dia > 30) && (  mes == 04 || mes == 06 || mes == 09 || mes == 11 ) || dia > 31) { 

               situacao = false; 

           } 

 

           // verifica se o mes e valido 

           if (mes < 01 || mes > 12 ) { 

               situacao = false; 

           } 




           // verifica se e ano bissexto 

           if (mes == 2 && ( dia < 01 || dia > 29 || ( dia > 28 && (parseInt(ano / 4) != ano / 4)))) { 

               situacao = false; 

           } 




           // verifica se as barras foram preenchida

           if (bar_z  != "//") { 

               situacao = false; 

           } 




   

           if (edit.value == "") { 

               situacao = false; 

           } 




           if (situacao == false) { 

               

Show_Erro("Data Inválida! Formato da data: dd/mm/yyyy"); 

               edit.focus(); 

           } 

}

return situacao;

} 




/*Mascara hora*/

function mascara_hora(hora, edit)

{ 

              var myhora = ''; 

              myhora = myhora + hora; 

              if (myhora.length == 2){ 

                  myhora = myhora + ':'; 

                  edit.value = myhora; 

              } 

              if(myhora.length == 5){ 

                  verifica_hora(edit); 

              } 

} 







/*função de range numerico*/           

function checa_range(edit,inicio,fim)

{ 

               

              situacao = true; 




 if(Number(edit.value) == NaN) 

 {

                  situacao = false; 

alert('Valor não é um número');

                  edit.focus(); 

              } 

  else

 {

    var Nro = Number(edit.value)

if((Nro < inicio) || (Nro > fim))

{

                 situacao = false; 

              alert('Valor fora da faixa!'); 

              edit.focus(); 

}

   

              } 

 return situacao;




} 




//onclick event controler

function onclickEvento(Controler, Label)

{

    if (Controler==idColaborador)

    {

      //alert("ok Colaborador");

      Main();

    }

    if (Controler==idEquipe)

    {

       //alert("ok Equipe");

      //limpa_item(idColaborador);

      CarregaColaborador(Dataset,Label)

    }

}




//onchange event controler

function onchangeEvento(Controler)

{

    var Label = document.getElementById(Controler)[document.getElementById(Controler).selectedIndex].text;

    if (Controler==idColaborador)

    {

      //alert("ok Colaborador");




    }

    if (Controler==idEquipe)

    {

      //limpa_item(idColaborador);

      CarregaColaborador(Dataset,Label)

    }

}







/*Insere Elemento em uma lista de itens*/

function InsertItem(List, Item)

{    

    var x = document.getElementById(List);

    var option = document.createElement("option");

    //option.onclick=function(){onclickEvento(List,Item);};

    x.onchange=function(){onchangeEvento(List,Item);};

    option.text = Item;

    x.add(option);

}




//Limpa um item selecionado do combobox

function limpa_item(List)

{

    var combo = document.getElementById(List);

combo.options.length = 0;  

}







//Testa item verificando se o mesmo ja existe

function testa_item(combo,item)

{

    var boExiste = false;

    var x = document.getElementById(combo);




    for(ab=0;ab<x.options.length;ab++)

{

if(x.options[ab].text==item)

{

boExiste = true;

            break;

}

}

return boExiste;

}




function VerificaVetor(Vetor,item)

{

    var flgExiste = false;

    for(contador=0; contador<Vetor.length;contador++)

    {

        if(Vetor[contador]==item)

        {

            flgExiste=true;

            //Caso encontre sai imediatamente

            break;

        }       

    }

    if(flgExiste==true)

    {

        return contador;

    }

    else

    {

        return -1;

    }

}




//Pesquisa a ocorrencia de um registro dentro da lista DOM

function PertenceLista(Registro,idItem)

{ 

    var flgExist= false;

    Lista = document.getElementById(idItem);

    for(var contador=0;contador<Lista.length;contador++)

    {

        if(Lista.options[contador].value == Registro) 

        {

            flgExist = true;

            break;

        }

    }

    return flgExist;

}




</script>

Continue reading “Exemplo de Javascript Sharepoint”