Creating a subform

A subform is a form within a form.

Subforms are contained in a subform table. Let us go through configuring a subform table and the subform contained within.

1. Create a data model for the subform.
2. You should now see the three files under App/model. The c# class, the json schema and the xsd.
3. Set appLogic.allowInSubform to true in applicationMetadata.json.
4. Create a folder under App/ui with your desired subform name.
5. In the subform folder, add a Settings.json file and a folder called layouts.
6. You can add page layouts to the layouts folder as you would for the main form.
   Subforms do not support attachments, and nesting subforms is not allowed (subform in subform).
7. The button which closes the subform must be a CustomButton with a closeSubform action. Optionally you can also trigger validation before exiting.

   {
     "id": "subform-exitbutton",
     "type": "CustomButton",
     "textResourceBindings": {
       "title": "The button title" // Defaults to `general.done` if omitted
     },
     "actions": [
       {
         "type": "ClientAction",
         "id": "closeSubform",
         // Validation is optional
         "validation": {
           "page": "all",
           "show": ["All"]
         }
       }
     ]
   }
   

8. The Settings.json file for the sub form is configured as normal.
9. Add a layout set to layout-sets.json with the data type of the data model from step 1. The type is subform. Choose your subform folder name as the id.

   {
     "id": "subform-layout-folder-name",
     "dataType": "your-subform-dataType",
     "type": "subform"
   }
   

10. Navigate to the layout for the page in the main form in which you want to add the sub form table.
11. Add Subform with the configuration you want. Example:

    {
      "id": "subform-test",
      "type": "Subform",
      "textResourceBindings": {
        "title": "subform-test.title",
        "addButton": "subform-test.add"
      },
      "layoutSet": "subform-layout-folder-name",
      "showAddButton": true,
      "showDeleteButton": true,
      "tableColumns": [
        {
          "headerContent": "subform-test.name-header",
          "cellContent": {
            "query": "Name"
          }
        },
        {
          "headerContent": "subform-test.age-header",
          "cellContent": {
            "query": "Age"
          }
        },
        {
          "headerContent": "subform-test.extrainfo-header",
          "cellContent": {
            "query": "ExtraInfo",
            "default": "subform-test.extrainfo.default"
          }
        }
      ]
    }