Passer au contenu principal
Si vous utilisez ABBYY Vantage au sein de votre propre système, vous souhaiterez probablement aussi exploiter les fonctionnalités de relecture manuelle. Cette section vous guidera pour intégrer la relecture manuelle. Après avoir envoyé des documents au traitement via l’API Vantage, surveillez l’état de la transaction comme décrit dans Comment traiter des documents à l’aide de l’API Vantage. Si un document doit être revu par un opérateur, la réponse d’état de la transaction contiendra une clé manualReviewLink avec un lien sécurisé, qui permettra au relecteur d’accéder uniquement aux données de cette transaction. Intégrez une iframe avec le contenu de ce lien dans la page web de votre service :
<iframe src="manual-review-link"></iframe>
Notez que le lien expirera 168 heures après sa création. Si vous devez poursuivre l’examen, demandez un nouveau lien en envoyant une requête GET à la ressource transactions, comme précédemment.

Apparence de l’iframe

Vous pouvez améliorer l’apparence du service en supprimant le logo Vantage ou en masquant certains volets dans l’interface client de relecture manuelle. Pour supprimer le logo Vantage, ajoutez un Parameter displayMode avec la valeur iframe au lien comme suit :
<iframe src="manual-review-link&displayMode=iframe"></iframe>
Utilisez les options suivantes pour configurer l’interface client de relecture manuelle :
KeyDescription
features
batchEditorDéfinissez sur false pour masquer le volet des vignettes de Page.
batchEditor.toolbarDéfinissez sur false pour afficher le volet des vignettes de Page mais masquer le volet de la barre d’outils.
batchEditor.autoCollapseDéfinissez sur true pour afficher le volet des vignettes de Page mais le réduire à l’ouverture de l’interface de relecture manuelle.
docEditorDéfinissez sur false pour masquer le volet de l’image de Page.
docEditor.toolbarDéfinissez sur false pour afficher le volet de l’image de Page mais masquer sa barre d’outils.
formEditorDéfinissez sur false pour masquer le volet de la liste des Champs extraits.
rulesReportDéfinissez sur false pour masquer le volet de la liste des erreurs de règles.
sendToStageAvailableDéfinissez sur true pour afficher le bouton Envoyer vers l’étape….
Ces options sont regroupées dans un unique objet JSON. Le code d’exemple suivant affichera une iframe avec le volet des erreurs de règles masqué et le volet des vignettes de Page réduit :
"features": {
   "batchEditor": {
      "autocollapse": true,
   },
   "rulesReport": false,
}
Ajoutez un paramètre de requête settings contenant le contenu de cet objet JSON à votre lien pour la relecture manuelle :
<iframe src="manual-review-link&settings=%7B%22features%22%3A%7B%22batchEditor%22%3A%7B%22autoCollapse%22%3Atrue%7D%2C%22rulesReport%22%3Afalse%7D%7D"></iframe>

Événements de l’iframe

L’objet iframe envoie des messages à la fenêtre parente pour vous informer des actions du réviseur dans l’interface du client de relecture manuelle, afin que vous puissiez passer à l’étape suivante au moment opportun. Les événements sont envoyés avec le Parameter targetOrigin=parent. Voici la liste des événements à surveiller :
  • ManualReviewWasPaused. Envoyé lorsque le réviseur clique sur le bouton Reject.
  • ManualReviewWasCompleted. Envoyé lorsque le réviseur clique sur le bouton Complete.
  • ManualReviewWithdrawn. Envoyé lorsque le réviseur est resté inactif pendant un certain temps et que la tâche du client de relecture manuelle a été retirée et renvoyée dans la file d’attente générale des tâches.
L’exemple de code ci-dessous montre comment afficher une iframe pour la relecture manuelle et la masquer dès que l’un des événements ci-dessus est déclenché. Exemple de code pour l’écoute des événements de l’iframe :
<html style="min-height: 100%; height: 100%;">
<head>
  <script>
    var manualReviewLink; // le lien issu de la réponse de statut de la transaction
    window.addEventListener("DOMContentLoaded", init, false);
    function init() {
      var iframe = document.createElement("iframe");
      iframe.src = getUrl();
      iframe.style.width = "100%";
      iframe.style.height = "95%";
      try {
        document.getElementById("main").removeChild(document.querySelector("iframe"));
      } catch (e) { }
      document.getElementById("main").appendChild(iframe);
      window.addEventListener("message", receiveMessage, false);
    }
    function getUrl() {
      return manualReviewLink + "&displayMode=iframe";
    }
    function receiveMessage(event) {
      console.log(event.data);
      if (event.data.target === "parent") {
        if (event.data.eventName === "ManualReviewWithdrawn" || 
            event.data.eventName === "ManualReviewWasPaused" || 
            event.data.eventName === "ManualReviewWasCompleted" ) {
          document.getElementById("iframe").style.display = "none";
        }
      }
    }
  </script>
</head>
<body
  style="background-color: #999999; min-height: 100%; height: 100%; position: relative; margin: 0; padding: 0; background: linear-gradient(to bottom right, #4380bc, #5ba484);">
  <div id="main"
    style="height: 100%; position: relative; padding:20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;">
  </div>
</body>
</html>