Skip to content

Commit 329c022

Browse files
Added functionality to retrieve input json and generate form components
Signed-off-by: Natalia Luzuriaga <[email protected]>
1 parent 161f700 commit 329c022

File tree

2 files changed

+78
-2
lines changed

2 files changed

+78
-2
lines changed

form.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,10 @@
2222
</head>
2323
<body>
2424
<div id="formio"></div>
25+
<script src="js/generateFormComponents.js"></script>
2526
<script type="text/javascript">
26-
Formio.createForm(document.getElementById('formio'), {
27+
createFormComponents().then(components => {
28+
Formio.createForm(document.getElementById('formio'), {
2729
"display": "form",
2830
"theme": "primary",
2931
"settings": {
@@ -32,8 +34,12 @@
3234
"src": "https://files.form.io/pdf/5692b91fd1028f01000407e3/file/1ec0f8ee-6685-5d98-a847-26f67b67d6f0"
3335
}
3436
},
35-
"components": []
37+
"components": components
3638
})
39+
})
40+
.catch(error => {
41+
console.error("Error creating components:", error);
42+
});
3743
</script>
3844
</body>
3945
</html>

js/generateFormComponents.js

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
// Retrieves file and returns as json object
2+
async function retrieveFile(filePath) {
3+
try {
4+
const response = await fetch(filePath);
5+
6+
// Check if the response is OK (status code 200)
7+
if (!response.ok) {
8+
throw new Error('Network response was not ok');
9+
}
10+
// Return the parsed JSON content
11+
return await response.json();
12+
} catch (error) {
13+
console.error('There was a problem with the fetch operation:', error);
14+
return null;
15+
}
16+
}
17+
18+
// Creates Form.io component based on json fields
19+
// Supports text field for now
20+
// TODO: Create components for number, select, and multi-select
21+
function createComponent(fieldName, fieldObject) {
22+
switch (fieldObject["type"]) {
23+
case "string":
24+
return {
25+
type: "textfield",
26+
key: fieldName,
27+
label: fieldName,
28+
input: true,
29+
tooltip: fieldObject["description"],
30+
description: fieldObject["description"]
31+
};
32+
default:
33+
break;
34+
}
35+
}
36+
37+
// Iterates through each json field and creates component array for Form.io
38+
async function createFormComponents() {
39+
var components = [];
40+
var formFields = {};
41+
42+
var filePath = "schemas/schema.json"
43+
var jsonData = await retrieveFile(filePath)
44+
console.log('JSON Data:', jsonData);
45+
46+
formFields = jsonData["properties"];
47+
console.log('form Fields:', formFields);
48+
49+
for (const key in formFields) {
50+
console.log(`${key}:`, formFields[key]);
51+
var fieldComponent = createComponent(key, formFields[key])
52+
components.push(fieldComponent)
53+
}
54+
55+
// Add submit button to form
56+
components.push({
57+
"type": "button",
58+
"label": "Submit",
59+
"key": "submit",
60+
"disableOnInvalid": true,
61+
"input": true,
62+
"tableView": false
63+
})
64+
65+
console.log(components)
66+
67+
return components;
68+
}
69+
70+
window.createFormComponents = createFormComponents;

0 commit comments

Comments
 (0)