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 – Aprenda a usar as APIs Rest do Fluig

Olá, Fluiger!
Bora aprender de uma vez por todas, a utilizar as APIs do Fluig?

Estas são recursos importantíssimos para expandir as possibilidades de desenvolvimentos em seus processos, formulários e widgets.

Eu estruturei esse tutorial em 3 tópicos:

  1. Documentação das APIs
  2. Como consumir dentro da plataforma
  3. Como consumir fora da plataforma

1 – DOCUMENTAÇÃO DAS API’s

As APIs do Fluig estão disponíveis em 2 versões: ANTIGA e a NOVA, que detalharei abaixo.

1.1 – Documentação API ANTIGA
Para acessar a API ANTIGA: Clique aqui

O link te levará para essa página abaixo. Podemos visualizar os nomes dos recursos (que são separados por contextos), e os seus respectivos endpoints e métodos.

Se clicarmos em um recurso, como por exemplo o DatasetServiceRest, podemos ver os endpoints e métodos desse recurso, e o que cada endpoint retornará ao usuário.

1.2 – Documentação API NOVA
Para acessar a API NOVA: Clique aqui

O link te levará para essa página abaixo. Podemos visualizar os nomes dos recursos (que também são separados por contextos).

Se clicarmos em um recurso, como por exemplo o Dataset, podemos ver os endpoints e métodos desse recurso, e o que cada endpoint retornará ao usuário.


2 – COMO CONSUMIR AS APIs, POR DENTRO DA PLATAFORMA

Para consumirmos as APIs do Fluig, dentro da plataforma, precisaremos criar um serviço. Para isso, acesse PAINEL DE CONTROLE >> SERVIÇOS >> NOVO.

Preencha o formulário:
1 – Selecione o serviço “REST”.
2 – Informe “api-fluig” tanto para o Nome quanto para a Descrição.
3 – Informe o domínio do seu Fluig.
4 – Selecione “Fluig API” no Tipo de Autenticação.
5 – Insira no campo URL para Teste, o base_url + um endpoint do tipo GET, para testarmos esse novo serviço.
6 – Clique em salvar.

Podemos testar esse novo serviço, clicando no último ícone do respectivo serviço.

Clique em TESTAR SERVIÇO, e o retorno da API será exibido logo abaixo.

Agora, podemos consumir as APIs em eventos de processo, datasets, e widgets, usando o script abaixo. Os itens que você deverá alterar nesse script, são: o endpoint, e o method, conforme o recurso que você for usar. O resultado da requisição retornará na variável vo.

    var clientService = fluigAPI.getAuthorizeClientService();

    var data = {
        companyId: getValue("WKCompany") + '',
        serviceCode: 'api-fluig',
        endpoint: '/dataset/api/v2/datasets',
        method: 'get', 
        params: {
        },
        options: {
            encoding: 'UTF-8',
            mediaType: 'application/json',
        },
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        }
    }
    
    //retorno
    var vo = clientService.invoke(JSON.stringify(data));

3 – COMO CONSUMIR AS APIs, POR FORA DA PLATAFORMA

É possível consumir as APIs do Fluig a partir de qualquer sistema que realize requisições HTTP. Neste exemplo, consumiremos o endpoint /v2/datasets, no Postman. Se você ainda não o possui, pode baixar aqui.

Faremos a requisição, usando como método de autorização, o OAuth 1.0. Este, exige algumas informações, como: Signature Method, Consumer Key, Consumer Secret, Access Token, e Token Secret.

Para conseguir os dados de Signature Method, acesse no Fluig, PAINEL DE CONTROLE >> PARÂMETROS TÉCNICOS >> OAUTH PROVIDER.
Marque o registro, e clique em Editar.

A tela a seguir será exibida, com as informações desejadas.

Agora, para conseguir os dados de Consumer Key, Consumer Secret, Access Token, e Token Secret, acesse no Fluig, PAINEL DE CONTROLE >> PARÂMETROS TÉCNICOS >> OAUTH APPLICATION.

Vamos primeiro pegar Consumer Key e Consumer Secret. Marque o registro, e clique em Editar.

Os dados serão apresentados conforme imagem abaixo.

Agora, vamos pegar Access Token e Token Secret. Marque o registro, e clique em Usuário Aplicativo.

Os dados serão apresentados conforme imagem abaixo.

Agora que temos todos os dados em mãos, vamos para o Postman! Abra uma nova aba, e insira a url. Lembre-se de se atentar ao método, ao base_url e ao endpoint que você usará. Neste exemplo, usarei o /v2/datasets da api nova.

Em seguida, clique na aba AUTH, logo abaixo da url. Selecione o type OAUTH 1.0, e preencha os campos ao lado direito, com as informações que coletamos no painel de controle do Fluig.

Agora, é só realizarmos a requisição, clicando em SEND. A resposta será exibida abaixo:

Fique atento ao colar os dados do OAuth, pois erros como este abaixo, podem ocorrer se você inserir algo divergente:

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 – 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.

<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.
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 – Extensão no VSCode com snippets

Olá, Fluiger!
Tenho uma ótima notícia! Agora eu faço parte do projeto open source innovare-fluig-snippets, uma iniciativa da InnovareTI, empresa na qual eu ja tive o prazer de trabalhar por 4 anos!

Trata-se de uma extensão para Visual Studio Code, que ajuda desenvolvedores TOTVS Fluig com snippets das principais funções e elementos HTML. Isso aqui ajuda demaaaais quando você está em um projeto com prazo apertado, e precisa ganhar tempo na digitação de código.

E eu já cheguei contribuindo com 6 novos snippets:
✅ Script completo para um dataset que é populado com os resultados de uma query SQL.
✅ Script completo para envio de email personalizado em eventos de processo.
✅ Script para realizar ações ao selecionar um registro em um campo Zoom.
✅ Script para realizar ações ao remover um registro em um campo Zoom.
✅ Script para chamada de Dataset de um só registro.
✅ Script para chamada de Dataset com múltiplos registros.

Para baixar a extensão, acesse a aba de Extensões no seu VS Code, ou clique neste link para visualizar a Loja de Extensões do VSCode: https://marketplace.visualstudio.com/items?itemName=innovareti.innovare-fluig-snippets

Fluig é uma marca registrada da Totvs S.A.

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