Guía para desarrolladores de integración de la API web de FormRead
Para usos empresariales, la API se puede usar generando un token de autenticación "Bearer".
Inicie sesión en el panel de FormRead, y acceda a la opción API Token:
Cree los tokens de API para permitir que los servicios de terceros se autentiquen con nuestra aplicación en su nombre:
Copie el token generado en un lugar seguro (solo se mostrará una vez):
Crear nuevo formulario
Request
POST /api/formscurl --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"
}
La variable custom_css permitirá ingresar reglas CSS para editar la apariencia de la vista FormRead y agregar texto personalizado, como por ejemplo:
#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;
}Obtener formulario 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"
} La variable thumbnail es una url src que contiene ela imagen miniatura del formulario:
Editar un formulario
Después de que un formulario es Creado o traido (GET) se puede mostrar en un Iframe usando el iframe_token proporcionado en la respuesta (este token varía, así que asegúrese de Traer (GET) su formulario antes de renderizar el iframe)
Cree también un script que escuche los eventos del iframe como en el siguiente ejemplo:
<!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>
Configure la variable lang para mostrar los comandos de la aplicación en el idioma deseado. Actualmente, admitimos inglés (en), francés (fr), español (es), portugués brasileño (pt) o kazajo (kk)
Variable read_only se puede configurar en 1 para deshabilitar la edición de formularios o 0 para permitir la edición de formularios
Cuando los usuarios hacen clic en el botón Guardar, el editForm se activará el método, allí tiene acceso a 2 variables:
-
La variable
formDatacontendrá los atributos de formulario codificados que se pueden enviar utilizando el Actualizarpara guardar los cambios realizados en su formulario: -
La variable
schemale permitirá conocer los campos creados hasta el momento:{ "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" } }La variable
schemaestá destinada solo para que muestre, si asi lo desea, algunas alertas a sus usuarios en caso de que requiera que se creen campos de área obligatorios:
Cuando un usuario hace clic en los resultados de la descarga, el metodo getResults se activará, allí obtendrá los resultados en un formato JSON para que pueda almacenar luego en su sistema
Además, puede obtener los resultados fila por fila con el metodo rowResult, que se activará cada vez que se procese una página
Guardar Formulario
Request
GET /api/forms/{form_id}?_method=PUTcurl --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"
}Eliminar formulario
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