Open Pioneer Trails Packages
    Preparing search index...

    Interface CustomFieldConfig

    Configuration for a custom field with user-provided rendering.

    Allows complete control over the field's UI by providing a custom render function. Use this when none of the built-in field types meet your requirements and you need full control over the field's appearance and behavior.

    The render function receives the current field value and a callback to update it, and must return a React node to display in the form. The React node will be rendered as a child of a Chakra Field.Root.

    interface CustomFieldConfig {
        errorText?: PropertyFunctionOr<string | undefined>;
        helperText?: PropertyFunctionOr<string | undefined>;
        isEnabled?: PropertyFunctionOr<boolean>;
        isRequired?: PropertyFunctionOr<boolean>;
        isValid?: PropertyFunctionOr<boolean>;
        isVisible?: PropertyFunctionOr<boolean>;
        label: string;
        propertyName: string;
        render: (value: unknown, onChange: OnCustomFieldChange) => ReactNode;
        type: "custom";
    }

    Hierarchy

    • BaseFieldConfig
      • CustomFieldConfig
    Index

    Properties

    errorText? helperText? isEnabled? isRequired? isValid? isVisible? label propertyName render type

    Properties

    errorText?: PropertyFunctionOr<string | undefined>

    Error message to display when the field is invalid.

    Shown below the field when isValid is false. Can be a function to provide dynamic error messages based on the validation context.

    helperText?: PropertyFunctionOr<string | undefined>

    Helper text to guide the user.

    Shown below the field to provide additional context or instructions. Can be a function to provide dynamic help text based on the field's state.

    isEnabled?: PropertyFunctionOr<boolean>

    Whether the field is enabled for user input.

    When false, the field is disabled and the user cannot modify its value. Can be a function to enable/disable the field dynamically based on other properties.

    true
    isRequired?: PropertyFunctionOr<boolean>

    Whether the field is required.

    When true, displays a required indicator and validates that the field has a value. Can be a function to determine required status dynamically based on other properties.

    false
    isValid?: PropertyFunctionOr<boolean>

    Whether the field's current value is valid.

    When false, displays the field in an error state and shows the error text if provided. Can be a function to validate the field dynamically based on its value and other properties.

    true
    isVisible?: PropertyFunctionOr<boolean>

    Whether the field is visible in the form.

    When false, the field is completely hidden. Can be a function to show/hide the field dynamically based on other properties.

    true
    label: string

    The display label shown for the field.

    Displayed above the input control to indicate what the field represents.

    propertyName: string

    The name of the feature property this field edits.

    Used to read and write the field's value from the feature's properties. Must match the property name on the feature being edited.

    render: (value: unknown, onChange: OnCustomFieldChange) => ReactNode

    Function that renders the custom field control.

    Type Declaration

      • (value: unknown, onChange: OnCustomFieldChange): ReactNode

      • Parameters

        • value: unknown

          The current value of the field from the feature properties

        • onChange: OnCustomFieldChange

          Callback to update the field value

        Returns ReactNode

        React element(s) to render for this field

    render: (value, onChange) => (
        <input
            type="range"
            value={value as number}
            onChange={(e) => onChange(Number(e.target.value))}
        />
    )
    type: "custom"

    Identifies this as a custom field.

    Settings

    Member Visibility

    On This Page

    Properties