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

✅UX Design : for component overrides configuration #13622

Closed
2 of 4 tasks
framitdavid opened this issue Sep 24, 2024 · 11 comments · Fixed by #14379
Closed
2 of 4 tasks

✅UX Design : for component overrides configuration #13622

framitdavid opened this issue Sep 24, 2024 · 11 comments · Fixed by #14379

Comments

@framitdavid
Copy link
Collaborator

framitdavid commented Sep 24, 2024

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

  • The UI for configuring component overrides is clear and user-friendly.
  • 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.
@framitdavid framitdavid added status/ready-for-specification Status: Used for issues that are ready for functional decription og detailed design. ux UX help needed text/content used for issues that need som text improvements, often by ux UX research labels Sep 24, 2024
@Ildest
Copy link
Contributor

Ildest commented Sep 24, 2024

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

@Annikenkbrathen Annikenkbrathen self-assigned this Sep 27, 2024
@Annikenkbrathen Annikenkbrathen moved this to 👷 In Progress in Team Studio Sep 27, 2024
@Annikenkbrathen Annikenkbrathen moved this from 👷 In Progress to ⚠️ Blocked in Team Studio Oct 24, 2024
@Annikenkbrathen
Copy link

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 Annikenkbrathen moved this from ⚠️ Blocked to 👷 In Progress in Team Studio Oct 29, 2024
@Annikenkbrathen
Copy link

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

Image

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

@Annikenkbrathen
Copy link

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

@Annikenkbrathen Annikenkbrathen removed the status/ready-for-specification Status: Used for issues that are ready for functional decription og detailed design. label Nov 7, 2024
@framitdavid
Copy link
Collaborator Author

framitdavid commented Nov 20, 2024

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

Great, this looks good. I see that isCompact has also been included under the "standard" overrides for all components, so that needs to be added as well.

Regarding "Vis tomme felter," I believe it is "on" when it is not set. The property in the configuration is called hideEmptyFields, and it only works if the field is not required. Additionally, there is a property called forceShow, which allows us to display the field even if hideEmptyFields is set. @Ildest should we look into help-text to explain this scenario?

Ref. docs: https://docs.altinn.studio/nb/altinn-studio/reference/ux/components/summary2/#overstyringer

@Ildest
Copy link
Contributor

Ildest commented Nov 20, 2024

I don´t have enough background/context to understand this properly from this issue alone, but I can look at it with you @Annikenkbrathen if there is still time. My initial input is that I would try to use either only "oppsummering" OR "sammendrag" in the texts, not both (unless these are two different things), and I would probably find some other way to phrase "overstyr", as it is sort of technical, and I think we may be able to tell the user what to do without using that term.

@Ildest
Copy link
Contributor

Ildest commented Nov 20, 2024

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

Great, this looks good. I see that isCompact has also been included under the "standard" overrides for all components, so that needs to be added as well.

Regarding "Vis tomme felter," I believe it is "on" when it is not set. The property in the configuration is called hideEmptyFields, and it only works if the field is not required. Additionally, there is a property called forceShow, which allows us to display the field even if hideEmptyFields is set. @Ildest should we look into help-text to explain this scenario?

Ref. docs: https://docs.altinn.studio/nb/altinn-studio/reference/ux/components/summary2/#overstyringer

Yes @framitdavid we can look at a help text here. I need a briefing on the scenario, as this whole issue is new to me.

@Annikenkbrathen Annikenkbrathen moved this from 🔎 Review to 👷 In Progress in Team Studio Nov 21, 2024
@Annikenkbrathen
Copy link

Annikenkbrathen commented Nov 28, 2024

@framitdavid
We’ve added isCompact in the sketches now, thanks!

Gørild and I discussed this again today, and we were a bit unsure if we misunderstood your comment regarding ForceShow and hideEmptyfields here. I’ve tried to think through which cases you would want one to override the other. I couldn’t find any good reasons to set forceShow to true while wanting to hide empty fields as false at the same time. So the thought was that they would be controlled by the same switch.

When would forceShow be used independently? Can’t we just show and hide empty fields? Its hard to come up with an example of that usecase.

  • And the GUI asked for you to showEmptyfields in the text, so it's the opposite of the parameter to give more context for the user. Is it okay that we present the switch that way? We want to HideEmptyField to be set at false as default here.

  • And do you have suggestions for what you think we need to communicate in a help text or alert? It wasn’t easy to visualize how this should be solved/shown/presented.

Image

@Ildest
Copy link
Contributor

Ildest commented Dec 10, 2024

Forslag: "Du kan bare skjule tomme felter i oppsummeringen hvis de er valgfrie".

"Du kan bare skjule komponenter fra oppsummeringen hvis alle feltene er valgfrie".

@Annikenkbrathen
Copy link

Annikenkbrathen commented Dec 10, 2024

READY TO DEVELOPE!
I’ve updated the sketches. Go to FIGMA to see the sketches

The new addition to the design is an info message explaining that required fields will not be overridden. The message only appears when relevant, such as when the user enables "hide component" or "hide empty fields.

Image

@Annikenkbrathen Annikenkbrathen moved this from 👷 In Progress to 📈 Todo in Team Studio Dec 10, 2024
@Annikenkbrathen Annikenkbrathen removed their assignment Dec 10, 2024
@Annikenkbrathen Annikenkbrathen changed the title UX Design: for component overrides configuration ✅UX Design : for component overrides configuration Dec 10, 2024
@Annikenkbrathen Annikenkbrathen removed ux UX help needed UX research text/content used for issues that need som text improvements, often by ux labels Jan 6, 2025
@Jondyr Jondyr self-assigned this Jan 8, 2025
@Jondyr Jondyr moved this from 📈 Todo to 👷 In Progress in Team Studio Jan 8, 2025
@Jondyr Jondyr linked a pull request Jan 8, 2025 that will close this issue
4 tasks
@Jondyr Jondyr moved this from 👷 In Progress to 🔎 Review in Team Studio Jan 14, 2025
@Jondyr Jondyr removed their assignment Jan 14, 2025
@mlqn mlqn assigned mlqn and unassigned mlqn Jan 16, 2025
@mlqn mlqn moved this from 🔎 Review to 🧪 Test in Team Studio Jan 21, 2025
@Jondyr Jondyr assigned Annikenkbrathen and Jondyr and unassigned Jondyr Jan 22, 2025
@Annikenkbrathen
Copy link

Tested ok✅

@Annikenkbrathen Annikenkbrathen removed their assignment Jan 22, 2025
@github-project-automation github-project-automation bot moved this from 🧪 Test to Documentation in Team Studio Jan 23, 2025
@Jondyr Jondyr removed the status in Team Studio Jan 23, 2025
@Jondyr Jondyr moved this to Documentation in Team Studio Jan 23, 2025
@Jondyr Jondyr moved this from Documentation to ✅ Done in Team Studio Jan 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: ✅ Done
Development

Successfully merging a pull request may close this issue.

7 participants