Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support full configuration of SubForm component #13476

Closed
2 tasks done
framitdavid opened this issue Sep 4, 2024 · 8 comments · Fixed by #13782
Closed
2 tasks done

Support full configuration of SubForm component #13476

framitdavid opened this issue Sep 4, 2024 · 8 comments · Fixed by #13782
Assignees
Labels
area/ui-editor Area: Related to the designer tool for assembling app UI in Altinn Studio. skip-releasenotes Issues that do not make sense to list in our release notes status/ready-for-dev Status: Used for issues that are ready for development. Has been through grooming. team/studio-domain2 text/content used for issues that need som text improvements, often by ux ux UX help needed

Comments

@framitdavid
Copy link
Collaborator

framitdavid commented Sep 4, 2024

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

  1. team/studio-domain2
    standeren
  2. frontend team/studio-domain2
    wrt95

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 framitdavid added ux UX help needed text/content used for issues that need som text improvements, often by ux labels Sep 4, 2024
@framitdavid
Copy link
Collaborator Author

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 framitdavid added area/ui-component status/ready-for-specification Status: Used for issues that are ready for functional decription og detailed design. labels Sep 4, 2024
@framitdavid
Copy link
Collaborator Author

This issue is blocked until #13477 is merged.

@framitdavid framitdavid added status/ready-for-dev Status: Used for issues that are ready for development. Has been through grooming. and removed status/ready-for-specification Status: Used for issues that are ready for functional decription og detailed design. labels Sep 9, 2024
@standeren standeren self-assigned this Sep 20, 2024
@standeren
Copy link
Contributor

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 🙈

@nkylstad nkylstad added area/ui-editor Area: Related to the designer tool for assembling app UI in Altinn Studio. and removed area/ui-component labels Sep 20, 2024
@standeren standeren added the skip-releasenotes Issues that do not make sense to list in our release notes label Sep 30, 2024
@standeren
Copy link
Contributor

@wrt95
Copy link
Contributor

wrt95 commented Oct 10, 2024

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
Copy link

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
Copy link
Contributor

wrt95 commented Oct 10, 2024

Thank you, sounds good! 😄

@wrt95 wrt95 self-assigned this Oct 11, 2024
@wrt95 wrt95 linked a pull request Oct 14, 2024 that will close this issue
4 tasks
@wrt95 wrt95 assigned wrt95 and unassigned wrt95 Oct 14, 2024
@Jondyr Jondyr assigned Jondyr and wrt95 and unassigned Jondyr Oct 16, 2024
@wrt95 wrt95 assigned Jondyr and unassigned wrt95 Oct 16, 2024
@Jondyr Jondyr removed their assignment Oct 16, 2024
@lassopicasso lassopicasso self-assigned this Oct 18, 2024
@lassopicasso
Copy link
Contributor

Tested in dev - works as expected :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/ui-editor Area: Related to the designer tool for assembling app UI in Altinn Studio. skip-releasenotes Issues that do not make sense to list in our release notes status/ready-for-dev Status: Used for issues that are ready for development. Has been through grooming. team/studio-domain2 text/content used for issues that need som text improvements, often by ux ux UX help needed
Projects
Status: ✅ Done
Development

Successfully merging a pull request may close this issue.

8 participants