Thu, 24 Sep 2026
Login

I'm having trouble doing an API integration, could you help me? I use the free version of the platform (Community), and I have an API and I want some fields to be filled automatically...is that possible? If not, what better way?

Confluence User - 03 Sep, 2020

Good morning! My name is Ketlyn, and I'm using the platform to make a form to put into production here in the company, and I'm having trouble making an API integration, could you help me? I use the free version of the platform (Community). I have an API and I want some fields to be filled automatically with some information, for example, the field "name" I want as soon as I type the letter "K" for example, already brings me all the names with the letter "K" and the rest of my information ... is that possible? If not, could you indicate me the best resource to do it?

I look forward to it.

With best regards,

Ketlyn Cardoso.

forms;api;integration;community

9

Confluence User •
04 Sep, 2020 •
confluenceUser •
•
confluenceUser •

Are you looking for somethings like Autocomplete Textfield :Autocomplete Text Field

Confluence User •
04 Sep, 2020 •
confluenceUser •
•
confluenceUser •

Yes

Confluence User •
05 Sep, 2020 •
confluenceUser •
•
confluenceUser •

Example: I would like that when typing the person's name, it appears, and when clicking on the chosen employee he brings me all the other information already filling out the other fields.

Confluence User •
08 Sep, 2020 •
confluenceUser •
•
confluenceUser •

In a custom html copy this

<script>
    function getData(name) {
        $.ajax({
            url: "apiLink?name=" + name,
            type: 'GET',
            success: function (data) {
                var data = JSON.parse(data);
                //fill info in fields
                $('#age').val(data.age);
            },
            //...},
            error: function (err) {
            }
        });



    }//end function

    $(document).ready(function (event) {

        //add listener onchange

        $("#name").on('input propertychange', function (e) {
            newValue = $(this).val();

            getData(newValue);

        });

    });
</script>

Is this clear?


Confluence User •
08 Sep, 2020 •
confluenceUser •
•
confluenceUser •

Hello, good morning!

I tested the code, but I still can't pull the information from my API. Could you help me? Where do I put the link from my API and how do I pull the information from it?

Confluence User •
08 Sep, 2020 •
confluenceUser •
•
confluenceUser •

Hello, good morning!

I tested the code, but I still can't pull the information from my API. Could you help me? Where do I put the link from my API and how do I pull the information from it?

Confluence User •
09 Sep, 2020 •
confluenceUser •
•
confluenceUser •

url: "apiLink?name=" + name

Here put your api link (I supposed that your api is HTTPGet and the api take a parameter name

If you want put your api link or format (what parameter it takes and response sample and I will modify the code)

Confluence User •
09 Sep, 2020 •
confluenceUser •
•
confluenceUser •

Hello, thanks for your help! I was able to make the custom html code, but now I'm having trouble saving the information in my form.
How would I save this information filled in the form, so I can view it later?

I have created the following code:

<html>
<head>
<meta charset="utf-8">
<title>Teste</title>
</head>

<body>
<!--Importando Script Jquery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<style>
*{
box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
</style>

<!--Formulário-->
<form>
<div class="row">
<div class="column">
<b><label for="CodProd">N° de Matrícula</label></b>
<input id="CodProd" type="text" required/>
</div>
<div class="column">
<b><label for="Descric">Nome do Solicitante</label></b>
<input id="Descric" type="text" required/>
</div>
<div class="column">
<b><label for="ramal">Ramal</label></b>
<input id="ramal" type="text" required/>
</div>
<div>
<b><label for="departamento">Departamento</label></b>
<select id="departamento">
<option value="TI">TI</option>
<option value="CTB">CTB</option>
<option value="ENG">ENG</option>
<option value="RH">RH</option>
</select>
</div>
</div>
</form>

<script type="text/javascript">
$("#CodProd").focusout(function(){
//Início do Comando AJAX
$.ajax({
//O campo URL diz o caminho de onde virá os dados
//É importante concatenar o valor digitado no CEP
url: '(link?API)',
//Aqui você deve preencher o tipo de dados que será lido,
//no caso, estamos lendo JSON.
dataType: 'json',
//SUCESS é referente a função que será executada caso
//ele consiga ler a fonte de dados com sucesso.
//O parâmetro dentro da função se refere ao nome da variável
//que você vai dar para ler esse objeto.
success: function(resposta){
//Agora basta definir os valores que você deseja preencher
//automaticamente nos campos acima.
$("#Descric").val(resposta.Descric);
$("#ramal").val(resposta.ramal);
$("#departamento").val(resposta.departamento);
//Vamos incluir para que o Número seja focado automaticamente
//melhorando a experiência do usuário
}
});
});
</script>
</body>
</html>
Confluence User •
11 Sep, 2020 •
confluenceUser •
•
confluenceUser •

why are you using html fields and options and not the joget fields and fill it in the same way.

Make a joget field name Descric and fill it $("#Descric").val(resposta.Descric);

1
CSV | Excel | XML | PDF
RELATED QUESTIONS
Process not starting with Form submission.
Form Submission Performance Issue
API Connection Joget DX9
Export As PDF
Select Box
one to many relationship
Can we create a dropdown field directly in a Joget List so that users can change the status of a record from the list view itself?
How to trigger workflow process when form data is submitted via API
How to auto load client data after selecting it in a dropdown?
Plugin for PDF Editor
1
CSV | Excel | XML | PDF

Your answer

To answer a question you'll need an account.

Print