Reconcile Document Viewer

Overview

For use cases when needing to display bounding boxes within a document and provide auto-scrolling to those locations from interface actions.

Key Features & Functionality

Parameters:

  • documentUrl - URL of document using document (<id>, "url"): PDF, JPG, PNG, TIFF (single and multi-page)
  • boundingBoxesDocumentUrl - URL of document using document (<id>, "url"), use either this or boundingBoxes
  • boundingBoxes - List of bounding boxes dictionaries containing an id and geometry (top, left, width, height), use either this or boundingBoxDocumentUrl
  • interactionId - value that should be incremented with each action outside of the component plugin that should force the component plugin to update, for example updating a highlightedBoxId to force scrolling.
  • highlightedBoxId - The ID of the bounding box that should be highlighted in the component plugin. If interactionId is updated alongside this value, the UI will scroll.
  • clickedBoundingBox - The ID of the bounding box that the user clicked within the component plugin

Example Usage:

reconcileDocumentViewer(
documentUrl: document(
<docId>,
"url"
),
boundingBoxes: {
a!map(
id: "<bounding box ID>",
text: "<text in box (used for search)>",
pageNumber: <page number of box>,
geometry: {left: <left coord>, top: <top coord>, width: <width>, height: <height>}
),
...more bounding boxes
},
interactionIdValue: local!interactionId,
interactionIdSaveInto: local!interaction,
highlightedBoxId: ri!highlightedBox,
clickedBoundingBox: ri!selectedBox
)

Usage considerations:

  • Provide bounding boxes using either ‘boundingBoxesDocumentUrl’ or ‘boundingBoxes’. For better performance and UI responsiveness, use ‘boundingBoxesDocumentUrl’ when possible
  • Max PDF size: 25Mb
  • Max pages: 500
  • Max bounding boxes using ‘boundingBoxesDocumentUrl’: 200,000
  • Max bounding boxes using ‘boundingBoxes’: 10,000
  • Chrome (incognito): Enable “Allow third-party cookies”
  • Firefox: Disable "Enhanced Tracking Protection"
  • Safari: When rendering the component after a SAIL interaction, increment “interactionIdValue” in that interaction
Anonymous
Parents
  • How do you get geometry co-ordinates as shown below? Gen AI Document Extraction AI Skill doesn't provide accurate co-ordinates to draw the bounding box. Does it require Advanced IDP Tool AI Skill? 

    geometry: a!map(
    top: 0.05,
    left: 0.05,
    width: 0.05,
    height: 0.05
    )

  • Hi Amit, yes, the easiest way to get these bounding boxes is from Advanced IDP Tools, though you can also provide them manually if you integrate with an external IDP service. The AI Document Center application handles this process automatically for you (still requires Advanced IDP) so I highly recommend you leverage this application for any IDP use cases!

Comment
  • Hi Amit, yes, the easiest way to get these bounding boxes is from Advanced IDP Tools, though you can also provide them manually if you integrate with an external IDP service. The AI Document Center application handles this process automatically for you (still requires Advanced IDP) so I highly recommend you leverage this application for any IDP use cases!

Children
No Data