Criando um Widget para integração Rest API ViaCep - Service Portal (Avançado)

O primeiro passo é criar um Script Include que será responsável pela integração, utilize o mesmo nome pois será utilizado em outros Scripts.

var ZipCodeDetails = Class.create();

ZipCodeDetails.prototype = {

    initialize: function() {},

    searchForCEP: function(cep) {

        try {

            var request = new sn_ws.RESTMessageV2();

            var endpoint = "https://viacep.com.br/ws/" + cep + "/json/";

            request.setEndpoint(endpoint);

            request.setHttpMethod('get');

            request.setRequestHeader("Accept", "application/json");

            request.setRequestHeader('Content-Type', 'application/json');

            var response = request.execute();

            var responseBody = JSON.parse(response.getBody());

            var httpStatus = response.getStatusCode();

            if (httpStatus == '200') {

            return responseBody;

            }

        } catch (ex) {

            var message = ex.message;

        }

    },

    type: 'ZipCodeDetails'

};

Faça o download da imagem que será usada como ícone lupa no botão de busca clique aqui e selecione a opção 32px, Insira a imagem na tabela db_image, mantenha o nome lupa.png.

Crie um novo Widget de Portal e adicione os Scripts abaixo, tome um tempo para entender o funcionamento de cada Script.

HTML

<!-- todas as classes usadas estão dentro do CSS -->

  <div class="panel">

  <div class="panel-heading">

    <h5>Consulta de CEP</h5>

  </div>

   

<div class="container-search">

 

  <div class="search-field">

    <input class="cep" type="text" ng-model="cep" maxlength="9" required="required">

    &nbsp; &nbsp;

    <button class="button-search" ng-click="c.search(cep)">

        Buscar CEP

    <img src=lupa.png />

    </button>

  </div>

 

  <div class="info-cep" ng-if="data.cepIntegration">

    <div class="info">

      <span>CEP: </span>{{c.data.cepIntegration.cep}}<br/>

      <span>Endereço: </span>{{c.data.cepIntegration.logradouro}}<br/>

      <span>Bairro: </span>{{c.data.cepIntegration.bairro}}<br/>

      <span>Localidade: </span>{{c.data.cepIntegration.localidade}}<br/>

      <span>UF: </span>{{c.data.cepIntegration.uf}}<br/>

      <span>DDD: </span>{{c.data.cepIntegration.ddd}}<br/>

    </div>

  </div>

</div>

CSS

.panel{

   width: 517px;

  .panel-heading{

    background-color: #C4C4C4;

    width: 517px;

    height: fit-content;

        max-height: 638px;

     

    h5{

        margin: 5px 20px;

      font-weight: bold;

     

     

    }

  }

}

.container-search{

   width: 100%;

   width: 517px;

   float: left;

   margin: 0px;

   padding: 20px;

   background-color: #f5f5f5;

   border-radius: 0px;

 

  .search-field{

    width: 100%;

    .cep{

      width: 60%

      margin: 10px;

      border-radius: px;

    }

   

    .button-search{

        width: 45%;

      height: 45px

      color: black;

      background-color: #d1ebf7;

      border-radius: 4px;

      border-color: lightblue;

      margin: 22px;

      margin-top: 2px;

           

    }

     img {

      margin-left: 10px;

     

    }

  }

 

  .info-cep{

    .info{

      display: grid;

      grid-template-columns: auto auto;

      margin: 10px;

      padding: 10px;

      align-items: baseline

      span{

        width: 70%;

        font-weight: bold;

        padding: 10px;

      }

    }

  }

  .empty-field{

    font-size: 16px;

    margin: 10px;

  }

}

Server Script

(function() {

  /* populate the 'data' object /

  / e.g., data.table = $sp.getValue('table'); */

    if(input){

        if(input.action == "getZipCode" ){

            data.cep = input.cep; // Var cep - Onde recebe o valor do input enviado

pelo Client no c.server.update

            data.cepIntegration = new ZipCodeDetails().searchForCEP(data.cep); //Chamada da

integraçao - Script Include

       

 //Quando o CEP for inválido o valor de retorno será undefined, nesse caso poderá ser

usado uma mensagem de aviso ao usuário tanto com gs.addErrorMessage("Insira a messagem de aviso aqui");

|| gs.addInfoMessage(Insira a messagem de aviso aqui");

            if(data.cepIntegration == undefined || data.cepIntegration.erro == true){

                gs.addErrorMessage('CEP inválido, por favor digite um CEP válido.');

            }

        }

    }

   

})();

Client Controller

function BottonLabel($scope,$rootScope,$timeout, $window, $location) {

  /* widget controller */

    var c = this;

    c.search = function(cep) {

        c.data.action = "getZipCode";

        c.cep = cep;

        c.data.cep = c.cep.replace('-', '');

        c.server.update();          

    };

}

Teste

CEP Válido

CEP Inválido