This component can be found under the Sybrin.Document
namespace and is called ResultComponent
.
Full name: Sybrin.Document.ResultComponent
.
It is a component that displays the result of a document capture provided by the Sybrin Document JavaScript API and presents it in the form of a UI component. The result displayed will be the processed image if document processing was applied, otherwise it will defer to the original.
The document capture result may be obtained by either using an instance of the JavaScript API or by using a component such as DocumentCaptureComponent
to run image capture.
With default styling, the result component appears as follows:
Upon clicking "Next", the onNext
event will fire.
Upon clicking "Back", the onRetry
event will fire.
The result component can be initialized using the following code:
The result parameter may be obtained using the Document Capture component.
The countryCode parameter may be obtained using the Country Select component.
The documentTypeId and documentTypeName parameters may be obtained using the Document Select component.
The Sybrin Web SDK provides the option to either pass down the ID of the element you wish to use for component initialization, or to pass the element directly.
Please note that 'result' is just an example in this context and the ID may be changed as desired as long as it matches the value passed down during component initialization in JavaScript.
During initialization, the result component allows for a number of configuration options that may be passed down using an object literal. The parameters that may be used on the object include the following:
Required:
id (string)
: ID of the element you wish to use for component initialization. Not required if element
is provided.
countryCode
: The country code of the document. Used for OCR, in conjunction with document type parameters. May be obtained by using the Country Select component.
documentTypeId
: The document type ID of the document. Used for OCR, in conjunction with country code parameters. May be obtained by using the Document Select component.
documentTypeName
: The document type name of the document. Used for OCR, in conjunction with country code parameters. May be obtained by using the Document Select component.
element (HTMLElement)
: Element you wish to use for component initialization. Not required if id
is provided.
dataUri (string)
: The data URI of the resulting document image.
Optional:
correlationId
: Sets the correlation ID for the case that will be provided with the OCR request. Used for advanced tracking and backend data sync.
enableOcr
: Sets whether or not the component must execute OCR on entry.
readonlyMode
: Sets whether or not buttons and events must be enabled. If readonlyMode is true, they are disabled. If readonlyMode is false, they are enabled.
translations ({ [key: string]: string })
: An object literal representing a dictionary lookup that will be used for translating the component. Please see the translations section on this page for a list of all translatable text, as well as the localization page for a detailed description on how to implement localization.
ShowResultTitles
sets the visibility of the result title
Warning: Initialization will fail if the intended host element does not exist yet.
Always ensure that the initialize function is only called once the DOM is loaded.
The result component may be removed from the UI by calling the "destroy()" function on it.
Example:
initialize(): void
Initializes the component's DOM and events.
destroy(): void
Destroys the component's DOM and events.
setTranslations(translations?: { [key: string]: string; }): void
Changes the component's translations to the provided values and updates the DOM accordingly.
The result component offers multiple events. To hook onto an event, simply assign a function to it.
The following options are available:
onOcrError(error: string)
onNext(result: DocumentCaptureResult)
onRetry()
This function is called when OCR fails. To hook onto the event, you may use the following code:
The parameter is a string containing the error message.
This function is called when the user clicks on the continue button. To hook onto the event, you may use the following code:
The parameter is a Sybrin.Document.DocumentCaptureResult
instance.
This function is called when the user clicks on the retry button. To hook onto the event, you may use the following code:
No parameters are provided to this function call.
The result component is structured a follows:
The classes and elements specified above may be used to freely style the result component as desired. To do so, simply create a stylesheet and include it in the project, then style according to the above classes and elements.
Styling implementation example:
Currently, no translations are available.