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 – 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 – Dataset com Consulta de CNPJ na Receita Federal (Gratuito)

Olá, Fluiger!!!

No post de hoje, trago uma solução pra você, que precisa agilizar o preenchimento de dados de CNPJ no seu formulário ou widget no Fluig, e também evitar erros por parte do usuário.

A solução é a criação de um dataset que se conecta com a api ReceitaWS , um serviço gratuito da Leads2b, que traz os principais dados do CNPJ informado, como Razão Social, Nome Fantasia, e Endereço, diretamente da base de dados da Receita Federal.

Vale lembrar, que para usar este serviço gratuitamente, é importante seguir as regras do plano gratuito:

Regras do Plano Gratuito, coletadas do site em 04/05/2024.

Regras esclarecidas, bora para o Fluig!

O primeiro passo, é criar um serviço para administrar as requisições que faremos ao ReceitaWS.
No Fluig Plataforma, acesse PAINEL DE CONTROLE >> SERVIÇOS >> NOVO SERVIÇO.

A tela abaixo será exibida, e você deverá preencher os seguintes campos:

  • No campo Serviço, selecione a opção “REST”.
  • No campo Nome, informe um valor de acordo com a sua preferência. Não é recomendado utilizar símbolos, nem caixa alta.
  • No campo Descrição, dê mais detalhes sobre o serviço.
  • No campo Domínio, insira esta url: https://receitaws.com.br/v1/cnpj/
  • No campo Tipo de Autenticação, informa a opção “None”

Clique em Salvar para criar o Serviço.

Agora, vamos para o Eclipse. No seu projeto, clique com o botão direito do mouse na pasta DATASETS, em seguida clique em NEW, e por fim, em DATASET CUSTOMIZADO FLUIG.

Informe um código e uma descrição para o nosso novo dataset, em clique em FINISH.

O arquivo será gerado. Substitua tudo pelo código abaixo. Nosso código terá duas funções principais:
createDataset, padrão do Fluig, e é nela que inseriremos todos os próximos códigos.
parseFromJSON, que usaremos para tratar os dados que virão da api ReceitaWS.

function createDataset(fields, constraints, sortFields) {

    // INSERIR OS PRÓXIMOS CÓDIGOS AQUI

}

function parseFromJSON(json) {
    try {
        var jsonObj = JSON.parse(json);
        return {
            data: jsonObj,
            success: true
        };
    } catch (e) {
        return {
            data: json,
            success: false
        };
    }
}

O primeiro trecho você deve inserir dentro da função createDataset, é esse abaixo. Chamamos o DatasetBuilder, e declaramos todas as colunas que o nosso dataset possuíra. Eu nomeei as colunas exatamente igual aos nomes das propriedades que são retornadas pela API. Para saber todas as propriedades disponíveis, clique aqui.

var dataset = DatasetBuilder.newDataset();

    dataset.addColumn('nome');
    dataset.addColumn('fantasia');
    dataset.addColumn('logradouro');
    dataset.addColumn('numero');
    dataset.addColumn('complemento');
    dataset.addColumn('cep');
    dataset.addColumn('bairro');
    dataset.addColumn('uf');
    dataset.addColumn('municipio');

Em seguida, insira um FOR para percorrer as constraints que serão informadas pelo recurso que chamará esse dataset (Formulário, Widget, Evento de Processo, ou até mesmo um Dataset). Nesse nosso exemplo, o dataset só tomará ações com a constraint nomeada cnpj, que terá o seu valor salvo na variável cnpj.

for (var i in constraints) {
        if (constraints[i]['fieldName'] == "cnpj") {
            cnpj = constraints[i]['finalValue'];
        }
    }

