Subscribing to events

There are three main events to which you will need to assign handlers on each of the validation components:

• onvalidationstatuschange
• onfieldchange
• onmappedfieldschange

onvalidationstatuschange

onvalidationstatuschange will fire every time the validation status changes, so either when a validation response comes back from the API with a new validation status, or when the user manually modifies an existing value, resulting in a Manually Updated status. When this happens, the event.detail object will contain the following values:

onfieldchange

onfieldchange will fire whenever a change is made to any of the input elements present within our validation components. This ensures that whatever has been entered into our elements or changed by an API response can be picked up and stored in your own custom Lightning Web Component. When this happens, the event.detail object will contain the following values:

• Address
• Email
• Phone

onmappedfieldschange

onmappedfieldschange is only relevant if you have assigned a touchpoint via the touchpoint-api-name attribute. You can pull event.detail.mappings from the first argument, which will contain a map of your chosen metadata, components or enrichment attributes, either in default dot syntax (e.g. uk_location_complete.latitude) or an alias, if you have set one in the Touchpoint mappings.

Example

Here is an example of an integration using our Email Validate component:

<template>
    <texperianledq-ledq-cmp-email-validate-flow
        field-label="Email"
        help-text="Help"
        touchpoint-api-name="Email_Test"
        onvalidationstatuschange={handleValidationStatusChange}
        onfieldchange={handleFieldChange}
        onmappedfieldschange={handleMappedFieldsChange}
    ></texperianledq-ledq-cmp-email-validate-flow>
</template>

onvalidationstatuschange, onfieldchange and onmappedfieldschange are bound to component handler functions, which then populate local variable values within the custom Lightning Web Component.

import { LightningElement } from 'lwc';

export default class TestLwcIntegration extends LightningElement {
    emailValue;
    domainType
    inputValue;
    confidence;
    moreInfo;

    handleFieldChange(e) {
        this.emailValue = e.detail.emailValue;
    }

    handleValidationStatusChange(e) {
        this.inputValue = e.detail.validationInputKey;
        this.confidence = e.detail.validationStatus;
        this.moreInfo = e.detail.validationMoreInfo;
    }

    handleMappedFieldsChange(e) {
        this.domainType = e.detail.mappings.domain_type_alias;
    }
}