|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Form Viewer</title> |
|
</head> |
|
<body> |
|
<div id="form-container"></div> |
|
|
|
<script> |
|
|
|
const formJson = { |
|
"components": [ |
|
{ |
|
"text": "# File an Invoice\n\nAdd your invoice details below.", |
|
"type": "text", |
|
"id": "Field_1na090z", |
|
"layout": { |
|
"row": "Row_0lmsy15" |
|
} |
|
}, |
|
{ |
|
"label": "Image view", |
|
"type": "image", |
|
"layout": { |
|
"row": "Row_1ju954r", |
|
"columns": null |
|
}, |
|
"id": "Field_0kfhe9d", |
|
"source": "https://i.ibb.co/NrZMfsR/105.png" |
|
}, |
|
{ |
|
"key": "creditor", |
|
"label": "Creditor", |
|
"type": "textfield", |
|
"validate": { |
|
"required": true |
|
}, |
|
"id": "Field_12chft0", |
|
"layout": { |
|
"row": "Row_1rvpcsw" |
|
} |
|
}, |
|
{ |
|
"description": "An invoice number in the format: C-123.", |
|
"key": "invoiceNumber", |
|
"label": "Invoice Number", |
|
"type": "textfield", |
|
"validate": { |
|
"pattern": "^C-[0-9]+$" |
|
}, |
|
"id": "Field_0jcge34", |
|
"layout": { |
|
"row": "Row_0960rdj" |
|
} |
|
}, |
|
{ |
|
"values": [ |
|
{ |
|
"label": "Value", |
|
"value": "value" |
|
} |
|
], |
|
"label": "Tag list", |
|
"type": "taglist", |
|
"layout": { |
|
"row": "Row_1szoxy7", |
|
"columns": null |
|
}, |
|
"id": "Field_0mea1nt", |
|
"key": "taglist_30y47" |
|
}, |
|
{ |
|
"values": [ |
|
{ |
|
"label": "Value", |
|
"value": "value" |
|
} |
|
], |
|
"label": "Checkbox group", |
|
"type": "checklist", |
|
"layout": { |
|
"row": "Row_1szoxy7", |
|
"columns": null |
|
}, |
|
"id": "Field_0u7r33p", |
|
"key": "checklist_vyc3y" |
|
}, |
|
{ |
|
"action": "submit", |
|
"key": "submit", |
|
"label": "Submit", |
|
"type": "button", |
|
"id": "Field_0ie528a", |
|
"layout": { |
|
"row": "Row_1szoxy7" |
|
} |
|
} |
|
], |
|
"schemaVersion": 16, |
|
"exporter": { |
|
"name": "form-js (https://demo.bpmn.io)", |
|
"version": "1.8.3" |
|
}, |
|
"type": "default", |
|
"id": "Form_020yixm" |
|
}; |
|
|
|
|
|
function generateForm(formData) { |
|
const container = document.getElementById('form-container'); |
|
formData.components.forEach(component => { |
|
const element = document.createElement('div'); |
|
element.id = component.id; |
|
|
|
if (component.type === 'text') { |
|
element.innerHTML = `<p>${component.text}</p>`; |
|
} else if (component.type === 'textfield') { |
|
element.innerHTML = `<label for="${component.key}">${component.label}</label> |
|
<input type="text" id="${component.key}" name="${component.key}" ${component.validate.required ? 'required' : ''}>`; |
|
} else if (component.type === 'checklist') { |
|
element.innerHTML = `<label>${component.label}</label>`; |
|
component.values.forEach(value => { |
|
element.innerHTML += `<input type="checkbox" id="${value.value}" name="${value.value}" value="${value.value}"> |
|
<label for="${value.value}">${value.label}</label>`; |
|
}); |
|
} else if (component.type === 'button') { |
|
element.innerHTML = `<button type="button" id="${component.key}">${component.label}</button>`; |
|
} |
|
|
|
container.appendChild(element); |
|
}); |
|
} |
|
|
|
|
|
generateForm(formJson); |
|
</script> |
|
</body> |
|
</html> |
