Categorias
TOTVS Fluig

TOTVS FLUIG – DatasetFactory – O que é, e como funciona?

Olá, Fluiger!
Se você é iniciante ou experiente, com certeza já se deparou com o erro DatasetFactory is not defined ao tentar invocar um dataset em um script de formulário, e corrigiu referenciando o arquivo vcXMLRPC.js.

Você já se perguntou por que devemos referenciar esse arquivo?
O vcXMLRPC.js é uma biblioteca que tem como principal objetivo, abstair e facilitar requisições http à api /ecm/dataset/datasets do Fluig, utilizando o conceito de factory.

A principal factory desta biblioteca, é a DatasetFactory. É nela que encontramos as funções que utilizamos em nossas chamadas, como getDataset e createConstraint.

Vamos entender o que acontece por debaixo dos panos, quando chamamos essas funções?
Inspecione a página do formulário, e na aba Sources do navegador, pesquise e acesse o arquivo vcXMLRPC.js.

O arquivo possui diversas funções, mas vamos concentrar nas principais:

DatasetFactory.createConstraint

Essa é a função que chamamos quando queremos invocar um dataset, com uma ou mais restrições (filtros). A createConstraint, cria e retorna um novo objeto chamado SearchConstraint. Na linha 216, temos a definição de SearchConstraint que recebe os argumentos que informamos (field, initialValue, finalValue, type, e likeSearch).
Para initialValue e finalValue, há ainda, validações os para garantir que não sejam nulos. Se forem nulos, são substituídos por uma string especial “NULL___VALUE“.

DatasetFactory.getDataset

Essa é a função que de fato invoca um dataset. Assim como a createConstraint, também precisamos passar alguns argumentos (name, fields, constraints, order, callback), que no final serão adicionados ao objeto data.

Logo em seguida, temos uma requisição AJAX, com alguns parâmetros (url, data, async), no final, se tudo ocorrer bem, os registros do dataset serão adicionados à variável result, e retornados ao usuário.

Obs: Um dos parâmetros da requisição AJAX realizada acima, é o datasetsUrl. Trata-se de uma propriedade do objeto fluigXMLRPC, definido na linha 80. Esta propriedade é a concatenação de:

  • window.location.protocol: http ou https
  • window.location.host: endereço do seu Fluig
  • /api/public/ecm/data/datasets/: endpoint da API Fluig de Datasets.

É isso, Fluigers! Concluo esse post, querendo saber o que vocês acharam desse tipo de conteúdo mais voltado pra curiosidades do desenvolvimento Fluig? Deixe um comentário ou sugestão!

Saiba mais sobre o conceito de Factory, em Javascript, assistindo esse vídeo do meu querido Filipe Deschamps <3 https://youtu.be/uyOJ2jjBtBs?si=LksaPAQMR5Wscqja

Forte abraço!!!

Fluig é uma marca registrada da Totvs S.A.

Categorias
TOTVS Fluig

TOTVS FLUIG – Dataset com todos os papéis de um usuário

Olá, Fluiger!

Neste tutorial, vou te ensinar a criar um dataset que te retorna todos os papéis de um usuário.

O primeiro passo é acessar PAINEL DE CONTROLE >> DESENVOLVIMENTO >> DATASETS.
Na tela a seguir, clique em NOVO DATASET >> SIMPLES.

Agora, informe o Código e a Descrição do dataset conforme desejado. No campo Serviço, escolha a opção AppDS.

No campo Tabela, clique no ícone da lupa.

Um modal será exibido. Clique no campo de pesquisa, escreva fdn_userrole , eclique no ícone de lupa. O resultado será exibido, clique nesta linha. Fdn_userrole é o nome da tabela que contém os registros que necessitamos.

Agora, voltamos para a tela de configuração. Se desejar, é possível remover colunas, definir um filtro, e até escolher qual a ordenação. Quando terminar, clique em Salvar.

Agora que criamos o dataset, podemos consumi-lo. Neste tutorial, mostrarei o resultado consumindo pelo Eclipse.
Clique em CONSULTAR DATASET.

Filtre pelo código do dataset que você definiu, e clique em FINISH.

Todos os resultados do dataset serão exibidos. Clique em CONFIGURAR FILTRO.

