Forms Experimentation

Author: dmaurya929

ui.af.apps/src/main/content/jcr_root/apps/core/fd/components/form/container/v2/container/clientlibs/site/js/formcontainerview.js

@@ -105,11 +105,14 @@
         }
     }
 
-    async function onDocumentReady() {
+    async function initialiseForms() {
         const startTime = new Date().getTime();
         let elements = document.querySelectorAll(FormContainerV2.selectors.self);
 
         for (let i = 0; i < elements.length; i++) {
+            if(elements.dataset?.cmpVisited === "true") {
+                continue;
+            }
             let loaderToAdd = document.querySelector("[data-cmp-adaptiveform-container-loader='"+ elements[i].id + "']");
             if(loaderToAdd){
                 loaderToAdd.classList.add(FormContainerV2.loadingClass);
@@ -149,8 +152,12 @@
     document.cookie="wcmmode=disabled; max-age=0; path=/";
 
     if (document.readyState !== "loading") {
-        onDocumentReady();
+        initialiseForms();
     } else {
-        document.addEventListener("DOMContentLoaded", onDocumentReady);
+        document.addEventListener("DOMContentLoaded", initialiseForms);
     }
+
+    window.Forms = window.Forms || {};
+    window.Forms.CoreComponents = window.Forms.CoreComponents || {};
+    window.Forms.CoreComponents.initialiseForms = initialiseForms;
 })();

ui.frontend/src/utils.js

@@ -105,6 +105,7 @@ class Utils {
 
         const pathAttr = '[data-cmp-path="' + formContainer.getPath() + '"]';
         const formContainerElement = document.querySelector(pathAttr);
+        if(!formContainerElement) return;
         observer.observe(formContainerElement, {
             subtree: true,
             childList: true,
@@ -320,7 +321,14 @@ class Utils {
      */
     static async setupFormContainer(createFormContainer, formContainerSelector, formContainerClass) {
         FunctionRuntime.registerFunctions(customFunctions);
-        let elements = document.querySelectorAll(formContainerSelector);
+        let elements = Array.from(document.querySelectorAll(formContainerSelector));
+        // Avoid already initialised form container ( in case of multiple container in site )
+        elements = elements
+            .filter(element => element.dataset["cmpVisited"] !== "true")
+            .map(element => {
+                element.dataset["cmpVisited"] = "true";
+                return element;
+            });
         for (let i = 0; i < elements.length; i++) {
             const dataset = Utils.readData(elements[i], formContainerClass);
             const customFunctionUrl = dataset["customFunctionsModuleUrl"];