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>