< VOLTAR AO BLOG

Guia do Desenvolvedor de Integração da API da Web FormRead

Para usos corporativos, a API pode ser usada gerando um token Bearer Auth.

Faça login no FormRead painel e acesse a opção API Token:

image

Crie os tokens de API para permitir que serviços de terceiros se autentiquem com nosso aplicativo em seu nome:

image

Copie o token gerado em local seguro (será mostrado apenas uma vez):

image

Criar novo formulário

Request
POST /api/forms
curl --location --request POST 'https://formread.org/api/forms' \
    --header 'Accept: application/json' \
    --header 'Authorization: Bearer grqr7w3pZ4u7Kif7CJpICzhBitOFXbq4VvXfGvMA' \
    --form 'form_name="new form"' \
    --form 'custom_css="{ingest custom css to edit FormRead View}"'
Response
{
    id: 8,
    form_name: "new form",
    iframe_token: "6ifvCyEcjB3D5SGqtFmJ5eg0sPYNQfLoWCEgv7bb",
    created_at: "2022-02-28T21:22:55.000000Z",
    updated_at: "2022-02-28T21:22:55.000000Z"
}

A variável custom_css permitirá inserir regras CSS para editar a aparência da visualização FormRead e adicionar texto personalizado, como por exemplo: 

#app-title::after{
    content: 'Your Tittle';
    color: white;
}
#app-subtitle::after{
    content: 'Your Custom sub-tittle Your Custom sub-tittle Your Custom sub-tittle';
    color: white;
}
#upload-from-cam{
    display: none;
}
#upload-from-system{
    background: lightblue;
}
#upload-from-csv{
    display: none;
}
#app > div.bg-gray-50.h-screen.overflow-auto > div > div{
    background-color: black;
}

Obter formulário por ID

Request
GET /api/forms/{form_id}
curl --location --request GET 'https://formread.org/api/forms/8' \
    --header 'Accept: application/json' \
    --header 'Authorization: Bearer kHMwPfhJC9rJyhR7h0L78j1OB9FXErF9JseFCXH9'
Response
{
    "id": 8,
    "form_name": "adsf",
    "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAA...",
    "iframe_token": "po75a0pqut4fa16XWgdEP2qRDwnhgfiqP3H0Dij6",
    "created_at": "2022-02-28T21:22:55.000000Z",
    "updated_at": "2022-03-01T01:40:19.000000Z"
}

a miniatura de um url src que contém o formulário img geral:

image

Editar um formulário

Depois que um formulário é Criada ou Lido (GET) ele pode ser exibido em um Iframe usando o iframe_token fornecido na resposta (este token varia, portanto, certifique-se de Lido (GET) seu formulário antes de renderizar o iframe)

Crie também um script que escute os eventos do iframe como no exemplo abaixo: 

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height: 100%">

<iframe src="https://formread.org/{lang}/api/forms/{form_id}/edit/{iframe_token}/{read_only}"
        style="height: 100%; width: 100%"></iframe>

<script>
    window.addEventListener('message', function (e) {
        // if (e.origin !== 'https://formread.org') return;

        console.log(e.data.method)

        if (e.data.method === "editForm") {
            let formData = e.data.formData // data used to saved your form
            let schema = JSON.parse(e.data.schema)
            console.log(schema)
            console.log(formData)
        }
        if (e.data.method === "getResults") {
            let results = JSON.parse(e.data.results)
            console.log(results)
        }
        if (e.data.method === "rowResult") {
            let rowResult = JSON.parse(e.data.rowResult)
            console.log(rowResult)
        }

    });
</script>
</body>
</html>

Defina a variável lang para exibir os comandos do aplicativo no idioma desejado. Atualmente, oferecemos suporte para inglês (en), francês (fr), espanhol (es), português brasileiro (pt) ou cazaque (kk)

Variável read_only pode ser definido para 1 para desabilitar a edição de formulário ou 0 para permitir a edição de formulário

Quando os usuários clicam no botão salvar, o editarFormulário método será acionado, lá você tem acesso a 2 variáveis:

  • formData variável conterá os atributos de formulário codificados que podem ser enviados usando o Atualizarpara salvar as alterações feitas em seu formulário:
  • o schema variável permitirá que você saiba os campos criados até agora: 
    {
      "file_name": {
          "type": "text"
      },
      "BCR-0": {
          "type": "text"
      },
      "OCR-1": {
          "type": "text"
      },
      "OMR-2-0": {
          "type": "select",
          "options": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
          "questionIndex": "0"
      },
      "OMR-2-1": {
          "type": "select",
          "options": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
          "questionIndex": "1"
      },
      "OMR-2-2": {
          "type": "select",
          "options": ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
          "questionIndex": "2"
      }
  }

    O schema A variável serve apenas para você exibir alguns alertas para seus usuários, caso você esteja exigindo a criação de campos de área obrigatórios:

Quando um usuário clica nos resultados do download, o getResults método será acionado, lá você obterá os dados do resultado em um JSON formato para que você possa armazená-los em seu sistema

Além disso, você pode obter os resultados linha por linha com o rowResult método, que será acionado toda vez que uma página for processada

Atualizar formulário

Request
GET /api/forms/{form_id}?_method=PUT
curl --location --request POST 'https://formread.org/api/forms/8?_method=PUT' \
--header 'Authorization: Bearer kHMwPfhJC9rJyhR7h0L78j1OB9FXErF9JseFCXH9' \
--form 'form_data="eyJ2dWV4X3N0YXRlIjp7ImZvcm1OYW1lIjoiYWRzZiIsImZvcm1zIjp7f
                   Swic2VsZWN0ZWRGb3JtSWQiOiIiLCJmb3JtUmVhZEFyZWFzIjp7IkJDUi
                   0wIjp7ImNvbHVtblBvc2l0aW9uIjoxLCJ3aWR0aCI6MC4xMTQ5NTA0NTM
                   0MDUzNTE2NCwiaGVpZ2h0IjowL...'
--form 'custom_css="{ingest custom css to edit FormRead View}"'
Response
{
    "id": 8,
    "form_name": "adsf",
    "iframe_token": "po75a0pqut4fa16XWgdEP2qRDwnhgfiqP3H0Dij6",
    "thumbnail": "data:image/png;base64,iVBORw0KGgoAAAANSUhEU...",
    "created_at": "2022-02-28T21:22:55.000000Z",
    "updated_at": "2022-03-01T02:30:14.000000Z"
}

Excluir formulário

Request
GET /api/forms/{form_id}
curl --location --request DELETE 'https://formread.org/api/forms/8' \
    --header 'Accept: application/json' \
    --header 'Authorization: Bearer kHMwPfhJC9rJyhR7h0L78j1OB9FXErF9JseFCXH9'
Response
1

Link da coleção do postman

Click here to open postman link