Dynamic Web Forms


#1

We require a web form with dynamic field behavior that provides the following:

  1. Dynamic visibility: field visibility is determined by the values selected in other fields in the form (ie. they remain hidden unless certain values are selected)
  2. Dynamic values in dropdown lists: the values in a dropdown are determined/filtered depending on values selected in other form fields.

How could this be implemented in the C3 UI Framework today?


#2

You can use the Form component

example:

"components": [
    {
        "component": "ProgressIndicator",
        "numIndicators": 2,
        "activeIndex": 1,
        "renderTo": ".progress-indicator"
    },
    {
        "component": "Form",
        "id": "accountInfoForm",
        "name": "Form",
        "box": false,
        "renderTo": ".account-info-form-container",
        "resetButton": false,
        "submitText": "{~DxSignUp.AccountInfo.wizard.buttons.continueToPassword~}",
        "recordFirstLoad": false,
        "errorStyle": "individual",
        "setFieldsFromRecord": false,
        "customSubmitAction": true,
        "highlightMissingFields": true,
        "enterToSubmit": true,
        "submitClass": "btn-success btn-lg",
        "cls": "row",
        "requiredText": "{~DxSignUp.Common.requiredMessage~}",
        "fields": [
            {
                "id" : "firstNameField",
                "label" : "{~DxSignUp.AccountInfo.wizard.labels.firstName~}",
                "cls": "padding c3-controlgroup",
                "field" : {
                    "component": "field.Text",
                    "id": "firstName",
                    "name": "firstName",
                    "placeholder": "{~DxSignUp.Common.startTyping~}",
                    "required": true
                }
            },
            {
                "id" : "lastNameField",
                "label" : "{~DxSignUp.AccountInfo.wizard.labels.lastName~}",
                "field" : {
                    "component": "field.Text",
                    "id": "lastName",
                    "name": "lastName",
                    "placeholder": "{~DxSignUp.Common.startTyping~}",
                    "required": true
                }
            }
        ]
    }
],
"behavior": [
    {
        "query": "accountInfoForm.firstNameField",
        "trigger": "change",
        "action": {
            "type": "updateMyField"
        }
    },
    {
        "query": "accountInfoForm",
        "trigger": "submit",
        "action": {
            "type": "DxSignUp.UpdateUserFields",
            "updateValues": [
                {
                    "target": "accountInfoForm.firstNameField.firstName",
                    "fromField": "value",
                    "updateField": "givenName"
                },
                {
                    "target": "accountInfoForm.lastNameField.lastName",
                    "fromField": "value",
                    "updateField": "familyName"
                }
            ],
            "followUpActions": [
                {
                    "action": {
                        "type": "Navigate",
                        "pageIdSource": "pageParams",
                        "baseUrl": "/dxsignup/user-set-password"
                    }
                }
            ]
        }
    }
]

and add behaviors to listen to the change event on those fields that determine the visibilities and dropdown options of another fields


#3

Tony, thanks a lot this really helps. I might come back with follow-up questions if required when we begin implementing this.