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