Added functionality to retrieve input json and generate form components

natalialuzuriaga · natalialuzuriaga · commit 329c0220e4ff · 2024-12-03T08:38:36.000-08:00
Signed-off-by: Natalia Luzuriaga &lt;natalia.luzuriaga@cms.hhs.gov&gt;
diff --git a/form.html b/form.html
@@ -22,8 +22,10 @@
     </head>
     <body>
         <div id="formio"></div>
+        <script src="js/generateFormComponents.js"></script>
         <script type="text/javascript">
-            Formio.createForm(document.getElementById('formio'), {
+            createFormComponents().then(components => {
+                Formio.createForm(document.getElementById('formio'), {
                     "display": "form",
                     "theme": "primary",
                     "settings": {
@@ -32,8 +34,12 @@
                             "src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0"
                         }
                     },
-                    "components": []
+                    "components": components
                 })
+            })
+            .catch(error => {
+                console.error("Error creating components:", error);
+            });
         </script>
     </body>
 </html>
diff --git a/js/generateFormComponents.js b/js/generateFormComponents.js
@@ -0,0 +1,70 @@
+// Retrieves file and returns as json object
+async function retrieveFile(filePath) {
+    try {
+        const response = await fetch(filePath);
+
+        // Check if the response is OK (status code 200)
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        // Return the parsed JSON content
+        return await response.json();
+    } catch (error) {
+        console.error('There was a problem with the fetch operation:', error);
+        return null;
+    }
+}
+
+// Creates Form.io component based on json fields
+// Supports text field for now
+// TODO: Create components for number, select, and multi-select
+function createComponent(fieldName, fieldObject) {
+    switch (fieldObject["type"]) {
+        case "string": 
+            return {
+                type: "textfield",
+                key: fieldName,
+                label: fieldName,
+                input: true,
+                tooltip: fieldObject["description"],
+                description: fieldObject["description"]
+              };
+        default:
+            break;
+    }
+}
+
+// Iterates through each json field and creates component array for Form.io
+async function createFormComponents() {
+    var components = [];
+    var formFields = {};
+
+    var filePath = "schemas/schema.json"
+    var jsonData = await retrieveFile(filePath)
+    console.log('JSON Data:', jsonData);
+
+    formFields = jsonData["properties"];
+    console.log('form Fields:', formFields);
+
+    for (const key in formFields) {
+        console.log(`${key}:`, formFields[key]);
+        var fieldComponent = createComponent(key, formFields[key])
+        components.push(fieldComponent)
+    }
+
+    // Add submit button to form
+    components.push({
+        "type": "button",
+        "label": "Submit",
+        "key": "submit",
+        "disableOnInvalid": true,
+        "input": true,
+        "tableView": false
+    })
+
+    console.log(components)
+
+    return components;
+}
+
+window.createFormComponents = createFormComponents;
