Document Select
Last updated
Last updated
This component can be found under the Sybrin.Document
namespace and is called DocumentSelectComponent
.
Full name: Sybrin.Document.DocumentSelectComponent
.
It is a component that provides basic document selection functionality in the form of a simple UI. The Web SDK requires a document type for capture and OCR, and it's recommended that you use this component to obtain said document type.
With default styling, the document select component appears as follows:
The "Next" button will remain disabled until a document has been selected. Selection is confirmed upon clicking the "Next" button and then the onDocumentSelected
event will fire.
The document select component can be initialized using the following code:
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 'document-select' 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 document select 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.
Optional:
countryCode (string)
: The Alpha-3 standard country code to filter document selection by. If a country code is passed down, only documents supported by the specified country will be shown. Please see country overrides & filtering for a list of accepted values.
defaultDocumentType (string)
: The type of document that must be selected by default.
documentTypes (Sybrin.Document.DocumentType[])
: Explicit document type filter. Please see document type overrides & filtering for details.
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.
When creating an instance of the document select component, the SDK allows for an Alpha-3 standard countryCode
parameter, which will be used to filter document types based on the country. Additionally, the SDK allows for a documentTypes
parameter which can be used for more specific override options. The parameter is a collection of objects where each instance has the enabled
property.
id (string)
: The unique identifier (document type ID) used to target a document type to override.
enabled (boolean)
: Can be used to filter out the targeted document type (if set to false).
Supported document type IDs are:
Kenya
Birth Certificate: 'kenbirthcertificate'
(Document type name = 'birthcertificate')
Foreign Certificate: 'foreigncertificate'
(Document type name = 'foreigncertificate')
Other
Any: 'anydocument'
The generic document type IDs that would apply globally correspond to the document type names. They are:
Birth Certificate: 'birthcertificate'
Foreign Certificate: 'foreigncertificate'
Advanced filtering and override example:
By specifying countryCode
as 'KEN'
, it will only show document types that are supported by Kenya. The document type instance filters 'kenforeigncertificate'
(Kenyan Foreign Certificate) out so that it doesn't appear as part of the list even though it is a supported Kenyan document.
The document select 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 document select component offers one event for reacting to document selection. To hook onto the event, simply assign a function to it.
The following option is available:
onDocumentSelected(documentTypeName: string, documentTypeId: string)
This function is called when a document is selected and provides the selected document's type name and, if applicable, document type ID as arguments. The ID will only be passed as an argument if the country code is known to the component at the time of selection. To hook onto the event, you may use the following code:
The documentTypeName parameter is of type string
.
The documentTypeId parameter is of type string
.
The document select component is structured a follows:
The classes and elements specified above may be used to freely style the document select 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 element with the sybrin-document-card
class repeats for every document type option. The above example only uses Birth Certificate as an example, however the same element would repeat for each document type option in the list, using the relevant document type ID for the CSS class and the relevant document name and description in the display text.
Styling implementation example:
Currently, no translations are available.