Adding Nested & conditional fields support

[chaitrali-r]

Our advanced editor does not support Nested Fields

for example :

Textarea should include textfields,checkboxes,selects,radios, other text areas etc

This should also be reflected in the JSON schema as well

[Renuka-S]

https://json-schema.org/understanding-json-schema/reference/conditionals.html

[suvarnakale]

Conditional Fields Support will be added for : -

1. Conditional field creation for text fields
2. Conditional field creation for checkboxes

This is example for understanding how it will work:

[suvarnakale]

Development Approach :-

• For each conditional field, define the triggering condition based on the value of another field.
• Update the Formio object to include the conditional property for each field.
• Sample code for adding conditional fields in the Formio object:

{ type: 'textfield', key: 'firstName', label: 'First Name', conditional: { show: true, // or false to hide the field when: 'age', // the field that triggers the condition eq: '18' // the value that triggers the condition } }

• Once the conditional fields are added to the Formio object, it is needed to convert it into JSON Schema format to handle dependent and nested fields.

• For dependent fields, use the 'anyOf' keyword in JSON Schema to define the condition and required fields.

• Sample code for dependent fields in JSON Schema format: { "type": "object", "properties": { "firstName": { "type": "string", "title": "First Name" }, // Other properties... }, "required": [ // List of required properties... ], "anyOf": [ { "properties": { "age": { "const": "18" } }, "required": [ "firstName" ] }, { "required": [] } ] }

• For nested fields, the JSON Schema format is needed to define the nested structure and include the conditional logic within the nested objects.

• Sample code for nested fields in JSON Schema format: { "type": "object", "properties": { "person": { "type": "object", "properties": { "firstName": { "type": "string", "title": "First Name" }, // Other properties... }, "required": [ // List of required properties... ], "anyOf": [ { "properties": { "age": { "const": "18" } }, "required": [ "firstName" ] }, { "required": [] } ] } } }

• By following these steps and incorporating the provided code samples, we can efficiently add conditional fields to your Formio object and convert it into JSON Schema format to handle dependent and nested fields.

• @Pratikshakhandagale plzz verify the approch and give suggestions.

[suvarnakale]

How User can Implement Conditional and Nested fields :

• Identify the fields in the form that should have conditional behavior based on specific criteria

1. Like the form requirements and determine which fields should be conditionally shown or hidden.
2. Determine the triggering conditions that determine the visibility of the conditional fields.
3. Consider the values of other fields or user input as criteria for showing or hiding specific fields.

• Use the form builder or configuration options to implement the conditional fields.

1. Locate the field that needs conditional behavior in the form builder.
2. Access the field's settings or properties to enable the conditional feature.
3. Define the triggering condition, such as selecting the field that triggers the condition and specifying the required value for the condition to be met.

• In this way, formio buider can be use to create Cnditional and Nested Fields :