Altinn/app-frontend-react

App-Configuration for sub form

HauklandJ opened this issue · 0 comments

For simplicity, we will showcase an App with

  • a single data task
  • using a single data model
  • with a single sub form table

Folder structure:

App
 ├── models
 │   ├── mainFormModel.cs
 │   ├── mainFormModel.schema.json
 │   ├── mainFormModel.xsd
 │
 │   ├── subFormTypeXModel.cs
 │   ├── subFormTypeXModel.schema.json
 │   ├── subFormTypeXModel.xsd
 ├── ui
 │   ├── subformtypex
 │   │    ├── layouts
 │   │    │     ├──subFormTypeXPage1.json
 │   │    ├── RuleHandler.js
 │   │    ├──  Settings.json
 │   ├── mainFormTask1
 │   │    ├── layouts
 │   │    │     ├──mainFormTask1Page1.json
 │   │    ├── RuleHandler.js
 │   │    ├──  Settings.json
 │   ├── footer.json
 │   ├── layout-sets.json

subformtypex having its own layouts-folder and Settings.json allows page layouts to be defined per sub form type and page order within the sub form type to be defined in Settings.json.

subformtypex will not be mentioned/linked in layout-sets.json, but rather in the relevant page layout file for the relevant task on the main form. It is then the sub form table components job to control the layout process for the sub form.

To add a sub form table to mainFromTask1, we edit mainFormTask1Page1.json:

...
    "layout": [
      ...
      {
        "id": "SubFormTable-A1kDF",
        "type": "SubFormTable",
        "dataType":  "subFormTypeXModel",
        "layout": "subformtypex"
      },
      // Button for exiting sub form and returning to main form
      {
        "id": "exitSubFormButton",
        "type": "CustomButton",
        "textResourceBindings": {
          "title": "Tilbake til hovedskjema"
        },
        "actions": [
          {
            "type": "SubFormAction",
            "id": "saveAndClose"
          }
        ],
        "buttonStyle": "secondary"
      }
    ]
...