I have the following requirements:
- when a user enters a specific screen, it should be read-only
- when the user presses a button (“I do want to edit”), the screen becomes writable
- (preferably, the button would then change to “finish editing” and on click set the screen read-only again)
How would I go about implementing this?
I already explored modeling options, such as
- using a second screen or a second control grid for editing > becomes a maintenance mess
- using dependent fields/groups > conflicts with the business rules I already implemented using these mechanisms
As I have not found viable modeling options, I am now looking for coding options to achieve this.
I do know that I can set the whole form engine read-only, but that’s not what I want (I have other screens that should always be writable).
I am grateful for any hints. Thanks.
Hi Alexander,
to make a specific screen read-only I would suggest checking the name of the specific screen that supposes to be a read-only and then customizing the Screen within the Form Model Map by adding new props with a read-only UIState.
const CustomScreenModel = (props:FormModelMap.FormModelComponentProps<FormModel.Screen>): JSX.Element=>{
const newProps: FormModelMap.FormModelComponentProps<FormModel.Screen>= {
...props,
config: {
...props.config,
renderOptions: {
...props.config.renderOptions,
state: {
...props.config.renderOptions.state,
ui: {
...props.config.renderOptions.state.ui,
readonly: true
}
}
}
}
if (props.modelElement.name === "ReadOnlyScreen" ) {
return (
<DefaultFormModelMap.Screen.component {...newProps} />
)
}
return <DefaultFormModelMap.Screen.component {...props} />
}
That will return a read-only screen (for a specific screen name).