diff --git a/component-definition.json b/component-definition.json index 8134067..3f9089f 100644 --- a/component-definition.json +++ b/component-definition.json @@ -77,295 +77,335 @@ "id": "form-general", "components": [ { - "title": "Button", - "id": "form-button", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/button/v1/button", - "template": { - "jcr:title": "Button", - "fieldType": "button", - "enabled": true, - "visible": true - } - } + "title": "Button", + "id": "form-button", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/button/v1/button", + "template": { + "jcr:title": "Button", + "fieldType": "button", + "enabled": true, + "visible": true } + } } + } }, { - "title": "Checkbox", - "id": "checkbox", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/checkbox/v1/checkbox", - "template": { - "jcr:title": "Checkbox", - "fieldType": "checkbox", - "enabled": true, - "visible": true - } - } + "title": "Checkbox", + "id": "checkbox", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/checkbox/v1/checkbox", + "template": { + "jcr:title": "Checkbox", + "fieldType": "checkbox", + "enabled": true, + "visible": true } + } } + } }, { - "title": "Date Picker", - "id": "date-input", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/datepicker/v1/datepicker", - "template": { - "jcr:title": "Date Input", - "fieldType": "date-input", - "enabled": true, - "visible": true - } - } + "title": "Checkbox group", + "id": "checkbox-group", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/checkboxgroup/v1/checkboxgroup", + "template": { + "jcr:title": "Checkbox Group", + "fieldType": "checkbox-group", + "enum": [ + "0", + "1" + ], + "enumNames": [ + "Item 1", + "Item 2" + ] } + } } + } }, { - "title": "Dropdown List", - "id": "drop-down", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/dropdown/v1/dropdown", - "template": { - "jcr:title": "Drop Down List", - "fieldType": "drop-down", - "enabled": true, - "visible": true - } - } + "title": "Date Picker", + "id": "date-input", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/datepicker/v1/datepicker", + "template": { + "jcr:title": "Date Input", + "fieldType": "date-input", + "enabled": true, + "visible": true } + } } + } }, { - "title": "Email", - "id": "email", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/emailinput/v1/emailinput", - "template": { - "jcr:title": "Email Input", - "fieldType": "email", - "enabled": true, - "visible": true - } - } + "title": "Dropdown List", + "id": "drop-down", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/dropdown/v1/dropdown", + "template": { + "jcr:title": "Drop Down List", + "fieldType": "drop-down", + "enabled": true, + "visible": true } + } } + } }, { - "title": "File Attachment", - "id": "file-input", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/fileinput/v2/fileinput", - "template": { - "jcr:title": "File Attachment", - "fieldType": "file-input", - "accept": [ - "audio/*", - " video/*", - "image/*", - "text/*", - "application/pdf" - ], - "buttonText": "Attach", - "type": "file", - "enabled": true, - "visible": true - } - } + "title": "Email", + "id": "email", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/emailinput/v1/emailinput", + "template": { + "jcr:title": "Email Input", + "fieldType": "email", + "enabled": true, + "visible": true } + } } + } }, { - "title": "Form Fragment", - "id": "form-fragment", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/fragment/v1/fragment", - "template": { - "jcr:title": "Fragment", - "fieldType": "panel", - "enabled": true, - "visible": true - } - } + "title": "File Attachment", + "id": "file-input", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/fileinput/v2/fileinput", + "template": { + "jcr:title": "File Attachment", + "fieldType": "file-input", + "accept": [ + "audio/*", + " video/*", + "image/*", + "text/*", + "application/pdf" + ], + "buttonText": "Attach", + "type": "file", + "enabled": true, + "visible": true } + } } + } }, { - "title": "Image", - "id": "form-image", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/image/v1/image", - "template": { - "jcr:title": "Image", - "fieldType": "image", - "visible": true - } - } + "title": "Form Fragment", + "id": "form-fragment", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/fragment/v1/fragment", + "template": { + "jcr:title": "Fragment", + "fieldType": "panel", + "enabled": true, + "visible": true } + } } + } }, { - "title": "Number Input", - "id": "number-input", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/numberinput/v1/numberinput", - "template": { - "jcr:title": "Number Input", - "fieldType": "number-input", - "enabled": true, - "visible": true - } - } + "title": "Image", + "id": "form-image", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/image/v1/image", + "template": { + "jcr:title": "Image", + "fieldType": "image", + "visible": true } + } } + } }, { - "title": "Panel", - "id": "panel", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/panelcontainer/v1/panelcontainer", - "template": { - "jcr:title": "Panel", - "fieldType": "panel", - "enabled": true, - "visible": true - } - } + "title": "Number Input", + "id": "number-input", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/numberinput/v1/numberinput", + "template": { + "jcr:title": "Number Input", + "fieldType": "number-input", + "enabled": true, + "visible": true } + } } + } }, { - "title": "Radio Group", - "id": "radio-group", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/radiobutton/v1/radiobutton", - "template": { - "jcr:title": "Radio Group", - "fieldType": "radio-group", - "enum": [ - "0", - "1" - ], - "enumNumes": [ - "Item 1", - "Item 2" - ], - "enabled": true, - "visible": true - } - } + "title": "Panel", + "id": "panel", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/panelcontainer/v1/panelcontainer", + "template": { + "jcr:title": "Panel", + "fieldType": "panel", + "enabled": true, + "visible": true } + } } + } }, { - "title": "Reset", - "id": "form-reset-button", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/actions/reset/v1/reset", - "template": { - "jcr:title": "Reset", - "buttonType": "reset", - "fieldType": "button", - "enabled": true, - "visible": true - } - } + "title": "Radio Group", + "id": "radio-group", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/radiobutton/v1/radiobutton", + "template": { + "jcr:title": "Radio Group", + "fieldType": "radio-group", + "enum": [ + "0", + "1" + ], + "enumNumes": [ + "Item 1", + "Item 2" + ], + "enabled": true, + "visible": true } + } } + } }, { - "title": "Submit", - "id": "form-submit-button", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/actions/submit/v1/submit", - "template": { - "jcr:title": "Submit", - "buttonType": "submit", - "fieldType": "button", - "enabled": true, - "visible": true - } - } + "title": "Reset", + "id": "form-reset-button", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/actions/reset/v1/reset", + "template": { + "jcr:title": "Reset", + "buttonType": "reset", + "fieldType": "button", + "enabled": true, + "visible": true } + } } + } }, { - "title": "Text", - "id": "plain-text", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/text/v1/text", - "template": { - "jcr:title": "Text", - "fieldType": "plain-text", - "visible": true, - "textIsRich": true - } - } + "title": "Submit", + "id": "form-submit-button", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/actions/submit/v1/submit", + "template": { + "jcr:title": "Submit", + "buttonType": "submit", + "fieldType": "button", + "enabled": true, + "visible": true } + } } + } }, { - "title": "Text Input", - "id": "text-input", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/textinput/v1/textinput", - "template": { - "jcr:title": "Text Input", - "fieldType": "text-input", - "enabled": true, - "visible": true - } - } + "title": "Telephone input", + "id": "telephone-input", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/telephoneinput/v1/telephoneinput", + "template": { + "jcr:title": "Telephone Input", + "fieldType": "text-input", + "enabled": true, + "visible": true } + } } + } }, { - "title": "Wizard", - "id": "wizard", - "plugins": { - "xwalk": { - "page": { - "resourceType": "core/fd/components/form/panelcontainer/v1/panelcontainer", - "template": { - "jcr:title": "Wizard", - "fieldType": "panel", - "fd:viewType": "wizard", - "enabled": true, - "visible": true - } - } + "title": "Text", + "id": "plain-text", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/text/v1/text", + "template": { + "jcr:title": "Text", + "fieldType": "plain-text", + "visible": true, + "textIsRich": true } + } } + } + }, + { + "title": "Text Input", + "id": "text-input", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/textinput/v1/textinput", + "template": { + "jcr:title": "Text Input", + "fieldType": "text-input", + "enabled": true, + "visible": true + } + } + } + } + }, + { + "title": "Wizard", + "id": "wizard", + "plugins": { + "xwalk": { + "page": { + "resourceType": "core/fd/components/form/panelcontainer/v1/panelcontainer", + "template": { + "jcr:title": "Wizard", + "fieldType": "panel", + "fd:viewType": "wizard", + "enabled": true, + "visible": true + } + } + } + } } ] }, diff --git a/component-filters.json b/component-filters.json index 52bc171..a08ccbb 100644 --- a/component-filters.json +++ b/component-filters.json @@ -42,6 +42,7 @@ "id": "form", "components": [ "checkbox", + "checkbox-group", "date-input", "drop-down", "email", @@ -55,6 +56,7 @@ "panel", "plain-text", "radio-group", + "telephone-input", "text-input", "wizard" ] diff --git a/component-models.json b/component-models.json index 1e88a55..a3e142e 100644 --- a/component-models.json +++ b/component-models.json @@ -3,7 +3,7 @@ "id": "title", "fields": [ { - "component": "text", + "component": "text", "valueType": "string", "name": "jcr:title", "value": "", @@ -55,7 +55,7 @@ "multi": false }, { - "component": "text", + "component": "text", "valueType": "string", "name": "alt", "value": "Default alt", @@ -64,53 +64,53 @@ ] }, { - "id": "button", - "fields": [ - { - "component": "text", - "valueType": "string", - "name": "href", - "value": "", - "label": "Link" - }, - { - "component": "text", - "valueType": "string", - "name": "text", - "value": "", - "label": "Text" - }, - { - "component": "text", - "valueType": "string", - "name": "title", - "value": "", - "label": "Title" - }, - { - "component": "select", - "name": "type", - "value": "", - "label": "Type", - "valueType": "string", - "options": [ - { - "name": "default", - "value": "" - }, - { - "name": "primary", - "value": "primary" - }, - { - "name": "secondary", - "value": "secondary" - } + "id": "button", + "fields": [ + { + "component": "text", + "valueType": "string", + "name": "href", + "value": "", + "label": "Link" + }, + { + "component": "text", + "valueType": "string", + "name": "text", + "value": "", + "label": "Text" + }, + { + "component": "text", + "valueType": "string", + "name": "title", + "value": "", + "label": "Title" + }, + { + "component": "select", + "name": "type", + "value": "", + "label": "Type", + "valueType": "string", + "options": [ + { + "name": "default", + "value": "" + }, + { + "name": "primary", + "value": "primary" + }, + { + "name": "secondary", + "value": "secondary" + } + ] + } ] - } - ] - }, - { + }, + { "id": "columns", "fields": [ { @@ -189,6 +189,25 @@ { "id": "form", "fields": [ + { + "component": "select", + "name": "thankYouOption", + "label": "On Submit", + "valueType": "string", + "options": [ + { + "name": "Show message", + "value": "message" + } + ] + }, + { + "component": "richtext", + "name": "thankYouMessage", + "label": "Message Content", + "valueType": "string", + "condition": { "==": [{ "var": "thankYouOption" }, "message"] } + }, { "component": "select", "valueType": "string", @@ -206,6 +225,13 @@ ], "value" : "" }, + { + "component": "boolean", + "name": "enableRestEndpointPost", + "label": "Enable POST request", + "valueType": "string", + "condition": { "==": [{ "var": "actionType" }, "fd/af/components/guidesubmittype/restendpoint"] } + }, { "component": "text", "name": "restEndpointPostUrl", @@ -350,68 +376,18 @@ "label": "Default Value", "valueType": "string" }, + { + "component": "boolean", + "name": "multiLine", + "label": "Allow multiple lines", + "valueType": "boolean" + }, { "component": "boolean", "name": "unboundFormElement", "label": "Mark as Unbound Form Element", "valueType": "boolean" - }, -{ - "component": "select", - "name": "colspan", - "label": "Columns", - "valueType": "string", - "options": [ - { - "name": "1 column", - "value": "1" - }, - { - "name": "2 column", - "value": "2" - }, - { - "name": "3 column", - "value": "3" - }, - { - "name": "4 column", - "value": "4" - }, - { - "name": "5 column", - "value": "5" - }, - { - "name": "6 column", - "value": "6" - }, - { - "name": "7 column", - "value": "7" - }, - { - "name": "8 column", - "value": "8" - }, - { - "name": "9 column", - "value": "9" - }, - { - "name": "10 column", - "value": "10" - }, - { - "name": "11 column", - "value": "11" - }, - { - "name": "12 column", - "value": "12" - } - ] -} + } ] }, { @@ -446,19 +422,61 @@ "label": "Required", "valueType": "boolean" }, + { + "component": "text", + "name": "mandatoryMessage", + "label": "Error message", + "valueType": "string", + "description": "Error message shown when required field is left empty." + }, { "component": "number", - "name": "minimum", - "label": "Minimum Value", + "name": "minLength", + "label": "Minimum number of characters", "valueType": "number", "description": "Minimum length of the text in the field" }, + { + "component": "text", + "name": "minLengthMessage", + "valueType": "string", + "label": "Minimum characters error message", + "description": "Error message shown when less than minimum characters are entered." + }, { "component": "number", - "name": "maximum", - "label": "Maximum Value", + "name": "maxLength", + "label": "Maximum number of characters", "valueType": "number", "description": "Maximum length of the text in the field" + }, + { + "component": "text", + "name": "maxLengthMessage", + "valueType": "string", + "label": "Maximum characters error message", + "description": "Error message shown when more than maximum characters are entered." + }, + { + "component": "text", + "name": "validateExpMessage", + "label": "Script validation message", + "valueType": "string", + "description": "Displayed when validation script fails." + }, + { + "component": "text", + "name": "pattern", + "valueType": "string", + "label": "Pattern", + "description": "Regular Expression is permitted." + }, + { + "component": "text", + "name": "validatePictureClauseMessage", + "valueType": "string", + "label": "Pattern Error message", + "description": "Error message shown when the pattern is not matched." } ] } @@ -535,63 +553,7 @@ "name": "unboundFormElement", "label": "Mark as Unbound Form Element", "valueType": "boolean" - }, -{ - "component": "select", - "name": "colspan", - "label": "Columns", - "valueType": "string", - "options": [ - { - "name": "1 column", - "value": "1" - }, - { - "name": "2 column", - "value": "2" - }, - { - "name": "3 column", - "value": "3" - }, - { - "name": "4 column", - "value": "4" - }, - { - "name": "5 column", - "value": "5" - }, - { - "name": "6 column", - "value": "6" - }, - { - "name": "7 column", - "value": "7" - }, - { - "name": "8 column", - "value": "8" - }, - { - "name": "9 column", - "value": "9" - }, - { - "name": "10 column", - "value": "10" - }, - { - "name": "11 column", - "value": "11" - }, - { - "name": "12 column", - "value": "12" - } - ] -} + } ] }, { @@ -627,18 +589,48 @@ "valueType": "boolean" }, { - "component": "number", - "name": "minimum", - "label": "Minimum Value", - "valueType": "number", - "description": "Minimum length of the text in the field" + "component": "text", + "name": "mandatoryMessage", + "label": "Error message", + "valueType": "string", + "description": "Error message shown when required field is left empty." }, { - "component": "number", - "name": "maximum", - "label": "Maximum Value", - "valueType": "number", - "description": "Maximum length of the text in the field" + "component": "date-time", + "name": "minimumDate", + "label": "Minimum date", + "valueType": "date", + "description": "Minimum date allowed in the field", + "valueFormat": "YYYY-MM-DD[T]HH:mm:ss.000-00:00" + }, + { + "component": "text", + "name": "minimumMessage", + "valueType": "string", + "label": "Minimum error message", + "description": "Error message shown when the date entered is before the minimum date." + }, + { + "component": "date-time", + "name": "maximumDate", + "label": "Maximum date", + "valueType": "date", + "description": "Maximum date allowed in the field", + "valueFormat": "YYYY-MM-DD[T]HH:mm:ss.000-00:00" + }, + { + "component": "text", + "name": "maximumMessage", + "valueType": "string", + "label": "Maximum error message", + "description": "Error message shown when the date entered is after the maximum date." + }, + { + "component": "text", + "name": "validateExpMessage", + "label": "Script validation message", + "valueType": "string", + "description": "Displayed when validation script fails." } ] }, @@ -657,6 +649,22 @@ { "name": "01 April, 2007", "value": "d MMMM, y" + }, + { + "name": "April 01, 2007", + "value": "MMMM d, y" + }, + { + "name": "Sunday, 01 April, 2007", + "value": "EEEE, d MMMM, y" + }, + { + "name": "Sunday, April 01, 2007", + "value": "EEEE, MMMM d, y" + }, + { + "name": "1/4/2007", + "value": "d/M/y" } ] } @@ -735,63 +743,7 @@ "name": "unboundFormElement", "label": "Mark as Unbound Form Element", "valueType": "boolean" - }, -{ - "component": "select", - "name": "colspan", - "label": "Columns", - "valueType": "string", - "options": [ - { - "name": "1 column", - "value": "1" - }, - { - "name": "2 column", - "value": "2" - }, - { - "name": "3 column", - "value": "3" - }, - { - "name": "4 column", - "value": "4" - }, - { - "name": "5 column", - "value": "5" - }, - { - "name": "6 column", - "value": "6" - }, - { - "name": "7 column", - "value": "7" - }, - { - "name": "8 column", - "value": "8" - }, - { - "name": "9 column", - "value": "9" - }, - { - "name": "10 column", - "value": "10" - }, - { - "name": "11 column", - "value": "11" - }, - { - "name": "12 column", - "value": "12" - } - ] -} + } ] }, { @@ -826,19 +778,79 @@ "label": "Required", "valueType": "boolean" }, + { + "component": "text", + "name": "mandatoryMessage", + "label": "Error message", + "valueType": "string", + "description": "Error message shown when required field is left empty." + }, { "component": "number", "name": "minimum", - "label": "Minimum Value", + "label": "Lowest number / Smallest number", "valueType": "number", - "description": "Minimum length of the text in the field" + "description": "Minimum number allowed in the field" + }, + { + "component": "text", + "name": "minimumMessage", + "valueType": "string", + "label": "Minimum error message", + "description": "Error message shown when entered value is less than minimum." }, { "component": "number", "name": "maximum", - "label": "Maximum Value", + "label": "Highest number / Largest number", "valueType": "number", - "description": "Maximum length of the text in the field" + "description": "Maximum number allowed in the field" + }, + { + "component": "text", + "name": "maximumMessage", + "valueType": "string", + "label": "Maximum error message", + "description": "Error message shown when the entered value is more than maximum." + }, + { + "component": "text", + "name": "validateExpMessage", + "label": "Script validation message", + "valueType": "string", + "description": "Displayed when validation script fails." + } + ] + }, + { + "component": "container", + "name": "formats", + "label": "Formats", + "collapsible": true, + "fields": [ + { + "component": "select", + "label": "Display Format", + "name": "displayFormat", + "valueType": "string", + "options": [ + { + "name": "$1,234.21", + "value": "¤#,##0.00" + }, + { + "name": "$1234.21", + "value": "()¤####0.00" + }, + { + "name": "1,234.210", + "value": "#,###,##0.000" + }, + { + "name": "123,421%", + "value": "#,###,##0%" + } + ] } ] } @@ -903,62 +915,6 @@ "name": "readOnly", "label": "Read-only", "valueType": "boolean" - }, -{ - "component": "select", - "name": "colspan", - "label": "Columns", - "valueType": "string", - "options": [ - { - "name": "1 column", - "value": "1" - }, - { - "name": "2 column", - "value": "2" - }, - { - "name": "3 column", - "value": "3" - }, - { - "name": "4 column", - "value": "4" - }, - { - "name": "5 column", - "value": "5" - }, - { - "name": "6 column", - "value": "6" - }, - { - "name": "7 column", - "value": "7" - }, - { - "name": "8 column", - "value": "8" - }, - { - "name": "9 column", - "value": "9" - }, - { - "name": "10 column", - "value": "10" - }, - { - "name": "11 column", - "value": "11" - }, - { - "name": "12 column", - "value": "12" - } - ] } ] }, @@ -998,7 +954,15 @@ "component": "text", "name": "mandatoryMessage", "label": "Error message", - "valueType": "string" + "valueType": "string", + "description": "Error message shown when required field is left empty." + }, + { + "component": "text", + "name": "validateExpMessage", + "label": "Script validation message", + "valueType": "string", + "description": "Displayed when validation script fails." }, { "component": "number", @@ -1029,7 +993,7 @@ } ] }, - { + { "id": "panel", "fields": [ { @@ -1082,62 +1046,6 @@ "name": "readOnly", "label": "Read-only", "valueType": "boolean" - }, - { - "component": "select", - "name": "colspan", - "label": "Columns", - "valueType": "string", - "options": [ - { - "name": "1 column", - "value": "1" - }, - { - "name": "2 column", - "value": "2" - }, - { - "name": "3 column", - "value": "3" - }, - { - "name": "4 column", - "value": "4" - }, - { - "name": "5 column", - "value": "5" - }, - { - "name": "6 column", - "value": "6" - }, - { - "name": "7 column", - "value": "7" - }, - { - "name": "8 column", - "value": "8" - }, - { - "name": "9 column", - "value": "9" - }, - { - "name": "10 column", - "value": "10" - }, - { - "name": "11 column", - "value": "11" - }, - { - "name": "12 column", - "value": "12" - } - ] } ] }, @@ -1261,29 +1169,179 @@ }, { "component": "container", - "name": "repeat", - "label": "Repeat Fragment", + "name": "repeat", + "label": "Repeat Fragment", + "collapsible": true, + "fields": [ + { + "component": "boolean", + "name": "repeatable", + "label": "Make fragment repeatable", + "valueType": "boolean" + }, + { + "component": "number", + "name": "minOccur", + "label": "Minimum repetitions", + "valueType": "number", + "description": "Minimum number of times the fragment appears on the form" + }, + { + "component": "number", + "name": "maxOccur", + "label": "Maximum repetitions", + "valueType": "number", + "description": "Maximum number of times the fragment can appear on the form" + } + ] + }, + { + "component": "container", + "name": "help", + "label": "Help Content", + "collapsible": true, + "fields": [ + { + "component": "richtext", + "name": "description", + "label": "Help text", + "valueType": "string" + }, + { + "component": "richtext", + "name": "tooltip", + "label": "Short description", + "valueType": "string" + } + ] + } + ] + }, + { + "id": "checkbox", + "fields": [ + { + "component": "container", + "name": "basic", + "label": "Basic", + "collapsible": false, + "fields": [ + { + "component": "text", + "name": "name", + "label": "Name", + "valueType": "string", + "required": true + }, + { + "component": "text", + "name": "jcr:title", + "label": "Title", + "valueType": "string" + }, + { + "component": "boolean", + "name": "hideTitle", + "label": "Hide title", + "valueType": "boolean" + }, + { + "component": "text", + "name": "dataRef", + "label": "Bind reference", + "valueType": "string" + }, + { + "component": "boolean", + "name": "unboundFormElement", + "label": "Mark as Unbound Form Element", + "valueType": "boolean" + }, + { + "component": "select", + "label": "Data type of submitted value", + "name": "type", + "valueType": "string", + "options": [ + { + "name": "String", + "value": "string" + }, + { + "name": "Boolean", + "value": "boolean" + }, + { + "name": "Number", + "value": "number" + } + ] + }, + { + "component": "boolean", + "name": "visible", + "label": "Show Component", + "valueType": "boolean", + "value": true + }, + { + "component": "boolean", + "name": "enabled", + "label": "Enable Component", + "valueType": "boolean", + "value": true + }, + { + "component": "boolean", + "name": "readOnly", + "label": "Read-only", + "valueType": "boolean" + }, + { + "component": "text", + "name": "checkedValue", + "label": "When Checked, return value", + "valueType": "string" + }, + { + "component": "boolean", + "name": "enableUncheckedValue", + "label": "Preserve Uncheck state value.", + "valueType": "boolean" + }, + { + "component": "text", + "name": "default", + "label": "Default Value", + "valueType": "string" + } + ] + }, + { + "component": "container", + "name": "validation", + "label": "Validation", "collapsible": true, "fields": [ { "component": "boolean", - "name": "repeatable", - "label": "Make fragment repeatable", + "name": "required", + "label": "Required", "valueType": "boolean" }, { - "component": "number", - "name": "minOccur", - "label": "Minimum repetitions", - "valueType": "number", - "description": "Minimum number of times the fragment appears on the form" + "component": "text", + "name": "mandatoryMessage", + "label": "Error Message", + "valueType": "string", + "description": "Error message shown when required field is left empty" }, { - "component": "number", - "name": "maxOccur", - "label": "Maximum repetitions", - "valueType": "number", - "description": "Maximum number of times the fragment can appear on the form" + "component": "text", + "name": "validateExpMessage", + "label": "Script validation message", + "valueType": "string", + "description": "Displayed when validation script fails." } ] }, @@ -1310,7 +1368,7 @@ ] }, { - "id": "checkbox", + "id": "checkbox-group", "fields": [ { "component": "container", @@ -1337,6 +1395,20 @@ "label": "Hide title", "valueType": "boolean" }, + { + "component": "text", + "name": "enum", + "label": "Options (Data Value)", + "valueType": "string", + "multi": true + }, + { + "component": "text", + "name": "enumNames", + "label": "Options (Display Value)", + "valueType": "string", + "multi": true + }, { "component": "text", "name": "dataRef", @@ -1369,6 +1441,28 @@ } ] }, + { + "component": "text", + "name": "default", + "label": "Default option", + "valueType": "string" + }, + { + "component": "radio-group", + "label": "Display Options", + "name": "orientation", + "valueType": "string", + "options": [ + { + "name": "Horizontally", + "value": "horizontal" + }, + { + "name": "Vertically", + "value": "vertical" + } + ] + }, { "component": "boolean", "name": "visible", @@ -1388,23 +1482,25 @@ "name": "readOnly", "label": "Read-only", "valueType": "boolean" - }, + } + ] + }, + { + "component": "container", + "name": "help", + "label": "Help Content", + "collapsible": true, + "fields": [ { - "component": "text", - "name": "checkedValue", - "label": "When Checked, return value", + "component": "richtext", + "name": "description", + "label": "Help text", "valueType": "string" }, { - "component": "boolean", - "name": "enableUncheckedValue", - "label": "Preserve Uncheck state value.", - "valueType": "boolean" - }, - { - "component": "text", - "name": "default", - "label": "Default Value", + "component": "richtext", + "name": "tooltip", + "label": "Short description", "valueType": "string" } ] @@ -1427,26 +1523,13 @@ "label": "Error Message", "valueType": "string", "description": "Error message shown when required field is left empty" - } - ] - }, - { - "component": "container", - "name": "help", - "label": "Help Content", - "collapsible": true, - "fields": [ - { - "component": "richtext", - "name": "description", - "label": "Help text", - "valueType": "string" }, { - "component": "richtext", - "name": "tooltip", - "label": "Short description", - "valueType": "string" + "component": "text", + "name": "validateExpMessage", + "label": "Script validation message", + "valueType": "string", + "description": "Displayed when validation script fails." } ] } @@ -1537,63 +1620,7 @@ "name": "unboundFormElement", "label": "Mark as Unbound Form Element", "valueType": "boolean" - }, -{ - "component": "select", - "name": "colspan", - "label": "Columns", - "valueType": "string", - "options": [ - { - "name": "1 column", - "value": "1" - }, - { - "name": "2 column", - "value": "2" - }, - { - "name": "3 column", - "value": "3" - }, - { - "name": "4 column", - "value": "4" - }, - { - "name": "5 column", - "value": "5" - }, - { - "name": "6 column", - "value": "6" - }, - { - "name": "7 column", - "value": "7" - }, - { - "name": "8 column", - "value": "8" - }, - { - "name": "9 column", - "value": "9" - }, - { - "name": "10 column", - "value": "10" - }, - { - "name": "11 column", - "value": "11" - }, - { - "name": "12 column", - "value": "12" - } - ] -} + } ] }, { @@ -1634,6 +1661,13 @@ "label": "Error Message", "valueType": "string", "description": "Error message shown when required field is left empty" + }, + { + "component": "text", + "name": "validateExpMessage", + "label": "Script validation message", + "valueType": "string", + "description": "Displayed when validation script fails." } ] } @@ -1754,63 +1788,7 @@ "name": "readOnly", "label": "Read-only", "valueType": "boolean" - }, -{ - "component": "select", - "name": "colspan", - "label": "Columns", - "valueType": "string", - "options": [ - { - "name": "1 column", - "value": "1" - }, - { - "name": "2 column", - "value": "2" - }, - { - "name": "3 column", - "value": "3" - }, - { - "name": "4 column", - "value": "4" - }, - { - "name": "5 column", - "value": "5" - }, - { - "name": "6 column", - "value": "6" - }, - { - "name": "7 column", - "value": "7" - }, - { - "name": "8 column", - "value": "8" - }, - { - "name": "9 column", - "value": "9" - }, - { - "name": "10 column", - "value": "10" - }, - { - "name": "11 column", - "value": "11" - }, - { - "name": "12 column", - "value": "12" - } - ] -} + } ] }, { @@ -1851,6 +1829,13 @@ "label": "Error Message", "valueType": "string", "description": "Error message shown when required field is left empty" + }, + { + "component": "text", + "name": "validateExpMessage", + "label": "Script validation message", + "valueType": "string", + "description": "Displayed when validation script fails." } ] } @@ -1946,63 +1931,7 @@ "name": "unboundFormElement", "label": "Mark as Unbound Form Element", "valueType": "boolean" - }, -{ - "component": "select", - "name": "colspan", - "label": "Columns", - "valueType": "string", - "options": [ - { - "name": "1 column", - "value": "1" - }, - { - "name": "2 column", - "value": "2" - }, - { - "name": "3 column", - "value": "3" - }, - { - "name": "4 column", - "value": "4" - }, - { - "name": "5 column", - "value": "5" - }, - { - "name": "6 column", - "value": "6" - }, - { - "name": "7 column", - "value": "7" - }, - { - "name": "8 column", - "value": "8" - }, - { - "name": "9 column", - "value": "9" - }, - { - "name": "10 column", - "value": "10" - }, - { - "name": "11 column", - "value": "11" - }, - { - "name": "12 column", - "value": "12" - } - ] -} + } ] }, { @@ -2037,6 +1966,13 @@ "label": "Required", "valueType": "boolean" }, + { + "component": "text", + "name": "mandatoryMessage", + "label": "Error message", + "valueType": "string", + "description": "Error message shown when required field is left empty." + }, { "component": "number", "name": "minLength", @@ -2044,12 +1980,33 @@ "valueType": "number", "description": "Minimum Number of characters" }, + { + "component": "text", + "name": "minLengthMessage", + "valueType": "string", + "label": "Minimum error message", + "description": "Error message shown when entered value has less characters than the minimum." + }, { "component": "number", "name": "maxLength", "label": "Maximum Number of characters", "valueType": "number", "description": "Maximum Number of characters" + }, + { + "component": "text", + "name": "maxLengthMessage", + "valueType": "string", + "label": "Maximum error message", + "description": "Error message shown when entered value has more characters than the maximum." + }, + { + "component": "text", + "name": "validateExpMessage", + "label": "Script validation message", + "valueType": "string", + "description": "Displayed when validation script fails." } ] } @@ -2102,63 +2059,7 @@ "label": "Enable Component", "valueType": "boolean", "value": true - }, -{ - "component": "select", - "name": "colspan", - "label": "Columns", - "valueType": "string", - "options": [ - { - "name": "1 column", - "value": "1" - }, - { - "name": "2 column", - "value": "2" - }, - { - "name": "3 column", - "value": "3" - }, - { - "name": "4 column", - "value": "4" - }, - { - "name": "5 column", - "value": "5" - }, - { - "name": "6 column", - "value": "6" - }, - { - "name": "7 column", - "value": "7" - }, - { - "name": "8 column", - "value": "8" - }, - { - "name": "9 column", - "value": "9" - }, - { - "name": "10 column", - "value": "10" - }, - { - "name": "11 column", - "value": "11" - }, - { - "name": "12 column", - "value": "12" - } - ] -} + } ] }, { @@ -2232,4 +2133,4 @@ } ] } -] +] \ No newline at end of file diff --git a/scripts/editor-support.js b/scripts/editor-support.js index d336d02..adb0aa8 100644 --- a/scripts/editor-support.js +++ b/scripts/editor-support.js @@ -102,6 +102,7 @@ function attachEventListners(main) { const applied = await applyChanges(event); if (!applied) window.location.reload(); })); + import('./form-editor-support.js'); } attachEventListners(document.querySelector('main')); diff --git a/scripts/form-editor-support.js b/scripts/form-editor-support.js index 85eea56..5df5ac1 100644 --- a/scripts/form-editor-support.js +++ b/scripts/form-editor-support.js @@ -17,9 +17,12 @@ * Adobe permits you to use and modify this file solely in accordance with * the terms of the Adobe license agreement accompanying it. ************************************************************************ */ -import { generateFormRendition } from '../blocks/form/form.js'; +import decorate, { generateFormRendition } from '../blocks/form/form.js'; import { loadCSS } from './aem.js'; +window.currentMode = 'preview'; +let activeWizardStep; + export function getItems(container) { if (container[':itemsOrder'] && container[':items']) { return container[':itemsOrder'].map((itemKey) => container[':items'][itemKey]); @@ -48,6 +51,17 @@ export function getFieldById(panel, id, formFieldMap) { return field; } +export function handleWizardNavigation(wizardEl, navigateTo) { + const existingSelectedEl = wizardEl.querySelector('.current-wizard-step'); + existingSelectedEl.classList.remove('current-wizard-step'); + navigateTo.classList.add('current-wizard-step'); + activeWizardStep = navigateTo.dataset.id; + const navigateToMenuItem = wizardEl.querySelector(`li[data-index="${navigateTo.dataset.index}"]`); + const currentMenuItem = wizardEl.querySelector('.wizard-menu-active-item'); + currentMenuItem.classList.remove('wizard-menu-active-item'); + navigateToMenuItem.classList.add('wizard-menu-active-item'); +} + function generateFragmentRendition(fragmentFieldWrapper, fragmentDefinition) { const titleEl = document.createElement('div'); titleEl.classList.add('fragment-title'); @@ -89,39 +103,50 @@ function getPropertyModel(fd) { } function annotateItems(items, formDefinition, formFieldMap) { - for (let i = items.length - 1; i >= 0; i -= 1) { - const fieldWrapper = items[i]; - if (fieldWrapper.classList.contains('field-wrapper')) { - const { id } = fieldWrapper.dataset; - const fd = getFieldById(formDefinition, id, formFieldMap); - if (fd && fd.properties) { - if (fd.fieldType === 'plain-text') { - fieldWrapper.setAttribute('data-aue-type', 'richtext'); - fieldWrapper.setAttribute('data-aue-behavior', 'component'); - fieldWrapper.setAttribute('data-aue-resource', `urn:aemconnection:${fd.properties['fd:path']}`); - fieldWrapper.setAttribute('data-aue-model', getPropertyModel(fd)); - fieldWrapper.setAttribute('data-aue-label', 'Text'); - fieldWrapper.setAttribute('data-aue-prop', 'value'); - } else if (!fd.properties['fd:fragment']) { - fieldWrapper.setAttribute('data-aue-type', 'component'); - fieldWrapper.setAttribute('data-aue-resource', `urn:aemconnection:${fd.properties['fd:path']}`); - fieldWrapper.setAttribute('data-aue-model', getPropertyModel(fd)); - fieldWrapper.setAttribute('data-aue-label', fd.label?.value || fd.name); - } - } else { - console.warn(`field ${id} not found in form definition`); - } - if (fd && fd.fieldType === 'panel') { - if (fd.properties['fd:fragment']) { - annotateFormFragment(fieldWrapper, fd); + try { + for (let i = items.length - 1; i >= 0; i -= 1) { + const fieldWrapper = items[i]; + if (fieldWrapper.classList.contains('field-wrapper')) { + const { id } = fieldWrapper.dataset; + const fd = getFieldById(formDefinition, id, formFieldMap); + if (fd && fd.properties) { + if (fd.fieldType === 'plain-text') { + fieldWrapper.setAttribute('data-aue-type', 'richtext'); + fieldWrapper.setAttribute('data-aue-behavior', 'component'); + fieldWrapper.setAttribute('data-aue-resource', `urn:aemconnection:${fd.properties['fd:path']}`); + fieldWrapper.setAttribute('data-aue-model', getPropertyModel(fd)); + fieldWrapper.setAttribute('data-aue-label', 'Text'); + fieldWrapper.setAttribute('data-aue-prop', 'value'); + } else if (fd.fieldType === 'panel') { + if (fd.properties['fd:fragment']) { + annotateFormFragment(fieldWrapper, fd); + } else { + fieldWrapper.setAttribute('data-aue-resource', `urn:aemconnection:${fd.properties['fd:path']}`); + fieldWrapper.setAttribute('data-aue-model', fd.fieldType); + fieldWrapper.setAttribute('data-aue-label', fd.label?.value || fd.name); + fieldWrapper.setAttribute('data-aue-type', 'container'); + fieldWrapper.setAttribute('data-aue-behavior', 'component'); + fieldWrapper.setAttribute('data-aue-filter', 'form'); + annotateItems(fieldWrapper.childNodes, formDefinition, formFieldMap); + // retain wizard step selection + if (activeWizardStep === fieldWrapper.dataset.id) { + handleWizardNavigation(fieldWrapper.parentElement, fieldWrapper); + } + } + } else { + fieldWrapper.setAttribute('data-aue-type', 'component'); + fieldWrapper.setAttribute('data-aue-resource', `urn:aemconnection:${fd.properties['fd:path']}`); + fieldWrapper.setAttribute('data-aue-model', getPropertyModel(fd)); + fieldWrapper.setAttribute('data-aue-label', fd.label?.value || fd.name); + } } else { - fieldWrapper.setAttribute('data-aue-type', 'container'); - fieldWrapper.setAttribute('data-aue-behavior', 'component'); - fieldWrapper.setAttribute('data-aue-filter', 'form'); - annotateItems(fieldWrapper.childNodes, formDefinition, formFieldMap); + console.warn(`field ${id} not found in form definition`); } } } + } catch (error) { + console.error('Error while annotating form elements', error); + window.alert('Error while annotating form elements'); } } @@ -137,16 +162,6 @@ export function annotateFormForEditing(formEl, formDefinition) { annotateItems(formEl.childNodes, formDefinition, formFieldMap); } -function handleWizardNavigation(wizardEl, navigateTo) { - const existingSelectedEl = wizardEl.querySelector('.current-wizard-step'); - existingSelectedEl.classList.remove('current-wizard-step'); - navigateTo.classList.add('current-wizard-step'); - const navigateToMenuItem = wizardEl.querySelector(`li[data-index="${navigateTo.dataset.index}"]`); - const currentMenuItem = wizardEl.querySelector('.wizard-menu-active-item'); - currentMenuItem.classList.remove('wizard-menu-active-item'); - navigateToMenuItem.classList.add('wizard-menu-active-item'); -} - /** * Event listener for aue:ui-select, selection of a component */ @@ -169,12 +184,35 @@ function handleEditorSelect(event) { } } -async function annotateFormsForEditing(forms) { - forms.forEach(async (form) => { +async function renderFormBlock(form, editMode) { + const block = form.closest('.block[data-aue-resource]'); + if ((editMode && !block.classList.contains('edit-mode')) || !editMode) { + block.classList.toggle('edit-mode', editMode); const formDefResp = await fetch(`${form.dataset.formpath}.model.json`); const formDef = await formDefResp.json(); - console.log('formDef', formDef); - annotateFormForEditing(form, formDef); + const div = form.parentElement; + div.replaceChildren(); + const pre = document.createElement('pre'); + const code = document.createElement('code'); + code.textContent = JSON.stringify(formDef); + pre.appendChild(code); + div.appendChild(pre); + await decorate(block); + return { + formEl: block.querySelector('form'), + formDef, + }; + } + return null; +} + +async function annotateFormsForEditing(forms) { + if (typeof window.currentMode !== 'undefined' && window.currentMode === 'preview') return; + forms.forEach(async (form) => { + const { formEl, formDef } = (await renderFormBlock(form, true)) || {}; + if (formEl && formDef) { + annotateFormForEditing(formEl, formDef); + } }); } @@ -236,14 +274,13 @@ export async function applyChanges(event) { const jsonContent = codeEl?.textContent; if (jsonContent) { const formDef = decode(jsonContent); - let panelLabel; if (element.classList.contains('panel-wrapper')) { element = element.parentNode; - panelLabel = element.querySelector('legend'); } const parent = element.closest('.panel-wrapper') || element.closest('form') || element.querySelector('form'); const parentDef = getFieldById(formDef, parent.dataset.id, {}); - if (parent.classList.contains('panel-wrapper') && panelLabel) { + if (parent.classList.contains('panel-wrapper')) { + const panelLabel = parent.querySelector('legend'); parent.replaceChildren(panelLabel); } else { parent.replaceChildren(); @@ -278,19 +315,17 @@ function attachEventListners(main) { main?.addEventListener('aue:ui-select', handleEditorSelect); document.body.addEventListener('aue:ui-preview', () => { + window.currentMode = 'preview'; const forms = document.querySelectorAll('form'); - forms.forEach((formEl) => { - formEl.classList.remove('edit-mode'); + forms.forEach(async (form) => { + await renderFormBlock(form, false); }); }); document.body.addEventListener('aue:ui-edit', () => { + window.currentMode = 'edit'; const forms = document.querySelectorAll('form'); - forms.forEach((formEl) => { - if (!formEl.classList.contains('edit-mode')) { - formEl.classList.add('edit-mode'); - } - }); + annotateFormsForEditing(forms); }); }