UX Design: for component overrides configuration

framitdavid commented 1 month ago

User Story

As a user, I need a clear and intuitive interface for configuring component overrides, so that I can easily add, edit, and manage overrides for my components without confusion.

Specifications

The UI should allow users to configure overrides for multiple components within a page or group component. It should support adding and removing overrides.

UI Requirements

A dedicated section for configuring component overrides within the component settings.
Ability to add new overrides with the required componentId field.
Input fields for optional parameters such as hidden, forceShow, emptyFieldText, and hideEmptyFields.
We should ensure that hidden cannot be combined with forceShow. We should make it easy to do right.

Text Content

Should we somehow in the studio explain what this property does or link to a how-to-guide? 🤔

Components Overrides

Here are the common parameters that should be included in the UI:

Parameter	Type	Required	Description
`componentId`	string	yes	ID of the component you are overriding
`hidden`	boolean	no	Exclude the component from summary
`forceShow`	boolean	no	Will force show the component in a summary even if `hideEmptyFields` is set to true in the summary component
`emptyFieldText`	string	no	Custom text to show for empty fields
`hideEmptyFields`	boolean	no	Exclude empty fields for summary. Only works if the field is not required.

Link to docs for more information:
https://docs.altinn.studio/app/development/ux/components/summary2/#overrides

Acceptance criteria

[x] The UI for configuring component overrides is clear and user-friendly.
[x] Users can add, edit, and remove overrides dynamically.
[ ] Tooltips and labels provide adequate guidance for each parameter.
[ ] A preview area displays how overrides affect component displays.

Ildest commented 1 month ago

We could think of something like "Tilpass komponenten" and revise any texts/tooltips that are included?

Annikenkbrathen commented 3 weeks ago

I'm putting this in blocked as Domain 2 isn't working on Summary 2 yet this sprint, and I have other tasks to do first. I will pick this up when I get the chance.

Annikenkbrathen commented 2 weeks ago

I've tried my hand at a design here. I believe I've covered all the true/false scenarios, but I may have missed something. I've tried to simplify it as much as possible, so I've set some options to false when another switch is turned on to reduce the number of choices for the user. However, this is a bit risky, so I may have overlooked something. I'm not very familiar with the code terms behind this, so there was some guessing involved when I rewrote it.

I'm sharing a video so you can see the interaction, along with an image showing how I think it connects with the overrides in the code. FYI @framitdavid

Click on link to see video 🎥 https://github.com/user-attachments/assets/4bd72992-43f5-4075-af60-066fa0771854

Annikenkbrathen commented 1 week ago

@framitdavid do you have time to check if this design covers all overrides?

Altinn / altinn-studio