CDD integration and form engine customizations in client

Hi there,

I am trying to create simple custom screen element in the client app.

After changing from not customizable view provider CRUDViews.FormEngineView to <FormEngineViews.FormEngine {...props} attachmentHandler={attachmentHandler} configuration={config} /> I’ve received an error:

I’ve found out that it is something related to CDD - after removing cddDataProvider from dataProviders array in appsetup.ts error disappears (however custom screen element configured for FormEngine still doesn’t appear). Nevertheless removing mentioned dataProvider is not the solution, we need it anyway.

Is there any know issue regarding integrating CDD and FormEngine? Or maybe there is some more configuration that needs to be done (formEngineSagas, formEngineDataReducers and createCdmMiddlewares already added in app setup)? I am running out of ideas.

I encountered the same problem (in a12 version 2023.02) and had to copy completely the RelationshipFormEngineView in relationship-form-engine.tsx from the core. I reported the issue, and the problem AFAIK is fixed within the latest a12 version 2023.06

We are using 2023.06. As it comes to RelationshipFormEngineView - it also won’t fix the problem because formModelMap is not customizable there.

Hi,
is there any chance your appsetup.ts looks like this?

 additionalMiddlewares: [
// ...
            ...createCdmMiddlewares(),
            ...createFormEngineMiddlewares(),
// ...
]

Then you should to remove createFormEngineMiddlewares out of it, to

 additionalMiddlewares: [
// ...
            ...createCdmMiddlewares(),
// ...
]

Nope, I don’t use createFormEngineMiddlewares in app setup

Then could you please follow the client docs GetA12 Login to quickly check if you already fulfilled this list in appsetup to integrate CDM including

  • Middlewares / Sagas
  • Data Provider
  • Reducers

I’ve double checked:

  • formEngineSagas added
  • formEngineDataReducers added
  • dgReducerFactory(cddDataHolderReducerExtension) added
  • cddReducers added
  • cdmSagas added
  • createCdmMiddlewares added. However in documentation it looks like createCdmMiddlewares(createEngineMiddlewares()) - it is not possible to call it this way “Type ‘Middleware<{}, any, Dispatch>’ has no properties in common with type ‘CdmMiddlewareOptions’.” Maybe here is the issue.
  • We also updated application to version 2023.06 ext3.

Still having the same problem.

Hi,
I believe CRUDViews.FormEngineView & FormEngineViews.FormEngine are not interchangeable when you look into the implementation of these two. CRUDViews.FormEngineView has a lot of logic to handle the relationship, which is not included in FormEngineViews.FormEngine

According to GetA12 Login CRUDViews.FormEngineView should be interchangeable with FormEngineViews.FormEngine. At least in my understanding. If I am wrong, how can I use CustomScreenElement in the client?

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: