Objeto Grid SF, com filtro de período

Referências base

O relatório requer referências ao bootstrap, jquery entre outros.

Cabeçalho html com referências

As referências buscam fontes de jscript e estilos (css) da biblioteca do componente e funções de apoio (referências iniciadas por cp). As funções de apoio, executam tarefas e atribuem valores mais utilizados. Porém podem ser ignoradas e ou sobrescritas com o objetivo de customizar o uso.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
 
    <!-- Bootstrap / jQuery -->
    <link href="http://lib.cloudpoint.com.br/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://lib.cloudpoint.com.br/jquery/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript" src="http://lib.cloudpoint.com.br/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <!-- SF css -->
    <link href="http://lib.cloudpoint.com.br/sf/14.4.0.15/web/content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
    <link href="http://lib.cloudpoint.com.br/sf/14.4.0.15/web/content/default-responsive.css" rel="stylesheet" />
    <link href="http://lib.cloudpoint.com.br/sf/14.4.0.15/web/content/ejthemes/responsive-css/ej.responsive.css" rel="stylesheet" />
 
    <!-- SF / jsrender javascript -->
    <script src="http://lib.cloudpoint.com.br/sf/14.4.0.15/web/scripts/jsrender.min.js"></script> 
    <script src="http://lib.cloudpoint.com.br/sf/14.4.0.15/web/scripts/ej.web.all.min.js" type="text/javascript"></script> 
    <script src="http://lib.cloudpoint.com.br/sf/14.4.0.15/web/scripts/properties.js" type="text/javascript"></script> 
 
    <!-- DateRangePicker -->
    <link rel="stylesheet" type="text/css" media="all" href="http://lib.cloudpoint.com.br/daterangepicker/daterangepicker.css" />
    <script type="text/javascript" src="http://lib.cloudpoint.com.br/daterangepicker/moment.js"></script> 
    <script type="text/javascript" src="http://lib.cloudpoint.com.br/daterangepicker/daterangepicker.js"></script> 
 
    <!-- CP funções básicas-->
    <script src="http://lib.cloudpoint.com.br/cpapi/cpapi-1.0.js"></script> 
 
    <!-- CP SF funções básicas -->
    <link href="http://lib.cloudpoint.com.br/cpapi/cpsf.css" rel="stylesheet" />
    <script src="http://lib.cloudpoint.com.br/cpapi/cpsf.js"></script> 
 
</head>
<body>
</body>
</html>

Corpo html (body)

É a parte visual do componente. Nesse exemplo são utilizados 3 objetos visuais:

Progress bar de espera;
Seletor de período;
Grid SF;

Além dos objetos, também são necessárias algumas funções javascript para a sincronização dos dados.

Progress bar de espera

Coloca uma barra de progressão enquanto os dados são baixados da nuvem para o cliente. Por padrão, fica oculto sendo usada a função de apoio cpMsgWait para deixar visível / ocultar.

HTML

<div id="cpMsgWait" class="progress" style="display:none">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
    Gerando análise...
  </div>
</div>

javascript

//Torna visível 
cpMsgWait('on');
 
//Torna oculto 
cpMsgWait('');

Seletor de período;

Cria um objeto do tipo calendário para seleção de período. No exemplo, o objeto está trazendo como padrão a data atual do sistema. Os dados iniciais devem estar alinhados com esta definição. Existe uma biblioteca "moment()", que possui funções auxiliares de manipulação de datas e horas.

HTML

  <input type="text" id="cpSelPeriodRange" value="moment().format('YYYY-MM-DD');" class="form-control demo" style="width: 190px" >

javascript

Função drawReport_Filter()

Executada após a seleção da data no componente "cpSelPeriodRange".

Prepara o objeto JSON dataSet Request (dstOpt) com os parametros, ativa a tela de progress bar e envia a requisição ao servidor, através da função "getData".

Importante não esquecer de preencher o código do "dataSetId" com o respectivo código do dataset.
Função cpSelPeriodRange2Show()

Faz o link do objeto html (cpSelPeriodRange) com a função de callback (drawReport_Filter()). Deve ser executada na primeira carga da página.

function drawReport_Filter() {
  var dstOpt = {
    dataSetId:"20170124004024"
    , sessionId:"#system.sessionId#"
    , var: [{id:"filterINI", value:"'" + arguments[0].format('YYYYMMDD') + "'"}, {id:"filterEND", value:"'" + arguments[1].format('YYYYMMDD') + "'"}]
  };
  cpMsgWait('on');
  cpGetData(dstOpt,drawReport);
}
 
//Filtro periodo 
cpSelPeriodRange2Show('cpSelPeriodRange',drawReport_Filter);

Grid SF;

Objeto grid com funções de seleção, filtro, ordenação, agrupamento entre outras. As funções auxiliares definem opções de uso padrão, mas podem ser alteradas ou sobrescritas.

HTML

<div id="Grid"></div>

javascript

Função cpSFAddCulture()

Adiciona parametros de localização PT-BR, como separador de decimal e milhar, formatação de data, entre outros.
Função drawReport()

Formata e carrega grid. Pode receber os dados a serem carregados no grid como parametro. Caso não receba parametro de dados, carrega grid vazio.
Função cpSFGridOpt()

Carrega objeto de opções do grid com os valores padrão. O objeto pode ser sobrescrito ou carregado sem o uso da função auxiliar.
Função cpMsgWait()

Oculta progress bar de espera.

//Cria formatação pt-BR 
cpSFAddCulture();
 
//Carrega Grid 
var sfdata;
function drawReport(){
  if (arguments[0] != '' && arguments[0] != undefined) {sfdata = eval("[" + arguments[0] + "]");} else {sfdata = eval("[]");};
 
  //Busca padrão para SF Grid. 
  var sfOpt = cpSFGridOpt();
  sfOpt.columns= [
      {field: 'nentity_to', headerText: 'Cliente' ,width: 80 ,textAlign: ej.TextAlign.Left  , headerTextAlign: 'Left'}
      ,{field: 'vol', headerText: 'Qtd' ,width: 30 ,textAlign: ej.TextAlign.Right , headerTextAlign: 'Right' ,format: '{0:N2}' }
      ,{field: 'val', headerText: 'Valor (R$)' ,width: 30 ,textAlign: ej.TextAlign.Right , headerTextAlign: 'Right' ,format: '{0:N2}' }
  ];
  sfOpt.summaryRows= [
      {  showCaptionSummary: true ,showTotalSummary: true ,title: 'Total'
        ,summaryColumns: [
           {summaryType: ej.Grid.SummaryType.Sum, displayColumn: 'vol', dataMember: 'vol', format: '{0:N2}', prefix: '' }
          ,{summaryType: ej.Grid.SummaryType.Sum, displayColumn: 'val', dataMember: 'val', format: '{0:N2}', prefix: '' }
        ]}
  ];
  $("#Grid").ejGrid(sfOpt);
  cpMsgWait('');
}

