# Buscar o CEP nos Correios e preencher os campos de endereço automaticamente

Para facilitar o preenchimento dos campos de endereço é possível configurar para que o campo de CEP dispare uma consulta na base dos Correios e preencha os campos de endereço.

#### Informações que são possíveis preencher automaticamente através do CEP:

- Rua,
- Bairro,
- Cidade,
- Estado,
- Sigla do Estado,
- DDD da região,
- Número De - Até (Intervalo numérico da região)

### Configuração:

1\. Através do menu principal do sistema, entre na área de customização e configuração do Agilityflow

2\. Na área de customização, edite o formulário que deseja configurar a busca pelo CEP

3\. Já dentro do formulário acesse a área de customização em Javascript, como na imagem abaixo

![](https://wiki.agilityflow.io/uploads/images/gallery/2021-01-Jan/scaled-840-0/image-1611871804622.png)

![](https://wiki.agilityflow.io/uploads/images/gallery/2021-01-Jan/scaled-840-0/image-1611872625262.png)

4\. Cole a função Javascript e altere apenas os parâmetros que estão <span style="color: #ff9900;">**em amarelo**</span> no código abaixo. Na tabela um pouco mais abaixo os parâmetros estão descritos com mais detalhes

```JavaScript
formContext.buscaCEP.configurar(
    'id_campo_cep',
    {
        uf_sigla: 'id_do_campo_uf_sigla',
        uf_nome: 'id_do_campo_uf_nome',
        logradouro: 'id_do_campo_logradouro',
        bairro: 'id_do_campo_bairro',
        cidade: 'id_do_campo_cidade',
        numero_de_ate: 'id_do_campo_numero_de_ate',
        ddd_da_regiao: 'id_do_campo_ddd_da_regiao'
    }
);


```

Parâmetros da função

<table border="1" id="bkmrk-parametro-%E2%A0-%E2%A0-reto" style="border-collapse: collapse; width: 99.8764%; height: 217px;"><tbody><tr><td style="width: 17.886%;">**Parametro**</td><td style="width: 23.0818%;"> </td><td style="width: 37.87%;"> </td><td style="width: 21.1621%;">**Retorno de exemplo**</td></tr><tr style="height: 31px;"><td style="width: 17.886%; height: 31px;">"**id\_campo\_cep**"</td><td style="width: 23.0818%;">obrigatório</td><td style="width: 37.87%; height: 31px;">Esse é o **campo principal**, troque esse parâmetro pelo id do campo que será digitado o CEP</td><td style="width: 21.1621%;"> </td></tr><tr style="height: 31px;"><td style="width: 17.886%; height: 31px;">uf\_sigla</td><td style="width: 23.0818%;">pode estar em branco</td><td style="width: 37.87%; height: 31px;">Troque esse parâmetro pelo id do campo que deve ser preenchido a **SIGLA do Estado**

</td><td style="width: 21.1621%;">SP

</td></tr><tr style="height: 31px;"><td style="width: 17.886%; height: 31px;">uf\_nome</td><td style="width: 23.0818%;">pode estar em branco</td><td style="width: 37.87%; height: 31px;">Troque esse parâmetro pelo id do campo que deve ser preenchido com o nome completo do **Estado**</td><td style="width: 21.1621%;">São Paulo</td></tr><tr style="height: 31px;"><td style="width: 17.886%; height: 31px;">logradouro</td><td style="width: 23.0818%;">pode estar em branco</td><td style="width: 37.87%; height: 31px;">Troque esse parâmetro pelo id do campo que deve ser preenchido com o **Logradouro (Avenida, Rua etc..)**</td><td style="width: 21.1621%;">Avenida Paulista</td></tr><tr style="height: 31px;"><td style="width: 17.886%; height: 31px;">bairro</td><td style="width: 23.0818%;">pode estar em branco</td><td style="width: 37.87%; height: 31px;">Troque esse parâmetro pelo id do campo que deve ser preenchido com o **Bairro**</td><td style="width: 21.1621%;">Bela Vista</td></tr><tr style="height: 31px;"><td style="width: 17.886%; height: 31px;">cidade</td><td style="width: 23.0818%;">pode estar em branco</td><td style="width: 37.87%; height: 31px;">Troque esse parâmetro pelo id do campo que deve ser preenchido com a **Cidade**</td><td style="width: 21.1621%;">São Paulo</td></tr><tr style="height: 31px;"><td style="width: 17.886%; height: 31px;">numero\_de\_ate</td><td style="width: 23.0818%;">pode estar em branco</td><td style="width: 37.87%; height: 31px;">Troque esse parâmetro pelo id do campo que deve ser preenchido com a **Número**

<span style="color: #ff0000;">**Importante**: esse campo não deve ter máscara numérica, pois ele retorna um intervalo De XXX até YYY</span>

</td><td style="width: 21.1621%;">de 1047 a 1865 - lado ímpar</td></tr><tr><td style="width: 17.886%;">ddd\_da\_regiao</td><td style="width: 23.0818%;">pode estar em branco</td><td style="width: 37.87%;">Troque esse parâmetro pelo id do campo que deve ser preenchido com o **DDD** da região, por exemplo, no caso de São Paulo, ele retornará 11</td><td style="width: 21.1621%;">11</td></tr></tbody></table>

**5. Publique o seu formulário e teste.**

 **Pronto**, já deve estar funcionando.

### Callbacks para customização avançada:

Existem 3 callbacks que você pode chamar no Javascript:

- callback\_before - Antes de fazer a busca -
- callback\_onSucess - No sucesso do retorno
- callback\_onError - No Erro da busca

Abaixo está o exemplo do código que você pode utilizar

```JavaScript
formContext.buscaCEP.configurar(
    'id_campo_cep',
    {
        uf_sigla: 'id_do_campo_uf_sigla',
        uf_nome: 'id_do_campo_uf_nome',
        logradouro: 'id_do_campo_logradouro',
        bairro: 'id_do_campo_bairro',
        cidade: 'id_do_campo_cidade',
        numero_de_ate: 'id_do_campo_numero_de_ate',
        ddd_da_regiao: 'id_do_campo_ddd_da_regiao'
    },
    {        
        callback_before: function() {
            alert('before')
        },
        callback_onSucess: function (dados) {
            alert('callback_onSucess')
            console.log(dados)
        },
        callback_onError: function () {
            alert('error')
        }

    }
);


```

Ficou alguma dúvida ? Fale com a gente