AddAnother - smbc-digital/form-builder GitHub Wiki

Use the add another component to let users add multiple items of the same thing. For example adding first name and last name of multiple people. Set SetAutofocus property on the Elements > Properties, so when a new element is added the focus moves to the new element.

DSL properties

Property	Type	Required	Default Value	Description
QuestionId	string	✔️	❌	Unique question id allowed characters are [a-zA-Z] only
Label	string	✔️	❌	Label associated with the elements captured in Add Another
AppendText	string	❌	❌	Text that will be appended to the default button text of 'Add another' eg. value of 'person' would render button text 'Add another person' NOTE: Only applies to the Add another button
MaximumFieldsets	int	❌	10	The maximum number of fieldsets that can be added
TargetMapping	string	❌	❌	Used for custom object mapping when creating submit data (more info about target mapping)
Elements	Array[elements]	✔️	❌	The elements to be used for the Add Another fieldset. NOTE: Not all elements will work with Add Another. The list of compatible elements is below

Compatible elements

• Textbox
• Textarea
• DateInput
• DatePicker
• TimeInput
• Radio
• Checkbox
• Reusable
• Conditional elements

Add Another example

  {
          "Type": "AddAnother",
          "Properties": {
            "Label": "Person",
            "QuestionId": "person",
            "MaximumFieldsets": 3,
            "AppendText": "person",
            "Elements": [
              {
                "ElementRef": "firstname",
                "Type": "Reusable",
                "Properties": {
                  "SetAutofocus": true,
                  "QuestionId": "firstName"
                }
              },
              {
                "ElementRef": "lastname",
                "Type": "Reusable",
                "Properties": {
                  "QuestionId": "lastName"
                }
              },
              {
                "Type": "DateInput",
                "Properties": {
                  "QuestionId": "dateOfBirth",
                  "Label": "Date of birth",
                  "Hint": "For example, 21 07 1998",
                  "Numeric": true
                }
              }
            ]
          }
        }