| | <!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> |
