Contentful logo

Contentful Community

Create multiple field editors under one App, using the App Framework

Hi,
I’m trying to build a contentful app for multiple fields. What is the best approach to creating multiple custom fields without having to create a separate app project for each one? I was thinking of doing something like checking the field id and field type. Based on that I render the custom component. For example in the Field.tsx we might have something like:


if(props.sdk.field.id === “txtEmail”){
return <MyCustomEmailField sdk={props.sdk}/>

}
else if(props.sdk.field.id === “txtPhone”){
return <MyCustomPhoneField sdk={props.sdk}/>
}

Again what I’m trying to achieve is to have one app projects for multiple custom fields. I don’t want to create an app for each custom field. It might be too difficult to manage all those apps. Would the above approach work? If you see any issues with this let me know.

Thanks,
Julian

I have just get into this situation. Thanks for your idea. It works but I think if-else statement is not good if you have to many fields. My idea is creating an object that contains components after that we can render component by field.id as object key.

const fieldComponents: {
‘field_id1’: <MyComponent1 {…props}/>,
‘field_id2’: <MyComponent2 {…props} />
}

return (
<>
{fieldComponents[sdk.field.id]}
</>
)