Component Events
As the user interacts with an Array component, the component triggers javascript events that describe the user's actions. To catch these events, you add an event listener that listens for events of type array-event
. For example:
window.addEventListener('array-event', function arrayEvent(arrayEvent) {
console.log('event from component...');
console.log(arrayEvent);
const {
tagName, // the name of the component that emitted the event
event, // the name of the user's action
metadata = {}, // component-specific data
} = arrayEvent.detail;
});
The sections below list the events that are triggered by the Array Web Components.
All Components
// Triggered when the component first appears but isn't entirely loaded.
{
tagName: "<componentName>",
event: "open",
metadata: {}
}
// Triggered immediately after the component's data has been completely loaded.
{
tagName: "<componentName>",
event: "loaded",
metadata: {}
}
array-account-enroll
WARNING
If you set the
array-account-enroll
component'sshowQuickView
orshowQuickViewPayment
attribute to true, thesignup
JavaScript event isn't triggered.
{
tagName: "array-account-enroll",
event: "signup",
metadata: {
userId: "string",
userToken: "string",
loginDelay: Number
}
}
{
tagName: "array-account-enroll",
event: "click",
metadata: {
section-name: "account-details" | "email-password" | "dob-ssn" | "questions" ,
control-name: "submit",
}
}
{
tagName: "array-account-enroll",
event: "success" | "failure" | "error" ,
metadata: {
section-name: "questions",
}
}
array-account-login
{
tagName: 'array-account-login',
event: "login",
metadata: {
userToken: "string",
userId: "string",
domain: "string"
}
}
array-account-settings
{
tagName: "array-account-settings",
event: "click",
metadata: {
section-name: "changePassword" | "changeEmail" | "changePhoneNumber",
control-name: "update"
}
}
{
tagName: "array-account-settings",
event: "click",
metadata: {
section-name: "navigation",
control-name: "security" | "personalInformation"
}
}
array-credit-alerts
{
tagName: "array-credit-alerts",
event: "logout",
metadata: {}
}
array-credit-bureau-toggle
{
tagName: "array-credit-bureau-toggle",
event: "bureau-toggle",
metadata: {
bureau: "tui" | "exp" | "efx" | "all"
}
}
{
tagName: "array-credit-bureau-toggle",
event: "open",
metadata: {
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-credit-overview
{
tagName: "array-credit-overview",
event: "logout",
metadata: {}
}
{
tagName: "array-credit-overview",
event: "error",
metadata: {
message: "string",
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-credit-report
{
tagName: "array-credit-report",
event: "loaded",
metadata: {
bureau: "tui" | "exp" | "efx" | "all"
}
}
{
tagName: "array-credit-report",
event: "click",
metadata: {
section-name: "accounts",
control-name: "creditCards" | "realEstate" | "autoLoans" | "studentLoans" | "other"
}
}
{
tagName: "array-credit-report",
event: "collapsed-section" | "expanded-section",
metadata: {
bureau: "tui" | "exp" | "efx" | "all",
section-name: "credit-cards" | "mortgages" | "student-loans" | "auto-loans" | "other-loans"
}
}
{
tagName: "array-credit-report",
event: "logout",
metadata: {}
}
{
tagName: "array-credit-report",
event: "error",
metadata: {
message: "string",
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-credit-score-factors
{
tagName: "array-credit-score-factors",
event: "click",
metadata: {
section-name: "main",
control-name: "main" | "ph" | "dm" | "hi" | "ca" | "ta" | "ccu"
}
}
{
tagName: "array-credit-score-factors",
event: "logout",
metadata: {}
}
{
tagName: "array-credit-score-factors",
event: "error",
metadata: {
message: "string",
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-credit-score-sight
{
tagName: "array-credit-score-sight",
event: "logout",
metadata: {}
}
{
tagName: "array-credit-score-sight",
event: "error",
metadata: {
message: "string",
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-credit-score-simulator
{
tagName: "array-credit-score-simulator",
event: "logout",
metadata: {}
}
{
tagName: "array-credit-score-simulator",
event: "error",
metadata: {
message: "string",
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-debt-analysis
{
tagName: "array-credit-debt-analysis",
event: "logout",
metadata: {}
}
{
tagName: "array-credit-debt-analysis",
event: "error",
metadata: {
message: "string",
bureau: "tui" | "exp" | "efx" | "all"
}
}
array-identity-protect-insurance
{
tagName: 'array-identity-protect-insurance',
event: "loaded",
metadata: {
section-name: "toggle-ident-protect",
active: true | false
}
}
{
tagName: 'array-identity-protect-insurance',
event: "value-change",
metadata: {
section-name: "toggle-ident-protect",
enable: true | false
}
}
{
tagName: 'array-identity-protect-insurance',
event: "expanded-section",
metadata: {
section-name: "learn-more"
}
}
array-navbar
{
tagName: "array-navbar",
event: "logout",
metadata: {}
}
Updated 16 days ago