How to custom row styling of Inline repeat in Form model?

[quyen-smooth-valley]

Hi,
I have an inline repeat for attachment in a form like this:

I would like to have some different row styles according to file type of attachment (such as hover/focus effects…).
Is there any way that I deal with it?

[ahmad-warm-vale]

Hi @quyen-smooth-valley ,
In order to do that you need to customize the Inline Repeat and the Attachment.
Fist of all you need to create a customized Inline Repeat component by customizing the Form Model Map using the Default Form Model Map and pass this: FormModelMap.FormModelComponentProps<FormModel.InlineRepeat> as a prop.

const ReceiptsInlineRepeat= (props: FormModelMap.FormModelComponentProps<FormModel.InlineRepeat>): JSX.Element => {
  return (
<StyledInlineRepeat>
   <DefaultFormModelMap.InlineRepeat.component {...props} />
<StyledInlineRepeat/>
  )
};

export default ReceiptsInlineRepeat;

Then you need to create a customized From Model Map with an entry for the customized Inline Repeat and return there your customized Inline Repeat component:

const customizedFormModelMap = (): FormModelMap => {
	return {
		...DefaultFormModelMap,
		InlineRepeat: {
			component: (props: FormModelMap.FormModelComponentProps<FormModel.InlineRepeat>) => (
				<ReceiptsInlineRepeat {...props} />
			)
		},
		
	};
}

Finally, pass the customizedFormModelMap to the formModelMap prop in the Form Engine.