Support full configuration of SubForm component

[framitdavid]

Background
The SubForm component implemented in the following issue includes more configuration options than are currently supported in Studio. To fully utilize the SubForm component, we need to extend Studio to support all necessary configurations. That is what this issue is all about.

Requirements:

• Restrict LayoutSet Configuration: Service developers should only be able to configure the layoutSet property with layout sets that are specifically designed to function as sub-forms. To identify supported layoutSet we need to determine which layout sets can be used as sub-forms, we need to read a property in layout-sets.json. The name of this property is "type": "subform"

SubForm Component configuration looks like the following:

  "id": "subform-mopeder",
  "type": "SubForm",
  "textResourceBindings": {
    "title": "subform-moped.title",
    "addButton": "subform-moped.add"
  },
  "layoutSet": "moped-subform",
  "showAddButton": true,
  "showDeleteButton": true,
  "tableColumns" : [
    {
      "headerContent": "subform-moped.regno",
      "cellContent": {
        "query": "RegNo"
      }
    },
    {
      "headerContent": "subform-moped.merke",
      "cellContent": {
        "query": "Merke"
      }
    }
  ]
},

In this example, the component points to the moped-subform layoutset.
In addition, it points to a dataType - that is the default data type for the layoutset?

Details on tableColumns Configuration

• headerContent: This defines a static title for the entire sub-form. The value should reference a text resource, serving as a label for the section.

• cellContent: This specifies the content displayed for each row in the table. The value is a reference to a field in the data model. For instance, in the example provided, it points to "RegNo" and "Merke." The syntax follows dot notation, meaning the fields mentioned in the example are located at the root level of the data model. If the field is nested within an object, the configuration could look like query: Person.firstName, where firstName is a field within the Person object.

Based on the information above, we need a UI that allows users to select fields from the data model to use as query in cellContent. Content design is necessary to clearly communicate the purpose and of these configurations to ensure a great user experience.

Tasks

Beta Give feedback

1. Add layout set config #13654
   team/studio-domain2 +1
   
2. Add tableColumns config #13655
   frontend team/studio-domain2 +2
   

Note
In general, we should figure out a pattern to easily adopt new configurations as Team Apps come with new features that require new configurations.

Acceptance criteria

• It should be possible to point the SubForm component at a relevant sub-form layoutset.
• It should be possible to point the SubForm component to a sub-form layoutset that is already used elsewhere.
• It should be possible to configure the tableColumns property
• "standard" properties like boolean and textResource bindings should be available directly from the jsonschema.

[framitdavid]

I have confirmed with team apps that we should allow the same layout set to be reused in multiple sub-form components. So no restrictions on that.

[framitdavid]

This issue is blocked until #13477 is merged.

[standeren]

I have two questions:

• How should we handle validation when a layoutset used as a subform is deleted? Not sure if this is something we have a task for in the later iterations..
• I just want to verify that the field in the layout-sets.json file is subform with lowercase f and not uppercase F as in the componentType object 🙈

[standeren]

Here is the Figma sketches: https://www.figma.com/design/VAvGOqkMhKM8HL8h4xBeDH7b/Re-design-Altinn-Studio?node-id=13174-38395&node-type=canvas&m=dev

[wrt95]

Here is the Figma sketches: https://www.figma.com/design/VAvGOqkMhKM8HL8h4xBeDH7b/Re-design-Altinn-Studio?node-id=13174-38395&node-type=canvas&m=dev

Could we maybe add the sketches as a screenshot? When I click the link it takes me to Figma, but there is a lot of sketches on the page 😅 @Annikenkbrathen

[Annikenkbrathen]

Here is the Figma sketches: https://www.figma.com/design/VAvGOqkMhKM8HL8h4xBeDH7b/Re-design-Altinn-Studio?node-id=13174-38395&node-type=canvas&m=dev

Could we maybe add the sketches as a screenshot? When I click the link it takes me to Figma, but there is a lot of sketches on the page 😅 @Annikenkbrathen

Yes, I agree that my files might be a bit disorganized in Figma, so I understand that screenshots are easier. These sketches are still a work in progress, so perhaps it's better to just ask me when a developer starts working on this?

[wrt95]

Thank you, sounds good! 😄

[lassopicasso]

Tested in dev - works as expected :)