AttachmentHandler not working when using FormModelMap with Section or InlineRepeat

Engines Form Engine
1

In our Form, I would like to conditionally render or hide a Section. This works fine.
BUT the Section includes - among other things - an Inline Repeat with an Attachment-field.

Now the Attachment upload is not working anymore, even when the Section is rendered.

I tried adding the A12-AttachmentHandler to the Section-props, but it did not make any difference.

I also tried customizing only the InlineRepeat, but the behavior is the same. An upload of a file is not possible anymore.

Does anyone know a solution?

type OwnProps = FormModelMap.FormModelComponentProps<FormModel.Section> & {
	attachmentHandler?: AttachmentHandler;
};

const CustomFormModelMap: FormModelMap = {
		...DefaultFormModelMap,
		Section: {
			component: (props: OwnProps) => {
				if (
					isSomeCustomConditionTrue &&
					(props.modelElement.name === FormSectionName.NAME1 ||
						props.modelElement.name === FormSectionName.NAME2)
				) {
					return <></>;
				}
				return <DefaultFormModelMap.Section.component {...props} />;
			}
		}
	};
2

Hi there,
I have tried to reproduce your issue and i got the same behavior, the Attachment upload does not work anymore. I don’t know why but i has the workaround for this:

const CustomFormModelMap: FormModelMap = {
		...DefaultFormModelMap,
		Section: {
			component: CustomSection
			}
		}
	};

function CustomSection(props: FormModelMap.FormModelComponentProps<FormModel.Section>): JSX.Element {
	// fallback to the Screen from the DefaultFormModelMap
	if (
		isSomeCustomConditionTrue &&
		(props.modelElement.name === FormSectionName.NAME1 ||
			props.modelElement.name === FormSectionName.NAME2)
	) {
		return <></>;
	}
	return <DefaultFormModelMap.Section.component {...props} />;
}

Please try this and see the results, if this workaround does not work, please let me know. Thanks!

3

Dear Ihpham,

thank you very much for your help! Unfortunately the attachment upload is still not working for us. Did it work for you?

4 
export default function CustomFormForm(props: View): ReactElement {
	return (
		<FormEngineViews.FormEngine
			{...props}
			formModelMap={{
				...DefaultFormModelMap,
				...RelationshipFormModelMap,
				Section: {
					component: CustomScreen
				}
			}}
			attachmentHandler={platformServerConnectors.attachmentHandler}
		/>
	);
}
function CustomScreen(props: FormModelMap.FormModelComponentProps<FormModel.Section>): JSX.Element {
	const condition = props.modelElement.id === "customScreen";
	if (condition) {
		return <div>Custom screen</div>;
	}
	return <DefaultFormModelMap.Section.component {...props} />;
}

This code work for me!
I think the issue here that how your form component render the Section component, it use referenced or directly call function for rendering the component.
In your code example:

  • The component directly call the function return the Section component, and the problem occurs from here ( maybe relative to mount and unmount process so attachment-upload does not work).
5

Thank you so so much!! This fixed the problem! :heart_eyes: