(de-)activate buttons in FORM and in OVERVIEW depending on a value in document

Client
,
1

I need to deactivate buttons (row actions) depending on a value in document. It would be possible to listen on the button events in saga and then check the document, but it’s not really userfriendly, so I need to deactivate the buttons until the document contains the needed data and only then the buttons are usable (activated). The document also get asynchronously updated with needed data through workflows. I mean the same button starts different internal processess in workflows:

→ first button press starts 1. workflows process
→ button need to be deaktivated until document get updated by workflows
→ then button activates and can start the following process

Is there any possibilities to do so?

2

Maybe we focus on the first question:

I need to deactivate buttons (row actions) depending on a value in document.

For example: assuming we have a document with a boolean field ActionAllowed, the button Action should only be activated if ActionAllowed is true.

How can we achieve that?

  • a) in a form
  • b) in an overview

I assume this would be a fairly common requirement, but we could not really find a tutorial or walkthrough for this scenario.

We would be grateful if someone could point us to the relevant documentation.

3

I think the proper way to make this done is by creating a saga listen to the button event (as you mentioned), but I think there is also one way to make that happen on the Form Engine by customizing the Event Button component in the Form Model Map.
Here are the steps to do that:

  1. Create a component that renders the Event Button:
type OwnProps = FormModelMap.FormModelComponentProps<FormModel.EventButton> & {
	activityId: string;
};

export const EventButtonFormModel = (props: OwnProps): JSX.Element => {

	const buttonId= "save-1233"; //example
	const booleanValue: document.field.value //example


	return <DefaultFormModelMap.EventButton.component {...props} />;
}
  1. Customize the props for this button by setting the readonly prop to true
	const newProps = {
		...props,
		config: {
			...props.config,
			renderOptions: {
				...props.config.renderOptions,
				state: {
					...props.config.renderOptions.state,
					ui: {
						...props.config.renderOptions.state.ui,
						readonly: true
					}
				}
			}
		}
	};
  1. Check the row action button you want to disable (by checking the id or the name of the button) and the boolean value in the document and return the EventButton component with the new props:
	if (props.modelElement.name===buttonId && document.field.value===booleanValue)) {
		return (
				<DefaultFormModelMap.EventButton.component {...newProps} />
		);
	}
4

Hello, thanks for the reply! It’s definitely something that brings me forward. I will leave an update here as soon i have tried the suggestion out.