CDD integration and form engine customizations in client

Client
, ,
10

Hi,

Regarding customization of forms with CDM

The current implementation of CDM does not intend to provide customizing abilities for the form engine elements (If you need this, please create a feature requirement).
Since this is not clear from the client documentation, I create a bugticket for this A12C-2968. There, we will also fix the wrong middleware setup for CDM (thanks for reporting this :+1: )

Regarding the difference of CRUD/FE views

As described here GetA12 Login and here GetA12 Login, the CRUDViews.FormEngineView component does not allow any customization and also includes the RelationshipEngine by default.
The FormEngineViews.FormEngine component from the form engine extension does not include the RelationshipEngine, but is customizable.

Regarding customization of the CustomScreenElement in general (no cdm)

To customize a FormEngine element like the CustomScreenElement you need to integrate the relationship engine yourself by passing the RelationshipFormModelMap (see docu for this here: GetA12 Login). This is because relationships also use these elements for rendering.

Note however that the default fallback components must be in the correct order (the documentation provides an example for it)!
For example, because the RelationshipFormModelMap alread customizes the CustomScreenElement, any new customizing needs to fallback to it (and not to the one from the normal FormModelMap).

Workaround :eyes:

If you urgently need this now, you might be able to make it work by copying internal code. Please take a look at the following example:

function MyCustomFormEngineView(props: FormEngineViews.FormEngineProps): JSX.Element {
	const stateProps = useSelector(engineStateSelector);

	const dispatch = useDispatch();
	const dispatchProps = FormEngineActions.mapDispatchToProps(dispatch, props);

    // using the unconnected variant, so you need to provide all props yourself
	return <FormEngineViews.FormEngineTpl {...props} {...stateProps} {...dispatchProps} />;

	function engineStateSelector(state: object) {
        // this is the necessary adaption for cdd
		const adaptedState = cddActivityStateAdapter(props.activity)(state);
		return FormEngineStateAdapter.mapStateToProps(adaptedState, {
			...props,
			formModelMap: CustomFormModelMap
		});
	}
}

// add your custom components here
const CustomFormModelMap: FormModelMap = {
	...DefaultFormModelMap,
	...RelationshipFormModelMap,
	CustomScreenElement: { component: MyCustomElement }
};

When using the unconnected variant, you need to adapt the state to make it aware of CDDs by calling cddActivityStateAdapter. However, this adapter function is not public!

But since this function itself only uses public API, you could copy it from the extensions/cdm directory of the client repo to make the code snippet from above work.
Please note that there are no guarantees (the code is not only internal, but also still marked as experimental and therefore subject to changes) :warning: