Exemplos de visualizações

Exemplos de uso das visualizações.

01. Agrupando os dados por colunas no IDSV de relatório

O IDSV de relatório possui um recurso de agrupamento por uma ou mais colunas. A propriedade responsável por esta configuração é a useToGroup.

Segue exemplo abaixo.

No IDS:

{
  includes: [
    -1897036629 //IQuery.ijs
  ],

  help: "Help do DataSource",

  availableFilters: [
    {
      classKey: -2008879000 /* Pedidos ou Provisões */,
      prefix: "PED",
      options: {}
    }
  ],

  availableColumns: [
    {
      classKey:  -2008879000 /* Pedidos ou Provisões */,
      prefix: "PED"
    }
  ],

  //Chamado durante a construção do DataSource.
  onCreate: function (dataSource) {
    var flt = dataSource.filters.filter("PED_EMISSAO_START")
    flt.help = "Data de Emissão Inicial"
    var flt = dataSource.filters.filter("PED_EMISSAO_END")
    flt.help = "Data de Emissão Final"
  },

  onGetQuery: function (dataSource, filters, columns) {
    var flts = filters.getIQueryFilters( "PED_*", "and" )
    var cols = columns.getIQueryColumns( "PED_*" )
    var iquery = IQuery.from( -2008879000 /* Pedidos ou Provisões */ )
    .where(flts)
    .column(cols)
    return iquery.toSql()
  }
}

No IDSQ:

{
  dataSourceKey: 40108470 /* /products/custom/.../datasource/Exemplo 000.ids */,
  filters: [
    {name: "PED_EMISSAO_START"},
    {name: "PED_EMISSAO_END"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME"},
    {name: "PED_QUANTIDADE"},
    {name: "PED_TOTAL" },
    {name: "PED_EMISSAO"}
  ]
}

No IDSV:

{
  dataSourceQueryKey: 41125078, /* /products/.../datasource/Exemplo 003 - Help do Processo.idsq */
  type: "simpleLayout",

  filters: [
    {name: "PED_EMISSAO_START", label: "Inicial", group: "Emissão"},
    {name: "PED_EMISSAO_END", column: 1, label: "Final", group: "Emissão"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME", label: "Recurso", useToGroup: true},
    {name: "PED_EMISSAO", label: "Emissão"},
    {name: "PED_QUANTIDADE", label: "Qtde"},
    {name: "PED_TOTAL", label: "Total"}
  ]
}

02. Definindo o texto de ajuda no processo executor de consultas automatizadas

O help do processo executor pode ser definido em dois lugares: no DataSource(IDS) ou no IDSV. Sendo que se os dois helps estiverem definidos prevalecerá o help do IDSV.

Segue exemplo abaixo.

No IDS:

{
  includes: [
    -1897036629 //IQuery.ijs
  ],

  help: "Help do DataSource",

  availableFilters: [
    {
      classKey: -2008879000 /* Pedidos ou Provisões */,
      prefix: "PED",
      options: {}
    }
  ],

  availableColumns: [
    {
      classKey:  -2008879000 /* Pedidos ou Provisões */,
      prefix: "PED"
    }
  ],

  // Chamado durante a construção do DataSource
  onCreate: function (dataSource) {
    var flt = dataSource.filters.filter("PED_EMISSAO_START")
    flt.help = "Data de Emissão Inicial"
    var flt = dataSource.filters.filter("PED_EMISSAO_END")
    flt.help = "Data de Emissão Final"
  },

  onGetQuery: function (dataSource, filters, columns) {
    var flts = filters.getIQueryFilters( "PED_*", "and" )
    var cols = columns.getIQueryColumns( "PED_*" )
    var iquery = IQuery.from( -2008879000 /* Pedidos ou Provisões */ )
    .where(flts)
    .column(cols)
    return iquery.toSql()
  }
}

No IDSQ:

{
  dataSourceKey: 40108470 /* /products/custom/.../datasource/Exemplo 000.ids */,
  filters: [
    {name: "PED_EMISSAO_START"},
    {name: "PED_EMISSAO_END"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME"},
    {name: "PED_RECURSO.CODIGO"},
    {name: "PED_QUANTIDADE"},
    {name: "PED_TOTAL" },
    {name: "PED_EMISSAO"}
  ]
}

No IDSV:

{
  dataSourceQueryKey: 41125078, /* /products/.../datasource/Exemplo 003 - Help do Processo.idsq */
  type: "simpleLayout",

  help: "Help do IDSV",

  filters: [
    {name: "PED_EMISSAO_START", label: "Inicial", group: "Emissão"},
    {name: "PED_EMISSAO_END", column: 1, label: "Final", group: "Emissão"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME", label: "Recurso"},
    {name: "PED_RECURSO.CODIGO", label: "Código"},
    {name: "PED_EMISSAO", label: "Emissão"},
    {name: "PED_QUANTIDADE", label: "Qtde"},
    {name: "PED_TOTAL", label: "Total"}
  ]
}

03. Exibindo a coluna de Ranking

O Ranking é um recurso do IDSV de SimpleLayout que ordena registros dentro de um agrupamento. A ordem usada pelo ranking é a definida na propriedade orderBy do IDSQ.

Seguem exemplo abaixo.

No IDS:

{
  includes: [
    -1897036629 //IQuery.ijs
  ],

  help: "Help do DataSource",

  availableFilters: [
    {
      classKey: -2008879000 /* Pedidos ou Provisões */,
      prefix: "PED",
      options: {}
    }
  ],

  availableColumns: [
    {
      classKey:  -2008879000 /* Pedidos ou Provisões */,
      prefix: "PED"
    }
  ],

  //Chamado durante a construção do DataSource.
  onCreate: function (dataSource) {
    var flt = dataSource.filters.filter("PED_EMISSAO_START")
    flt.help = "Data de Emissão Inicial"
    var flt = dataSource.filters.filter("PED_EMISSAO_END")
    flt.help = "Data de Emissão Final"
  },

  onGetQuery: function (dataSource, filters, columns) {
    var flts = filters.getIQueryFilters( "PED_*", "and" )
    var cols = columns.getIQueryColumns( "PED_*" )
    var iquery = IQuery.from( -2008879000 /* Pedidos ou Provisões */ )
    .where(flts)
    .column(cols)
    return iquery.toSql()
  }
}

No IDSQ:

{
  dataSourceKey: 40108470, /* /products/.../datasource/Exemplo 000.ids */
  filters: [
    {name: "PED_EMISSAO_START"},
    {name: "PED_EMISSAO_END"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME"},
    {name: "PED_QUANTIDADE"},
    {name: "PED_UNITARIO"}
  ],
  orderBy: "PED_RECURSO.NOME"
}

No IDSV:

{
  dataSourceQueryKey: 41295202, /* /products/.../datasource/Exemplo 009 - Hanking.idsq */
  type: "simpleLayout",
  showRankingColumn: true,
  labelRankingColumn: "Classificação",
  filters: [
    {name: "PED_EMISSAO_START", label: "Inicial", group: "Emissão"},
    {name: "PED_EMISSAO_END", column: 1, label: "Final", group: "Emissão"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME", label: "Recurso"},
    {name: "PED_UNITARIO", label: "Valor", simpleLayoutAggregate: "sum"}
  ]
}

04. Ordenando uma consulta no IDSQ/IDSV

A ordenação das colunas pode ser feita tanto do IDSQ quanto no IDSV. Sendo que, em caso de dupla declaração, valerá a declaração do IDSV. A propriedade responsável pela definição da ordenação é a orderBy. Deve ser passado para esta propriedade uma String com a lista de nome de colunas separados por ;(ponto-e-vírgula), sendo que no caso de ordenação decrescente, deve ser usado o prefixo -(menos) antes no nome do campo. É semelhante ao valor passado para a propriedade indexFieldNames do DataSet.

Segue exemplo abaixo.

No IDS:

{
  includes: [
    -1897036629 //IQuery.ijs
  ],

  help: "Help do DataSource",

  availableFilters: [
    {
      classKey: -2008879000 /* Pedidos ou Provisões */,
      prefix: "PED",
      options: {}
    }
  ],

  availableColumns: [
    {
      classKey:  -2008879000 /* Pedidos ou Provisões */,
      prefix: "PED"
    }
  ],

  //Chamado durante a construção do DataSource.
  onCreate: function (dataSource) {
    var flt = dataSource.filters.filter("PED_EMISSAO_START")
    flt.help = "Data de Emissão Inicial"
    var flt = dataSource.filters.filter("PED_EMISSAO_END")
    flt.help = "Data de Emissão Final"
  },

  onGetQuery: function (dataSource, filters, columns) {
    var flts = filters.getIQueryFilters( "PED_*", "and" )
    var cols = columns.getIQueryColumns( "PED_*" )
    var iquery = IQuery.from( -2008879000 /* Pedidos ou Provisões */ )
    .where(flts)
    .column(cols)
    return iquery.toSql()
  }
}

No IDSQ:

{
  dataSourceKey: 40108470 /* /products/.../datasource/Exemplo 000.ids */,

  filters: [
    {name: "PED_EMISSAO_START"},
    {name: "PED_EMISSAO_END"}
  ],

  columns: [
    {name: "PED_RECURSO.NOME"},
    {name: "PED_RECURSO.CODIGO"},
    {name: "PED_QUANTIDADE"},
    {name: "PED_TOTAL"},
    {name: "PED_EMISSAO"}
  ],

  //Este ORDER BY será sobrescrito pelo ORDER BY definido no IDSV, pois o IDSV
  //tem maior prioridade
  orderBy: "PED_RECURSO.NOME;-PED_RECURSO.CODIGO"
}

No IDSV:

{
  dataSourceQueryKey: 41125076 /* /products/.../datasource/Exemplo 002 - Order.idsq */,
  type: "simpleLayout",

  filters: [
    {name: "PED_EMISSAO_START", label: "Inicial", group: "Emissão"},
    {name: "PED_EMISSAO_END", column: 1, label: "Final", group: "Emissão"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME", label: "Recurso"},
    {name: "PED_RECURSO.CODIGO", label: "Código"},
    {name: "PED_EMISSAO", label: "Emissão"},
    {name: "PED_QUANTIDADE", label: "Qtde"},
    {name: "PED_TOTAL", label: "Total"}
  ],

  //Este ORDER BY irá sobrescrever o ORDER BY definido no IDSQ, pois o IDSV
  //tem maior prioridade
  orderBy: "-PED_RECURSO.CODIGO;PED_RECURSO.NOME"
}

05. Personalizando a mensagem do processo exibida quando a consulta não traz registros

A propriedade que realiza esta configuração fica no IDSV e se chama noResultsMessage.

Segue um exemplo.

No IDSV:

{
  dataSourceQueryKey: 41295205, /* /.../datasource/Exemplo 010 - noResultsMessage.idsq */
  type: "simpleLayout",
  noResultsMessage: "Não foram encontrados registros nesta consulta",
  filters: [
    {name: "PED_EMISSAO_START", label: "Inicial", group: "Emissão"},
    {name: "PED_EMISSAO_END", column: 1, label: "Final", group: "Emissão"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME", label: "Recurso"},
    {name: "PED_UNITARIO", label: "Valor", simpleLayoutAggregate: "sum"}
  ]
}

06. Configurando o IDSV para trazer uma coluna calculada com a média ponderada

As colunas do IDSV possuem a propriedade simpleLayoutAggregate, que indica seu uso para agregação. Elas possuem também a propriedade simpleLayoutWeight, na qual pode ser informada uma coluna de pesos para calculo da média ponderada.

Segue abaixo um exemplo:

No IDS:

{
  includes: [
      -1897036629 //IQuery.ijs
  ],

  help: "Help do DataSource",

  availableFilters: [
    {classKey: -2008879000 /* Pedidos ou Provisões */, prefix: "PED"}
  ],

  availableColumns: [
    {classKey: -2008879000 /* Pedidos ou Provisões */, prefix: "PED" }
  ],

  onCreate: function (dataSource) {
    var flt = dataSource.filters.filter("PED_EMISSAO_START")
    flt.help = "Data de Emissão Inicial"
    var flt = dataSource.filters.filter("PED_EMISSAO_END")
    flt.help = "Data de Emissão Final"
  },

  onGetQuery: function (dataSource, filters, columns) {
    var flts = filters.getIQueryFilters( "PED_*", "and" )
    var cols = columns.getIQueryColumns( "PED_*" )
    var iquery = IQuery.from( -2008879000 /* Pedidos ou Provisões */ )
    .where(flts)
    .column(cols)
    return iquery.toSql()
  },

  //Método opcional usado para alterar o o DataSet gerado pelo SQL do onGetQuery
  //Neste caso específico, o DataSet gerado pelo SQL do onGetQuery está sendo
  //totalmente ignorado, sendo retornado outro DataSet.
  onMountDataSet: function (dataSource, ds) {
    ds = new DataSet()
    ds.createField( "PED_RECURSO_NOME", "string", 20 )
    ds.createField( "PED_QUANTIDADE", "number" )
    ds.createField( "PED_UNITARIO", "number" )
    ds.create()

    ds.append()
    ds.ped_recurso_nome = "Prod A"
    ds.ped_quantidade = 2
    ds.ped_unitario = 10
    ds.post()
    ds.append()
    ds.ped_recurso_nome = "Prod A"
    ds.ped_quantidade = 1
    ds.ped_unitario = 30
    ds.post()
    ds.append()
    ds.ped_recurso_nome = "Prod B"
    ds.ped_quantidade = -1
    ds.ped_unitario = 20
    ds.post()
    ds.append()
    ds.ped_recurso_nome = "Prod B"
    ds.ped_quantidade = 1
    ds.ped_unitario = 20
    ds.post()
    ds.append()
    ds.ped_recurso_nome = "Prod C"
    ds.ped_quantidade = 2
    ds.ped_unitario = -20
    ds.post()
    ds.append()
    ds.ped_recurso_nome = "Prod C"
    ds.ped_quantidade = 1
    ds.ped_unitario = -20
    ds.post()
    return ds
  }
}

No IDSQ:

{
  dataSourceKey: 41295126, /* /products/.../datasource/Exemplo 001.ids */
  filters: [
    {name: "PED_EMISSAO_START"},
    {name: "PED_EMISSAO_END"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME"},
    {name: "PED_QUANTIDADE"},
    {name: "PED_UNITARIO"}
  ],
  orderBy: "PED_RECURSO.NOME"
}

No IDSV:

{
  dataSourceQueryKey: 41294976, /* /.../datasource/Exemplo 006 - Media Ponderada no IDSV.idsq */
  type: "simpleLayout",
  filters: [
    {name: "PED_EMISSAO_START", label: "Inicial", group: "Emissão"},
    {name: "PED_EMISSAO_END", column: 1, label: "Final", group: "Emissão"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME", label: "Recurso", useToGroup: true},
    {name: "PED_UNITARIO", label: "Valor. Medio",
    simpleLayoutAggregate: "avg", simpleLayoutWeight: "PED_QUANTIDADE"}
  ]
}

É possível também gerar o mesmo relatório em forma de árvore. Para isso basta fazer uso da propriedade groupExpansionLevel. Vide o exemplo do IDSV abaixo:

{
  dataSourceQueryKey: 41294976, /* /.../datasource/Exemplo 006 - Media Ponderada no IDSV.idsq */
  type: "simpleLayout",
  groupExpansionLevel: 3,
  filters: [
    {name: "PED_EMISSAO_START", label: "Inicial", group: "Emissão"},
    {name: "PED_EMISSAO_END", column: 1, label: "Final", group: "Emissão"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME", label: "Recurso", useToGroup: true},
    {name: "PED_UNITARIO", label: "Valor. Medio",
    simpleLayoutAggregate: "avg", simpleLayoutWeight: "PED_QUANTIDADE"}
  ]
}

07. Criando links em IDSV

Para um relatório mais dinâmico, criamos o suporte à links. Esses links serão ligados à colunas, podendo nos seus parâmetros conter valores literais ou referenciar valores contidos em outras colunas.

O link deverá ser criado como um objeto literal contendo essas propriedades:

- Propriedades do link:

{string} label
Nome de exibição do link.

{string} target
Nome de interação do processo que o link apontará.

{number} processKey Opcional
Chave do processo que o link apontará.

{number} dsvKey Opcional
Chave do dsv que o link apontará.

{boolean} newTab Opcional
Indica se o link abrirá em uma nova aba.

{Object} params Opcional
Objeto literal contendo um conjunto de chaves e valores que serão usados no processo alvo. Esses parâmetros suportam ainda o referenciamento dos valores contidos em outras colunas. Para referenciar outra coluna use o formato: ‘column: ’.

- Exemplos:

  • Criação de links sem parâmetros:

    No exemplo abaixo está sendo criado um único link na coluna U_iName sem parâmetros. Então quando acionado esse link irá abrir o processo sem passar nenhum valor para ele.

    {
      dataSourceQueryKey: -1891504223, //Usuarios habilitados.idsq
      type: "simpleLayout",
    
      filters: [
        {name: "begin", label: "Data inicial", required: true},
        {name: "end", label: "Data final", required: true}
      ],
      columns: [
        {name: "U_iClass.NOME", label: "Classe", useToGroup: true},
        {name: "U_iName", label: "Nome do usuário",
          links: [{label: 'Teste', target: 'teste', processKey: 10112}]},
        {name: "U_iFullName", label: "Nome completo do usuário"},
        {name: "U_iBegin", label: "Início"},
        {name: "U_iEnd", label: "Fim", simpleLayoutAggregate: "count"}
      ]
    }
    
  • Criação de links com parâmetros de valor literal:

    No exemplo abaixo está sendo criado um único link na coluna U_iName com parâmetro literal. Então quando esse link for acionado será criada uma nova aba contendo o processo de chave 10112, e nele será criada uma propriedade de nome ’teste’ com o valor ‘c3po’ no processo referenciado.

    {
      dataSourceQueryKey: -1891504223, //Usuarios habilitados.idsq
      type: "simpleLayout",
    
      filters: [
        {name: "begin", label: "Data inicial", required: true},
        {name: "end", label: "Data final", required: true}
      ],
      columns: [
        {name: "U_iClass.NOME", label: "Classe", useToGroup: true},
        {name: "U_iName", label: "Nome do usuário",
          links: [{label: 'Teste', target: 'teste', processKey: 10112, newTab: true,
              params: {teste: 'c3po'}}]},
        {name: "U_iFullName", label: "Nome completo do usuário"},
        {name: "U_iBegin", label: "Início"},
        {name: "U_iEnd", label: "Fim", simpleLayoutAggregate: "count"}
      ]
    }
    
  • Criação de links com parâmetros que referenciam outras colunas:

    No exemplo abaixo estão sendo criados dois links na coluna U_iName, um com parâmetro literal utilizado no exemplo anterior e outro com parâmetro que referencia outra coluna. Quando esse link for acionado irá aparecer o menu padrão do framework para links contendo um link chamado “Teste literal” que levará o parâmetro “teste” contendo o valor “c3po” para o processo apontado e um link referenciando o valor da coluna U_iFullName.

    {
      dataSourceQueryKey: -1891504223, //Usuarios habilitados.idsq
      type: "simpleLayout",
    
      filters: [
        {name: "begin", label: "Data inicial", required: true},
        {name: "end", label: "Data final", required: true}
      ],
      columns: [
        {name: "U_iClass.NOME", label: "Classe", useToGroup: true},
        {name: "U_iName", label: "Nome do usuário",
          links: [{label: 'Teste literal', target: 'teste', processKey: 10112, newTab: true,
              params: {teste: 'c3po'}},
            {label: 'Teste coluna', target: 'teste', processKey: 10112, newTab: true, params:
              {teste: 'column: U_iFullName'}}]}]},
        {name: "U_iFullName", label: "Nome completo do usuário"},
        {name: "U_iBegin", label: "Início"},
        {name: "U_iEnd", label: "Fim", simpleLayoutAggregate: "count"}
      ]
    }
    

08. Usando DataSourceVisualization com a funcionalidade pivot

Criando o IDS:

{
  includes: [
    -1897036629 //IQuery.ijs */
  ],

  help: "Help do DataSource",

  availableFilters: [
    {
      classKey: -2008879000 /* Pedidos ou Provisões */,
      prefix: "PED",
      options: {}
    }
  ],

  availableColumns: [
    {
      classKey:  -2008879000 /* Pedidos ou Provisões */,
      prefix: "PED"
    }
  ],

  //Chamado durante a construção do DataSource.
  onCreate: function (dataSource) {
    var flt = dataSource.filters.filter("PED_EMISSAO_START")
    flt.help = "Data de Emissão Inicial"
    var flt = dataSource.filters.filter("PED_EMISSAO_END")
    flt.help = "Data de Emissão Final"
  },

  onGetQuery: function (dataSource, filters, columns) {
    var flts = filters.getIQueryFilters( "PED_*", "and" )
    var cols = columns.getIQueryColumns( "PED_*" )
    var iquery = IQuery.from( -2008879000 /* Pedidos ou Provisões */ )
    .where(flts)
    .column(cols)
    return iquery.toSql()
  }
}

Criando o IDSQ:

{
  dataSourceKey: 40108470 /* /products/.../datasource/Exemplo 001.ids */,
  filters: [
    {name: "PED_EMISSAO_START"},
    {name: "PED_EMISSAO_END"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME", alias: "Produto"}, //Campo de agrupamento
    {name: "PED_QUANTIDADE", aggregate: "sum", alias: "Qtde"}, //Campo totalizador
    {name: "PED_TOTAL", aggregate: "sum", alias: "Vlr"}, //Campo totalizador
    {name: "PED_EMISSAO", pivot: true, alias:""} //Campo pivot
  ]
}

Criando o IDSV:

{
  dataSourceQueryKey: 40108558 /* /products/.../datasource/Exemplo 001 - Pivot.idsq */,
  type: "simpleLayout", //AQUI é definido o tipo do IDSV
  filters: [
    {name: "PED_EMISSAO_START", label: "Inicial", group: "Dt. Emissão"},
    {name: "PED_EMISSAO_END", column: 1, label: "Final", group: "Dt. Emissão"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME"},
    //Aqui vemos o uso da propriedade columnGroupType, ela é muito importante em IDSV
    //com pivoteamento.
    //Os possíveis valores para esta propriedade podem ser:
    //"none", "groupByTotalField" ou "groupByPivotValue" (o valor padrão é "groupByTotalField")
    //Mais detalhes: Vide [1]
    {name: "PED_EMISSAO", columnGroup: "EMISSÃO DO PEDIDO",
    columnGroupType: "groupByPivotValue"},
    {name: "PED_QUANTIDADE"},
    {name: "PED_TOTAL"}
  ]
}

[1] propriedade columnGroupType:

  • Esta propriedade só está disponível em colunas cuja configuração no IDSQ esteja definida como coluna pivot.
  • Se o seu valor for diferente de “none”, o valor da propriedade columnGroup será sobrescrito.

09. Definindo o nível padrão de expansão do agrupamento da 'tree' gerada pelo pivot

O nível padrão de expansão de agrupamento da Tree no SimpleLayout é definido pela propriedade groupExpansionLevel, na configuração das consultas automatizadas não poderia ser diferente. Como se trata de uma configuração de visualização, ela é realizada no IDSV.

Segue abaixo um exemplo:

{
  dataSourceQueryKey: 40108558 /* Chave do IDSQ correspondente */,
  type: "simpleLayout",

  groupExpansionLevel: 3,

  filters: [
    {name: "PED_EMISSAO_START", label: "Inicial", group: "Emissão"},
    {name: "PED_EMISSAO_END", column: 1, label: "Final", group: "Emissão"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME"},
    {name: "PED_RECURSO.CODIGO", showOutOfTree: true, label: "Código"},
    {
      name: "PED_EMISSAO",
      columnGroup: "EMISSÃO DO PEDIDO",
      columnGroupType: "groupByTotalField",
      simpleLayoutAggregate: "sum"
    },
    {name: "PED_QUANTIDADE"},
    {name: "PED_TOTAL"}
  ]
}

OBS.: Esta opção de configuração só está disponível para o IDSV cujo o tipo é SimpleLayout.


10. Exibindo de colunas de agrupamento de um DataSet pivoteado fora da Tree

Ao configurar um IDSQ para usar o recurso de pivoteamento dos dados do DataSource, os campos de agrupamentos de dados são exibidos em árvore. Ocorre que em alguns casos é desejável que o campo agrupador não seja exibido na árvore, mas na mesma linha que aparecem os valores agregados.

Esta configuração é realizada através da propriedade useToGroup. Uma vez que a exibição na árvore é feita através de agrupamento de colunas, se indicarmos o valor de useToGroup de uma coluna como falso, a coluna não será agrupada.

A propriedade showOutOfTree, que possuía o mesmo objetivo, foi descontinuada. Quando utilizada, ela utilizava a lógica contrária a useToGroup - as colunas eram removidas do agrupamento se showOutOfTree fosse verdadeira. Esse comportamento ainda é mantido por questões de compatibilidade.

Segue um exemplo do uso da propriedade useToGroup.

Código do IDS:

{
  includes: [
    -1897036629 //IQuery.ijs
  ],

  help: "Help do DataSource",

  availableFilters: [
    {
      classKey: -2008879000 /* Pedidos ou Provisões */,
      prefix: "PED",
      options: {}
    }
  ],

  availableColumns: [
    {
      classKey:  -2008879000 /* Pedidos ou Provisões */,
      prefix: "PED"
    }
  ],

  // Chamado durante a construção do DataSource.
  onCreate: function (dataSource) {
    var flt = dataSource.filters.filter("PED_EMISSAO_START")
    flt.help = "Data de Emissão Inicial"
    var flt = dataSource.filters.filter("PED_EMISSAO_END")
    flt.help = "Data de Emissão Final"
  },

  onGetQuery: function (dataSource, filters, columns) {
    var flts = filters.getIQueryFilters( "PED_*", "and" )
    var cols = columns.getIQueryColumns( "PED_*" )
    var iquery = IQuery.from( -2008879000 /* Pedidos ou Provisões */ )
    .where(flts)
    .column(cols)
    return iquery.toSql()
  }
}

Código do IDSQ:

{
  dataSourceKey: 40108470 /* /products/.../datasource/Exemplo 001.ids */,
  filters: [
    {name: "PED_EMISSAO_START"},
    {name: "PED_EMISSAO_END"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME", alias: "Produto"}, //Campo de agrupamento
    {name: "PED_RECURSO.CODIGO", alias: "Codigo"}, //Campo pivot vertical
    {name: "PED_QUANTIDADE", aggregate: "sum", alias: "Qtde"}, //Campo totalizador
    {name: "PED_TOTAL", aggregate: "sum", alias: "Vlr"}, //Campo totalizador
    {name: "PED_EMISSAO", pivot: true} //Campo pivot horizontal
  ]
}

Código do IDSV:

{
  dataSourceQueryKey: 40108558 /* /products/.../datasource/Exemplo 001 - Pivot.idsq */,
  type: "simpleLayout",
  filters: [
    {name: "PED_EMISSAO_START", label: "Inicial", group: "Emissão"},
    {name: "PED_EMISSAO_END", column: 1, label: "Final", group: "Emissão"}
],
  columns: [
    {name: "PED_RECURSO.NOME"},
    {name: "PED_RECURSO.CODIGO", useToGroup: false, label: "Código"},
    {name: "PED_EMISSAO", columnGroup: "EMISSÃO DO PEDIDO", columnGroupType: "groupByTotalField"},
      // Pode ser: "none", "groupByTotalField" ou "groupByPivotValue"
      // (o valor padrão é "groupByTotalField")
    {name: "PED_QUANTIDADE"},
    {name: "PED_TOTAL"}
  ]
}

11. Exibindo imagens em visualizações

A exibição de imagem dar-se-á utilizando a propriedade renderAsImage no momento de configurar uma coluna. Ao configurar essa propriedade em uma coluna, o valor contido na imagem será transformado no momento da renderização para que seja exibido uma imagem. Por esse motivo, o valor presente no campo deve ser uma URI (endereço) para uma imagem presente no sistema.

Outra forma de configurar a exibição de uma imagem é utilizando a dimensão “!IMAGE” na coluna. Ao utilizar-se dessa configuração, o sistema tentará capturar a imagem principal vinculada ao valor do registro da coluna configurada.

Exemplo:

{
  dataSourceQueryKey: -1892603784, //./Users.idsq
  type: "report",

  filters: [
    {name: "U_iName", required: false, order: 10, label: "Nome do usuário", help: "Ajuda do IDSV"}
  ],

  columns: [
    {name: "U_iName", label: "Nome"},
    {name: "U_iKey!IMAGE", label: "Imagem", width: 20, height: 30},
    {name: "U_iClass", label: "Classe"}
  ]
}

No exemplo citado acima o sistema buscará a imagem vinculada ao valor presente na coluna “U_IKEY”, que no caso é a chave do usuário. Ou seja, utilizando-se da chave do usuário, será buscada a imagem que esteja vinculada a essa chave.

Ainda é possível definir a largura (width) e altura (height) que a imagem terá.


12. Publicando o mesmo IDSV em mais de um local no menu principal

Um arquivo IDSV pode retornar um objeto literal com a definição ou a instância de uwl.dsv.VisualizationDef(). Essa última opção é útil para criar relatórios que precisem ser configurados programaticamente ou para criar réplicas de um mesma visualização em vários locais da árvore de processos do menu principal.

Por exemplo, o conteúdo do arquivo IDSV "/Menu/Administração do sistema/Segurança/Grupos papéis e usuários/Usuários habilitados no período.idsv" é:

require('@nginstack/admin/modules/Administração do sistema/Segurança/Grupos, papéis e usuários/Usuários habilitados no período.js')();

Para criar um atalho para o mesmo relatório, em outro diretório, basta criar um outro arquivo IDSV na Virtual File System com o mesmo conteúdo.

Um arquivo IDSV declarado de forma programática deve retornar uma instância uwi.dsv.VisualizationDef ou uma classe filha, como uwi.dsv.ReportDef. Um exemplo de um relatório declarado dessa forma encontra-se no arquivo "@nginstack/admin/modules/Administração do sistema/Segurança/Grupos, papéis e usuários/Usuários habilitados no período.js". Segue exemplo:

const ReportVisualizationDef = require('@nginstack/web-framework/lib/dsv/ReportVisualizationDef.js');

var def = new ReportVisualizationDef();
def.dataSourceQuery = {
dataSource: -1891504224, // Usuários habilitados no período.ids
filters: [
  {name: "xValidity_START"},
  {name: "xValidity_END"}
],
columns: [
  {name: "U_iKey"},
  {name: "U_iName"},
  {name: "U_iFullName"},
  {name: "U_iClass.NOME"},
  {name: "U_iStatus.iName"},
  {name: "U_iBegin"},
  {name: "U_iEnd"}
]
};
def.filters = [
  {name: "xValidity_START", label: "Data inicial", required: true},
  {name: "xValidity_END", label: "Data final", required: true}
];
def.columns = [
  {name: "U_iClass.NOME", label: "Classe", useToGroup: true},
  {name: "U_iName", label: "Nome do usuário"},
  {name: "U_iFullName", label: "Nome completo do usuário"},
  {name: "U_iStatus.iName", label: 'Estado atual do usuário'},
  {name: "U_iBegin", label: "Início"},
  {name: "U_iEnd", label: "Fim", simpleLayoutAggregate: "count"}
];

var notes = '<b>Estados dos usuários:</b><br>';
var userStatutes = classes.getCachedDataSet(-1898143910); // User statuses
userStatutes.indexFieldNames = 'iCode';
for (userStatutes.first(); !userStatutes.eof; userStatutes.next()) {
notes += ' - <b>' + userStatutes.icode + '</b>: ' +
  userStatutes.idescription + '<br>';
}
notes += '<br><b>Importante</b>: um usuário será considerado habilitado por ' +
  'este relatório se a conta dele estiver vigente em pelo menos um dia ' +
  'do período analisado. O estado do usuário não é levado em ' +
  'consideração nessa classificação.';

def.footer.complement = notes;
var r = def;

13. Totalizando colunas do IDSV de SimpleLayout

No SimpleLayout é possível totalizar colunas através da propriedade totalContent. O mesmo comportamento do SimpleLayout foi levado para os IDSV’s cujo o tipo é simpleLayout.

Segue abaixo um exemplo da configuração de um IDSV de SimpleLayout com totalização:

{
  dataSourceQueryKey: 40108558 /* /products/.../datasource/Exemplo 001 - Pivot.idsq */,
  type: "simpleLayout",

  groupExpansionLevel: 3,

  filters: [
    {name: "PED_EMISSAO_START", label: "Inicial", group: "Emissão"},
    {name: "PED_EMISSAO_END", column: 1, label: "Final", group: "Emissão"}
  ],
  columns: [
    {name: "PED_RECURSO.NOME"},
    {name: "PED_RECURSO.CODIGO", showOutOfTree: true, label: "Código"},
    {
      name: "PED_EMISSAO",
      columnGroup: "EMISSÃO DO PEDIDO",
      columnGroupType: "groupByTotalField",
      simpleLayoutAggregate: "sum"
    },
    {name: "PED_QUANTIDADE"},
    {name: "PED_TOTAL"}
  ]
}

Os possíveis valores para preenchimento da propriedade simpleLayoutAggregate do IDSV são os mesmos do propriedade totalContent do SimpleLayout.

No exemplo acima a propriedade simpleLayoutAggregate foi definida em um campo que foi pivoteado no seu IDSQ correspondente. O resultado será que toda coluna gerada dinamicamente pela operação de pivot terá a propriedade totalContent=“sum”.