firecms/website/docs/custom_fields.md

id, title, sidebar_label

id	title	sidebar_label
custom_fields	Custom fields	Custom fields

If you need a custom field for your property you can do it by passing a React component to the field prop of a property config. The React component must accept the props of type CMSFieldProps. The bare minimum you need to implement is a field that displays the received value and uses the setValue callback.

You can also specify your own props that are passed to your component in customProps

Custom field props - CMSFieldProps

• name The name of the property, such as age. You can use nested and array indexed such as address.street or people[3]

• property The CMS property you are binding this field to

• context The context where this field is being rendered. You get a context as a prop when creating a custom field.

• includeDescription Should the description be included in this field

• underlyingValueHasChanged Has the value of this property been updated in the database while this field is being edited

• tableMode Is this field being rendered in a table

• partOfArray Is this field part of an array

• autoFocus Should the field take focus when rendered. When opening the popup view in table mode, it makes sense to put the focus on the only field rendered.

• disabled Should this field be disabled

• dependsOnOtherProperties This flag is used to avoid using Formik FastField internally, which prevents being updated from the values

You can also pass custom props to your custom field, which you then receive in the customProps.

If you are developing a custom field and need to access the values of the entity, you can use the context field in CMSFieldProps.

Example

This is an example of a custom TextField that takes the background color as a prop

import { TextField, Theme, withStyles } from "@material-ui/core";
import React, { ReactElement } from "react";
import { FieldDescription, FieldProps } from "@camberi/firecms";

interface CustomColorTextFieldProps {
    color: string
}

export const TextFieldWithStyles = withStyles((theme: Theme) => ({
    root: (props: any) => ({
        "& .MuiFilledInput-root": {
            backgroundColor: props.customcolor
        }
    })
}))(TextField);

export default function CustomColorTextField({
                                                 property,
                                                 value,
                                                 setValue,
                                                 customProps,
                                                 touched,
                                                 error,
                                                 isSubmitting,
                                                 context, // the rest of the entity values here
                                                 ...props
                                             }: FieldProps<string, CustomColorTextFieldProps>)
    : ReactElement {

    return (
        <>
            <TextFieldWithStyles required={property.validation?.required}
                                 error={!!error}
                                 disabled={isSubmitting}
                                 label={property.title}
                                 value={value ?? ""}
                                 onChange={(evt: any) => {
                                     setValue(
                                         evt.target.value
                                     );
                                 }}
                                 helperText={error}
                                 fullWidth
                                 variant={"filled"}
                                 customcolor={customProps.color}/>

            <FieldDescription property={property}/>
        </>

    );

}

...and how it is used:

export const blogSchema = buildSchema({
    name: "Blog entry",
    properties: {
        // ...
        gold_text: {
            title: "Gold text",
            description: "This field is using a custom component defined by the developer",
            dataType: "string",
            config: {
                field: CustomColorTextField,
                customProps: {
                    color: "gold"
                }
            }
        }
    }
});