Agora, vem a parte final do dataset. O código segue um padrão de consumo de serviços externos do Fluig. As únicas partes que você precisará se preocupar, são:
– Linha 4: A variável url receberá a variável cnpj que corresponde ao que enviaremos via constraint.
– Linha 8: O nome do serviço que atribuímos la no menu PAINEL DE CONTROLE >> SERVIÇOS.
– Linha 26: As propriedades que estão dentro de dataset.addRow, que são os valores que usaremos para adicionar aos registros deste dataset. Substitue pelas propriedades que você deseja consumir e adicionar ao dataset.

    try {

        var clientService = fluigAPI.getAuthorizeClientService();
        var url = cnpj

        var data = {
            companyId: getValue('WKCompany') + '',
            serviceCode: 'receitaws',
            endpoint: encodeURI(url),
            method: 'get',
            options: {
                encoding: 'UTF-8',
                mediaType: 'application/json'
            }
        };

        var response = clientService.invoke(JSON.stringify(data));
        var result = response.getResult();

        if (result == null || result.isEmpty()) throw 'Erro ao executar chamada a API';

        var jsonResponse = parseFromJSON(result);

        if (jsonResponse.success == false) throw jsonResponse.data;

            dataset.addRow(
                [
                    jsonResponse.data.nome,
                    jsonResponse.data.fantasia,
                    jsonResponse.data.logradouro,
                    jsonResponse.data.numero,
                    jsonResponse.data.complemento,
                    jsonResponse.data.cep,
                    jsonResponse.data.bairro,
                    jsonResponse.data.uf,
                    jsonResponse.data.municipio
                ]
            );


    } catch (err) {
        log.info('Erro no dataset ds_busca_cnpj_receita_federal: ' + err);
        throw err;
    }

    return dataset;


Antes de salvar e exportar o seu novo dataset, confira se ele está exatamente dessa forma:

function createDataset(fields, constraints, sortFields) {

    var dataset = DatasetBuilder.newDataset();

    dataset.addColumn('nome');
    dataset.addColumn('fantasia');
    dataset.addColumn('logradouro');
    dataset.addColumn('numero');
    dataset.addColumn('complemento');
    dataset.addColumn('cep');
    dataset.addColumn('bairro');
    dataset.addColumn('uf');
    dataset.addColumn('municipio');

    for (var i in constraints) {
        if (constraints[i]['fieldName'] == "cnpj") {
            cnpj = constraints[i]['finalValue'];
        }
    }

    try {

        var clientService = fluigAPI.getAuthorizeClientService();

        var url = cnpj

        var data = {
            companyId: getValue('WKCompany') + '',
            serviceCode: 'receitaws',
            endpoint: encodeURI(url),
            method: 'get',
            options: {
                encoding: 'UTF-8',
                mediaType: 'application/json'
            }
        };
        var response = clientService.invoke(JSON.stringify(data));
        var result = response.getResult();

        if (result == null || result.isEmpty()) throw 'Erro ao executar chamada a API';

        var jsonResponse = parseFromJSON(result);

        if (jsonResponse.success == false) throw jsonResponse.data;

            dataset.addRow(
                [
                    jsonResponse.data.nome,
                    jsonResponse.data.fantasia,
                    jsonResponse.data.logradouro,
                    jsonResponse.data.numero,
                    jsonResponse.data.complemento,
                    jsonResponse.data.cep,
                    jsonResponse.data.bairro,
                    jsonResponse.data.uf,
                    jsonResponse.data.municipio
                ]
            );


    } catch (err) {
        log.info('Erro no dataset ds_busca_cnpj_receita_federal: ' + err);
        throw err;
    }

    return dataset;
}

function parseFromJSON(json) {
    try {
        var jsonObj = JSON.parse(json);
        return {
            data: jsonObj,
            success: true
        };
    } catch (e) {
        return {
            data: json,
            success: false
        };
    }
}

Após exportar o dataset, devemos testá-lo. No meu caso, testarei no javascript de um formulário. Na linha 70, defini uma constraint chamada cnpj, na linha 71 fiz uma chamada ao dataset que acabamos de criar, passando cnpj como parâmetro, e funcionou corretamente, como podemos ver em dsReceita.values. Agora, é só pegar os valores desse retorno, e realizar as ações desejadas.

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