Altinn / Altinn/app-frontend-react
Support placing the required field indicator inside text resources
- Dominant language
- TypeScript
- Stars
- 21
- Forks
- 33
- Avg merge
- 6d 23h
- Merged PRs (30d)
- 3
Description
### Description
The specific use case [described in this issue](/Altinn/altinn-studio/issues/8369) is that markup inside the text resource for an input `title` is defined as follows:
```html
Hvor mange ledige stillinger hadde virksomheten {0}?
```
When we simply append `*` for required input fields, this produces:
```html
Hvor mange ledige stillinger hadde virksomheten {0}?
*
```
And since an `h3` is a block object, the asterisk appears visually on the next line - instead of the same line, where the actual title is.
### Proposed solution
A simple solution would be to add an option on all form fields allowing you to hide the required field indicator (and add the asterisk manually to your text resources). However, we could/should expect the required indicator to change in the future (maybe we'll turn it red some day, maybe we'll use an icon), so a better solution would be to use a variable (maybe `{requiredIndicator}` or just `{required}`) we'll replace with the actual indicator (and replace it with nothing if the field is not required). As the required property on a field will be possible to control using [layout expressions](https://github.com/orgs/Altinn/projects/22), this solution is preferable.
For the above example, this could be illustrated as:
```html
Hvor mange ledige stillinger hadde virksomheten {0}? {requiredIndicator}
```
### Additional Information
- /Altinn/altinn-studio/issues/8369
Contributor guide
Research direction
Start by tracing how form fields render required indicators and how markup in text resources is processed. Review the layout expressions that control the required property and determine where a required-indicator variable could be resolved. Done means the indicator appears inside the text-resource markup when required and is absent when the field is not required.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100