Adaptive Forms (Core Components) Namespace: Constants

Constants for the core components.

Namespaces

HTML_ATTRS
FIELD_TYPE

Members

<static> NS :string

Namespace of the data-attribute. Any data attribute will be prefixed with this name. i.e. data-name would be data-{NS}-{ComponentClass}-name. Each component will have a different component class.

Type:

string

<static> FORM_CONTAINER_DATA_ATTRIBUTE :string

Data attribute to store the form container path. In HTML, it will be namespaced as data-{NS}-{ComponentClass}-adaptiveformcontainerPath.

Type:

string

<static> DATA_HOOK_ADD_INSTANCE :string

Data attribute to be added on clickable element to repeat a repeatable panel.

Type:

string

<static> DATA_HOOK_REMOVE_INSTANCE :string

Data attribute to be added on element to remove a repeatable panel.

Type:

string

<static> DATA_ATTRIBUTE_VALID :string

Data attribute to mark the dragged component valid or invalid. Value true for valid, value false for invalid.

Type:

string

<static> DATA_ATTRIBUTE_ENABLED :string

Data attribute to mark the dragged component enabled or disabled. Value true for enabled, value false for disabled.

Type:

string

<static> DATA_ATTRIBUTE_VISIBLE :string

Data attribute to mark the dragged component visible or invisible. Value true for visible, value false for invisible.

Type:

string

<static> DATA_ATTRIBUTE_REQUIRED :string

Data attribute to mark the dragged component required or not. Value true for required, value false for not required.

Type:

string

<static> DATA_ATTRIBUTE_READONLY :string

Data attribute to mark the dragged component readonly or not. Value true for readonly, value false for not readonly.

Type:

string

<static> DATA_ATTRIBUTE_ACTIVE :string

Data attribute to mark the dragged component active or inactive. Value true for active, value false for inactive.

Type:

string

<static> ARIA_DISABLED :string

ARIA attribute to mark the dragged component disabled.

Type:

string

<static> ARIA_HIDDEN :string

ARIA attribute to mark the dragged component hidden.

Type:

string

<static> ARIA_INVALID :string

ARIA attribute to mark the dragged component invalid.

Type:

string

<static> ARIA_CHECKED :string

ARIA attribute to mark the dragged component checked.

Type:

string

<static> ARIA_SELECTED :string

ARIA attribute to mark component selected.

Type:

string

<static> TABINDEX :string

Tab index attribute.

Type:

string

<static> ARIA_CURRENT :string

Aria Current attribute.

Type:

string

<static> API_PATH_PREFIX :string

Prefix path for all AF HTTP APIs.

Type:

string

Events

FORM_CONTAINER_INITIALISED

Event triggered when a Form container is initialized.

Properties:

Name Type Description

event

object

The event object.

Properties

Name	Type	Description
`detail`	object	Instance of FormContainer that is initialized.

Example

document.addEventListener("AF_FormContainerInitialised" , function(event) {
     var formContainer = event.detail;
     // Handle the event
});

PANEL_INSTANCE_ADDED

Event triggered when a panel instance view is added.

Properties:

Name Type Description

event

object

The event object.

Properties

Name	Type	Description
`detail`	object	Instance of child view that is added.

Example

document.addEventListener("AF_FormContainerInitialised" , function(event) {
     var formContainer = event.detail;
     // Handle the event
     formcontainer.getFormElement().addEventListener("AF_PanelInstanceAdded" , function(event) {
         var childView = event.detail;
         // Handle the event
      });
});

PANEL_INSTANCE_REMOVED

Event triggered when a panel instance view is removed.

Properties:

Name Type Description

event

object

The event object.

Properties

Name	Type	Description
`detail`	object	Instance of child view that was removed.

Example

document.addEventListener("AF_FormContainerInitialised" , function(event) {
     var formContainer = event.detail;
     // Handle the event
     formcontainer.getFormElement().addEventListener("AF_PanelInstanceRemoved" , function(event) {
         var childView = event.detail;
         // Handle the event
     });
});

FORM_LANGUAGE_INITIALIZED

Event triggered when the clientlibs for the locale passed have finished loading.

Properties:

Name Type Description

event

object

The event object.

Properties

Name	Type	Description
`detail`	object	The locale that has loaded.

Example

document.addEventListener("AF_LanguageInitialised" , function(event) {
     var locale = event.detail;
     // Handle the event
});

ELEMENT_FOCUS_CHANGED

Event triggered when focus is changed on a form element

Properties:

Name Type Description

event

object

The event object.

Properties

Name Type Description

detail

object

Instance of form element which is in focus

Properties

Name	Type	Description
`fieldId`	string	The ID of the current field in focus
`formTitle`	string	The title of the form.
`formId`	string	The ID of the form.
`fieldName`	string	The name of the form.
`panelName`	string	The name of the panel (ie parent of the form element).
`fieldQualifiedName`	string	The qualified name of the field

Example

