Altinn / Altinn/app-frontend-react
Add the possibility to hide a dropdown/radiobutton/checkbox/etc. if it is empty.
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 33
- Avg merge
- 6d 23h
- Merged PRs (30d)
- 3
Description
### Description
In the App I am developing I have 3 dropdowns. They are answered in sequencial order, and the options available are dependent on the answer from the previous ones.
I'll give a specific example to give some context to the issue.
1. Choose concession with the options Bank or Betalingsforetak. This is required to answer _always_
2. Choose role with the options Daglig Leder or Styreleder. This is required to answer _always_
4. Choose specification with the options Ekstern or Ikke-ekstern. This is required _if_ Styreleder was chosen as role **and** Betalingsforetak was chosen as concession. Otherwise hidden.
```Json
{
"Bank": {
"Daglig_leder": [],
"Styreleder": []
},
"Betalingsforetak": {
"Daglig_leder": [],
"Styreleder": [
"Eksternt",
"Ikke_eksternt"
]
},
}
```
My App follows the structure as the simplified example above. Furthermore, the options available to the user are generated using `IAppOptionsProvider `and reading the structure from the Json-file.
As such, when generating the AppOptions for `Specification` it might return an empty list if the role chosen was not meant to be specified further.
To write `if-else` for each of these combination is too extensive. AFAIK, I cannot access and change fields in the datamodel from the AppOptionsProvider either. My only options that I am considering is either to map all of these options _manually_ and set these as flags in a ShadowField in the datamodel during instantiation, or set up a `RuleHandler`, again _manually_, for each of the combinations.
I consider it much easier to just have a `"hideIfEmpty"` field, `"hidden": ["equals",["length",["option","optionId"]], 0]` or similar for the components.
### Additional Information
_No response_
Contributor guide
Research direction
Start by tracing how dropdown, radiobutton, and checkbox components consume AppOptions from IAppOptionsProvider, and review the existing RuleHandler and hidden-field behavior. Determine how an empty options list should affect each component and verify that the requested controls are hidden without disrupting required fields or dependent answers.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100