Adaptive Forms (Core Components)

Namespace: Constants

FormView~ 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;
          });
     }