// Sample usage:
     // The following code snippet demonstrates how to use the "ELEMENT_FOCUS_CHANGED" event.
     // For a complete example, refer to: https://github.com/adobe/aem-core-forms-components/blob/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/datalayer/datalayer.js
     const onFocusChange = (event) => {
         console.log(event.detail.fieldId) // id of the field in focus
         console.log(event.detail.formTitle)
     };
     if(window.guideBridge !== undefined){
             bridge = window.guideBridge;
             bridge.on("elementFocusChanged", onFocusChange);
     } else {
          window.addEventListener("bridgeInitializeStart", (event)=>{
              bridge = event.detail.guideBridge;
              bridge.on("elementFocusChanged", onFocusChange);
          });
     }

ELEMENT_HELP_SHOWN

Event triggered when help is shown on a form element

Properties:

Name Type Description

event

object

The event object.

Properties

Name Type Description

detail

object

Instance of form element on which help was shown.

Properties

Name	Type	Description
`fieldId`	string	The ID of the field on which the help was shown.
`formTitle`	string	The title of the form.
`formId`	string	The ID of the form.
`fieldName`	string	The name of the form.
`panelName`	string	The name of the panel (ie parent of the form element).
`fieldQualifiedName`	string	The qualified name of the field

Example

// Sample usage:
     // The following code snippet demonstrates how to use the "ELEMENT_HELP_SHOWN" event.
     // For a complete example, refer to: https://github.com/adobe/aem-core-forms-components/blob/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/datalayer/datalayer.js
     const onHelpShown = (event) => {
         console.log(event.detail.fieldId) // id of the field on which help was shown
         console.log(event.detail.formTitle)
     };
     if(window.guideBridge !== undefined){
             bridge = window.guideBridge;
             bridge.on("elementHelpShown", onHelpShown);
     } else {
          window.addEventListener("bridgeInitializeStart", (event)=>{
              bridge = event.detail.guideBridge;
              bridge.on("elementHelpShown", onHelpShown);
          });
     }

ELEMENT_ERROR_SHOWN

Event triggered when error is shown on a form element.

Properties:

Name Type Description

event

object

The event object.

Properties

Name Type Description

detail

object

Instance of form element on which error was shown

Properties

Name	Type	Description
`fieldId`	string	The ID of the field on which the error was shown.
`formTitle`	string	The title of the form.
`formId`	string	The ID of the form.
`fieldName`	string	The name of the form.
`panelName`	string	The name of the panel (ie parent of the form element).
`fieldQualifiedName`	string	The qualified name of the field
`validationMessage`	string	The validation message shown on the field
`validationType`	string	The type of validation which failed on field as per, https://opensource.adobe.com/aem-forms-af-runtime/js-docs/README.html#constrainttype

Example

// Sample usage:
     // The following code snippet demonstrates how to use the "ELEMENT_ERROR_SHOWN" event.
     // For a complete example, refer to: https://github.com/adobe/aem-core-forms-components/blob/master/ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/af-commons/v1/datalayer/datalayer.js
     const onErrorShown = (event) => {
         console.log(event.detail.fieldId) // id of the field on which error was shown
         console.log(event.detail.formTitle)
     };
     if (window.guideBridge !== undefined){
             bridge = window.guideBridge;
             bridge.on("elementErrorShown", onErrorShown);
     } else {
          window.addEventListener("bridgeInitializeStart", (event)=>{
              bridge = event.detail.guideBridge;
              bridge.on("elementErrorShown", onErrorShown);
          });
     }

ELEMENT_VALUE_CHANGED

Event triggered when value is change of a form element

Properties:

Name Type Description

event

object

The event object.

Properties

Name Type Description

detail

object

Instance of form element on which error was shown

Properties

Name	Type	Description
`fieldId`	string	The ID of the field on which the value has changed
`formId`	string	The ID of the form.
`fieldName`	string	The name of the form.
`panelName`	string	The name of the panel (ie parent of the form element).
`formTitle`	string	The title of the form.
`fieldQualifiedName`	string	The qualified name of the field
`prevText`	string	Previous value of the form element
`newText`	string	Current value of the form element

Example

// Sample usage:
     // The following code snippet demonstrates how to use the "ELEMENT_VALUE_CHANGED" event.
     const onValueChange = (event) => {
         console.log(event.detail.fieldId) // id of the form element on which value has changed
         console.log(event.detail.formTitle)
     };
     if (window.guideBridge !== undefined){
             bridge = window.guideBridge;
             bridge.on("elementValueChanged", onValueChange);
     } else {
          window.addEventListener("bridgeInitializeStart", (event)=>{
              bridge = event.detail.guideBridge;
              bridge.on("elementValueChanged", onValueChange);
          });
     }

GUIDE_BRIDGE_INITIALIZE_START

Event triggered when GuideBridge initialization begins.

Type: string

Properties:

Name Type Description

event

object

The event object.

Properties

Name	Type	Description
`detail.guideBridge`	object	The guideBridge GuideBridge object

Example

if(window.guideBridge !== undefined){
             bridge = window.guideBridge;
     } else {
          window.addEventListener("bridgeInitializeStart", (event)=>{
              bridge = event.detail.guideBridge;
          });
     }