AEM Core Forms Components do not have the same events available as the Foundation Components

[royteeuwen]

Expected Behaviour

We are investigating on migrating from AEM Foundation Forms Components to AEM Core Forms Components and we expect that we can listen to the same events on the guideBridge, namely guideBridge.on("submitStart") to take actions before the submit action and guideBridge.on("validationComplete") to take correct actions when the validation is complete

Actual Behaviour

Both events are no longer available in the AEM Core Forms Components

AEM Version (mention the exact version in case of cloud SDK)

AEM 6.5.19

AEM Forms Version

1.1.32

Sample Code that illustrates the problem

 guideBridge.connect(function() {
            // It's executed before submit
            guideBridge.on('submitStart', (submitEvent) => {
                 // do things like showing a loading shield
            });

            //check if there are any validation errors
            guideBridge.on('validationComplete', (validationEvent, payload) => {
                if (payload.newText.length > 0) {
                    const error = {
                        errorList: payload.newText,
                    };
                    sendPostMessage('validation-failure', error);
                } else {
                    sendPostMessage('validation-success', validationEvent.type);
                }
            });
        });

[rismehta]

@royteeuwen

We have made certain GuideBridge events accessible for external applications to interact with in core components. However, not all events are exposed, as we advise against incorporating GuideBridge in core components due to their compatibility with headless use-cases.

The core components offer enhanced flexibility due to their modular design, leveraging a shared SDK that is also utilized in headless use-cases. The core component is inherently event-driven, providing a comprehensive set of events that can be accessed by subscribing to the form model (for use-cases where event is not exposed in GuideBridge) as demonstrated below.

const onSubmitStart = (event) => {
     console.log(event.detail.fieldId) 
 };
 const onValidationComplete = (event) => {
     const x = event.payload[0].id;
      // do something with the invalid field
 };
 const initialGbEvents = (guideBridge) => {
     guideBridge.getFormModel().subscribe((action) => {
            onSubmitStart(action);
    }, 'submit');
    guideBridge.getFormModel().subscribe((action) => {
            onValidationComplete(action);
    }, 'validationComplete');
 };
 if(window.guideBridge !== undefined){
         bridge = window.guideBridge;
         initialGbEvents(bridge);
 } else {
      window.addEventListener("bridgeInitializeStart", (event)=>{
          bridge = event.detail.guideBridge;
          initialGbEvents(bridge);
      });
 }

[rismehta]

The APIs exposed in the formModel returned by the getFormModel function are listed under the "methods" section (like visit, getState) on this page: https://opensource.adobe.com/aem-forms-af-runtime/js-docs/interfaces/FormModel.html.

[rismehta]

For example, You can use the following code to submit a form,

guideBridge.getFormModel().dispatch({type: 'submit'})

For more details on the submit event, please visit: Submit Event Documentation.