Forum Discussion
SPFx Pnp Dynamic form
1)We trying to override the fields using file override option, but value saving as a two items in the SharePoint list
Below is a code:
import * as React from 'react';
import { FormDisplayMode } from '@microsoft/sp-core-library';
import { FormCustomizerContext } from '@microsoft/sp-listview-extensibility';
import { DynamicForm } from '@pnp/spfx-controls-react/lib/DynamicForm';
import { IDynamicFieldProps } from '@pnp/spfx-controls-react/lib/controls/dynamicForm/dynamicField';
import styles from './CustomForm.module.scss';
import { sp } from '@pnp/sp';
export interface ICustomFormProps {
context: FormCustomizerContext;
displayMode: FormDisplayMode;
emailDomain: string;
managedPath?: string;
onSave: () => void;
onClose: () => void;
}
export default function CustomForm(props: ICustomFormProps): React.ReactElement<ICustomFormProps> {
const [imageUrl, setImageUrl] = React.useState<string>('');
const formRef = React.useRef<any>();
const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files && event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const result = e.target?.result as string;
setImageUrl(result); // Set the imageUrl state
};
reader.readAsDataURL(file);
}
};
const handleSave = async () => {
try {
// Create form data object
const formData: { [key: string]: any } = {};
// Set the ImageUrl property
formData.Imageurl = imageUrl;
// Save the combined form data to SharePoint list
await sp.web.lists.getByTitle("Announcement").items.add(formData);
// Trigger the onSave callback
props.onSave();
} catch (error) {
console.error('Error saving data to SharePoint list:', error);
}
};
return (
<div className={styles.customForm}>
<h1>Announcement 4</h1>
<DynamicForm
ref={formRef}
context={props.context as any}
listId={props.context.list.guid.toString()}
listItemId={props.context.itemId}
onCancelled={props.onClose}
onSubmitted={handleSave}
onSubmitError={(listItemData: unknown, error: Error) => { console.log(error.message); }}
disabled={props.displayMode === FormDisplayMode.Display}
fieldOverrides={{
"Image": (fieldProperties: IDynamicFieldProps) => (
<div>
<input
type="file"
onChange={handleImageChange}
/>
{imageUrl && <img src={imageUrl} alt="Uploaded Image" />}
</div>
),
"Imageurl": (fieldProperties: IDynamicFieldProps) => (
<div>
<input
type="text"
value={imageUrl}
disabled={true} // Ensure the field is disabled to prevent user input
/>
</div>
)
}}
/>
</div>
);
}
No RepliesBe the first to reply
