Result

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:

Result Component

Upon clicking "Next", the onNext event will fire.

Upon clicking "Back", the onRetry event will fire.

Initialization

The result component can be initialized using the following code:

HTML

<div id='result'></div>

JavaScript

// Option 1: Providing an id
var component = new Sybrin.Document.ResultComponent({ 
    id: 'result',
    result: result,
    countryCode: countryCode,
    documentTypeId: documentTypeId,
    documentTypeName: documentTypeName
});

// Option 2: Providing a DOM element
var element = document.getElementById('result');
var component = new Sybrin.Document.ResultComponent({ 
    element: element,
    result: result,
    countryCode: countryCode,
    documentTypeId: documentTypeId,
    documentTypeName: documentTypeName
});

component.initialize();

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.

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.

Destruction

The result component may be removed from the UI by calling the "destroy()" function on it.

Example:

component.destroy();

Functions

Initialize

initialize(): void

Initializes the component's DOM and events.

Destroy

destroy(): void

Destroys the component's DOM and events.

Set Translations

setTranslations(translations?: { [key: string]: string; }): void

Changes the component's translations to the provided values and updates the DOM accordingly.

Events

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()

On OCR Error

This function is called when OCR fails. To hook onto the event, you may use the following code:

component.onOcrError= function(error) {
    // Your code here
}

The parameter is a string containing the error message.

On Next

This function is called when the user clicks on the continue button. To hook onto the event, you may use the following code:

component.onNext = function(result) {
    // Your code here
}

The parameter is a Sybrin.Document.DocumentCaptureResult instance.

On Retry

This function is called when the user clicks on the retry button. To hook onto the event, you may use the following code:

component.onRetry = function() {
    // Your code here
}

No parameters are provided to this function call.

Styling

The result component is structured a follows:

<div class="sybrin-document-container sybrin-sdk-container">
    <div class="sybrin-document-halves sybrin-document-result-images"></div>
    <div class="sybrin-document-result-fields sybrin-custom-scrollbar"></div>
    <div class="sybrin-document-button-section sybrin-sdk-button-section sybrin-document-result-main-buttons">
        <button class="sybrin-document-retry sybrin-document-flow-button sybrin-sdk-flow-button sybrin-secondary">Back</button>
        <button class="sybrin-document-accept sybrin-document-flow-button sybrin-sdk-flow-button">Accept</button>
    </div>
</div>

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:

HTML

index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen"/>
</head>
<body>
    <div id='component'></div>
</body>
</html>

CSS

styles.css

.sybrin-document-flow-button {
    background: #963296;
    border: 2px solid #963296;
}

.sybrin-document-flow-button.sybrin-secondary {
    color: #963296;
    background-color: #f3e0f3;
    border: 2px solid #f3e0f3;
}

Before Styling

After Styling

Translations

Currently, no translations are available.