Result

This component can be found under the Sybrin.Identity namespace and is called ResultComponent.

Full name: Sybrin.Identity.ResultComponent.

It is a component that displays the result of a document scan provided by the Sybrin Identity JavaScript API and presents it in the form of a UI component. The result is presented as a set of parsed data fields and the accompanying front and back photos (if applicable). It's recommended that you use this component if you do not wish to create your own UI and simply want to display a result provided by a completion of the Sybrin Identity Web SDK identity data extraction process.

The document scan result may be obtained by either using an instance of the JavaScript API or by using a component such as DocumentScanComponent to run data extraction.

With default styling, the result component appears as follows:

Result Component

Upon clicking "Continue", the onContinue event will fire.

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

The component supports the option to provide a boolean parameter called promptMobileOnRetry, which when set to true will result in a prompt to query if the user would like to try mobile capture upon clicking "Retry". Clicking "No" will fire the onRetry event with a boolean parameter set to false, and clicking "Yes" will fire the onRetry event with a boolean parameter set to true.

The component supports the option to provide a boolean parameter called isSingleStep, which when set to true will result in the "Next" button's text being displayed as "Complete Step" instead.

Initialization

The result component can be initialized using the following code:

HTML

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

JavaScript

// Option 1: Passing an id
var component = new Sybrin.Identity.ResultComponent({ 
    id: 'result',
    result: result
});

// Option 2: Passing a DOM element
var element = document.getElementById('result');
var component = new Sybrin.Identity.ResultComponent({ 
    element: element,
    result: result
});

component.initialize();

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 passed.

• element (HTMLElement): Element you wish to use for component initialization. Not required if id is passed.

• result (Sybrin.Identity.DocumentScanResult): The Sybrin.Identity.DocumentScanResult instance to construct the UI with.

Optional:

• promptMobileOnRetry (boolean): When set to true this will result in a prompt to query if the user would like to try mobile capture upon clicking "Retry". Clicking "No" will fire the onRetry event with a boolean parameter set to false, and clicking "Yes" will fire the onRetry event with a boolean parameter set to true. Default false

• isSingleStep (boolean): When set to true this will result in the "Next" button's text being displayed as "Complete Step" instead of "Next". Default false

• readOnlyMode (boolean): Sets whether or not the component should be fully read-only, negating any editable fields specified by the result object. Default true

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

Editable Fields

Editable fields are defined on the DocumentScanResult object, using these two properties:

• fieldEditMode (FieldEditMode)

• fieldList (string[])

This is so that the responding backend API may define which fields are editable.

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:

• onContinue()

• onRetry(mobile: boolean)

On Continue

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

component.onContinue = function(editedValues: { [key: string]: string }) {
    // Your code here
}

The parameter is an object literal, acting as a key-value pair dictionary. This object is populated with a list of all values on the result that were edited. It is up to the parent component to apply or discard the changes as necessary.

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(mobile) {
    // Your code here
}

The mobile parameter is of type boolean. By default its value would be set to false. It will only be true if the user clicked "Retry" while the promptMobileOnRetry parameter is set to true upon initialization of the component.

Styling

The result component is structured a follows:

<div class="sybrin-identity-container sybrin-sdk-container">
    <div class="sybrin-identity-halves sybrin-identity-result-images">
        <div class="sybrin-identity-half">
            <p class="sy-i-translation-69">Front</p>
            <div class="sybrin-identity-result-image">
                <img src="data:image/png;base64,">
            </div>
        </div>
        <div class="sybrin-identity-half">
            <p class="sy-i-translation-70">Back</p>
            <div class="sybrin-identity-result-image">
                <img src="data:image/png;base64,">
            </div>
        </div>
    </div>
    <div class="sybrin-identity-result-fields sybrin-custom-scrollbar">
        <div class="sybrin-identity-result-group">
            <div class="sybrin-identity-result-field sybrin-identity-float-left">
                <div>
                    <input disabled="" type="text" placeholder="-- No Data --"><label>MRZ Line 1</label>
                </div>
            </div>
            <div class="sybrin-identity-result-field sybrin-identity-float-right">
                <div>
                    <input disabled="" type="text" placeholder="-- No Data --"><label>MRZ Line 2</label>
                </div>
            </div>
        </div>
    </div>
    <div class="sybrin-identity-button-section sybrin-sdk-button-section sybrin-identity-result-main-buttons">
        <button class="sybrin-identity-retry sybrin-identity-flow-button sybrin-sdk-flow-button sybrin-secondary sy-i-translation-59">Retry</button>
        <button class="sybrin-identity-next sybrin-identity-flow-button sybrin-sdk-flow-button sy-i-translation-60">Next</button>
    </div>
    <div class="sybrin-identity-button-section sybrin-sdk-button-section sybrin-identity-result-retry-buttons sybrin-hidden">
        <button class="sybrin-identity-yes sybrin-identity-flow-button sybrin-sdk-flow-button sybrin-secondary sy-i-translation-61">Yes</button>
        <button class="sybrin-identity-no sybrin-identity-flow-button sybrin-sdk-flow-button sybrin-secondary sy-i-translation-62">No</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.

The identity result component is dynamic. The presence and visibility of images and data fields may vary.

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>ult

CSS

styles.css

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

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

Before Styling

After Styling

Translations

This component is affected by the following translation keys:

Translation Key	Description	Default/Source
sy-i-translation-59	Caption of the button that steps back for recapture	Retry
sy-i-translation-60	Caption of the button that proceeds to the next step	Next
sy-i-translation-61	Caption of the button that steps back for recapture with the mobile flag set to true after prompting for mobile capture	Yes
sy-i-translation-62	Caption of the button that steps back for recapture with the mobile flag set to false after prompting for mobile capture	No
sy-i-translation-63	Caption of the button that proceeds to the next step if the isSingleStep flag is set to true	Complete Step
sy-i-translation-64	Caption of the button that proceeds to the next step if the isSingleStep flag is set to false	Next
sy-i-translation-65	Error message to display when the provided result is an unsuccessful one	We were unable to extract data. Please try again.
sy-i-translation-66	Placeholder text to display in a result field if there is no data for it	-- No Data --
sy-i-translation-67	Prompt to display if the user clicks retry while on a desktop web browser if mobile capture is enabled	Looks like you're having trouble with the webcam. Would you like to try using mobile?
sy-i-translation-69	Heading to display above the front image	Front
sy-i-translation-70	Heading to display above the back image	Back