Clique em NEXT até exibir a tela abaixo. Escolha a coluna LOGIN, informe a matrícula do usuário no campo VALOR INICIAL e VALOR FINAL, e clique em ADICIONAR. O filtro será exibido na caixa abaixo. Clique em FINISH.

Agora, podemos ver os registros conforme o filtro. O meu usuário nesta base, está atribuído a todos esses papéis, na coluna ROLE_CODE.

Esse tutorial te ajudou? Então, deixe um comentário ou sugestão!
Forte abraço!

Fluig é uma marca registrada da Totvs S.A.

Documentação Oficial TOTVS Fluig: https://tdn.totvs.com/display/public/fluig/TOTVS+FLUIG

Categorias
TOTVS Fluig

TOTVS FLUIG – Exportar Dados de uma Widget para uma Planilha Excel

Olá, Fluiger!

No post de hoje, te ajudarei a criar uma função para exportar dados de uma widget, para uma planilha excel (Isso também serve para dados que estão em um formulário).

O primeiro passo, é criar uma widget no Eclipse, acessar o arquivo view.ftl, substituir o código existente por este trecho a seguir, e salvar.
Podemos observar os principais itens desse arquivo:
– Linha 7: Título da nossa tabela.
– Linha 11: Nossa tabela com 3 colunas.
– Linha 27: O botão que acionaremos sempre que quisermos exportar os dados da nossa widget.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()">
<div class="container" style="width: 100%;">
<div class="panel panel-primary">
<div class="panel-heading" style="font-weight: bolder;">
PREVISÃO DO TEMPO - CAMPINAS/SP
</div>
<div class="panel-body">
<div class="row">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="tbPrevisoes">
<thead>
<tr>
<th>DATA</th>
<th>TEMPERATURA MINIMA</th>
<th>TEMPERATURA MAXIMA</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="form-group">
<button class="btn btn-default" data-exportar-dados>Exportar</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()"> <div class="container" style="width: 100%;"> <div class="panel panel-primary"> <div class="panel-heading" style="font-weight: bolder;"> PREVISÃO DO TEMPO - CAMPINAS/SP </div> <div class="panel-body"> <div class="row"> <div class="table-responsive"> <table class="table table-bordered table-hover" id="tbPrevisoes"> <thead> <tr> <th>DATA</th> <th>TEMPERATURA MINIMA</th> <th>TEMPERATURA MAXIMA</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> <div class="row"> <div class="form-group"> <button class="btn btn-default" data-exportar-dados>Exportar</button> </div> </div> </div> </div> </div> </div>
<div id="MyWidget_${instanceId}" class="super-widget wcm-widget-class fluig-style-guide" data-params="MyWidget.instance()">
    
    <div class="container" style="width: 100%;">

        <div class="panel panel-primary">
            <div class="panel-heading" style="font-weight: bolder;">
                PREVISÃO DO TEMPO - CAMPINAS/SP
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover" id="tbPrevisoes">
                            <thead>
                                <tr>
                                    <th>DATA</th>
                                    <th>TEMPERATURA MINIMA</th>
                                    <th>TEMPERATURA MAXIMA</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="form-group">
                        <button class="btn btn-default" data-exportar-dados>Exportar</button>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    
</div>

