0

I am having trouble passing fieldOverrides parameter for DynamicForm. Currently i am trying

      <DynamicForm 
        context={context}
        listId={listId} 
        fieldOverrides = {"sampleColumn" : {(peoplePicker)}}
        onSubmitted={async (listItemData : any) => { console.log(listItemData); }}
        >
      </DynamicForm>

but it shows

(property) fieldOverrides?: {
    [columnInternalName: string]: (fieldProperties: IDynamicFieldProps) => React.ReactElement<IDynamicFieldProps>;
}
Key value pair for fields you want to override. Key is the internal field name, value is the function to be called for the custom element to render

Type 'string' is not assignable to type '{ [columnInternalName: string]: (fieldProperties: IDynamicFieldProps) => React.ReactElement<IDynamicFieldProps>; }'.ts(2322)
IDynamicFormProps.d.ts(46, 5): The expected type comes from property 'fieldOverrides' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<DynamicForm> & Readonly<IDynamicFormProps> & Readonly<...>'

if "sampleColumn" is my internal column name for people type column,what should be the coorect way of passing it.

1 Answer 1

0

Here is a sample that shows how to set the fieldOverrides property.

import * as React from 'react';
import styles from './SpfxDyanmicForm.module.scss';
import { ISpfxDyanmicFormProps } from './ISpfxDyanmicFormProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { DynamicForm } from "@pnp/spfx-controls-react/lib/DynamicForm";
import { IDynamicFieldProps } from '@pnp/spfx-controls-react/lib/controls/dynamicForm/dynamicField';

export default class SpfxDyanmicForm extends React.Component<ISpfxDyanmicFormProps, {}> {

  public render(): React.ReactElement<ISpfxDyanmicFormProps> {
    return <div className={styles.spfxDyanmicForm}>
      <DynamicForm
        context={this.props.context as any}
        listId={"e9c4af4e-5eef-40d0-b586-9cfe630101f8"}
        // fieldOverrides={{"Description": this.renderDescription}} 
        fieldOverrides={{"Title": this.renderTitle, "Description": this.renderDescription}} 
      />
    </div>
  }

  private renderTitle = (fieldProperties: IDynamicFieldProps): React.ReactElement<IDynamicFieldProps> => {
    return <div>Title</div>
  }

  private renderDescription = (fieldProperties: IDynamicFieldProps): React.ReactElement<IDynamicFieldProps> => {
    return <div>Description</div>
  }
}
3
  • can you give an example for field overrides for multiple columns? thanks for your answer, saved my life
    – Amit Kumar
    Commented Nov 15, 2022 at 13:44
  • I updated my answer to show how to override multiple fields. Commented Nov 15, 2022 at 14:12
  • Thanks for your reply, i have marked your answer as correct.
    – Amit Kumar
    Commented Nov 16, 2022 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.