Código completo

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />
 
    <!-- Bootstrap / jQuery -->
    <link href="http://lib.cloudpoint.com.br/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="http://lib.cloudpoint.com.br/jquery/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript" src="http://lib.cloudpoint.com.br/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <!-- SF css -->
    <link href="http://lib.cloudpoint.com.br/sf/14.4.0.15/web/content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
    <link href="http://lib.cloudpoint.com.br/sf/14.4.0.15/web/content/default-responsive.css" rel="stylesheet" />
    <link href="http://lib.cloudpoint.com.br/sf/14.4.0.15/web/content/ejthemes/responsive-css/ej.responsive.css" rel="stylesheet" />
 
    <!-- SF / jsrender javascript -->
    <script src="http://lib.cloudpoint.com.br/sf/14.4.0.15/web/scripts/jsrender.min.js"></script> 
    <script src="http://lib.cloudpoint.com.br/sf/14.4.0.15/web/scripts/ej.web.all.min.js" type="text/javascript"></script> 
    <script src="http://lib.cloudpoint.com.br/sf/14.4.0.15/web/scripts/properties.js" type="text/javascript"></script> 
 
    <!-- DateRangePicker -->
    <link rel="stylesheet" type="text/css" media="all" href="http://lib.cloudpoint.com.br/daterangepicker/daterangepicker.css" />
    <script type="text/javascript" src="http://lib.cloudpoint.com.br/daterangepicker/moment.js"></script> 
    <script type="text/javascript" src="http://lib.cloudpoint.com.br/daterangepicker/daterangepicker.js"></script> 
 
    <!-- CP funções básicas-->
    <script src="http://lib.cloudpoint.com.br/cpapi/cpapi-1.0.js"></script> 
 
    <!-- CP SF funções básicas -->
    <link href="http://lib.cloudpoint.com.br/cpapi/cpsf.css" rel="stylesheet" />
    <script src="http://lib.cloudpoint.com.br/cpapi/cpsf.js"></script> 
 
</head>
<body>
  <div id="cpMsgWait" class="progress" style="display:none">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:100%">
      Gerando análise...
    </div>
  </div>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <table><tr>
          <td><h4 style="padding-right: 8px">Período:</h4></td>
          <td><input type="text" id="cpSelPeriodRange" value="moment().format('YYYY-MM-DD');" class="form-control demo" style="width: 190px" > </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12"><div id="Grid"></div></div>
    </div>
  </div>
 
<script type="text/javascript">
  //Cria formatação pt-BR 
  cpSFAddCulture();
 
  var sfdata;
  function drawReport(){
    if (arguments[0] != '' && arguments[0] != undefined) {sfdata = eval("[" + arguments[0] + "]");} else {sfdata = eval("[]");};
 
    //Busca padrão para SF Grid. 
    var sfOpt = cpSFGridOpt();
    sfOpt.columns= [
        {field: 'nentity_to'     ,headerText: 'Cliente'       ,width: 80 ,textAlign: ej.TextAlign.Left  , headerTextAlign: 'Left'}
        ,{field: 'vol' ,headerText: 'Qtd'        ,width: 30 ,textAlign: ej.TextAlign.Right , headerTextAlign: 'Right' ,format: '{0:N2}' }
        ,{field: 'val' ,headerText: 'Valor (R$)' ,width: 30 ,textAlign: ej.TextAlign.Right , headerTextAlign: 'Right' ,format: '{0:N2}' }
    ];
    sfOpt.summaryRows= [
        {  showCaptionSummary: true ,showTotalSummary: true ,title: 'Total'
          ,summaryColumns: [
             {summaryType: ej.Grid.SummaryType.Sum, displayColumn: 'vol', dataMember: 'vol', format: '{0:N2}', prefix: '' }
            ,{summaryType: ej.Grid.SummaryType.Sum, displayColumn: 'val'   , dataMember: 'val'   , format: '{0:N2}', prefix: '' }
          ]}
    ];
    $("#Grid").ejGrid(sfOpt);
    cpMsgWait('');
  }
 
  function drawReport_Filter() {
    var dstOpt = {
      dataSetId:"20170124004024"
      , sessionId:"#system.sessionId#"
      , var: [{id:"filterINI", value:"'" + arguments[0].format('YYYYMMDD') + "'"}, {id:"filterEND", value:"'" + arguments[1].format('YYYYMMDD') + "'"}]
    };
    cpMsgWait('on');
    cpGetData(dstOpt,drawReport);
  }
 
  //Filtro periodo 
  cpSelPeriodRange2Show('cpSelPeriodRange',drawReport_Filter);
 
  //Carrega report com dados iniciais 
  drawReport("");
</script> 
 
</body>
</html>