Altinn / Altinn/app-frontend-react

Add the possibility to hide a dropdown/radiobutton/checkbox/etc. if it is empty.

Open
#1,680 0 comments 0 reactions 0 assignees View on GitHub
kind/feature-request
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.