diff --git a/cypress/fixtures/flows/dashboard-forms.json b/cypress/fixtures/flows/dashboard-forms.json index f937aa1e4..7a36059d9 100644 --- a/cypress/fixtures/flows/dashboard-forms.json +++ b/cypress/fixtures/flows/dashboard-forms.json @@ -2,7 +2,7 @@ { "id": "node-red-tab-forms", "type": "tab", - "label": "UI Buttons", + "label": "UI Forms", "disabled": false, "info": "", "env": [] @@ -47,7 +47,7 @@ { "id": "test-helper", "type": "function", - "z": "node-red-tab-button-groups", + "z": "node-red-tab-forms", "name": "Store Latest Msg", "func": "global.set('msg', msg)\nreturn msg;", "outputs": 1, @@ -126,5 +126,144 @@ "wires": [ [] ] + }, + { + "id": "dashboard-ui-form-dynamic", + "type": "ui-form", + "z": "node-red-tab-forms", + "name": "Dynamic Form", + "group": "bab1dddbce88e07a", + "label": "Dynamic Form", + "order": 2, + "width": 0, + "height": 0, + "options": [ + { + "label": "Name", + "key": "name0", + "type": "text", + "required": true, + "rows": null + } + ], + "formValue": { + "name": "" + }, + "payload": "", + "submit": "submit", + "cancel": "clear", + "resetOnSubmit": false, + "topic": "new-topic", + "topicType": "str", + "splitLayout": "", + "className": "", + "x": 520, + "y": 160, + "wires": [ + [] + ] + }, + { + "id": "dashboard-ui-button-set-dynamic-options", + "type": "ui-button", + "z": "node-red-tab-forms", + "group": "bab1dddbce88e07a", + "name": "", + "label": "Override Form Options", + "order": 1, + "width": 0, + "height": 0, + "emulateClick": false, + "tooltip": "", + "color": "", + "bgcolor": "", + "className": "", + "icon": "", + "iconPosition": "left", + "payload": "", + "payloadType": "str", + "topic": "topic", + "topicType": "msg", + "x": 160, + "y": 160, + "wires": [ + [ + "6d940deccaa355f6" + ] + ] + }, + { + "id": "dashboard-ui-button-set-defaults", + "type": "ui-button", + "z": "node-red-tab-forms", + "group": "bab1dddbce88e07a", + "name": "", + "label": "Set Defaults", + "order": 1, + "width": 0, + "height": 0, + "emulateClick": false, + "tooltip": "", + "color": "", + "bgcolor": "", + "className": "", + "icon": "", + "iconPosition": "left", + "payload": "{\"name0\": \"Overridden Default Name\"}", + "payloadType": "json", + "topic": "topic", + "topicType": "msg", + "x": 160, + "y": 200, + "wires": [ + [ + "dashboard-ui-form-dynamic" + ] + ] + }, + { + "id": "6d940deccaa355f6", + "type": "change", + "z": "node-red-tab-forms", + "name": "Set Options", + "rules": [ + { + "t": "delete", + "p": "payload", + "pt": "msg" + }, + { + "t": "set", + "p": "ui_update.options", + "pt": "msg", + "to": "[{\"type\":\"text\",\"label\":\"Name\",\"key\":\"name\",\"required\":true},{\"type\":\"multiline\",\"label\":\"Name\",\"key\":\"multiline\",\"required\":true,\"rows\":4},{\"type\":\"password\",\"label\":\"Password\",\"key\":\"password\",\"required\":true},{\"type\":\"email\",\"label\":\"E-Mail Address\",\"key\":\"email\",\"required\":true},{\"type\":\"number\",\"label\":\"Age\",\"key\":\"age\",\"required\":true},{\"type\":\"checkbox\",\"label\":\"Subscribe to Newsletter\",\"key\":\"newsletter\"},{\"type\":\"switch\",\"label\":\"Enable Notifications\",\"key\":\"notifications\"},{\"type\":\"date\",\"label\":\"Date of Birth\",\"key\":\"dob\",\"required\":true},{\"type\":\"time\",\"label\":\"Time of Birth\",\"key\":\"tob\",\"required\":true}]", + "tot": "json" + } + ], + "action": "", + "property": "", + "from": "", + "to": "", + "reg": false, + "x": 350, + "y": 160, + "wires": [ + [ + "dashboard-ui-form-dynamic" + ] + ] + }, + { + "id": "bab1dddbce88e07a", + "type": "ui-group", + "name": "Dynamic Property Tests", + "page": "dashboard-ui-page-1", + "width": "6", + "height": "1", + "order": 1, + "showTitle": true, + "className": "", + "visible": "true", + "disabled": "false" } ] \ No newline at end of file diff --git a/cypress/tests/widgets/form.spec.js b/cypress/tests/widgets/form.spec.js index 8c076dec2..c153f261d 100644 --- a/cypress/tests/widgets/form.spec.js +++ b/cypress/tests/widgets/form.spec.js @@ -33,3 +33,41 @@ describe('Node-RED Dashboard 2.0 - Forms', () => { cy.get('[data-action="form-submit"]').should('not.be.disabled') }) }) + +describe('Node-RED Dashboard 2.0 - Forms', () => { + beforeEach(() => { + cy.deployFixture('dashboard-forms') + cy.visit('/dashboard/page1') + }) + + it('permits users to set default values via msg.payload', () => { + // check that the form is empty + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-name0"]').find('input[type="text"]').should('have.value', '') + cy.clickAndWait(cy.get('button').contains('Set Defaults')) + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-name0"]').find('input[type="text"]').should('have.value', 'Overridden Default Name') + }) + + it('can have their content defined by msg.ui_update.options', () => { + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-name"]').should('not.exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-multiline"]').should('not.exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-password"]').should('not.exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-email"]').should('not.exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-age"]').should('not.exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-newsletter"]').should('not.exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-notifications"]').should('not.exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-dob"]').should('not.exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-tob"]').should('not.exist') + + cy.clickAndWait(cy.get('button').contains('Override Form Options')) + + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-name"]').find('input[type="text"]').should('exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-multiline"]').find('textarea').should('exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-password"]').find('input[type="password"]').should('exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-email"]').find('input[type="email"]').should('exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-age"]').find('input[type="number"]').should('exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-newsletter"]').find('input[type="checkbox"]').should('exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-notifications"]').find('input[type="checkbox"]').should('exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-dob"]').find('input[type="date"]').should('exist') + cy.get('#nrdb-ui-widget-dashboard-ui-form-dynamic').find('[data-form="form-row-tob"]').find('input[type="time"]').should('exist') + }) +}) diff --git a/docs/nodes/widgets/ui-form.md b/docs/nodes/widgets/ui-form.md index 1a46ba33f..a1125f742 100644 --- a/docs/nodes/widgets/ui-form.md +++ b/docs/nodes/widgets/ui-form.md @@ -3,19 +3,29 @@ description: Gather user input efficiently with ui-form in Node-RED Dashboard 2. props: Group: Defines which group of the UI Dashboard this widget will render in. Size: Controls the width of the button with respect to the parent group. Maximum value is the width of the group. - Label: A label shown before the form rows. - Form Elements: > - A list of the rows presented in the form. Each row has the following properties: -
msg.payload
object.text | multiline | password | email | number | checkbox | switch | date | time
msg.payload
object.text | multiline | password | email | number | checkbox | switch | date | time