Pour les utilisations en entreprise, l'API peut être utilisée en générant un jeton d'authentification Bearer.
Connectez-vous au tableau de bord FormRead tableau de bord et accédez à l'option Token API:
Créez les jetons API pour permettre à des services tiers de s'authentifier auprès de notre application en votre nom:
Copiez le jeton généré dans un endroit sécurisé (il ne sera affiché qu'une seule fois):
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}"'
{
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
permettra d'ingérer des règles css pour modifier l'apparence de FormRead et ajouter du texte personnalisé, comme par exemple :
#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;
}
GET /api/forms/{form_id}
curl --location --request GET 'https://formread.org/api/forms/8' \
--header 'Accept: application/json' \
--header 'Authorization: Bearer kHMwPfhJC9rJyhR7h0L78j1OB9FXErF9JseFCXH9'
{
"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 vignette une URL src qui contient une forme d'image générale:
Après qu'un formulaire a été créé ou obtenu, il peut être affiché dans un iframe en utilisant le iframe_token
fourni dans la réponse (ce jeton varie donc assurez-vous de récupérer votre formulaire avant de rendre l'iframe)
Créez également un script qui écoute les événements de l'iframe comme dans l'exemple ci-dessous:
<!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>
Définissez la variable lang
pour afficher les commandes de l'application dans la langue désirée. Actuellement, nous prenons en charge l'anglais (en), le français (fr), l'espagnol (es), le portugais brésilien (pt) ou le kazakh (kk)
La variable read_only
peut être définie sur 1
pour désactiver la modification du formulaire ou 0
pour autoriser la modification du formulaire
Lorsque les utilisateurs cliquent sur le bouton Enregistrer, la méthode editForm
sera déclenchée, vous avez alors accès à 2 variables :
formData
contiendra les attributs de formulaire encodés qui peuvent être envoyés en utilisant la mise à jour pour enregistrer les modifications apportées à votre formulaire : schema
vous permettra de savoir quels champs ont été créés jusqu'à présent: {
"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 schema
est destinée uniquement à vous permettre d'afficher des alertes à vos utilisateurs dans le cas où vous exigeriez que des champs de zone obligatoires soient créés:
Lorsqu'un utilisateur clique sur télécharger les résultats, la méthode getResults
sera déclenchée, vous obtiendrez alors les données de résultat dans un format JSON
afin que vous puissiez les stocker dans votre système
De plus, vous pouvez obtenir les résultats ligne par ligne avec la méthode rowResult
, qui sera déclenchée à chaque fois qu'une page est traitée
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}"'
{
"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"
}
GET /api/forms/{form_id}
curl --location --request DELETE 'https://formread.org/api/forms/8' \
--header 'Accept: application/json' \
--header 'Authorization: Bearer kHMwPfhJC9rJyhR7h0L78j1OB9FXErF9JseFCXH9'
1