O segundo passo, é acessar o arquivo javascript, criado na pasta SRC>>MAIN>>WEBAPP>>RESOURCES>>JS. Agora, substitua todo o código existente por este trecho a seguir, e salve o arquivo.
Podemos observar os principais itens desse arquivo:

  • Linha 3: Nossa fonte de dados, um array de objetos, para popular nossa tabela, e também alimentar a Planilha Excel que exportaremos. (Neste exemplo, a váriavel previsões possui dados fixos, mas poderia também receber dados de um dataset, ou de uma API externa).
  • Linha 36: Função que percorre todos os objetos do nosso array, e os insere nas linhas da tabela.
  • Linha 43: Binding para escutar o clique no botão Exportar, e chamar a função de exportação.
  • Linha 50: Definição da função gerarPlanilha().
  • Linha 56: Definição da variável csv, e a primeira atribuição de valor, com os nomes das colunas conforme desejamos na planilha, separados por ponto e vírgula, e uma quebra de linha no final.
  • Linha 58: Função que percorre todos os objetos do nosso array, e os concatena na variável csv, caso sejam verdadeiros, senão, é adicionado um “–“. Novamente cada valor de cada coluna inserida é separado por ponto e vírgula, seguido de uma quebra de linha “/n”, ao final de cada iteração do FOR.
  • Linha 85: Caso o array tenha registros
    • Definimos o tipo do arquivo de exportação, em hiddenElement.href
    • Definimos o nome do arquivo final, em hiddenElement.download
  • Linha 105: Executamos a função gerarPlanilha(), e o navegador iniciará o download do nosso arquivo de exportação.
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
var MyWidget = SuperWidget.extend({
//variáveis da widget
previsoes: [
{
'data': '13/05/2024',
'min': '18',
'max': '33'
},
{
'data': '14/05/2024',
'min': '18',
'max': '29'
},
{
'data': '15/05/2024',
'min': '16',
'max': '27'
},
{
'data': '16/05/2024',
'min': '15',
'max': '30'
},
{
'data': '17/05/2024',
'min': '20',
'max': '32'
},
],
//método iniciado quando a widget é carregada
init: function() {
for(i in this.previsoes){
$('#tbPrevisoes').append('<tr><td>'+ this.previsoes[i].data +'</td><td>'+ this.previsoes[i].min +'</td><td>'+this.previsoes[i].max +'</td></tr>');
}
},
//BIND de eventos
bindings: {
local: {
'exportar-dados': ['click_exportarDados']
},
global: {}
},
exportarDados: function () {
var gerarPlanilha = function () {
// encode
var universalBOM = "\uFEFF";
// cabeçalh
var csv = "DATA;TEMPERATURA MINIMA;TEMPERATURA MAXIMA;\n";
for (j in this.MyWidget.previsoes) {
var prev = this.MyWidget.previsoes[j]
if (!!prev.data) {
csv += `${prev.data};`
} else {
csv += "--;"
}
if (!!prev.min) {
csv += `${prev.min};`
} else {
csv += "--;"
}
if (!!prev.max) {
csv += `${prev.max};`
} else {
csv += "--;"
}
csv += "\n"
console.log("CSV FINAL: " + csv)
}
if (this.MyWidget.previsoes.length > 0) {
var hiddenElement = document.createElement("a");
hiddenElement.href = "data:text/csv; charset=ISO-8859-1," + encodeURIComponent(universalBOM + csv)
hiddenElement.target = "_blank";
hiddenElement.download = "previsoes.csv";
hiddenElement.click();
csv = "";
} else {
FLUIGC.message.alert({
message: "Não foi possível baixar o relatório, não há registros.",
title: "Mensagem",
label: "OK",
});
}
};
gerarPlanilha();
},
});
var MyWidget = SuperWidget.extend({ //variáveis da widget previsoes: [ { 'data': '13/05/2024', 'min': '18', 'max': '33' }, { 'data': '14/05/2024', 'min': '18', 'max': '29' }, { 'data': '15/05/2024', 'min': '16', 'max': '27' }, { 'data': '16/05/2024', 'min': '15', 'max': '30' }, { 'data': '17/05/2024', 'min': '20', 'max': '32' }, ], //método iniciado quando a widget é carregada init: function() { for(i in this.previsoes){ $('#tbPrevisoes').append('<tr><td>'+ this.previsoes[i].data +'</td><td>'+ this.previsoes[i].min +'</td><td>'+this.previsoes[i].max +'</td></tr>'); } }, //BIND de eventos bindings: { local: { 'exportar-dados': ['click_exportarDados'] }, global: {} }, exportarDados: function () { var gerarPlanilha = function () { // encode var universalBOM = "\uFEFF"; // cabeçalh var csv = "DATA;TEMPERATURA MINIMA;TEMPERATURA MAXIMA;\n"; for (j in this.MyWidget.previsoes) { var prev = this.MyWidget.previsoes[j] if (!!prev.data) { csv += `${prev.data};` } else { csv += "--;" } if (!!prev.min) { csv += `${prev.min};` } else { csv += "--;" } if (!!prev.max) { csv += `${prev.max};` } else { csv += "--;" } csv += "\n" console.log("CSV FINAL: " + csv) } if (this.MyWidget.previsoes.length > 0) { var hiddenElement = document.createElement("a"); hiddenElement.href = "data:text/csv; charset=ISO-8859-1," + encodeURIComponent(universalBOM + csv) hiddenElement.target = "_blank"; hiddenElement.download = "previsoes.csv"; hiddenElement.click(); csv = ""; } else { FLUIGC.message.alert({ message: "Não foi possível baixar o relatório, não há registros.", title: "Mensagem", label: "OK", }); } }; gerarPlanilha(); }, });
var MyWidget = SuperWidget.extend({
    //variáveis da widget
    previsoes: [
        {
            'data': '13/05/2024',
            'min': '18',
            'max': '33'
        },
        {
            'data': '14/05/2024',
            'min': '18',
            'max': '29'
        },
        {
            'data': '15/05/2024',
            'min': '16',
            'max': '27'
        },
        {
            'data': '16/05/2024',
            'min': '15',
            'max': '30'
        },
        {
            'data': '17/05/2024',
            'min': '20',
            'max': '32'
        },
    ],

    //método iniciado quando a widget é carregada
    init: function() {

        for(i in this.previsoes){

            $('#tbPrevisoes').append('<tr><td>'+ this.previsoes[i].data +'</td><td>'+ this.previsoes[i].min +'</td><td>'+this.previsoes[i].max +'</td></tr>');
        }
    },
  
    //BIND de eventos
    bindings: {
        local: {
            'exportar-dados': ['click_exportarDados']
        },
        global: {}
    },
 
    exportarDados: function () {

        var gerarPlanilha = function () {

            // encode
            var universalBOM = "\uFEFF";

            // cabeçalh
            var csv = "DATA;TEMPERATURA MINIMA;TEMPERATURA MAXIMA;\n";

            for (j in this.MyWidget.previsoes) {
                var prev = this.MyWidget.previsoes[j]

                if (!!prev.data) {
                    csv += `${prev.data};`
                } else {
                    csv += "--;"

                }
                if (!!prev.min) {
                    csv += `${prev.min};`
                } else {
                    csv += "--;"

                }
                if (!!prev.max) {
                    csv += `${prev.max};`
                } else {
                    csv += "--;"

                }

                csv += "\n"

                console.log("CSV FINAL: " + csv)
            }

            if (this.MyWidget.previsoes.length > 0) {

                var hiddenElement = document.createElement("a");

                hiddenElement.href = "data:text/csv; charset=ISO-8859-1," + encodeURIComponent(universalBOM + csv)
                hiddenElement.target = "_blank";
                hiddenElement.download = "previsoes.csv";
                hiddenElement.click();
                csv = "";

            } else {

                FLUIGC.message.alert({
                    message: "Não foi possível baixar o relatório, não há registros.",
                    title: "Mensagem",
                    label: "OK",
                });

            }
        };
        gerarPlanilha();

    },

});

Após executar os passos acima, exporte a widget para o servidor, anexe-a em uma página, e acesse-a.

Esta é a nossa widget após o seu carregamento:

Ao clicar no botão EXPORTAR, escolha o local de salvamento.

E visualize o resultado da planilha com os dados da nossa widget!

Caso queira acessar os arquivos dos códigos utilizados nesse tutorial, clique neste link: https://github.com/jorgeMaicon/fluig-exportar-dados-widget-para-planilha .

Esse tutorial te ajudou? Então, deixe um comentário ou sugestão!
Forte abraço!

Fluig é uma marca registrada da Totvs S.A.

Documentação Oficial TOTVS Fluig: https://tdn.totvs.com/display/public/fluig/TOTVS+FLUIG

Categorias
TOTVS Fluig

TOTVS FLUIG – Erro ao exportar processo, 350 caracteres

Olá, Fluiger!

Sabe aquele momento em que você está preenchendo a expressão de um gateway, com 1.000 condições, e de repente, quando vai exportar o diagrama, recebe esse erro?

Calma! Não se desespere!!! rsrsrs

Como corrigir?
Uma solução prática para resolver esse problema, é criando um script de workflow personalizado.

No Eclipse, clique em FILE >> NEW >> SCRIPT FLUIG.

Uma janela será aberta, selecione “Script Evento Workflow” e clique em “Next”.

Digite um nome para o evento, relacione ao diagrama e clique em “Finish”.

O código será criado, e ficará disponível na pasta workflow/scripts. Ao abrir o arquivo, visualizamos que uma função é criada com o mesmo nome do evento. Insira as condições necessárias para o seu projeto, e retorne um valor, ele será utilizado na chamada dentro da expressão do gateway.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function enviaFiscal() {
var retorno = "";
if (hAPI.getCardValue("tipoPagamento") != "folhaPagamento" &&
hAPI.getCardValue("tipoPagamento") != "reembolso" &&
hAPI.getCardValue("tipoPagamento") != "contrato" &&
hAPI.getCardValue("tipoPagamento") != "intercompany" &&
hAPI.getCardValue("tipoPagamento") != "tributo") {
retorno == 1;
}else{
retorno == 0;
}
return retorno;
}
function enviaFiscal() { var retorno = ""; if (hAPI.getCardValue("tipoPagamento") != "folhaPagamento" && hAPI.getCardValue("tipoPagamento") != "reembolso" && hAPI.getCardValue("tipoPagamento") != "contrato" && hAPI.getCardValue("tipoPagamento") != "intercompany" && hAPI.getCardValue("tipoPagamento") != "tributo") { retorno == 1; }else{ retorno == 0; } return retorno; }
function enviaFiscal() {
    var retorno = "";

    if (hAPI.getCardValue("tipoPagamento") != "folhaPagamento" && 
        hAPI.getCardValue("tipoPagamento") != "reembolso" && 
        hAPI.getCardValue("tipoPagamento") != "contrato" && 
        hAPI.getCardValue("tipoPagamento") != "intercompany" &&
        hAPI.getCardValue("tipoPagamento") != "tributo") {
            
            retorno ==  1;

    }else{

        retorno == 0;

    }
    
    return retorno;
}

Após isso, é só chamar a função dentro da Expressão, e informar o valor desejado para a determinada condição:

Caso este tutorial tenha lhe ajudado, deixe um comentário abaixo. Adoraremos saber!

Fluig é uma marca registrada da Totvs S.A.

Documentação Oficial TOTVS Fluig: https://tdn.totvs.com/display/public/fluig/TOTVS+FLUIG

Categorias
TOTVS Fluig

Desenvolvimento Fluig nos Macs Apple Silicon (M1, M2, M3)

Olá, Fluiger!
Como voce já sabe, a TOTVS só homologou o Plugin Fluig Studio do Eclipse para Windows, conforme documentação oficial.

E eu, como usuário de MacOS tive bastante dificuldade para configurar o ambiente de desenvolvimento, principalmente porque o meu utiliza a nova arquitetura ARM/Silicon da Apple, mais especificamente o M1.

Depois de quebrar bastante a cabeça, consegui uma solução! rsrs
Segue o passo a passo:

1 – Baixe o JDK, escolhendo a opção macOS ARM64 DMG Installer, e instale-o.
Link: https://www.oracle.com/br/java/technologies/javase/javase8u211-later-archive-downloads.html

2 – Baixe o Eclipse neste link, escolhendo a opção Eclipse IDE for Java EE Developers macOS [x86_64]
Link: https://www.eclipse.org/downloads/packages/release/neon/3

3 – Descompacte o arquivo do Eclipse, e mova para a pasta de Aplicativos.

4 – Clique com o botão direito no icone do Eclipse, e selecione Mostrar Conteúdo do Pacote. Dentro da pasta Contents, há um arquivo chamado Info.plist , abra-o com um editor de código

5 – Role até o final do arquivo, e insira o trecho de código abaixo, exatamente onde eu posicionei.
<string>-vm</string><string>/Library/Java/JavaVirtualMachines/jdk1.8.0_333.jdk/Contents/Home/bin/java</string>

6 – Substitua jdk1.8.0_333.jdk pelo nome que está a pasta do java, caso seja diferente.

7 – Abra o Eclipse, baixe e instale o Fluig Studio, e pronto!!! Eclipse funcionando perfeitamente no Macbook Air M1!!! 😍

Fluig é uma marca registrada da Totvs S.A.

Documentação Oficial TOTVS Fluig: https://tdn.totvs.com/display/public/fluig/TOTVS+FLUIG