From f40a4666188c3054e969c94a168af1e8c42f20be Mon Sep 17 00:00:00 2001 From: Vaibhav Varshney Date: Tue, 12 Sep 2023 15:39:32 +0530 Subject: [PATCH 1/4] Update from AFB --- blocks/form/component-definition.json | 760 ++++++++++++++++++++++++++ blocks/form/form.js | 35 +- head.html | 3 + 3 files changed, 790 insertions(+), 8 deletions(-) create mode 100644 blocks/form/component-definition.json diff --git a/blocks/form/component-definition.json b/blocks/form/component-definition.json new file mode 100644 index 00000000..4133422e --- /dev/null +++ b/blocks/form/component-definition.json @@ -0,0 +1,760 @@ +{ + "groups": [ + { + "title": "Form Components", + "id": "form-general", + "components": [ + { + "title": "Text Input", + "id": "text", + "plugins": { + "fnk": { + "form": { + "Type": "text", + "Label": "Text Input" + } + } + }, + "model": { + "id": "text", + "fields": [ + { + "component": "text-input", + "name": "Name", + "label": "Name", + "valueType": "string", + "required": true + }, + { + "component": "text-input", + "name": "Label", + "label": "Label", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Description", + "label": "Description", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Placeholder", + "label": "Placeholder", + "valueType": "string" + }, + { + "component": "boolean", + "name": "Hidden", + "label": "Hidden", + "valueType": "boolean" + }, + { + + "component": "boolean", + "name": "Read Only", + "label": "Read Only", + "valueType": "boolean" + }, + { + "component": "boolean", + "name": "Mandatory", + "label": "Required", + "valueType": "boolean" + }, + { + "component": "text-input", + "name": "Value", + "label": "Default Value", + "valueType": "string" + }, + { + "component": "number", + "name": "Min", + "label": "Minimum Value", + "valueType": "number", + "description": "Minimum length of the text in the field" + }, + { + "component": "number", + "name": "Max", + "label": "Maximum Value", + "valueType": "number", + "description": "Maximum length of the text in the field" + } + ] + } + }, + { + "title": "Text Area", + "id": "textarea", + "plugins": { + "fnk": { + "form": { + "Type": "textarea", + "Label": "Text Area" + } + } + }, + "model": { + "id": "textarea", + "fields": [ + { + "component": "text-input", + "name": "Name", + "label": "Name", + "valueType": "string", + "required": true + }, + { + "component": "text-input", + "name": "Label", + "label": "Label", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Description", + "label": "Description", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Placeholder", + "label": "Placeholder", + "valueType": "string" + }, + { + "component": "boolean", + "name": "Hidden", + "label": "Hidden", + "valueType": "boolean" + }, + { + + "component": "boolean", + "name": "Read Only", + "label": "Read Only", + "valueType": "boolean" + }, + { + "component": "boolean", + "name": "Mandatory", + "label": "Required", + "valueType": "boolean" + }, + { + "component": "text-input", + "name": "Value", + "label": "Default Value", + "valueType": "string" + }, + { + "component": "number", + "name": "Min", + "label": "Minimum Value", + "valueType": "number", + "description": "Minimum length of the text in the field" + }, + { + "component": "number", + "name": "Max", + "label": "Maximum Value", + "valueType": "number", + "description": "Maximum length of the text in the field" + } + ] + } + }, + { + "title": "Number Input", + "id": "numberinput", + "plugins": { + "fnk": { + "form": { + "Type": "number", + "Label": "Number Input" + } + } + }, + "model": { + "id": "number", + "fields": [ + { + "component": "text-input", + "name": "Name", + "label": "Name", + "valueType": "string", + "required": true + }, + { + "component": "text-input", + "name": "Label", + "label": "Label", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Description", + "label": "Description", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Placeholder", + "label": "Placeholder", + "valueType": "string" + }, + { + "component": "boolean", + "name": "Hidden", + "label": "Hidden", + "valueType": "boolean" + }, + { + "component": "boolean", + "name": "Read Only", + "label": "Read Only", + "valueType": "boolean" + }, + { + "component": "boolean", + "name": "Mandatory", + "label": "Required", + "valueType": "boolean" + }, + { + "component": "number", + "name": "Value", + "label": "Default Value", + "valueType": "number" + }, + { + "component": "number", + "name": "Min", + "label": "Minimum Value", + "valueType": "number", + "description": "Minimum value of the number allowed in the field" + }, + { + "component": "number", + "name": "Max", + "label": "Maximum Value", + "valueType": "number", + "description": "Maximum value of the number allowed in the field" + } + ] + } + }, + { + "title": "Date Input", + "id": "dateinput", + "plugins": { + "fnk": { + "form": { + "Type": "date", + "Label": "Date Input" + } + } + }, + "model": { + "id": "date", + "fields": [ + { + "component": "text-input", + "name": "Name", + "label": "Name", + "valueType": "string", + "required": true + }, + { + "component": "text-input", + "name": "Label", + "label": "Label", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Description", + "label": "Description", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Placeholder", + "label": "Placeholder", + "valueType": "string" + }, + { + "component": "boolean", + "name": "Hidden", + "label": "Hidden", + "valueType": "boolean" + }, + { + + "component": "boolean", + "name": "Read Only", + "label": "Read Only", + "valueType": "boolean" + }, + { + "component": "boolean", + "name": "Mandatory", + "label": "Required", + "valueType": "boolean" + }, + { + "component": "number", + "name": "Value", + "label": "Default Value", + "valueType": "number" + }, + { + "component": "date-time", + "name": "Min", + "label": "Minimum Value", + "valueType": "date", + "description": "Minimum value of the number allowed in the field" + }, + { + "component": "date-time", + "name": "Max", + "label": "Maximum Value", + "valueType": "date", + "description": "Maximum value of the number allowed in the field" + } + ] + } + }, + { + "title": "Drop Down", + "id": "dropdown", + "plugins": { + "fnk": { + "form": { + "Type": "select", + "Label": "Drop Down List", + "Options": ["Option 1", "Option 2"] + } + } + }, + "model": { + "id": "select", + "fields": [ + { + "component": "text-input", + "name": "Name", + "label": "Name", + "valueType": "string", + "required": true + }, + { + "component": "text-input", + "name": "Label", + "label": "Label", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Description", + "label": "Description", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Placeholder", + "label": "Placeholder", + "valueType": "string" + }, + { + "component": "boolean", + "name": "Hidden", + "label": "Hidden", + "valueType": "boolean" + }, + { + + "component": "boolean", + "name": "Read Only", + "label": "Read Only", + "valueType": "boolean" + }, + { + "component": "boolean", + "name": "Mandatory", + "label": "Required", + "valueType": "boolean" + }, + { + "component": "text-input", + "name": "Options", + "label": "Options", + "valueType": "string", + "multi": true + } + ] + } + }, + { + "title": "Check Box group", + "id": "checkboxgroup", + "plugins": { + "fnk": { + "form": { + "Type": "checkbox", + "Label": "Check Box Group", + "Options": ["Item 1", "Item 2"] + } + } + }, + "model": { + "id": "checkbox-group", + "fields": [ + { + "component": "text-input", + "name": "Name", + "label": "Name", + "valueType": "string", + "required": true + }, + { + "component": "text-input", + "name": "Label", + "label": "Label", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Description", + "label": "Description", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Placeholder", + "label": "Placeholder", + "valueType": "string" + }, + { + "component": "boolean", + "name": "Hidden", + "label": "Hidden", + "valueType": "boolean" + }, + { + + "component": "boolean", + "name": "Read Only", + "label": "Read Only", + "valueType": "boolean" + }, + { + "component": "boolean", + "name": "Mandatory", + "label": "Required", + "valueType": "boolean" + }, + { + "component": "text-input", + "name": "Options", + "label": "Options", + "valueType": "string", + "multi": true + } + ] + } + }, + { + "title": "Radio Button", + "id": "radiogroup", + "plugins": { + "fnk": { + "form": { + "Type": "radio", + "Label": "Radio Button", + "Options": ["Item 1", "Item 2"] + } + } + }, + "model": { + "id": "radio-group", + "fields": [ + { + "component": "text-input", + "name": "Name", + "label": "Name", + "valueType": "string", + "required": true + }, + { + "component": "text-input", + "name": "Label", + "label": "Label", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Description", + "label": "Description", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Placeholder", + "label": "Placeholder", + "valueType": "string" + }, + { + "component": "boolean", + "name": "Hidden", + "label": "Hidden", + "valueType": "boolean" + }, + { + + "component": "boolean", + "name": "Read Only", + "label": "Read Only", + "valueType": "boolean" + }, + { + "component": "boolean", + "name": "Mandatory", + "label": "Required", + "valueType": "boolean" + }, + { + "component": "text-input", + "name": "Options", + "label": "Options", + "valueType": "string", + "multi": true + } + ] + } + }, + { + "title": "Button", + "id": "button", + "plugins": { + "fnk": { + "form": { + "Type": "button", + "Label": "Button" + } + } + }, + "model": { + "id": "button", + "fields": [ + { + "component": "text-input", + "name": "Name", + "label": "Name", + "valueType": "string", + "required": true + }, + { + "component": "text-input", + "name": "Label", + "label": "Label", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Description", + "label": "Description", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Placeholder", + "label": "Placeholder", + "valueType": "string" + }, + { + "component": "boolean", + "name": "Hidden", + "label": "Hidden", + "valueType": "boolean" + }, + { + + "component": "boolean", + "name": "Read Only", + "label": "Read Only", + "valueType": "boolean" + } + ] + } + }, + { + "title": "Submit Button", + "id": "submit", + "plugins": { + "fnk": { + "form": { + "Type": "submit", + "Label": "Submit" + } + } + }, + "model": { + "id": "submit", + "fields": [ + { + "component": "text-input", + "name": "Name", + "label": "Name", + "valueType": "string", + "required": true + }, + { + "component": "text-input", + "name": "Label", + "label": "Label", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Description", + "label": "Description", + "valueType": "string" + }, + { + "component": "boolean", + "name": "Hidden", + "label": "Hidden", + "valueType": "boolean" + } + ] + } + }, + { + "title": "File Attachment", + "id": "fileinput", + "plugins": { + "fnk": { + "form": { + "Type": "file", + "Label": "File Attachment", + "Accept": ["audio/*", "video/*", "image/*", "text/*", "application/pdf"] + } + } + }, + "model": { + "id": "file", + "fields": [ + { + "component": "text-input", + "name": "Name", + "label": "Name", + "valueType": "string", + "required": true + }, + { + "component": "text-input", + "name": "Label", + "label": "Label", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Description", + "label": "Description", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Placeholder", + "label": "Placeholder", + "valueType": "string" + }, + { + "component": "boolean", + "name": "Hidden", + "label": "Hidden", + "valueType": "boolean" + }, + { + "component": "boolean", + "name": "Read Only", + "label": "Read Only", + "valueType": "boolean" + }, + { + "component": "boolean", + "name": "Mandatory", + "label": "Required", + "valueType": "boolean" + }, + { + "component": "boolean", + "name": "Multiple", + "label": "Multiple", + "valueType": "boolean" + }, + { + "component": "text-input", + "name": "Accept", + "label": "Accept", + "valueType": "string", + "multi": true + } + ] + } + }, + { + "title": "Panel", + "id": "panel", + "plugins": { + "fnk": { + "form": { + "Type": "fieldset", + "Label": "Panel" + } + } + }, + "model": { + "id": "fieldset", + "fields": [ + { + "component": "text-input", + "name": "Name", + "label": "Name", + "valueType": "string", + "required": true + }, + { + "component": "text-input", + "name": "Label", + "label": "Label", + "valueType": "string" + }, + { + "component": "text-input", + "name": "Description", + "label": "Description", + "valueType": "string" + }, + { + "component": "boolean", + "name": "Hidden", + "label": "Hidden", + "valueType": "boolean" + }, + { + + "component": "boolean", + "name": "Read Only", + "label": "Read Only", + "valueType": "boolean" + } + ] + } + } + ] + } + ] +} diff --git a/blocks/form/form.js b/blocks/form/form.js index 0fc04a93..6340e2ac 100644 --- a/blocks/form/form.js +++ b/blocks/form/form.js @@ -95,11 +95,16 @@ function createTextArea(fd) { } function createLabel(fd) { - const label = document.createElement('label'); - label.setAttribute('for', fd.Field); - label.textContent = fd.Label; - if (fd.Mandatory === 'x') { - label.classList.add('required'); + const label = document.createElement(tagName); + label.setAttribute('for', fd.Id); + label.className = 'field-label'; + label.textContent = fd.Label || ''; + if (fd.Type !== 'radio') { + label.setAttribute('itemprop', 'Label'); + label.setAttribute('itemtype', 'text'); + } + if (fd.Tooltip) { + label.title = fd.Tooltip; } return label; } @@ -122,6 +127,7 @@ function applyRules(form, rules) { async function createForm(formURL) { const { pathname } = new URL(formURL); + window.formPath = pathname; const resp = await fetch(pathname); const json = await resp.json(); const form = document.createElement('form'); @@ -176,9 +182,22 @@ async function createForm(formURL) { return (form); } +function generateItemId(id) { + if (id) { + return `urn:fnkconnection:${window.formPath}:default:Id:${id}`; + } else { + return `urn:fnkconnection:${window.formPath}:default`; + } +} + export default async function decorate(block) { - const form = block.querySelector('a[href$=".json"]'); - if (form) { - form.replaceWith(await createForm(form.href)); + const formLink = block.querySelector('a[href$=".json"]'); + if (formLink) { + const form = await createForm(formLink.href); + form.setAttribute('itemid', generateItemId()); + form.setAttribute('itemtype', 'container'); + form.setAttribute('itemscope', ''); + form.setAttribute('data-editor-itemlabel', "Form Container"); + formLink.replaceWith(form); } } diff --git a/head.html b/head.html index 9c1b93b2..b3b79845 100644 --- a/head.html +++ b/head.html @@ -1,4 +1,7 @@ + + + From 1bfbc956d169ddf23940d020cdd611d47011ca1a Mon Sep 17 00:00:00 2001 From: Vaibhav Varshney Date: Tue, 12 Sep 2023 15:52:28 +0530 Subject: [PATCH 2/4] add tagName --- blocks/form/form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/form/form.js b/blocks/form/form.js index 6340e2ac..605550f9 100644 --- a/blocks/form/form.js +++ b/blocks/form/form.js @@ -94,7 +94,7 @@ function createTextArea(fd) { return input; } -function createLabel(fd) { +function createLabel(fd ,tagName = 'label') { const label = document.createElement(tagName); label.setAttribute('for', fd.Id); label.className = 'field-label'; From 1b66f9a6236ef54a9f0ada77f869f861656cee87 Mon Sep 17 00:00:00 2001 From: Vaibhav Varshney Date: Wed, 13 Sep 2023 00:48:18 +0530 Subject: [PATCH 3/4] Update fstab yaml --- fstab.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/fstab.yaml b/fstab.yaml index 5be91a08..3cb1691b 100644 --- a/fstab.yaml +++ b/fstab.yaml @@ -1,2 +1,2 @@ mountpoints: - /: https://adobe.sharepoint.com/:f:/r/sites/HelixProjects/Shared%20Documents/sites/adobe/wknd + /: https://adobe.sharepoint.com/:f:/r/sites/Wknd-Forms/Shared%20Documents/wknd-form-test From f1ad5ba8032d84b211487f3568b9b1767d7ed99a Mon Sep 17 00:00:00 2001 From: Vaibhav Varshney Date: Wed, 13 Sep 2023 16:50:03 +0530 Subject: [PATCH 4/4] Add for fieldWrapper --- blocks/form/form.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/blocks/form/form.js b/blocks/form/form.js index 605550f9..9999e917 100644 --- a/blocks/form/form.js +++ b/blocks/form/form.js @@ -141,6 +141,13 @@ async function createForm(formURL) { const fieldId = `form-${fd.Type}-wrapper${style}`; fieldWrapper.className = fieldId; fieldWrapper.classList.add('field-wrapper'); + if (fd.Type != 'radio') { + fieldWrapper.setAttribute('itemtype', 'component'); + fieldWrapper.setAttribute('itemid', generateItemId(fd.Id)); + fieldWrapper.setAttribute('itemscope', ''); + fieldWrapper.setAttribute('data-editor-itemlabel', fd.Label || fd.Name); + fieldWrapper.setAttribute('data-editor-itemmodel', fd.Type); + } switch (fd.Type) { case 'select': fieldWrapper.append(createLabel(fd));