Customize Fields in Repeat

Engines Form Engine
1

Hey,

we want to customize certain fields in repeats in a form.
As far as I understand we can’t overwrite the textline in the widget map, because that’s doesn’t change anything inside a repeat.
We can get out hands on the entries with overwriting the FieldOverviewColumn in the FormModelMap.
But: we don’t want to change every line in the repeat but only specific ones. How can we figure out in which line of the repeat we are? Or do we need to overwrite something else for this?

Regards
Chrissi

2

Hi @christina-soft-reed,

You are right about changing the FieldOverviewColumn in the FormModelMap will change every line in the repeat, that’s why you need to create a context provider for the FieldOverviewColumn as following:

import * as React from "react";

import {
	DefaultFormModelMap,
	FormModelMap,
	useDocumentPathForInput
} from "@com.mgmtp.a12.formengine/formengine-core/lib/view";
import { FormModel } from "@com.mgmtp.a12.formengine/formengine-core/lib/models";
import { Column } from "@com.mgmtp.a12.widgets/widgets-core/lib/table/new-api";
import { EntityInstancePath } from "@com.mgmtp.a12.kernel/kernel-md-facade";

import Repeat = FormModel.Repeat;
import FieldOverviewColumn = FormModel.FieldOverviewColumn;

type OwnProps = FormModelMap.FormModelComponentProps<FormModel.FieldOverviewColumn> & {
	alignment?: Column.HorizontalAlignment;
	repeat?: Repeat | undefined;
};
export type FieldOverviewColumnContext = {
	documentPath: EntityInstancePath;
	modelElement: FieldOverviewColumn;
};

export const CustomFieldOverviewColumnContext = React.createContext<FieldOverviewColumnContext | undefined>(undefined);
export const CandidateFormFieldOverviewColumn = (props: OwnProps): React.JSX.Element => {
	const documentPath = useDocumentPathForInput(
		props.modelElement.elementPath,
		props.config.renderOptions.state.models.documentModel
	);

	if (props.repeat === undefined) {
		return <></>;
	}

	return (
		<CustomFieldOverviewColumnContext.Provider
			value={{
				documentPath,
				modelElement: props.modelElement
			}}
		>
			<DefaultFormModelMap.FieldOverviewColumn.component {...props} repeat={props.repeat} />
		</CustomFieldOverviewColumnContext.Provider>
	);
};

and then render in the formModelMap:

FieldOverviewColumn: {
			component: (props: FormModelMap.FormModelComponentProps<FormModel.FieldOverviewColumn>) => (
				<CandidateFormFieldOverviewColumn {...props} />
			)
		},

Now you can use the CustomFieldOverviewColumnContext wherever you need to customize specific field.
For example: in case you need to customize a file upload with id=“file-upload”:

import * as React from "react";
import { useContext } from "react";

import { DefaultFileUpload, DefaultFileUploadProps } from "@com.mgmtp.a12.widgets/widgets-core";

interface IProps extends DefaultFileUploadProps {
	activityId: string;
}

export const CustomFormCustomFileUpload = (props: IProps): React.JSX.Element => {
	const fieldOverviewColumnContext = useContext(CustomFieldOverviewColumnContext);
	const { activityId } = props;
   
        //you can find the inline repeat element id in the form model in the repeatOverviewColumn array
	if (fieldOverviewColumnContext?.modelElement.id === "file-upload") {
		return <CustomizedFileUpload {...props} activityId={activityId} />;


	return <DefaultFileUpload {...props} />;
};

Finally you render the CustomFormCustomFileUpload in the widgetMap:

DefaultFileUpload: (fProps: DefaultFileUploadProps) => (
			<CustomFormCustomFileUpload {...fProps} activityId={activityId} />
		),